Strukturální selektor pseudotříd. a nastavte styl pro zadanou třídu. Styly vytvořené pomocí třídy lze aplikovat na jiné prvky, ne nutně tohoto typu. Pokyny pro používání osobního počítače

CSS (Cascading Style Sheets), neboli kaskádové styly, se používají k popisu vzhledu dokumentu napsaného ve značkovacím jazyce. Styly CSS se obvykle používají k vytváření a stylování prvků webových stránek a uživatelských rozhraní napsaných v HTML a XHTML, ale lze je také použít na jakýkoli druh dokumentu XML, včetně XML, SVG a XUL.

Kaskádové styly popisují pravidla pro formátování prvků pomocí vlastností a povolené hodnoty pro tyto vlastnosti. Pro každý prvek můžete použít omezenou sadu vlastností, ostatní vlastnosti na něj nebudou mít žádný vliv.

Deklarace stylu se skládá ze dvou částí: prvku webové stránky − volič a příkazy pro formátování - reklamní blok. Selektor říká prohlížeči, který prvek má formátovat, a deklarační blok (kód ve složených závorkách) uvádí formátovací příkazy – vlastnosti a jejich hodnoty.

Rýže. 1. Struktura deklarace stylu CSS

Typy kaskádových stylů a jejich specifika

1. Typy stylů

1.1. Externí šablona stylů

Externí šablona stylů je textový soubor s příponou .css, který obsahuje sadu stylů CSS pro prvky. Soubor je vytvořen v editoru kódu, stejně jako stránka HTML. Soubor může obsahovat pouze styly bez značek HTML. Externí šablona stylů je připojena k webové stránce pomocí značky , který se nachází uvnitř sekce . Tyto styly fungují pro všechny stránky webu.

Ke každé webové stránce můžete připojit více šablon stylů přidáním více značek za sebou , označující účel této šablony stylů v atributu media tag. rel="stylesheet" určuje typ odkazu (odkaz na šablonu stylů).

Atribut type="text/css" standard HTML5 nevyžaduje, lze jej tedy vynechat. Pokud atribut chybí, výchozí hodnota je type="text/css" .

1.2. Vnitřní styly

Vnitřní styly vložené do sekce HTML dokumentu a jsou definovány uvnitř značky. Interní styly mají přednost před externími, ale jsou nižší než vložené styly (určené pomocí atributu style).

...

1.3. Vestavěné styly

Když píšeme inline styly, zapíšeme kód CSS do souboru HTML přímo do značky prvku pomocí atributu style:

Věnujte pozornost tomuto textu.

Takové styly ovlivňují pouze prvek, pro který jsou nastaveny.

1.4. @import pravidlo

@import pravidlo Umožňuje načíst externí šablony stylů. Aby direktiva @import fungovala, musí se objevit v šabloně stylů (externí nebo interní) před všemi ostatními pravidly:

Pravidlo @import se také používá k zahrnutí webových písem:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Typy selektorů

Selektory představují strukturu webové stránky. Pomáhají vytvářet pravidla pro formátování prvků webové stránky. Selektory mohou být prvky, jejich třídy a identifikátory, stejně jako pseudotřídy a pseudoprvky.

2.1. Univerzální volič

Odpovídá jakémukoli prvku HTML. Například * (margin: 0;) obnoví okraje pro všechny prvky webu. Selektor lze také použít v kombinaci s pseudotřídou nebo pseudoprvkem: *:after (CSS styly) , *:checked (CSS styly) .

2.2. Selektor prvku

Selektory prvků umožňují formátovat všechny prvky daného typu na všech stránkách webu. Například h1 (rodina písem: Humr, kurzíva;) nastaví celkový styl formátování pro všechny nadpisy h1.

2.3. Výběr třídy

Selektory tříd umožňují nastavit styly pro jeden nebo více prvků se stejným názvem třídy, které jsou umístěny na různých místech na stránce nebo na různých stránkách webu. Chcete-li například vytvořit nadpis s třídou nadpisu, musíte do úvodní značky přidat atribut třídy s nadpisem hodnoty

