| Autor | Zpráva | ||
|---|---|---|---|
| Malirka Profil * |
#1 · Zasláno: 11. 2. 2012, 08:35:54
Ahoj,
potřebovala bych poradit ohldeně odkazů. Mám stránky a např. menu chci aby po najetí myši bylo modré a podtržené. To mám tento interní css styl: <style>
a {text-decoration:none}
a {color:white}
a:hover {color:#1c98df}
</style> ale jak to mám pak udělat, když na té samé stránce chci mít ještě jiné odkazy, který po najetí myši se pouze podtrhnou. Nevím jak zkloubit dva styly do jedné stránky. To asi nepůjde, že. Bude se muset vytvořit a to ještě tolik neovládám normálně dva prvni.css a druhy.css a extreně připojit,co? Poraďte mi prosím jak toto řešit. |
||
| Sir Tom Profil |
#2 · Zasláno: 11. 2. 2012, 08:48:48
Malirka:
Také ahoj, půjde, nicméně doporučuji všechny CSS dávat do 1 externího souboru. Použij třídy. (Laicky řečeno - pomocí třídy pojmenuješ nějaký element a pak vytvoříš styly pro danou třídu (pro dané pojmenování)). |
||
| Malirka Profil * |
#3 · Zasláno: 11. 2. 2012, 08:57:48
Aha. No nějak to zkusím. Ještě jsem externí css nedělala. Vše co jsem dělala, tak na to stačil jeden styl,ale tady bych chtěla změnu. Zkusím to,ale nevím zda se to povede. Takže do toho externího se to píše jako do interního, že, pouze to musím pojmenovat a tak.
|
||
| Sir Tom Profil |
#4 · Zasláno: 11. 2. 2012, 09:39:43
Malirka:
Do externího se to píše úplně stejně jako mezi značky <style> a </style>. |
||
| Malirka Profil * |
#5 · Zasláno: 11. 2. 2012, 10:04:21
OK, takže mám prvni.css a to bude jako když po najetí myši budou odkazy modrý a podrtžený. vím kod,ale jak napíšu kod aby to bylo správně u toho co chci (html) a poté bude ten další kod druhy.css. Nevím jak ten css kod nasměrovat do kodu v html, jako kam a jaký kdo napsat. Vím pouze, že se napíše do html nad titulek:
<link type="text/css" href="styles/prvni.css"/> <link type="text/css" href="styles/druhy.css"/> |
||
| Sir Tom Profil |
Malirka:
Asi lepší bude, když napíšu přímo příklad: Představ si situaci, kdy máš na stránce 2 odkazy - první je modrý a po najetí myši zčerná. Druhý je zelený a po najetí myši zmodrá a změní písmo. Každý z těchto elementů má vlastní třídu: <a href='#' class='prvniOdkaz'>Odkaz I</a> <a href='#' class='druhyOdkaz'>Odkaz II</a> Pak máš jeden (opravdu stačí jenom jeden) externí CSS (s názvem style.css) soubor, který je do tohoto HTML souboru nalinkován: <link type="text/css" href="style.css"/>
A v tomto style souboru jsou názvy tříd a u každé třídy je nějaký stylopis: .prvniOdkaz {color: blue;}
.prvniOdkaz:hover {color: black;} //po najetí myši na el. se třídou 'prvniOdkaz' (v našem případě tag <a>) se barva textu změní na černou
.druhyOdkaz {color: green;}
.druhyOdkaz:hover {color: blue; font-family: monospace;}
// po najetí myši na el. se třídou 'druhyOdkaz' se barva textu změní a ještě se změní i písmoOznačil jsem texty, které k sobě patří... |
||
| Malirka Profil * |
#7 · Zasláno: 11. 2. 2012, 11:29:47 · Upravil/a: Malirka
Moc ti děkuju. Už jsem to pochopila.
Ten kod co zapíšu do html může vypadat i takto, když mám css a v něm místo prvniOdkaz dáno menu? <div class="menu">
<div style= "position: absolute; left:586px; top: 55px;">
<a href="index.html">ÚVOD</a>
</div>
<div style= "position: absolute; left:678px; top: 55px;">
<a href="portfolio.html">PORTFOLIO</a>
</div>
</div> |
||
| ludekbrno Profil * |
#8 · Zasláno: 11. 2. 2012, 13:27:08
Malirka:
Velmi doporučuji nesoustřeďovat se na zapisování stylu přímo do html, ale hned od počátku začít využívat externí css soubor. Ušetříš jízdu po slepé koleji, protože pokud budeš tvořit web častěji, stejně k tomu budeš muset přejít :) Navíc ti to ušetří spoustu práce, protože pokud píšeš web s více stránkami, stačí na všechno jeden externí soubor css a když se rozhodneš nějaký prvek, který se vyskytuje na všech stranách (typicky odkazy, menu, hlavička a patička) během vývoje webu pozměnit (pozici, barvu, chování odkazů, podtrhávání atd.), tak nebudeš muset otrocky přepisovat to ve všech HTML souborech u každého odkazu zvlášť (což je živná půda pro vznik chyb), ale snadno to změníš JEDNOU na jednom místě css souboru a okamžitě se ti budou jinak zobrazovat všechny odkazy ve všech HTML souborech, které budou mít přiřazenou shodnou třídu. Pro příklad: v html souboru bude pouze: <div class="menu"> <a href="index.html">ÚVOD</a> </div> <div class="portfolio"> <a href="portfolio.html">PORTFOLIO</a> </div> A v css souboru: .menu {
position: absolute; left:586px; top:55px;
}
.portfolio {
position: absolute; left:678px; top:55px;
}Potom můžeš ve všech HTML souborech (na všech podstranách webu) zopakovat pouze ty DIVy, přitom jejich styl je nastaven hromadně na jednom místě v jednom css souboru, kde ho můžeš hromadně snadno změnit, aniž bys vůbec zasahovala do HTML souborů. Není to nic složitého, princip je v tom, že u každého prvku, kterému chceš přiřadit určitý zvláštní styl, uvedeš v HTML souboru jen jednoduchý identifikátor (třídu) a jeho parametry zapíšeš v tom HTML souboru. Pro rozsáhlejší weby s více než jednou stranou je to jediná rozumná cesta pro stylování a vývoj, protože nemusíš neustále přepisovat html soubory a každou změnu překopírovat i do všech ostatních html souborů, aby byl zachován jednotný styl všech stránek. Ty identifikátory se dají různě vnořovat do sebe a kombinovat, možností je opravdu spousta, ale to základní použití je opravdu snadné. Jak to jednou zkusíš a pochopíš, nebudeš chtít jinak :) |
||
| juriad Profil |
#9 · Zasláno: 11. 2. 2012, 13:27:16
téměř
jelikož menu bude jen jedno, nikdy více, na stránce, je lepší mu nastavit id než class (id začíná místo tečky mřížkou (#)) #menu a {
// vsechny odkazy v menu
}
#menu a:hover {
// vsechny odkazy v menu po najeti mysi
}když do css napíšeš několik elementů oddělených mezerou ( #menu a), tak se styl aplikuje jen na odkazu (a) uvnitř #menu
ty ten styl chceš aplikovat na odkazy ( a) a tedy každá příslušná klauzuje v css musí končit odkazem (a)
samotné #menu by aplikovalo styl na ten div a ne na odkazy, podobně #menu:hover (samozřejmě by se styl projevil i na prvcích uvnitř #menu, ale nechovalo by se to přesně podle tvých představ)
|
||
| Malirka Profil * |
#10 · Zasláno: 11. 2. 2012, 13:38:49
ludekbrno:
Ok. Já to chápu no. I deisgn stránek dělám ve photoshopu a celý ho programuju v html. Budu muset se naučit v tom css a i tu grafiku dělat v ní, tedy kodem. Jinak jsem se chtěla zeptat ohledně css souboru. Jak máš: .menu {
position: absolute; left:586px; top:55px;
}
.portfolio {
position: absolute; left:678px; top:55px;
} |
||
| ludekbrno Profil * |
#11 · Zasláno: 11. 2. 2012, 13:50:21
Malirka:
nene, takto je to celé. Ta tečka označuje, že za ní následuje označení třídy. Přímo takto by to mělo fungovat. Ještě do těch tříd samozřejmě můžeš přidat chování odkazů takzvanými podtřídami, ty se zapisují např. takto: .menu a {
text-decoration: none;
}potom třeba: .menu a:hover {
text-decoration: underline;
} |
||
| Malirka Profil * |
#12 · Zasláno: 11. 2. 2012, 13:52:44
ludekbrno:
Ok. tohle právě řeším, jak doplunit barvu a tak. Takže moc ti děkuju. |
||
| ludekbrno Profil * |
#13 · Zasláno: 11. 2. 2012, 13:53:33
juriad:
Jelikož s css také víceméně teprve začínám, mám dotaz jaký je vlastně vůbec základní rozdíl mezi ID a třídou? Ve které situaci je lepší použít ID a kdy class? Díky. |
||
| Taurus Profil |
#14 · Zasláno: 11. 2. 2012, 14:09:58
ludekbrno:
rozdil mezi id a class ID je dobré pro kotvy, skrytou navigací mohou nevidomí přeskakovat na části stránky. Jinak je to v podstatě jedno, co použiješ. I to co je jen jednou může být klidně třídou. Může se stát, že v budoucnu bude víckrát... |
||
| juriad Profil |
#15 · Zasláno: 11. 2. 2012, 14:28:39
id má oproti třídě několik pokročilejších možností, žádná se ale netýká css; z hlediska stylů, kamkoli napíšeš identifikátor, tak místo něj můžeš napsat třídu
pokud nepotřebuješ přebít (opravdu přebít) jiný styl; oba styly upravují jeden element, ale jeden z nich musí vyhrát 1/ prohlížeč může kontrolovat, zda není jedno id na stránce použito vícekrát (xhtml, xml) 2/ v javascriptu je jednoduchá funkce getElementById, která funguje vždy a všude, funkce getElementByClass je problematická
3/ můžeš chtít na stránce odkazovat "doprostřed", povídání o tom: Odkazy na záložky v HTML ukázka je vidět i tady na diskusi, díky id funguje Posunutí Menu |
||
| ludekbrno Profil * |
#16 · Zasláno: 11. 2. 2012, 14:37:52 · Upravil/a: ludekbrno
Díky oběma za odpověď. Já totiž v cizích css vidím častěji spíš id, než třídy, sám ale používám v podstatě pouze třídy :) Tak si říkám, jestli jsem něco podstatného nepřehlédl. S třídami mi vše funguje jak potřebuji (zatím), takže mě to nenutilo studovat id. Ale podívám se na to, určitě id neexistují zbytečně :)
Teď si uvědomuju, že kotvy jsem na jednom webu dělal, takže jsem vlastně id jsem už použil. |
||
|
Časová prodleva: 12 let
|
|||
0