› › Pravidla syntaxe CSS. Metoda náhodných čísel. Pravidla pro aplikaci stylů

Pravidla syntaxe CSS. Metoda náhodných čísel. Pravidla pro aplikaci stylů

CSS se skládá ze tří částí: selektor, vlastnost a hodnota:

selektor(vlastnost: hodnota)

Selektor je prvek/značka HTML, kterou je třeba definovat. Vlastnost je atribut, který chcete změnit. Každá vlastnost může mít hodnotu. Existuje řada pravidel a doporučení, která si musíte zapamatovat.

  1. Vlastnost a hodnota jsou odděleny dvojtečkou a umístěny ve složených závorkách:

    p (velikost písma: 75 %)

  2. Pokud se hodnota skládá z několika slov, musíte hodnotu uvést do uvozovek:

    h1 (rodina písem: "lucida calligraphy")

  3. Pokud potřebujete definovat více než jednu vlastnost, musíte vlastnosti oddělit středníkem:

    tabulka (skupina písem: arial, "sans serif"; styl ohraničení: tečkovaný)

  4. Chcete-li usnadnit čtení definic stylů, můžete každou vlastnost napsat na samostatný řádek:

    h2 ( font-family: arial; margin-right: 20pt; color:#ffffff )

  5. Při definování pravidel je povoleno seskupování selektorů a jako oddělovač selektoru se používá čárka. V následujícím příkladu byly všechny prvky odstavců, tabulek a seznamů sloučeny do skupiny. Všechny tyto prvky budou zobrazeny bezpatkovým písmem:

    p,table,li ( rodina písem: "sans serif"; )

Výběr třídy (třída)

Při vývoji webu je často potřeba zadat různé styly pro stejný typ prvku HTML. Chcete-li tento problém vyřešit, použijte selektor třídy.

Předpokládejme, že dokument vyžaduje dva typy nadpisů: větší nadpis by měl mít okraj 10 bodů a druhý - 20 bodů. Zde je návod, jak to udělat pomocí stylů:

h1.stepleft (levý okraj: 10 bodů) h2.stepright (levý okraj: 20 bodů)

Chcete-li použít tyto styly v HTML dokument budete muset použít atribut class:

Nadpis s vnějším odsazením 10 bodů.

Nadpis s vnějším odsazením 20 bodů.

Současně není povolena následující definice atribut třídy :

< h1 class="stepleft" h2 class="stepright">,

těch. lze definovat pouze jeden atribut třídy

Můžete také vynechat název tagu v selektoru a definovat styl, který budou používat všechny prvky HTML, které mají určitou třídu.

Vlevo (levý okraj: 40 bodů)

V následujícím příkladu vše HTML prvky, s class="left" bude mít vnější okraj 40 bodů.

V následujícím kódu mají prvky tabulka a p class="left" . To znamená, že oba prvky se budou řídit pravidly v selektoru „.left“:

Tato tabulka bude mít vnější odsazení 40 bodů.

Tento odstavec bude mít vnější odsazení 40 bodů.

Pro správné zpracování kódu prohlížeči se nedoporučuje začínat název třídy číslem, protože toto nebude fungovat v Mozille/Firefoxu.

Co je to selektor v css je popis tohoto prvku nebo skupiny prvků, který prohlížeči říká, který prvek má vybrat, aby na něj použil styl. Podívejme se na základní selektory CSS.

1) .X

.topic-title ( barva pozadí: žlutá; )

Selektor CSS podle třídy X. Rozdíl mezi id a class je v tom, že několik prvků na stránce může mít stejnou třídu, ale id je vždy jedinečné. Třídy by se měly používat k aplikaci stejného stylu na více prvků.

  • Chrome
  • Firefox
  • Safari
  • Opera

2) #X

#content (šířka: 960px; okraj: 0 auto; )

