Ako dobre robím vlastný rozvoj.

Učím CSS za mesiac, alebo dokonca rýchlejšie

Krok 4: Zobrazenie stránok HTML v prehliadači

Otvorte príklad v prehliadači a uistite sa, že výsledok nášho príkladu zodpovedá obrazu:

Pripojenie externého štýlu

Teraz vytvoríme samostatný súbor, ktorý bude obsahovať štýlový list a pripojiť ho do nášho dokumentu HTML.

1. V programe Notepad ++ vytvorte nový prázdny súbor a uložte ho pod názvom Page.css (pri ukladaní súboru, musíte si vybrať Cascade štýlové listy * .css) V rovnakom priečinku, kde ste vytvorili dokument HTML.
2. Prenos z predchádzajúceho príkladu CSS kód (obsah tagu Nachádza sa zase v nádobe ... .
   
   

   Atribút typ \u003d "Text / CSS"predtým povinné pre značku .........

   Šedý text vo všetkých odsekoch webovej stránky

   
   
   

   Výsledok:

   Šedý text vo všetkých odsekoch webovej stránky

   Šedý text vo všetkých odsekoch webovej stránky

   Externé (súvisiace) štýly

   Externé (súvisiace) štýly sú definované v samostatnom súbore s expanziou. cSS.. Externé štýly umožňujú všetkým stránkam lokality vyzerať jednotne.

   Komunikovať so súborom, v ktorom sú opísané štýly, sa používa tag. Nachádza sa v kontajneri ... .

   V tejto značke musia byť uvedené dva atribúty: rel \u003d "stjesheet" a href.Definovanie adresy súboru štýlu.

   Príklad

   ......... ......... .........
   
   

   Spojovacie štýly

   Pravidlo globálnych a externých štýlov sa skladá z volič a reklamy štýlu.

   Výber umiestnený na ľavej strane pravidla určuje prvok (prvky), pre ktoré je pravidlo stanovené. Ďalej, v kučeravých zátvorkách sú uvedené inzeráty štýlu, oddelené bodkočiarkou. Napríklad:

   P (zarážka textu: 30px; veľkosť písma: 14px; farba: # 666;)

   Oznámenie štýlu je pár cSS Nehnuteľnosť: CSS Hodnota.

   Napríklad: farba: červená

   Pri pripojení vnútorného štýlu, pravidlo CSS, ktoré je hodnota atribútu Štýl., Skladá sa z reklamy štýlu, oddelené čiarkou. Napríklad:

   Selectory CSS

   Volič	Popis	Viac informácií
   *	Akýkoľvek prvok
   E.	Prvok určený značkou e
   E # MYID.	Element E s "Myid" identifikátor
   E.myclass.	Element E Class "MyClass"
   E.	Existencia existencie atribútu
   E.	Atribút SELECTOR RECALITY
   E.	Výber atribútu so zoznamom hodnôt	Voláče atribútov
   E.	Atribút Prefix Selector
   E.	Atribút prípony prípony
   E.	Atribút selektorového substrátu
   E: odkaz	Element E - ešte nenavštevoval užívateľ. Odkaz	Dynamické pseudoklasy
   E: navštívil	Prvok E - Užívateľ navštívil odkaz	Dynamické pseudoklasy
   E: Hover	Element E, keď prejdete myši ukazovateľ	Dynamické pseudoklasy
   E: aktívny	Prvok E aktivovaný užívateľom	Dynamické pseudoklasy
   E: FOCUS	Element E v zameraní	Dynamické pseudoklasy
   E: Cieľ.	Element E, ktorý je účelom referencie	Cieľový pseudoclass
   E: Lang.	Element E, napísaný v určenom jazyku	Jazyk triedy pseudo
   E: povolené.	Elektronický prvok E - Dostupný formulár	Pseudoclass štátov
   E: Zakázané.	Element E - neprístupný prvok tvaru	Pseudoclass štátov
   E: Skontrolované.	Začiarknutím políčka alebo prepínač	Pseudoclass štátov
   E: neurčitý.	Element E je začiarkavacie políčko alebo prepínač	Pseudoclass štátov
   E: root.	Element E, koreň dokumentu	Štrukturálne pseudoclass
   E: nth-dieťa (n)	Element E, N-Th Baby Rodičovský prvok	Štrukturálne pseudoclass
   E: nth-posledné dieťa (n)	Element E, N-Th Baby Rodičovský prvok, počítanie od konca	Štrukturálne pseudoclass
   E: NTH-of-Type (n)	n-TH prvkom typu E	Štrukturálne pseudoclass
   E: NTH-last-of-type (n)	n-th prvku typu E, počítanie od konca	Štrukturálne pseudoclass
   E: Prvé dieťa	Element E, prvý detský prvok	Štrukturálne pseudoclass
   E: Posledné dieťa	Element E, posledný dcérsky prvok rodiča	Štrukturálne pseudoclass
   E: Prvá typu	Prvý prvok typu E	Štrukturálne pseudoclass
   E: Posledný typ	Posledný prvok typu E	Štrukturálne pseudoclass
   E: iba-dieťa	Jediný rodičovský prvok	Štrukturálne pseudoclass
   E: iba typu	Jediný rodičovský prvok typu E	Štrukturálne pseudoclass
   E: prázdne	Element E, ktorý neobsahuje dcérske spoločnosti	Štrukturálne pseudoclass
   E: nie (x)	Element E, ktorý nezodpovedá jednoduchému voličovi X	Pseudoclass of denial
   E :: Prvá čiara	Prvok prvého riadku e	Pseudo-prvky
   E :: Prvý list	Prvý písmeno E	Pseudo-prvky
   E :: predtým.	Obsah na prvok e	Pseudo-prvky
   E :: Potom.	Obsah po prvom e	Pseudo-prvky
   E :: Výber	Výber v prvku E	Pseudo-prvky
   E F.	Prvok f, ktorý je vo vnútri prvku e
   E\u003e F.	Prvok f, ktorý je priamo vo vnútri prvku e
   E + F.	Prvok F, ktorý nasleduje okamžite po prvom e
   E ~ F.	Prvok F, ktorý nasleduje po prvom E

   Univerzálny volič

   Univerzálny volič zodpovedá akémukoľvek prvku dokumentu HTML.

   Ak chcete označiť univerzálny volič, používa sa symbol STAR (*).

   Používa sa, ak potrebujete nainštalovať rovnaký štýl pre všetky prvky webovej stránky. Napríklad:

   * (Margin: 0, čalúnenie: 0;)
   

   V niektorých prípadoch je možné vynechať symbol "Star" (*):
   * .moja trieda a .moja trieda ekvivalenty
   * # myid. a #Myid. Ekvivalent

   Tagné selektory

   Každá značka HTML môže byť použitá ako volič, pre ktorý sa určujú pravidlá dizajnu štýlu. Napríklad:

   H1 (Farba: Červená, Text-ALIGN: CENTRUM;)

   Ak má niekoľko položiek spoločný štýl, potom zodpovedajúce selektory môžu byť uvedené v tabuľke štýlov cez čiarku. Napríklad:

   H1, H2, H3, H4 (Farba: Red; Text-ALIGN: CENTRUM;)

   Výber identifikátora

   HTML poskytuje možnosť priradiť jedinečný identifikátor na ľubovoľnú značku. Identifikátor je nastavený podľa atribútu id. Napríklad:

   ...

   Hodnota identifikátora by mala začať s latinským písmenom a môže obsahovať písmená (), čísla (), "pomlčky" (-) a "podčiarkovník" (_).

   Hodnoty všetkých atribútov id V dokumente HTML musí byť jedinečný. Ak sa nájde id S rovnakými hodnotami, potom sa tieto identifikátory ignorujú a kód webovej stránky sa stáva nedotknutý.

   V kóde CSS je volič identifikátora označený znakom "Grid" (#). Od identifikátora id Uplatňuje sa len na jedinečné prvky, názov značky pred označením "GRID" (#) zvyčajne vynechanie:

   Div # A1 (farba: zelená;)

   podobne

   # A1 (farba: zelená;)
   

   Odporúča sa používať id Nie pre dizajn štýlu prvku, ale prístup k nemu prostredníctvom skriptov alebo prechodu.

   Triedy voličov

   Pre štylizovaný dizajn sú najčastejšie používané voličy tried. Trieda štítku je nastavená atribútom. trieda. Napríklad:

   ...

   Názov triedy by mal začať latinským písmenom a môže obsahovať písmená (), čísla (), "pomlčky" (-) a "podčiarkovník" (_).

   Ak atribút id Používa sa na jedinečnú identifikáciu, potom pomocou atribútu trieda Značka sa týka konkrétnej skupiny.

   V kóde CSS je volič identifikátora indikovaný znakom "Bod" (.). Rôzne značky možno pripísať jednej triede. V tomto prípade názov značky pred označením "Bod" (.) OMIT:

   I.Green (farba: # 008000;) B.red (farba: # f00;) .Blue (farba: # 00F;)

   Pre značku môžete súčasne špecifikovať niekoľko tried tým, že im podávajte v atribúte trieda poštou. V tomto prípade sa na prvok aplikujú štýly každej z týchto tried.

   ...

   Ak niektoré z týchto tried obsahujú rovnaké vlastnosti štýlu, ale s rôznymi hodnotami sa použijú hodnoty štýlu triedy, ktoré sa nachádzajú v CSS Code.

   Voláče atribútov

   Existuje mnoho atraktorov atribútov, s ktorými môžete nastaviť dizajn štýlu pre značku v závislosti od jeho atribútov.

   
   H1 (farba: # 800000;) / * element H1, ktorý má atribút titulu * /
   Vstup (Hranica: 1px Solid # CSS; PADTING: 4PX 6PX; Šírka: 300px;)
   A (Text-dekorácia: Žiadne; Border-Dno: 1px Solid # 06C; Farba: # 06c;)
   Span (Display: Inline-Block; pozadia-obrázok: URL ("/ IMG / ICON_SPRITE.PNG");)
   A, A (pozadie: adresa URL ("pic.gif") dolného ľavého nijako opakovania; displej: inline-blok; šírka: 32px;)
   (Displej: Block; Float: vľavo, šírka: 280px;)
   

   Medzi názvom značky a štvorcového držiaka ([) by nemala byť medzera!

   
   

   Univerzálny volič, Výber tagov, Identifikátory, triedy a atribúty, ako aj pseudoclass sa týkajú jednoduchých voličov.

   Jednoduché selektory môžu byť spojené s určitými sekvenciami na základe vzťahu prvkov v strome webového dokumentu. Takéto štruktúry sa nazývajú kombinátormi.

   Kontextové selektory

   Jedným z najčastejšie používaných strojov je kontextový volič.

   Kontextové selektory alebo selektory potomkov určujú niekoľko prvkov, z ktorých jeden je vo vnútri druhého. V kontextovom voliči sú jednoduché selektory oddelené medzerou.

   Príklad

   1. Pushkin A.S.
      • "Strela"
      • "MISEL"
      • Dubrovsky
   2. Gogol n.v.
      • "Auditor"
      • "Taras Bulba"
      • "Mŕtve duše"
   3. Tolstónsko L.N.
      • "Vojna a mier"
      • "Anna Karenina"
      • "Vzkriesenie"

   Výsledok:

   1. Pushkin A.S.
      • "Strela"
      • "MISEL"
      • Dubrovsky
   2. Gogol n.v.
      • "Auditor"
      • "Taras Bulba"
      • "Mŕtve duše"
   3. Tolstónsko L.N.
      • "Vojna a mier"
      • "Anna Karenina"
      • "Vzkriesenie"

   Doplnkové selektory

   Selector pre deti definuje prvok, ktorý je priamo priamo. Vo voľbe dieťaťa sú jednoduché selektory oddelené znakom "More" (\u003e).

   Príklad

   1. Pushkin A.S.
      • "Strela"
      • "MISEL"
      • Dubrovsky
   2. Gogol n.v.
      • "Auditor"
      • "Taras Bulba"
      • "Mŕtve duše"
   3. Tolstónsko L.N.
      • "Vojna a mier"
      • "Anna Karenina"
      • "Vzkriesenie"

   Výsledok:

   1. Pushkin A.S.
      • "Strela"
      • "MISEL"
      • Dubrovsky
   2. Gogol n.v.
      • "Auditor"
      • "Taras Bulba"
      • "Mŕtve duše"
   3. Tolstónsko L.N.
      • "Vojna a mier"
      • "Anna Karenina"
      • "Vzkriesenie"

   Susedné selektory

   Priľahlý volič definuje znamienko plus (+), oddeľujúce dve sekvencie jednoduchých voličov. Prvky reprezentované týmito sekvenciami sú vo vnútri jedinej nádoby a sledujú druhú na prvom mieste, nie sú oddelené žiadnymi inými značkami.

   Príklad

   Reflexológia

   Výsledok:

   Reflexológia

   Súvisiace selektory

   Priľahlý volič definuje značku "tilda" (~), oddeľuje dve sekvencie jednoduchých voličov. Prvky reprezentované týmito sekvenciami sú vo vnútri jednej nádoby a postupujte podľa druhého pre prvú (voliteľnú priamo).

   Príklad

   ---

   Reflexológia

   "Všetky akty vedomého a nevedomého života v spôsobe pôvodu sú podstatou reflexov." Ich. Sechenov

   ---

   Reflexoterapia - liečba chorôb prostredníctvom reflexných kontrol. Úspešne aplikované v integrovaných programoch liečby alebo ako individuálna technika.

   Výsledok:

   Reflexológia

   "Všetky akty vedomého a nevedomého života v spôsobe pôvodu sú podstatou reflexov." Ich. Sechenov

   Reflexoterapia - liečba chorôb prostredníctvom reflexných kontrol. Úspešne aplikované v integrovaných programoch liečby alebo ako individuálna technika.

   
   
   

   CSS (kaskádové štýly) - Jazyk štýlových listov, ktoré vám umožňujú pripojiť štýl (napríklad fonty a farby) na štruktúrované dokumenty (napríklad HTML dokumenty a aplikácie XML). Zvyčajne CSS štýly sa používajú na vytvorenie a zmenu štýlu webových stránok a užívateľských rozhraní napísaných v jazykoch HTML a XHTML, ale môžu sa použiť aj na akýkoľvek druh dokumentu XML, vrátane XML, SVG a XUL. Rozdelenie štýlu prezentácie dokumentov z obsahu dokumentov, CSS zjednodušuje vytvorenie webových stránok a servisu stránok.

   CSS podporuje štýlové listy pre špecifické médiá, takže autori môžu prispôsobiť prezentáciu svojich dokumentov vizuálne prehliadače, sluchové zariadenia, tlačiarne, zariadenia Braillovho, vreckové zariadenia atď.

   Kaskádové štýlové listy opisujú pravidlá formátovania prvkov pomocou vlastností a prípustných hodnôt týchto vlastností. Pre každý prvok môžete použiť obmedzenú sadu vlastností, zostávajúce vlastnosti na ňu nemajú žiadny vplyv na to.

   Oznámenie štýlu sa skladá z dvoch častí: volič a reklamy. V HTML sú názvy prvkov necitlivé do registra, takže "H1" funguje rovnakým spôsobom ako "H1". Reklama sa skladá z dvoch častí: názov vlastníctva (napríklad farby) a hodnoty majetku (sivá). Volič Informuje prehliadač, ktorý položku je vo formáte, a v bloku reklamného bloku (kód v kučeravých zátvorkách), sú uvedené formátové príkazy - vlastnosti a ich hodnoty.

   Obr. 1. Oznámenie štruktúra

   Aj keď sa príklad snaží ovplyvniť iba pár vlastností potrebných na vykresľovanie dokumentu HTML, sám kvalifikuje ako štýl. V kombinácii s inými štýlmi (jedným základným znakom CSS je, že štýlové listy sú kombinované), pravidlo určí konečné predloženie dokumentu.

   Typy kaskádových štýlov a ich špecifickosť

   1. Typy štýlov

   1.1. Stôl externého štýlu

   Stôl externého štýlu Je to textový súbor s extension.css, ktorý obsahuje súbor CSS štýlov prvkov. Súbor je vytvorený v editore kódu, ako aj HTML Stránka. Vo vnútri súboru môže obsahovať iba štýly, bez HTML Markup. Vonkajší štýl sa pripája na webovú stránku pomocou značky umiestnené v sekcii . Takéto štýly pracujú pre všetky stránky stránok.

   Viacnásobné štýlové tabuľky môžu byť pripojené k každej webovej stránke pridaním niekoľkých značiek postupne. Zadaním priradenia atribútu mediálneho tagu. Rel \u003d "Styles" označuje typ odkazu (odkaz na list štýlu).

   Typ atribútu \u003d "Text / CSS" nie je povinný podľa štandardu HTML5, takže to nie je možné označiť. Ak chýba atribút, predvolená hodnota je typ \u003d "Text / CSS".

   1.2. Vnútorné štýly

   Vnútorné štýly Vložiť do časti HTML dokument a sú určené vo vnútri značky . Vnútorné štýly majú prednosť pred vonkajšími, ale horšími ako vstavanými štýlmi (špecifikovaný prostredníctvom atribútu štýlu).

   ...
   
   

   1.3. Vstavané štýly

   Keď píšeme vstavané štýlyKód CSS napíšeme na súbor HTML priamo vo vnútri značky prvku pomocou atribútu štýlu:

   Dbajte na tento text.

   Takéto štýly pôsobia len na prvok, pre ktorý sú špecifikované.

   1.4. Pravidlo @IMPORT.

   Pravidlo @IMPORT. Umožňuje nahrať listy externého štýlu. Na smernicu @IMPORT by sa mala nachádzať v tabuľke štýlov (externé alebo interné) pred všetkými ostatnými pravidlami:

   Pravidlo @IMPORT sa používa aj na pripojenie webových fontov:

   @IMPORT URL (https://fonts.googleappis.com/css?faily\u003dopen+sans&subset\u003dlatin.cyrillic);

   2. Typy voličov

   Voliči Predstavujú štruktúru webovej stránky. Pomocou ich pomoci sa vytvoria pravidlá na formátovanie prvkov webovej stránky. Voličom môžu byť prvky, ich triedy a identifikátory, ako aj pseudoklasy a pseudo-prvky.

   2.1. Univerzálny volič

   Zodpovedá akémukoľvek prvku HTML. Napríklad * (okraj: 0;) Resetujte externé zarážky pre všetky prvky stránok. Volič môže byť tiež použitý v kombinácii s pseudo-triedou alebo pseudo-prvok: *: Po (CSS štýly), *: Skontrolované (CSS štýly).

   2.2. Výber prvku

   Volátory prvkov vám umožňujú formátovať všetky položky tohto typu na všetkých stránkach lokality. Napríklad H1 (Font-Family: Lobster, Cursive;) Úloha Všeobecné formátovanie štýlu všetkých hlavičiek H1.

   2.3. Triedny volič

   Výbery tried vám umožňujú nastaviť štýly pre jeden alebo viac prvkov s rovnakým názvom triedy, umiestnené na rôznych miestach stránky alebo na rôznych stránkach lokality. Ak chcete napríklad vytvoriť hlavičkový záhlavie, musíte pridať atribút triedy s hodnotou titulnej značky

   A nastaviť štýl pre zadanú triedu. Štýly vytvorené pomocou triedy môžu byť aplikované na iné prvky, nie nevyhnutne tento typ.

   . LEADLINE (Text-transformácia: veľké písmená; Farba: Lightblue;)

   Ak má prvok niekoľko atribútov triedy, ich hodnoty sú kombinované s medzerami.

   Pokyny na používanie osobného počítača

   2.4. Výber identifikátora

   Výber identifikátora vám umožňuje formátovať jeden Špecifický prvok. Hodnota ID musí byť na jednej strane jedinečná len raz a mala by obsahovať aspoň jeden znak. Hodnota by nemala obsahovať medzery.

   Neexistujú žiadne iné obmedzenia, akú formu môže prijímať ID, najmä identifikátory môžu spočívať len z čísel, začať s číslami, začne s podčiarknutím, spočívajú len z interpunkčných značiek atď.

   Unikátny identifikátor prvku môže byť použitý na rôzne účely, najmä ako metóda referencie na špecifické časti dokumentu pomocou identifikátorov fragmentov, ako metóda pre zacielenie prvku pri vytváraní skriptov a ako spôsob, ako štylizovať špecifický prvok od CSS.

   #Sidebar (šírka: 300px; plavák: vľavo;)

   2.5. Odber potomku

   Výberové selektory POUŽÍVAŤ Štýly na prvky umiestnené vo vnútri kontajnerového prvku. Napríklad ul Li (Text-Transform: Veľké písmená;) - Vyberie všetky prvky Li, ktoré sú potomkovia všetkých prvkov ul.

   Ak potrebujete naformátovať potomkov z určitého prvku, tento prvok potrebuje nastaviť triedu stylistov:

   p.First a (farba: zelená;) - tento štýl sa bude vzťahovať na všetky odkazy, potomkov z odsekov s prvou triedou;

   p .First a (farba: zelená;) - ak pridáte priestor, potom odkazy nachádzajúce sa vnútri akúkoľvek triedu.

   Najprv A (Farba: Zelená;) - Tento štýl sa bude vzťahovať na ľubovoľný odkaz, ktorý sa nachádza vo vnútri iného prvku, ktorý označuje trieda.First.

   2.6. Volič dcéra

   Detský prvok je priamym potomkom jeho prvku, ktorý ho obsahuje. Jeden prvok môže mať niekoľko dcérskych spoločností a rodičovský prvok má len jeden prvok. Selector pre deti vám umožňuje aplikovať štýly len vtedy, ak detský prvok ihneď za rodičovským prvkom a neexistujú žiadne iné prvky medzi nimi, to znamená, že detský prvok už nie je investovaný.
   Napríklad, p\u003e silné - vyberie si všetky silné prvky, ktoré sú dcérskou spoločnosťou s ohľadom na prvok P.

   2.7. Prešetrovateľ

   Ošetrovateľské vzťahy vznikajú medzi prvkami, ktoré majú spoločný rodič. Volátory ošetrovateľských prvkov vám umožňujú vybrať prvky zo skupiny prvkov jednej úrovne.

   h1 + P - vyberie si všetky prvé odseky, ktoré beží priamo za akoukoľvek značkou

   bez ovplyvnenia zvyšku odsekov;

   h1 ~ P - vyberie si všetky odseky, ktoré sú ošetrované vo vzťahu k akejkoľvek hlavičke H1 a idú ihneď po ňom.

   2.8. Výber atribútu

   Výber atribútov Vyberte prvky na základe názvu atribútu alebo hodnoty atribútu:

   [Atribút] - Všetky položky obsahujúce zadaný atribút sú všetky položky, pre ktoré je nastavený atribút ALT;

   volič [Atribút] - Prvky tohto typu obsahujúceho zadaný atribút, IMG - iba obrázky, pre ktoré je špecifikovaný ALT Atribút;

   výber [Atribút \u003d "hodnota"] - Prvky tohto typu obsahujúce zadaný atribút so špecifickou hodnotou, IMG - Všetky obrázky, ktorých názov obsahuje slovo kvetu;

   výber [Atribút ~ \u003d "Hodnota"] - Prvky čiastočne obsahujúce túto hodnotu, napríklad, ak je určených niekoľko tried pre prvku prostredníctvom priestoru, P - odseky, ktorých názov je uvedený;

   volič [Atribút | \u003d "Hodnota"] - Prvky, zoznam hodnôt atribútu, ktorý začína so zadaným slovom, P - odseky, ktorých názov je menovaný alebo začína na funkcii;

   výber [Atribút ^ \u003d "Hodnota"] - Prvky, hodnota atribútu, ktorej začína od zadanej hodnoty, A - Všetky odkazy začínajúce na http: //;

   volič [ATTRY ATTRIBUTE $ \u003d "HODNOTA"] - prvky, hodnota atribútu, ktorej končí zadanou hodnotou, IMG - Všetky obrázky vo formáte PNG;

   výber [Atribút * \u003d "Hodnota"] - Prvky, hodnota atribútu, ktorý obsahuje zadané slovo kdekoľvek, a je všetky odkazy, ktorých názov obsahuje knihu.

   2.9. Volič pseudoclassa

   Pseudoclass sú triedy, ktoré nie sú v skutočnosti pripojené k značkám HTML. Umožňujú vám aplikovať pravidlá CSS na prvky pri udávaní udalosti alebo podliehajú konkrétnemu pravidlu. Pseudoklasy charakterizujú prvky s nasledujúcimi vlastnosťami:

   : Hover - Akýkoľvek prvok, ktorým sa vykonáva kurzor myši;

   : Zaostrenie je interaktívny prvok, ku ktorému sa prepínajú na klávesnicu alebo sa aktivujú pomocou myši;

   : Aktívny - prvok, ktorý bol aktivovaný užívateľom;

   : Platné - polia formulárov, ktorého obsah prešiel do prehliadača na dodržiavanie zadaného typu údajov;

   : neplatné - polia formulárov, ktorých obsah nezodpovedá zadanému typu údajov;

   : povolené - všetky aktívne oblasti foriem;

   : Zakázané - blokované polia formulára, t.j. v neaktívnom stave;

   : v rôznych oblastiach poľa, ktorých hodnoty sú v danom rozsahu;

   : Out-of-sortiment - formuláre, ktorých hodnoty nie sú zahrnuté v rozsahu set;

   : Lang () - prvky s textom v určenom jazyku;

   : nie (volič) - prvky, ktoré neobsahujú zadanú triedu voličov, identifikátora, názov alebo typ poľa formulára - nie ();

   : Cieľ - prvok so symbolom #, ku ktorému odkazy v dokumente;

   : Skontrolované - Vybrané (vybrané užívateľom) Form Prvky.

   2.10. Selector Konštrukčný pseudoclassov

   Štrukturálne pseudoklasy sú vybrané detskými prvkami v súlade s parametrom uvedeným v zátvorkách:

   : NTH-dieťa (nepárne) - nepárne dcérske prvky;

   : NTH-dieťa (dokonca) - kovania dcérskych spoločností;

   : NTH-dieťa (3N) - každý tretí prvok medzi dcérskymi spoločnosťami;

   : NTH-Dieťa (3N + 2) - Vyberie každý tretí prvok, vychádzajúci z druhého detského prvku (+2);

   : NTH-dieťa (n + 2) - vyberie všetky prvky od druhej;

   : Nth-dieťa (3) - vyberie tretí detský prvok;

   : NTH-last-dieťa () - V zozname detských prvkov vyberie prvok so špecifikovaným umiestnením, podobne ako: nth-dieťa (), ale od posledného, \u200b\u200bv opačnom smere;

   : Prvé dieťa - umožňuje vydať len prvý detský prvok značky;

   : Posledné dieťa - umožňuje formátovať posledný detský prvok značky;

   : iba dieťa - vyberie prvok, ktorý je jedinou dcérskou spoločnosťou;

   : prázdny - si vyberie prvky, ktoré nemajú žiadne dcérske spoločnosti;

   : root - vyberie prvku, ktorý je root v dokumente - HTML prvku.

   2.11. Výberové konštrukčné typy pseudoclass

   Uveďte konkrétny typ detskej značky:

   : NTH-of-Type () - vyberie prvky analógiou s: nth-dieťa (), zatiaľ čo len typ prvku zohľadňuje;

   : First-of-Type - vyberie prvý detský prvok tohto typu;

   : Posledný typ - vyberie posledný prvok tohto typu;

   : nTH-last-of-type () - vyberie prvku zadaného typu v zozname položiek v súlade so špecifikovaným umiestnením, počínam od konca;

   : iba typu - vyberie jediný prvok špecifikovaného typu medzi detskými prvkami rodičovského prvku.

   2.12. Volič pseudo-element

   Pseudo-prvky sa používajú na pridanie obsahu, ktorý je generovaný pomocou vlastnosti obsahu:

   : Prvý list - vyberie prvé písmeno každého odseku, platí len pre blokové prvky;

   : First-Line - vyberie prvý reťazec textu prvku, platí len na blokové prvky;

   : Predtým - vloží vytvorený obsah pred prvkom;

   : Po - po položke pridáva generovaný obsah.

   3. Kombinácia voličov

   Pre presnejší výber prvkov na formátovanie môžete použiť kombinácie voličov:

   iMG: NTH-of-Type (Dokonca) - vyberie všetky dokonalé obrázky, ktorého alternatívny text obsahuje slovo CSS.

   4. Skupinové selektory

   Rovnaký štýl môže byť súčasne aplikovať na niekoľko položiek. Ak to chcete urobiť, musíte uviesť potrebné selektory prostredníctvom čiarky na ľavej strane oznámenia:

   H1, H2, P, Span (Farba: paradajka; pozadie: biela;)

   5. dedičstvo a kaskáda

   Dedičstvo a kaskády sú dva základné pojmy v CSS, ktoré sú navzájom úzko spojené. Dedičstvo spočíva v tom, že prvky zdedia vlastnosti od svojho rodiča (položka, ktorá ich obsahuje). Kaskáda sa prejavuje v tom, ako sa na dokument týkajú rôznych typov štýlov, a ako sa vzájomne predefinujú protichodné pravidlá.

   5.1. Dedičstvo

   Dedičstvo Je to mechanizmus, ktorým sa určité vlastnosti prenášajú z predkov na svojich potomkov. Špecifikácia CSS poskytuje dedičstvo vlastností súvisiacich s obsahom strán, ako je farba, písmo, list-vzdialenosť, výška riadkov, štýlu zoznamu, text-zarovnanie, text-zarážka, text-transformácia, viditeľnosť, biely priestor a medzera slov. V mnohých prípadoch je vhodné, pretože nie je potrebné nastaviť rodinu veľkosti písma a fontu pre každú webovú stránku prvok.

   Vlastnosti súvisiace s formátovaním blokov nie sú zdedené. To je pozadie, hranice, displej, plavák a číry, výška a šírka, okraj, min-max-výšku a -width, obrys, prepad, polstrovanie, poloha, text-dekorácie, vertikálne-align a Z-index.

   Nútené dedičstvo

   Pomocou kľúčového slova zdedením, môžete prinútiť prvku, aby ste zdedili akúkoľvek hodnotu majetku rodičovského prvku. Pracuje aj pre tie vlastnosti, ktoré nie sú štandardne zdedené.

   CSS štýly sú nastavené a práca

   1) Štýly môžu byť zdedené z rodičovského prvku (zdedené vlastnosti alebo použitím dedičnej hodnoty);

   2) štýly umiestnené v štýle nižšie, zrušia štýly umiestnené v tabuľke vyššie;

   3) Štýly z rôznych zdrojov možno aplikovať na jeden prvok. Skontrolujte, ktoré štýly sa použijú, môžete v režime vývojára prehliadača. Pre toto, nad prvkom, musíte kliknúť na pravé tlačidlo myši a vybrať položku "Zobraziť kód" (alebo niečo podobné). Správny stĺpec uvádza všetky vlastnosti, ktoré sú špecifikované pre túto položku alebo sú zdedené z rodičovského prvku, ako aj štýlov, v ktorých sú zadané, a poradové číslo kódového reťazca.

   
   Obr. 2. Režim Developer v prehliadači Google Chrome

   4) Pri určovaní štýlu môžete použiť akúkoľvek kombináciu voličov - voličom prvku, pseudo-triedy prvku, triedy alebo identifikátora prvku.

   DIV (Hranica: 1px Solidth #eee;) #Wrap (šírka: 500px;) .box (plavák: vľavo;) .Clear (CLEAR: Obaja;)

   5.2. Kaskáda

   Kaskádový - Toto je mechanizmus, ktorý riadi konečný výsledok v situácii, keď sa na jeden prvok platia rôzne pravidlá CSS. Existujú tri kritériá, ktoré určujú postup na použitie vlastností - pravidlo! Dôležitá, špecifickosť a poradie, v ktorých sú pripojené štýly.

   RULE! DÔLEŽITÉ.

   Hmotnostné pravidlá je možné nastaviť pomocou kľúčového slova! Dôležité, ktoré sa pridáva ihneď po hodnote nehnuteľnosti, ako je napríklad rozpätie (hmotnosť písma: tučné! Dôležité;). Pravidlo musí byť umiestnené na konci reklamy pred zatváraním, bez priestoru. Takéto oznámenie bude mať prioritu nad všetkými ostatnými pravidlami. Toto pravidlo vám umožňuje zrušiť hodnotu majetku a nainštalovať novú pre skupinu položiek v prípade, keď nie je priamy prístup k súboru so štýlmi.

   Špecifickosť

   Pre každé pravidlo sa prehliadač vypočíta Špecifickosť voličaA ak má prvok protichodné oznámenia o majetku, pravidlo, ktoré má najväčšiu špecifickosť, sa berie do úvahy. Hodnota špecifickosti sa skladá zo štyroch častí: 0, 0, 0, 0. Špecifickosť voliča je definovaná takto:

   pre ID sa pridá 0, 1, 0, 0;
   trieda sa pridá 0, 0, 1, 0;
   pre každý prvok a pseudo-element, 0, 0, 0, 1 sa pridá;
   pre vstavaný štýl, pridaný priamo na prvku - 1, 0, 0, 0;
   univerzálny volič nemá špecifickosť.

   H1 (Farba: LightBlue;) / * Špecifickosť 0, 0, 0, 1 * / EM (Farba: striebro;) / * Špecificita 0, 0, 0, 1 * / H1 EM (Farba: Gold;) / * Špecifickosť: 0, 0, 0, 1 + 0, 0, 0, 1 \u003d 0, 0, 0, 2 * / Div # Main P.BOUT (farba: modrá;) / * Špecifickosť: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 \u003d 0, 1, 1, 2 * / .sidebar (farba: sivá;) / * Špecificita 0, 0, 1, 0 * / #Sidebar (farba: oranžová;) / * Špecificita 0, 1, 0, 0 * / Li # bočný panel (farba: Aqua;) / * Špecificita: 0, 0, 0, 1 + 0, 1, 0, 0 \u003d 0, 1, 0, 1 * /

   V dôsledku toho sa tieto pravidlá, ktorých špecifickosť sa aplikuje na prvku. Napríklad, ak sú na prvenstve dve špecifické hodnoty s hodnotami 0, 0, 0, 2 a 0, 1, 0, 1, potom vyhrá druhé pravidlo.

   Objednávka pripojených tabuliek

   Môžete vytvoriť viac externých štýlov a pripojiť ich na jednu webovú stránku. Ak sú splnené rôzne hodnoty vlastností jedného prvku v rôznych tabuľkách, potom sa na prvok použije pravidlo v tabuľke štýlov, ktorá je uvedená nižšie.

   CSS.- Kaskádové štýlové listy (kaskádové štýlové tabuľky) je prostriedkom, ktoré vám umožní nastaviť rôzne vizuálne vlastnosti značiek HTML.

   Oficiálna webová stránka vývojárov: http://www.w3.org/tr/css21/cover.html.

   CSS pozostáva z pravidiel. Pravidlá sú o sebe meno a hodnota. Sú oddelení hrubého čreva (názov pravidla: hodnota pravidla). Žiadne citácie v hodnotách pravidiel neviem! Príklad:

   Farba: červená; Pozadie: #cccccc;

   Ako sa však spojiť CSS z HTML? Ako predpísať štýly dizajnu dokumentov v HTML kód? Na to existujú 3 riešenia:

   • V rade.
   • Vkladanie (vloženie).
   • Prepojenie.

   Základom dokumentu - HTML a CSS je už aplikovaný na to. Je to v dokumente, že samotná CSS neznamená nič.

   Metóda intekcie CSS (inline)

   Použitý atribút štýlu. Môže byť dodaný v akomkoľvek vizuálne zobrazenom prvku. Pravidlá CSS sú zaznamenané v štýle (Názov pravidla: Hodnota pravidiel), niekoľko pravidiel sú oddelené bodkočiarkou (; je koniec pravidla v CSS):

   Normálny text

   "Farba: červená; pozadia: #cccccc"\u003e Tento odsek aplikuje štýl zapustenia.

   Metóda zapustenia (vloženie) CSS

   Používa sa špeciálny prvok "štýl", v rámci ktorého sa zaznamenávajú pravidlá CSS. Vnútri štýlu písať iba CSS jazyk. Príklad:

   < style type= "text/ css"> P (Farba: červená; pozadia: #cccccc) Uplatňuje štýl spôsobu pripojenia. Normálny text

   V tomto príklade sme predpísali pravidlo pre prvku "P" odsek. V 2. riadku sme predpísali volič (ku ktorému sa v pravidle CSS použije tagy). Samotné pravidlo sa zaznamenáva v kučeravých zátvorkách "()".

   Prvok "štýl" vložil len do prvku "hlavy".

   Spôsob viazania CSS (prepojenie)

   Ak chcete zapísať štýl dizajn zakaždým (NEPOUŽÍVAJTE DOKUMENTU), musíte napísať pravidlá CSS na jednom mieste a aplikovať ich na rôzne dokumenty (na neobmedzené množstvo).

   Aby ste to urobili, všetky pravidlá CSS sa uskutočňujú v samostatnom textovom súbore. Zvyčajne tento súbor poskytuje rozšírenie. CSS. A potom je okamžite jasné, že pravidlá štýlu sú napísané. NEPOUŽÍVAJTE NIEKTORÚ.

   Ako potom spojiť tento samostatný súbor CSS s naším dokumentom HTML? Na to použite nasledujúci kód v časti Hlava:

   Tí. Zadajte súbor so štýlom cez hypertextový odkaz. Prehliadač vloží súbor štýlu a uplatňuje pravidlá z neho na všetky dokumenty. V skutočnosti funguje rovnako ako "štýl" prvku, ale len v samostatnom súbore. A môžeme dodať odkaz na súbor CSS v akomkoľvek dokumente. Je to veľmi pohodlné, pretože Budem priamo so štýlmi v jednom súbore; Po stiahnutí tabuľky štýlu raz, keď prejdete na nasledujúce stránky, prehliadač sa nedostane za tento súbor, dostane ho z vyrovnávacej pamäte (napríklad dočasné ukladanie stiahnutých súborov). Uložím teda prevádzku a urýchľujem zobrazenie stránky.

   Pozor! Prvok "Link" nebude fungovať s jedným atribútom HREF. Pretože Tento hyperser sa používa na rôzne účely. Toto je servisný hypertextový odkaz, ktorý môže naznačovať rôzne typy súborov, ktoré môžu byť použité na rôzne účely pre vaše stránky. Ak chcete pochopiť prehliadač, že ide o tabuľku štýlov, použije sa atribút RED (rel \u003d "štýlSeet"). Označuje typ vzťahu stiahnutého dokumentu a nášho hlavného dokumentu. Teraz prehliadač chápe, že prevzatý dokument je štýlový list.

   CSS sa dešifruje ako "kaskádové štýlové listy", čo znamená "Cascade štýlové tabuľky". Používa sa na navrhovanie webových stránok. Ak je obsah obsiahnutý v HTML kód (čo prehliadač prehliadača), CSS určuje jeho dizajn (ako ho prehliadač zobrazí). Krása CSS je, že s pomocou jedného štýlu môžete okamžite usporiadať všetky rovnaké typy stránky alebo celej stránky (okamžite všetky odkazy, odseky, zoznamy). CSS-štýl, ktorý ste kedysi určia, ako by sa jedna alebo iná položka mala pozrieť, napríklad obrázky a okamžite zmenia svoj dizajn vo všetkých dokumentoch. Ak chcete zmeniť formátovanie textu v celom webu, stačí zmeniť kód CSS len raz.

   Hlavné prvky CSS.

   Keďže HTML sa skladá z tagov, atribútov a hodnôt a CSS pozostáva z vlastných prvkov. Podstatou CSS návrhov je možné vysvetliť nasledovne: "Uveďte, ktorý prvok stránky usporiadajte a uveďte, ako ho navrhnúť." Tu sú komponenty dizajnu CSS.

   • Volič. Identifikátor, ktorý označuje prehliadač, ku ktorému je položka aplikovať návrh. Vďaka nemu, prehliadač "chápe", že štýl je určený napríklad na zdobenie zoznamov alebo tabuliek.
   • Jednotka deklarácie štýlu. Písanie po voliči a leží v kučeravých zátvorkách. Nastavuje štýl prvku (jeho dizajn). Jednotka vyhlásenia štýlu sa skladá z dvoch častí.
   • Nehnuteľnosť. Analógový atribút v HTML. Určuje, ktoré špecifikácia vlastnosť sa zmení.
   • Hodnota. Nastaví nehnuteľnosť cez hrubé črevo a určuje, ako sa bude majetok zmeniť.

   Vlastnosti a hodnoty v deklarácii štýlov môže byť trochu, v takom prípade sú uvedené prostredníctvom bodkočiarky.

   Typy voličov

   V závislosti od toho, či sú vlastnosti, ktoré sú určené prvky stránky určené, voliči sú rôzne typy.

   • Univerzálny. Určuje pravidlá pre všetky prvky stránky, pre ktoré nie sú nainštalované iné pravidlá.
     Kód * (Veľkosť písma: 14px;) Nastavuje veľkosť písma 14 pixelov na všetky prvky dokumentu, pre ktoré iné pravidlá nie sú špecifikované pomocou iných voličov.
   • Tag. Tento typ voliča určuje pravidlá formátovania obsahu špecifickej značky HTML. Názov voliča sa zhoduje s menom deskriptora, píše len bez uhlových zátvoriek: p. \\ t, h1., ul.
     Napríklad kód h2. (Farba: červená;) Nastaví zelenú farbu textu pre všetky hlavičky druhej úrovne, to znamená, že obsah značiek
     .
   • Atributa. S touto skupinou voličov môžete určiť štýl dizajnu obsahu všetkých značiek, ktoré sú špecifikované špecifickým atribútom. Volátory je možné nastaviť presnejšie, čo označuje nielen názov atribútu, ale tiež priradený, ako aj názov jeho značky. Môže sa použiť na registráciu viac jednotlivca.
   • Trieda. Typ voličov v prípade, že musíte vytvoriť obsah rovnakých typov značiek inak. Napríklad, odkazy v spodnej časti stránky, ktoré chcete urobiť červenú, zatiaľ čo všetci ostatní by mali zostať modrou, pretože boli. Ak chcete použiť pravidlá triedy na prvku lokality, musíte zadať názov triedy v atribúte trieda Zodpovedajúce značky.

   Predpokladajme, že pomocou triedy krok. Samostatné prvky musia nastaviť zarážku doľava 15 pixelov.

   CSS kód bude takýto:

   KROKU (RIGHT-LEST: 15PX;)

   HTML kód, ktorý bude prvok pravidlu, bude nasledovný:

   Text s odsadeným

   • Identifikátor. V spojení s atribútom id HTML tag a používa sa, keď vlastnosti potrebujú nastaviť jeden prvok. Na rozdiel od voliča triedy pred názvom, ktorého je bod nastavený, píše cez "GRID":

   #Exclusive (farba: oranžová;)

   • Kontextový. V HTML sa niektoré značky často nachádzajú vo vnútri ostatných a kontextové selektory pomáhajú stanoviť pravidlá len pre takýto prípad. Používanie ich, napríklad, môžete formátovať položky vo vnútri číslovaných zoznamov alebo cestovného textu vo vnútri odsekov:

   P I (FINT-RODING: storočia;)

   Zostávajúce skupiny voličov sú založené na kombinácii uvedených typov, ako aj na princípe dedičstva, keď detský prvok berie vlastnosti rodiča.

   Kombinované a skupinové selektory sú v mnohých situáciách vhodné. Napríklad na nastavenie pravidiel triedy krok. Iba pre referencie, musíte zadať obidve selektory cez bod (najprv tag, potom trieda):

   A.Step (Margin-Left: 15px;)

   Ako pripojiť CSS na stránku HTML?

   Nútiť nástroje na vytváranie stránok, aby sa navzájom spolupracovali niekoľkými spôsobmi. Podľa spôsobu pridania štýlov sú rozdelené do nasledujúcich kategórií.

   Vstavané štýly

   Nastavte v dokumente priamo vo vnútri značky HTML pomocou atribútu Štýl.. Majú najvyššiu prioritu. To znamená, že ak je pre rovnaký prvok nastavený rôzny dizajn, potom sa uprednostňuje pravidlo, ktoré je napísané vo vnútri značky. Výber pre vstavaný štýl nie je potrebný, pretože spojenie štýlu a štítok je zrejmé - dizajn značky v ňom a je nastavený.

   Nasledujúci kód nastaví veľkosť a farbu písma na štítok

   Text zdobený vnútorným štýlom.

   Globálne štýly

   Nastaviť značku …

   Súvisiace štýly

   Najpohodlnejšie, pretože s ich pomocou môžete ľahko zariadiť celú stránku v jednom štýle. Súvisiaci štýl znamená, že všetky CSS dizajn je v samostatnom súbore s rozšírením. .css.

   Tento prístup je tiež vhodný, pretože oddeľuje pravidlá pre navrhovanie stránok z ich obsahu, CSS kód je možné ľahko zmeniť bez zasahovania do HTML súborov a princíp oddelenia kódu je veľmi dôležitá, najmä vo veľkých projektoch.

   Ak chcete priradiť pravidlá z súboru CSS pomocou stránky HTML, použije sa značka do kontajnera a jeho atribúty.

   Tu je reťazec spájajúci pravidlá zo súboru mystyle.css. S HTML Stránkou:

   rel \u003d "stjesheet" Určuje, že štítok sa vzťahuje na súbor tabuľky štýlov, href \u003d "mysyle.css" Určuje svoju adresu. Pravidlá adresovania sú rovnaké ako v konvenčných odkazoch - cesta môže byť absolútna, relatívna atď.

   Importované štýly

   S pomocou tímu @IMPORTŠtýly môžete pridať zo súboru CSS do aktuálnej tabuľky. Toto môže byť potrebné napríklad, ak chcete doplniť individuálny návrh dokumentu špecifikovaného globálnymi štýlmi, univerzálnymi pravidlami zo samostatného súboru. S vloženými štýlmi nie je možné použiť metódu.

   Kód pod dovozom dokumentu dokumentu dokumentu any.css.ktorý je v priečinku s upraviteľným dokumentom HTML:

   @IMPORT URL (ANY.CSS);

   Príkaz je predpísaný reťazcom pod otvorom otvárania