a nastavte styl pro zadanou třídu. Styly vytvořené pomocí třídy lze aplikovat na jiné prvky, ne nutně tohoto typu.

Pokyny pro používání osobního počítače

.headline ( text-transform: velká písmena; barva: světle modrá; )

2.4. Volič ID

Volič ID umožňuje formátování jeden konkrétní prvek. ID musí být jedinečné a může se objevit pouze jednou na jedné stránce.

#sidebar ( šířka: 300px; plovoucí: vlevo; )

2.5. Selektor potomků

Potomkové selektory aplikují styly na prvky v prvku kontejneru. Například ul li (text-transform: velká písmena;) - vybere všechny prvky li, které jsou potomky všech prvků ul.

Pokud chcete formátovat potomky určitého prvku, musíte tomuto prvku přiřadit třídu stylu:

p.first a (barva: zelená;) - tento styl bude aplikován na všechny odkazy potomky odstavce s první třídou;

p .first a (barva: zelená;) – pokud přidáte mezeru, budou stylizovány odkazy umístěné uvnitř jakékoli značky .first class, která je potomkem prvku

First a (color: green;) - tento styl bude aplikován na jakýkoli odkaz umístěný uvnitř jiného prvku, označeného class.first .

2.6. Dětský volič

Podřízený prvek je přímým potomkem svého obsahujícího prvku. Jeden prvek může mít několik podřízených prvků, ale každý prvek může mít pouze jeden nadřazený prvek. Podřízený selektor umožňuje použít styly pouze v případě, že podřízený prvek následuje bezprostředně za nadřazeným prvkem a mezi nimi nejsou žádné další prvky, to znamená, že podřízený prvek není vnořen do ničeho jiného.
Například p > silný vybere všechny silné prvky, které jsou potomky prvku p.

2.7. Sestra volič

K sesterství dochází mezi prvky, které sdílejí společného rodiče. Sourozenecké selektory umožňují vybrat prvky ze skupiny prvků stejné úrovně.

h1 + p - vybere všechny první odstavce bezprostředně za libovolnou značkou

, aniž by byly dotčeny zbývající odstavce;

h1 ~ p - vybere všechny odstavce, které jsou sesterské k jakémukoli nadpisu h1 a bezprostředně za ním.

2.8. Volič atributů

Selektory atributů vybírají prvky na základě názvu atributu nebo hodnoty atributu:

[attribute] - všechny prvky obsahující zadaný atribut - všechny prvky, pro které je zadán atribut alt;

selector[attribute] - prvky tohoto typu obsahující zadaný atribut, img - pouze obrázky, pro které je zadán atribut alt;

selector[attribute="value"] - prvky tohoto typu obsahující zadaný atribut s konkrétní hodnotou, img - všechny obrázky, jejichž název obsahuje slovo květina;

selector[attribute~="value"] - prvky částečně obsahující danou hodnotu, například pokud je pro prvek specifikováno několik tříd oddělených mezerou, p - odstavce, jejichž název třídy obsahuje feature ;

selector[attribute|="value"] - prvky, jejichž seznam hodnot atributů začíná zadaným slovem, p - odstavce, jejichž název třídy je feature nebo začíná feature ;

selector[attribute^="value"] - prvky, jejichž hodnota atributu začíná zadanou hodnotou, a - všechny odkazy začínající http:// ;

selector[attribute$="value"] - prvky, jejichž hodnota atributu končí zadanou hodnotou, img - všechny obrázky ve formátu png;

selector[attribute*="value"] - prvky, jejichž hodnota atributu obsahuje zadané slovo kdekoli, a - všechny odkazy, jejichž název obsahuje knihu .

2.9. Selektor pseudotřídy

Pseudotřídy jsou třídy, které ve skutečnosti nejsou připojeny ke značkám HTML. Umožňují vám aplikovat pravidla CSS na prvky, když dojde k události nebo se podřídí konkrétnímu pravidlu. Pseudotřídy charakterizují prvky s následujícími vlastnostmi:

:hover - jakýkoli prvek, nad kterým je umístěn kurzor myši;