Selektor ID CSS. Znak hash před CSS selektorem X vybírá prvek, jehož id = X. Při přiřazování stylů podle id byste měli vždy pamatovat na to, že musí být jedinečný – na stránce by mělo být pouze jedno takové id. Proto je lepší používat selektory podle tříd, kombinací tříd nebo názvů značek. Nicméně selektory ID jsou skvělé pro automatické testování, protože... vám umožní okamžitou interakci potřebný prvek a mít jistotu, že je na stránce jediný.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

3) *

* ( okraj: 0; odsazení: 0; )

CSS selektor pro všechny prvky. Symbol hvězdičky vybere všechny prvky, které jsou na stránce. Mnoho vývojářů jej používá k odstranění (nulování) hodnot okrajů a odsazení všech prvků stránky. V praxi je však lepší to nedělat, protože tento selektor CSS zatěžuje prohlížeč poměrně silně prohledáváním všech prvků na stránce.

Symbol * lze také použít k výběru všech podřízených prvků:

#header * (ohraničení: 5px plná šedá; )

Tento příklad vybere všechny potomky (potomky) prvku s #header . Vždy se ale vyplatí připomenout, že tento selektor je pro prohlížeč poměrně těžký.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

4) X

a ( barva: zelená; ) ol ( levý okraj: 15px; )

Selektor typu CSS. Jak vybrat všechny prvky stejného typu, pokud nemají id ani třídy? Vyplatí se použít selektor typu prvku CSS. Chcete-li například vybrat všechny seřazené seznamy na stránce, použijte ol(...), jak je uvedeno výše.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

5) X Y

li a (tloušťka písma: tučné; zdobení textu: žádné; )

Selektor potomků CSS nebo Selektor podřízených prvků CSS se používá nejčastěji. Používá se, pokud potřebujete vybrat prvky určitý typ z mnoha dětských prvků. Například musíte vybrat všechny odkazy, které jsou v prvku li. V tomto případě použijte tento volič. Při použití řetězů takových selektorů se vždy zeptejte, zda je možné selektovat tohoto prvku použijte ještě kratší sekvenci voličů.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

6) X + Y

div + p ( rodina písem: "Helvetica Neue", Arial, bezpatkové; velikost písma: 18px; )

Selektor sousedních prvků vybírá pouze prvek typu Y, který následuje bezprostředně za prvkem X V tomto případě následuje každý odstavec bezprostředně za každým prvek div obdrží speciální typ a velikost písma.

    Které prohlížeče jsou podporovány:
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Chrome

7) X > Y

#content > ul (ohraničení: 1px plná zelená; )

Selektor potomků CSS. Rozdíl mezi selektory X Y a X > Y je v tom, že dotyčný selektor CSS vybere pouze bezprostřední potomky prvků (vybere pouze přímé potomky). Například:

  • Položka seznamu
    • Potomek prvního prvku seznamu
  • Položka seznamu
  • Položka seznamu

Selektor CSS #content > ul vybere pouze ul, která je přímým potomkem div blok s id="kontejner" . Nevybere ul, která je potomkem první li. Je to celkem výhodné z hlediska rychlosti Práce s CSS volič.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

8) X ~ Y

ol ~ p (levý okraj: 10px; )

Selektor sesterských (podřízených) prvků méně přísné než X + Y. Vybere nejen první, ale i všechny ostatní p prvky následující po ol.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera
a:link ( barva: zelená; ) a:navštíveno ( barva: šedá; )

Pseudotřída:odkaz slouží k výběru všech odkazů, na které ještě nikdo neklikl. Pokud potřebujete použít určitý styl na již navštívené odkazy, pak použijte pseudotřída:navštívil.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

10) X

a(barva:červená;)

Selektor atributů CSS. Tento příklad vybere pouze odkazy, které mají atribut title.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

11) X

a ( barva: žlutá; )
    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

12) X

a ( barva: #dfc11f; )

Hvězdička znamená, že hledaná hodnota musí být někde v atributu (jakákoli část atributu href). Takto se vyberou i odkazy z https://www..stijit.. na všechny vybrané odkazy.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

13) X

