CSS (Cascading Style Sheets), neboli kaskádové styly, se používají k popisu vzhled dokument napsaný ve značkovacím jazyce. Styly CSS se obvykle používají k vytváření a změně stylu prvků webových stránek a uživatelských rozhraní napsaných HTML jazyky 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 přijatelné hodnoty 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.

Typy kaskádových stylů a jejich specifika

1. Typy stylů

1.1. Externí šablona stylů

Externí šablona stylů představuje 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í atribut stylu:

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 tohoto 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 vám umožňují stylovat jeden nebo více prvků se stejným názvem třídy různá místa stránkách nebo na různé stránky místo. Chcete-li například vytvořit nadpis s třídou nadpisu, musíte přidat atribut třídy s nadpisem hodnoty v úvodní značce

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

Návod k použití osobní počítač

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.

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 potřebujete formátovat potomky konkrétní prvek, tomuto prvku je třeba přiřadit třídu stylu:

p.first a (barva: zelená;) — tento styl bude platit pro všechny odkazy potomky odstavce s třídou jako první;

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é prvky a každý prvek může mít pouze jednoho rodiče. 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. Selektory sesterské prvky 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:

[atribut] - 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í daná hodnota, pokud je například prvku uvedeno 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čí specifikovaná hodnota, img - všechny obrázky ve formátu png;

selector[attribute*="value"] - prvky, jejichž hodnota atributu obsahuje kdekoli určené slovo, 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;

:zaměření — interaktivní prvek, který byl zpřístupněn pomocí klávesnice nebo aktivován 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 s zadané místo, 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 v dokumentu - html prvek.

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 svými podřízenými prvky rodičovský prvek.

2.12. Selektor pseudoprvků

Pseudo prvky 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, alternativní text který obsahuje slovo css.

4. Seskupení voličů

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 různé typyšablony stylů se aplikují na dokument a jak se vzájemně přepisují konfliktní pravidla.

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 poskytuje dědění vlastností souvisejících 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í

Pomocí klíčové slovo dědit může donutit prvek, aby 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) Lze použít styly z jednoho prvku různé zdroje. V režimu vývojáře prohlížeče můžete zkontrolovat, které styly jsou použity. Chcete-li to provést, klikněte na prvek klikněte pravým tlačítkem myši 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 sériové číslořádky kódu.

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

5.2. Kaskáda

Kaskádové je mechanismus, který řídí konečný výsledek v situaci, kdy jsou na jeden 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 jich vytvořit několik externí stoly styly a připojit je k jedné webové stránce. Pokud v různé tabulky se sejde různé významy vlastnosti jednoho prvku, pak v důsledku toho bude na prvek aplikováno pravidlo v níže uvedeném 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é rozhraní v každém webovém dokumentu se autoři specifikace rozhodli odejít vizuální reprezentace výchozí prvky formuláře HTML pro každý prohlížeč.

Nedostatek podrobností ve specifikaci týkající se prvků formuláře nutil vývojáře po mnoho let tvořit velký počet testy a příklady, jejichž hlavním úkolem bylo přivést vizuální komponenty všech formulářových prvků do jednoho zobrazení napříč prohlížeči. V tomto článku se na některé podíváme CSS šablony, který vám umožní přivést prvky forem do jednoho 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, testy ukázaly, že s pomocí CSS Není možné ovládat styly formulářů tak, 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í CSS prvky formy při hledání svatého grálu, nebo alespoň rozumný kompromis mezi výchozím vykreslováním prohlížeče a vlastním stylingem.

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

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

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

A naopak, tvarové prvky a fieldset mají blokový režim zobrazení:

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í CSS vlastnosti, jako je výška čáry a svislé zarovnání pro výšku ovládacího prvku a svislé zarovnání. Vlastnosti padding a margin lze také použít k ovládání vnitřního a okraj pro prvky formuláře. Za zmínku stojí, že prvky inline-bloku lze také ovládat z pomocí šířky a výška, jejich chování se v tomto ohledu neliší od běžných blokových prvků.
• Blokové prvky lze stylizovat 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 závisí na stylu 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 viděli, že prohlížeče při určování jejich velikosti 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; )

Výsledky stále zůstávají hodně žádoucí s výjimkou prvek textarea. 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 Tlačítko líbí se mi a odeslat může prohlížeč přidat další výplň. 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 normalizace odsazení není vždy možná. 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.

S plovoucími prvky, hlavním úkolem je dosáhnout dobrého vertikálního vyrovnání na aktuální linka. V tomto případě je běžnou praxí použití vertikální okraj nebo vycpávka:

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

Tento přístup funguje, když například nepotřebujete zarovnávat bloky textu 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, jehož velikost 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 použít vlastnost vertikálního zarovnání pro vertikální zarovnání:

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

Dobré výsledky 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 text-align pro nadřazený prvek k zarovnání obsahu prvku formuláře doleva, na střed nebo doprava.

Podivné chování souborových vstupů

Živel typ vstupu soubor je zvláštní příležitost. 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.