:focus - interaktivní prvek, ke kterému bylo navigováno pomocí klávesnice nebo aktivováno pomocí myši;

:active - prvek, který byl aktivován uživatelem;

:valid - pole formuláře, jejichž obsah byl v prohlížeči zkontrolován, zda odpovídá zadanému datovému typu;

:invalid — pole formuláře, jejichž obsah neodpovídá zadanému datovému typu;

:enabled - všechna aktivní pole formuláře;

:disabled — blokovaná pole formuláře, tj. v neaktivním stavu;

:in-range - pole formuláře, jejichž hodnoty jsou v určeném rozsahu;

:out-of-range - pole formuláře, jejichž hodnoty nejsou v určeném rozsahu;

:lang() - prvky s textem v určeném jazyce;

:not(selektor) - prvky, které neobsahují zadaný selektor - třída, identifikátor, název nebo typ pole formuláře - :not() ;

:target je prvek se symbolem #, na který se v dokumentu odkazuje;

:checked — vybrané (uživatelem vybrané) prvky formuláře.

2.10. Strukturální selektor pseudotříd

Strukturální pseudotřídy vybírají podřízené prvky podle parametru uvedeného v závorkách:

:nth-child(liché) - liché podřízené prvky;

:n-té dítě(sudé) - sudé podřízené prvky;

:nth-child(3n) - každý třetí prvek mezi dětmi;

:nth-child(3n+2) - vybere každý třetí prvek, počínaje druhým potomkem (+2) ;

:nth-child(n+2) - vybere všechny prvky počínaje druhým;

:nth-child(3) - vybere třetí podřízený prvek;

:nth-last-child() - v seznamu podřízených prvků vybere prvek se zadaným umístěním, podobně jako :nth-child() , ale začíná od posledního v opačném směru;

:first-child - umožňuje stylizovat pouze úplně první podřízený prvek značky;

:last-child - umožňuje formátovat poslední podřízený prvek značky;

:only-child - vybere prvek, který je jediným podřízeným prvkem;

:empty - vybere prvky, které nemají žádné potomky;

:root - vybere prvek, který je kořenem dokumentu - prvek html.

2.11. Selektor pseudotříd strukturního typu

Označuje konkrétní typ podřízené značky:

:nth-of-type() - vybírá prvky podobné :nth-child() , ale bere v úvahu pouze typ prvku;

:first-of-type - vybere prvního potomka daného typu;

:last-of-type - vybere poslední prvek tohoto typu;

:nth-last-of-type() - vybere prvek daného typu v seznamu prvků podle zadaného umístění, počínaje od konce;

:only-of-type - vybere jediný prvek zadaného typu mezi podřízenými prvky nadřazeného prvku.

2.12. Selektor pseudoprvků

Pseudoelementy se používají k přidávání obsahu, který je generován pomocí vlastnosti content:

:first-letter - vybere první písmeno každého odstavce, platí pouze pro prvky bloku;

:first-line - vybere první řádek textu prvku, vztahuje se pouze na prvky bloku;

:before - vloží vygenerovaný obsah před prvek;

:after - přidá vygenerovaný obsah za prvek.

3. Kombinace voličů

Chcete-li přesněji vybrat prvky pro formátování, můžete použít kombinace selektorů:

img:nth-of-type(even) - vybere všechny sudé obrázky, jejichž alternativní text obsahuje slovo css .

4. Selektory seskupení

Stejný styl lze použít na více prvků současně. Chcete-li to provést, musíte na levé straně deklarace uvést požadované selektory oddělené čárkami:

H1, h2, p, span ( barva: rajče; pozadí: bílá; )

5. Dědičnost a kaskáda

Dědičnost a kaskáda jsou dva základní pojmy v CSS, které spolu úzce souvisí. Dědičnost je místo, kde prvky dědí vlastnosti od svého rodiče (prvku, který je obsahuje). Kaskáda se projevuje v tom, jak jsou na dokument aplikovány různé druhy stylů a jak se navzájem konfliktní pravidla potlačují.

5.1. Dědictví