a ( pozadí: url(cesta/k/externí/ikona.png) no-repeat; padding-left: 15px; )

Na některých stránkách jsou vedle odkazů vedoucích na jiné stránky umístěny malé ikony šipek, které označují, o co se jedná. externí odkazy. Karat „^“ je symbol, který označuje začátek řádku. Chcete-li tedy vybrat všechny značky, jejichž href začíná http, musíte použít selektor CSS s karat, jak je znázorněno v příkladu výše.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

14) X

a(barva:zelená;)

Tady se to používá regulární výraz a symbol $ označující konec řádku. V v tomto příkladu hledáme všechny odkazy, které odkazují na obrázky s příponou .jpg.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

15) X

a(barva:zelená;)

Zde se hlásíme Selektor vlastních atributů CSS. Ke každému odkazu přidáváme vlastní atribut data-filetype:

odkaz

Nyní pomocí výše uvedeného CSS selektory, můžete vybrat všechny odkazy vedoucí na obrázky s libovolnou příponou.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

16) X

Vlnovka (~) umožňuje zvýraznění specifický atribut ze seznamu atributů oddělených mezerami. Můžete si napsat vlastní atribut data-info, ve kterém jich můžete zadat několik klíčová slova přes prostor. Tímto způsobem můžete označit, že odkaz je externí a vede k obrázku.

odkaz

Pomocí této techniky můžeme vybrat prvky s kombinacemi atributů, které potřebujeme:

/* Vyberte prvek, jehož atribut data-info obsahuje hodnotu external */ a ( color: green; ) /* Vyberte prvek, jehož atribut data-info obsahuje hodnotu image */ a ( border: 2px přerušovaná černá; )

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

17) X: zaškrtnuto

input:checked ( border: 3px začátek black; )

Tato pseudotřída zvýrazní pouze prvky, jako je zaškrtávací políčko nebo přepínač, a to pouze tehdy, když jsou již ve stavu zaškrtnutí.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

18) X:po

Pseudotřídy :before a :after jsou velmi užitečné – vytvářejí obsah před a za vybraným prvkem.

Clearfix:after ( content: ""; display: block; clear: both; viditelnost: skrytý; font-size: 0; height: 0; ) .clearfix ( *display: inline-block; _height: 1%; )

Zde pomocí pseudo-class:after, po bloku s class.clearfix, a prázdný řetězec, po kterém se vyčistí. Tento přístup se používá, pokud jej nelze použít přepadová vlastnost: skrytý.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

19) X:hover

div:hover (barva pozadí: rgba(11,77,130,0,5); )

Aplikuje na prvek určitý styl, když na něj najede kurzor myši. Starý Internetové verze Průzkumník platí pouze :hover na odkazy.

A:hover ( border-bottom: 1px tečkovaná modrá; )

    Které prohlížeče jsou podporovány:
  • IE6+ (platí pouze pro odkazy v IE6)
  • Chrome
  • Firefox
  • Safari
  • Opera

20) X:not (selektor)

div:not(#content) ( barva: šedá; )

Pseudotřída ne (negace) To je užitečné, když například potřebujete vybrat všechny divy kromě toho s id="content" .

Na stejném principu můžete vybrat všechny prvky kromě p:

*:not(p) ( barva: modrá; )

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

21) X::pseudoprvek

p::first-line ( font-weight: bold; font-size: 24px; )

Pseudoprvky lze použít k aplikaci stylů na části prvků – například na první řádek odstavce nebo první písmeno slova. Platí pouze pro prvky bloku.

Výběr prvního písmene odstavce:

P::first-letter ( font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; )

Výběr prvního řádku v odstavci:

P:první řádek (velikost písma: 28px; váha písma: tučné; )

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera

22) X:první dítě

ul li:first-child ( border-top: none; )

Pseudotřídní prvodítě vybere pouze první dítě nadřazený prvek. Často se používá k odstranění ohraničení z prvního prvku seznamu. Tato pseudotřída existuje od té doby CSS 1.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari
  • Opera 3.5+
  • Android