Dědictví je mechanismus, kterým se určité vlastnosti přenášejí z předka na jeho potomky. Specifikace CSS umožňuje dědit vlastnosti související s textovým obsahem stránky, jako je barva, písmo, mezery mezi písmeny, výška řádku, styl seznamu, zarovnání textu, odsazení textu, transformace textu, viditelnost, bílá -mezera a mezera mezi slovy. V mnoha případech je to výhodné, protože nemusíte nastavovat velikost písma a rodinu písem pro každý prvek na webové stránce.

Vlastnosti související s formátováním bloku se nedědí. Jsou to pozadí , ohraničení , zobrazení , plovoucí a jasné , výška a šířka , okraj , min-max-výška a -šířka , obrys , přetečení , odsazení , pozice , zdobení textu , svislé zarovnání a z-index.

Nucené dědictví

Klíčové slovo inherit můžete použít k vynucení toho, aby prvek zdědil jakoukoli hodnotu vlastnosti svého nadřazeného prvku. To funguje i pro vlastnosti, které se ve výchozím nastavení nedědí.

Jak se nastavují a fungují styly CSS

1) Styly lze zdědit z nadřazeného prvku (zděděné vlastnosti nebo pomocí dědičné hodnoty);

2) Styly umístěné v tabulce stylů níže přepisují styly umístěné v tabulce výše;

3) Na jeden prvek lze použít styly z různých zdrojů. V režimu vývojáře prohlížeče můžete zkontrolovat, které styly jsou použity. Chcete-li to provést, klikněte pravým tlačítkem myši na prvek a vyberte „Zobrazit kód“ (nebo něco podobného). V pravém sloupci budou uvedeny všechny vlastnosti, které jsou nastaveny na tomto prvku nebo zděděny z nadřazeného prvku, spolu se soubory stylů, ve kterých jsou specifikovány, a pořadovým číslem řádku kódu.

Rýže. 2. Vývojářský režim v prohlížeči Google Chrome

4) Při definování stylu můžete použít libovolnou kombinaci selektorů - selektor prvku, pseudotřídu prvku, třídu nebo identifikátor prvku.