23) X: poslední dítě

ul > li:last-child ( border-bottom: none; )

Pseudotřídní poslední dítě vybere posledního potomka nadřazeného prvku. Objevil se teprve od té doby CSS 3.

    Které prohlížeče jsou podporovány:
  • IE9+ (IE8 podporuje první dítě, ale ne poslední dítě. Microsoft (c))
  • Chrome
  • Firefox
  • Safari
  • Opera 9.6+
  • Android

24) X:jediné dítě

div p:pouze-dítě ( barva: zelená; )

Pseudotřídní jediné-dítě umožňuje vybrat ty prvky, které jsou jedinými dětmi jejich rodičů.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox
  • Safari 3.0+
  • Opera 9.6+
  • Android

25) X:n-té dítě(n)

li:nth-child(3) ( barva: černá; )

Vybírá podřízený prvekčíslem uvedeným v parametru. selektor n-tého dítěte bere jako parametr celé číslo, ale počítá od 1, tzn. pokud potřebujete vybrat druhou položku seznamu, použijte li:nth-child(2) . Všechny pseudotřídy používající n-té dítě se objevily pouze počínaje CSS 3.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

26) X:n-té-poslední-dítě(n)

li:nth-last-child(2) ( barva: červená; )

Pokud máte velký seznam prvky v ul a potřebujete vybrat třetí prvek od konce? Místo psaní li:nth-child(109) můžete použít selektor posledního dítěte n-té-poslední-dítě. Tato metoda je stejná jako předchozí, ale počítá se od konce.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

27) X:n-tý typ(n)

ul:nth-of-type(3) ( okraj: 1px tečkovaný černý; )

Pokud jsou na stránce čtyři neuspořádané seznamy a potřebujete upravit pouze ten třetí, který nemá jedinečné ID, měli byste použít n-tý typ.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

28) X:n-tý-poslední-typ(n)

ul:nth-last-of-type(3) (ohraničení: 2px hřeben modrý; }

Pseudotřída n-tého posledního typu(n) je určen k výběru n-tého prvku určitého typu od konce.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox 3.6+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

29) X: pouze typu

li:only-of-type ( váha písma: tučné; )

Pseudotřída pouze typu vybere prvky, které nemají v nadřazeném prvku žádné sousedy. Můžete například vybrat všechny uls, které obsahují pouze osamělý seznam.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox 3.5+
  • Safari 3.1+
  • Opera 9.6+
  • Android 2.1+
  • iOS 2.0+

30) X: první typ

ul:first-of-type > li:nth-child(3) ( styl písma: italic; )

Pseudotřída prvního typu vybere první prvek daného typu.

    Které prohlížeče jsou podporovány:
  • Chrome
  • Firefox 3.5+
  • Safari 3.1+
  • Opera 9.5+
  • Android 2.1+
  • iOS 2.0+

Jak bylo uvedeno dříve, pravidla stylu jsou psána ve svém vlastním formátu, který se liší od HTML. Hlavním konceptem je selektor - to je určitý název stylu, pro který se přidávají parametry formátování. Selektory jsou značky, třídy a identifikátory. Obecná metoda Záznamy vypadají takto:

Jméno selektoru se zapisuje jako první, například TABLE, to znamená, že na značku budou aplikována všechna pravidla stylu

, pak jsou složené závorky, ve kterých je zapsána vlastnost style a její hodnota je uvedena za dvojtečkou. Vlastnosti stylu oddělené středníkem tento symbol lze na konci vynechat.

CSS není citlivé na velká a malá písmena, zalomení řádků, mezery nebo tabulátory, takže forma záznamu závisí na přání vývojáře. Příklad 1.14 tedy ukazuje dva typy návrhu selektorů a jejich pravidla.

Příklad 1.14. Používání stylů

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

xmlns="http://www.w3.org/1999/xhtml">

Nadpisy