div (border: 1px solid #eee;) #wrap (width: 500px;).box (float: left;).clear (clear: both;)

5.2. Kaskáda

Kaskádové je mechanismus, který řídí konečný výsledek v situaci, kdy jsou na stejný prvek aplikována různá pravidla CSS. Existují tři kritéria, která určují pořadí, ve kterém jsou vlastnosti aplikovány – důležité pravidlo, specifičnost a pořadí, ve kterém jsou zahrnuty šablony stylů.

Pravidlo! důležité

Váhu pravidla lze určit pomocí klíčového slova!important, které se přidá bezprostředně za hodnotu vlastnosti, například span (váha písma: bold!important;) . Pravidlo musí být umístěno na konec deklarace před uzavírací závorku, bez mezery. Takové oznámení bude mít přednost před všemi ostatními pravidly. Toto pravidlo umožňuje zrušit hodnotu vlastnosti a nastavit novou pro prvek ze skupiny prvků v případě, že neexistuje přímý přístup k souboru stylu.

Specifičnost

Pro každé pravidlo prohlížeč vypočítá specifičnost selektoru a pokud má prvek konfliktní deklarace vlastností, vezme se v úvahu pravidlo, které má největší specifičnost. Hodnota specificity má čtyři části: 0, 0, 0, 0. Specifičnost selektoru je definována takto:

pro id se přidá 0, 1, 0, 0;
pro třídu 0 se přidává 0, 1, 0;
pro každý prvek a pseudoprvek se přidá 0, 0, 0, 1;
pro inline styl přidaný přímo k prvku - 1, 0, 0, 0 ;
Univerzální volič nemá žádné specifikum.

H1 (barva: světle modrá;) /*specifičnost 0, 0, 0, 1*/ em (barva: stříbrná;) /*specifičnost 0, 0, 0, 1*/ h1 em (barva: zlatá;) /*specifičnost: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (barva: modrá;) /*specifičnost: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (barva: šedá;) /*specifičnost 0, 0, 1, 0 */ #sidebar (barva: oranžová;) /*specifičnost 0, 1, 0, 0*/ li#sidebar (color: aqua;) /*specifičnost: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

V důsledku toho budou na prvek aplikována ta pravidla, která jsou konkrétnější. Pokud má například prvek dvě specifika s hodnotami 0, 0, 0, 2 a 0, 1, 0, 1, vyhraje druhé pravidlo.

Pořadí spojených tabulek

Můžete vytvořit více externích šablon stylů a připojit je k jedné webové stránce. Pokud jsou v různých tabulkách nalezeny různé hodnoty vlastností pro jeden prvek, bude v důsledku toho na prvek použito pravidlo z níže uvedeného seznamu stylů.

Již před specifikací CSS úrovně 2 z roku 1998 byly prvky formuláře široce podporovány ve všech hlavních prohlížečích. Specifikace CSS 2 stále neodpověděla na otázku, jak mají být prvky formuláře uživatelům prezentovány. Protože prvky formuláře jsou součástí uživatelského rozhraní v každém webovém dokumentu, autoři specifikace se rozhodli ponechat výchozí vizuální reprezentaci prvků formuláře HTML pro každý prohlížeč.

Nedostatek podrobností ve specifikaci formulářových prvků nutil vývojáře po mnoho let vytvářet velké množství testů a příkladů, jejichž hlavním úkolem bylo přivést vizuální komponenty všech formulářových prvků do stejného vzhledu napříč prohlížeči. V tomto článku se podíváme na některé šablony CSS, které vám umožní přenést prvky formuláře do společného jmenovatele.

Testy Rogera Johanssona pro stylování tvarových prvků

V roce 2004 a znovu v roce 2007 vytvořil Roger Johansson speciální testovací sady pro prvky formuláře a CSS. Z těchto testů vyplynul jeden závěr, který Rogera rozrušil:

Co tedy experiment ukázal? Jak jsem již poznamenal dříve, testy ukázaly, že není možné ovládat styly formulářů pomocí CSS, aby se prvky formuláře zobrazovaly konzistentně ve všech prohlížečích a platformách. Testy také ukázaly, že většina prohlížečů ignoruje mnoho vlastností CSS, když se používají ke stylování prvků formuláře.

Navzdory nepopiratelné pravdivosti těchto zjištění weboví vývojáři nadále experimentují s formulářovými prvky CSS při hledání svatého grálu nebo alespoň rozumného kompromisu mezi výchozím vykreslováním prohlížeče a vlastním stylingem.

Výchozí model zobrazení prvku formuláře

Specifikace CSS 2.1 pro HTML4 ve výchozím nastavení nastavuje prvky formuláře, jako je textarea, input a výběrový režim zobrazení s vloženým blokem:

Textarea, input, select ( display: inline-block; )

Naopak prvky formuláře a sady polí mají režim zobrazení bloku:

Sada polí, formulář ( display: block; )

V tomto kroku končí model specifikace CSS pro stylování prvků ve formulářích. Všechny ostatní aspekty vizuálního zobrazení prvků formuláře závisí na výchozí šabloně stylů prohlížeče. Výše uvedená pravidla však znamenají následující:

• Prvky vkládaných bloků lze stylovat pomocí kontextu inline formátování. To zahrnuje použití vlastností CSS, jako je line-height a vertical-align, k ovládání výšky a vertikálního zarovnání prvku. Vlastnosti odsazení a okraje lze také použít k ovládání odsazení a odsazení prvků formuláře. Za zmínku stojí, že prvky inline-blok lze ovládat také pomocí šířky a výšky, jejich chování se v tomto ohledu neliší od běžných prvků bloku.
• Prvky bloku lze stylovat standardním způsobem pomocí běžného kontextu formátování bloku. Existují však problémy s prvky formuláře sady polí a legend, protože zcela spoléhají na styl samotného prohlížeče.

Nabízí se otázka, jak mohou vývojáři tyto problémy vyřešit?

Řešení problémů s velikostí formulářových prvků

Weboví vývojáři brzy zjistili, že prohlížeče při určování jejich velikostí zacházejí s prvky inline-block poněkud zvláštně. Určení výšky často vede k neočekávaným výsledkům:

Vstup, výběr ( šířka: 120px; výška: 32px; )

Vývojáři se pokusili tento problém vyřešit pomocí inline-block:

Vstup, výběr ( šířka: 120px; výška: 32px; zobrazení: blok; )

S výjimkou prvku textarea jsou výsledky stále ještě hodně žádoucí. Chcete-li tento problém vyřešit, musíte nejprve normalizovat písmo a velikost písma pro prvky formuláře:

Vstup, výběr ( šířka: 120px; písmo: 1em Arial, bezpatkové; )

Jakmile je písmo nainstalováno, můžete přidat výplň:

Vstup, výběr ( šířka: 120px; písmo: 1em Arial, bezpatkové; výplň: 3px 6px; )

Prvky input a textarea lze také ohraničit, což ovlivní jejich rozměry v souladu s krabicovým modelem:

Input, input, textarea ( border: 1px solid #ccc; )

Vstupní prvky, jako je tlačítko a odeslání, mohou mít další výplň přidána prohlížečem. Běžnou praxí je jejich normalizace:

Vstup, vstup ( odsazení: 2px; )

Problém s tímto přístupem je, že prohlížeče často aplikují předpony dodavatele na vlastnosti prvků, takže není vždy možné normalizovat výplň. Například pro webovou sadu ji můžete normalizovat takto:

Vstup, vstup, vstup, vstup::-webkit-file-upload-button, button ( -webkit-box-align: center; text-align: center; kurzor: výchozí; barva: buttontext; padding: 2px 6px 3px; border : 2px začátek buttonface: initial-color: buttonface: border-box ) input, input, input ( -webkit-appearance: push-button; white-space: pre; )

Odsazení také ovlivňuje prvky sady polí a legend, ale s různými výsledky:

• Nastavení odsazení pro sadu polí na 0 obnoví výchozí odsazení pouze v některých prohlížečích (ne v IE)
• Nastavení odsazení legendy na 0 způsobí zmenšení prvku

Vyberte, zaškrtněte políčko, rádiové prvky lze normalizovat s dobrými výsledky pouze pro několik vlastností:

• Rodina písem
• Velikost písma
• Šířka (pro výběr)
• Vycpávka

Použití jiných vlastností na tyto prvky formuláře vytváří nekonzistentní výsledky.

Zarovnání prvků ve formulářích

Formulářové prvky lze zarovnat svisle i vodorovně. Mohou být umístěny na stejné lince nebo ve skupině. Chcete-li je zarovnat podél jedné čáry, můžete použít plovoucí nebo standardní inline-block kontext.

Při použití plovoucích prvků se prvky automaticky změní na prvky blokové. To znamená, že ovládání těchto prvků nyní zajišťuje devět dalších pravidel krabicového modelu.

U plovoucích prvků je hlavním úkolem dosáhnout dobrého vertikálního zarovnání na aktuální lince. V tomto případě je běžnou praxí použití svislého okraje nebo odsazení:

Vstup, výběr ( šířka: 120px; plovoucí: vlevo; margin-top: 0,4 em; )

Tento přístup funguje, když nepotřebujete zarovnávat bloky textu, jako je prvek štítku. V tomto případě můžete použít relativní umístění, odsazení nebo okraj u prvku, který obsahuje pouze text:

Další problém nastává s tlačítky. V tomto případě, když máte tlačítko, které je větší než ostatní prvky, můžete nastavit vertikální zarovnání pomocí relativního umístění:

Vstup ( plovoucí: vlevo; šířka: 90px; pozice: relativní; nahoře: 0,4 em; )

Tento přístup relativního umístění funguje také pro zaškrtávací políčka a přepínače. Relativní umístění lze dokonce použít k normalizaci levého odsazení prvku legendy v sadě polí.

Pokud používáte prvky v kontextu inline formátování, můžete pro vertikální zarovnání použít vlastnost vertical-align:

Štítek, vstup (zarovnat svisle: na střed; na okraji vpravo: 1 m; )

Dobrých výsledků lze dosáhnout kombinací této vlastnosti s vlastností line-height. Tato vlastnost však musí být nastavena na nadřazeném prvku. Pokud jej nastavíte přímo na samotný prvek formuláře, bude ovlivněna výška prvku:

Řádek formuláře ( výška řádku: 1,4; )

Použití deklarace výšky pro nadřazený prvek spárovaný se stejnou hodnotou výšky řádku je také dobrým postupem:

Řádek formuláře ( výška řádku: 1,8; výška: 1,8 em; )

V kontextu inline formátování můžete použít vlastnost zarovnání textu na nadřazeném prvku k zarovnání obsahu prvku formuláře doleva, na střed nebo doprava.

Podivné chování souborových vstupů

Vstupní prvek typového souboru je speciální případ. Takový prvek by měl být z bezpečnostních důvodů vždy viditelný a rozpoznatelný v rozhraní prohlížeče. To znamená, že prohlížeče záměrně ignorují některá pravidla stylu (například pravidla týkající se viditelnosti) a zpravidla aplikují své vlastní algoritmy definované jejich výchozí šablonou stylů.

Některé prohlížeče navíc zobrazují pouze jedno tlačítko, zatímco jiné také přidávají pole pro cestu k souboru.

Weboví vývojáři však našli způsoby, jak toto omezení obejít. Nejprve prvek zabalili do kontejneru.

CSS je zkratka pro „Cascading Style Sheets“, což znamená „Cascading Style Sheets“. Používá se k návrhu webových stránek. Pokud HTML kód obsahuje obsah (to, co prohlížeč zobrazí), pak CSS určuje jeho design (jak jej prohlížeč zobrazí). Krása CSS spočívá v tom, že pomocí jednoho stylu můžete navrhnout všechny stejné typy prvků stránky nebo celého webu (všechny odkazy, odstavce, seznamy najednou). Pomocí stylu CSS jednou definujete, jak má konkrétní prvek, například obrázky, vypadat, a změní svůj design ve všech dokumentech najednou. Chcete-li změnit formátování textu na svém webu, stačí změnit kód CSS pouze jednou.

Základní prvky CSS

Jak se HTML skládá značky , atributy a hodnoty a CSS se skládá ze svých vlastních prvků. Podstatu konstrukcí CSS lze vysvětlit takto: „Určete, který prvek stránky se má stylizovat, a určete, jak jej stylovat.“ Zde jsou stavební kameny CSS.

• Volič. Identifikátor, který prohlížeči sděluje, na který prvek stránky má použít návrh. Prohlížeč díky němu „rozumí“, že styl je určen například pro návrh seznamů nebo tabulek.
• Blok deklarace stylu. Píše se za selektorem a je uzavřeno ve složených závorkách. Specifikuje styl prvku (jeho design). Blok deklarace stylu se skládá ze dvou částí.
• Vlastnictví. Obdoba atributu v HTML. Určuje, která vlastnost vzhledu se změní.
• Význam. Zadává se do vlastnosti pomocí dvojtečky a přesně určuje, jak se vlastnost změní.

V bloku deklarace stylu může být několik vlastností a hodnot, v takovém případě jsou uvedeny oddělené středníkem.

Typy voličů

V závislosti na vlastnostech prvků stránky, které definují, se selektory dodávají v různých typech.

• Univerzální. Nastaví pravidla pro všechny prvky stránky, které nemají nastavena jiná pravidla.
  Kód * (velikost písma: 14px;) nastaví velikost písma na 14 pixelů pro všechny prvky dokumentu, pro které nejsou určena jiná pravidla, pomocí jiných selektorů.
• Tega. Tento typ selektoru určuje pravidla formátování pro obsah konkrétní značky HTML. Název selektoru je stejný jako název deskriptoru, pouze se píše bez lomených závorek: p, h1, ul.
  Například kód h2 (červená barva;) nastaví barvu textu na zelenou pro všechny nadpisy druhé úrovně, tedy obsah značek
  .
• Atribut. Pomocí této skupiny selektorů můžete určit styl obsahu všech značek, které mají zadaný konkrétní atribut. Selektory lze přesněji specifikovat zadáním nejen názvu atributu, ale také přiřazené hodnoty a názvu tagu, který jej obsahuje. Toho lze využít k tomu, aby byl design individuálnější.
• třída. Typ selektorů pro případy, kdy potřebujete odlišně formátovat obsah značek stejného typu. Například chcete, aby byly odkazy ve spodní části webu červené, zatímco všechny ostatní by měly zůstat modré, jak byly. Chcete-li použít pravidla třídy na prvek webu, musíte v atributu zadat název třídy třída odpovídající značku.

Řekněme pomocí třídy krok jednotlivé prvky musí mít levý okraj 15 pixelů.

CSS kód bude vypadat takto:

Krok (levý okraj: 15px;)

Kód HTML, který připojí prvek k pravidlu, bude:

Odsazený text

• ID. Používá se ve spojení s atributem id HTML tag a používá se, když je třeba nastavit vlastnosti pro jeden prvek. Na rozdíl od selektoru třídy, jehož názvu předchází tečka, se zapisuje pomocí hash:

#exclusive (barva:oranžová;)

• Kontextové. V HTML se některé značky často objevují uvnitř jiných a kontextové selektory pomáhají definovat pravidla právě pro takový případ. Můžete je například použít k formátování položek v číslovaných seznamech nebo textu kurzívou uvnitř odstavců:

P i (fint-family: Century;)

Zbývající skupiny selektorů jsou založeny na kombinaci uvedených typů a také na principu dědičnosti, kdy podřízený prvek přebírá vlastnosti svého rodiče.

Kombinování a seskupování voličů je výhodné v mnoha situacích. Například nastavit pravidla třídy krok pouze u odkazů je třeba zadat oba selektory oddělené tečkou (nejprve značku, poté třídu):

A.step (levý okraj: 15px;)

Jak zahrnout CSS do stránky HTML?

Existuje několik způsobů, jak zajistit vzájemnou interakci nástrojů pro tvorbu webových stránek. Na základě způsobu přidávání jsou styly rozděleny do následujících kategorií.

Vestavěné styly

Nastavte v dokumentu přímo do HTML tagu pomocí atributu styl. Mít nejvyšší prioritu. To znamená, že pokud je pro stejný prvek specifikován jiný design, pak bude dána přednost pravidlu, které je napsáno uvnitř značky. Selektor pro vestavěný styl není potřeba, protože souvislost mezi stylem a tagem je zřejmá - je v něm specifikován design tagu.

Následující kód nastavuje velikost a barvu písma pro text uvnitř značky

Text formátovaný pomocí interního stylu.

Globální styly

Nastaveno podle značky …

Související styly

Nejpohodlnější, protože s jejich pomocí snadno navrhnete celý web ve stejném stylu. Propojený styl znamená, že všechny styly CSS jsou v samostatném souboru s příponou .css.

Tento přístup je pohodlný i proto, že odděluje pravidla návrhu stránek od jejich obsahu, CSS kód lze snadno měnit bez zásahu do HTML souborů a zejména u velkých projektů je velmi důležitý princip oddělení kódu.

Chcete-li propojit pravidla ze souboru CSS se stránkou HTML, použijte značku přidán do nádoby a jeho atributy.

Zde je řádek propojující pravidla ze souboru mystyle.css se stránkou HTML:

rel="stylesheet" určuje, že značka odkazuje na soubor šablony stylů, href="mysyle.css" nastaví jeho adresu. Pravidla adresování jsou stejná jako u běžných odkazů – cesta může být absolutní, relativní atd.

Importované styly

Pomocí příkazu @import do aktuální tabulky můžete přidat styly ze souboru CSS. To může být vyžadováno například v případě, že chcete doplnit individuální návrh dokumentu, definovaný pomocí globálních stylů, univerzálními pravidly ze samostatného souboru. Metodu nelze použít s inline styly.

Níže uvedený kód importuje tabulku souborů do dokumentu any.css, který se nachází ve složce s upraveným HTML dokumentem:

@import url(any.css);

Příkaz se zapisuje do řádku pod úvodní značkou