Vnorené pravidlá. Pravidlá pre vytváranie HTML dokumentov Pravidlá html všeobecné rodinné pravidlá 2

Dobrý deň, milí čitatelia blogu. Dnes navrhujem pokračovať v konverzácii, o ktorej sme začali vo vyššie uvedenom článku. Ešte skôr sme sa zoznámili s tým, čo sú kaskádové štýly, dozvedeli sme sa, čo znamenajú a oveľa viac.

Všetky materiály o kaskádových štýloch, ktoré už boli publikované na tomto blogu, nájdete v. Dnes si najprv povieme, ako môžete kombinovať a zoskupovať selektory a potom sa podrobne pozrieme na pravidlá, ktoré platia pre rovnaký prvok v Html kóde (Dôležité, počítanie selektorov a písanie pravidiel do atribútu style).

Kombinácie a zoskupovanie selektorov v CSS

Takže v predchádzajúcich článkoch sa nám podarilo zvážiť 7 typov:

Z týchto siedmich možných zobrazení môžete vytvárať kombinácie v CSS. Všetky kombinácie, ktoré vytvoríme, priamo súvisia (predkovia - potomkovia, rodičia - deti, bratia - sestry).

Prvý typ kombinácie je tzv kontextový selektor. Zohľadňuje vzťah prvkov HTML kódu podľa princípu „predok - potomok“:

Samostatné selektory v kombináciách sa píšu oddelené medzerou a musíte si ho prečítať sprava doľava. To. Pravidlá CSS sa budú vzťahovať iba na poslednú z tejto kombinácie (tú úplne vpravo) a všetko, čo je pred ňou, nám umožňuje špecifikovať presnejšiu aplikáciu (zacielenie) pre naše pravidlá (zvýraznenie).

Prvý príklad uvádza, že všetky prvky B (tučným písmom), ktoré majú prvky Div ako predkov, budú zafarbené na zeleno.

Vo vyššie uvedenom kóde bude iba podčiarknutý fragment zafarbený na zeleno, pretože medzi jeho predkami je Div a druhý fragment kódu, zvýraznený značkami B, zostane farbou, ktorá je preň predvolene vybratá, pretože kontajner Div už nie je medzi jeho predkami (iba P a Body):

Takéto kombinácie fungujú v akomkoľvek prehliadači.

Ďalší typ kombinácie by bol detský volič, ktorý je postavený na princípoch vzťahov medzi prvkami kódu typu „Rodič - Dieťa“:

Sú písané s oddelením známejšie (>):

Tento záznam bude prehliadač interpretovať nasledovne: pre , „rodič“ (najbližší predok), ktorého je kontajner Div, bude zvýraznený červenou farbou.

Vo vyššie uvedenom príklade budú iba načrtnuté odseky zafarbené červenou farbou, pretože sú uzavreté priamo v kontajneri Div, ktorý je ich rodičom (najbližším predkom). Ak upravíte vyššie uvedený príklad detského selektora tak, aby vyzeral takto:

Telo > p (farba:červená)

Potom sa zvýrazní červenou farbou iba posledný odsek, pretože... jeho rodičom je značka Body a prvé dva odseky zostanú vo svojej predvolenej farbe (Telo je ich rodič, ale nie rodič, ktorým je Div). Detské selektory nefungujú v prehliadači napr. 6.

Ako a prečo sú selektory zoskupené v kóde CSS

Posledná kombinácia je tzv susedné voliče a spĺňa princípy vzťahov medzi prvkami HTML kódu typu „Sestry - Brothers“. Ako oddeľovač môžu použiť „+“ alebo „~“:

Tento záznam znamená, že obsah prvku I (kurzívou) bude zafarbený na červeno iba vtedy, ak jeho najbližší sused vľavo (v kóde hore) je prvok B (tučné). Táto podmienka by bola splnená napríklad v tomto príklade:

Ak napíšete susedný selektor do kódu CSS takto:

H1 ~ p (farba:červená)

To znamená, že všetky odseky (P), ktoré majú susediaci prvok H1 (nadpis) umiestnený vyššie v kóde, budú zafarbené červenou farbou. Ide konkrétne o susedné prvky (vzťahy typu „Sestry – Bratia“). V nižšie uvedenom príklade bude daný selektor zodpovedať zakrúžkovaným odsekom:

Žiaľ, nie sú podporované ani kombinácie susedných selektorov v prehliadači Ie 6. V Ie 6 je podporovaný iba prvý typ kombinácie, ale v Ie 7 a vyššom sú podporované všetky ostatné. V iných prehliadačoch by nemali byť žiadne problémy.

Selektory v Css môžete aj zoskupiť. Napríklad, ak niektoré z nich používajú jedno alebo viac rovnakých pravidiel, potom ich možno spojiť do skupiny, aby sa znížilo množstvo Css kódu.

V príklade zobrazenom na snímke obrazovky sa to opakuje pre každý selektor hlavičky (h1-3), čo môže spôsobiť zložitosť (viacnásobnú prácu), ak chcete zmeniť hodnotu tejto vlastnosti. Preto druhá možnosť zoskupeného záznamu vyzerá trochu vhodnejšie.

Upozorňujeme, že pri zoskupovaní selektory sa píšu oddelené čiarkami. Ak existuje viac rovnakých pravidiel, úspora kódu bude výraznejšia. A tie pravidlá, ktoré boli jedinečné, sa stále musia zapisovať jednotlivo.

Priority vlastností CSS (s dôležitými a bez nich)

Teraz sa zamyslime nad tým, aký štýl prehliadač použije, ak pre tento prvok kódu HTML nie sú špecifikované žiadne štýly? A na to existuje zodpovedajúca špecifikácia, kde je toto všetko popísané.

Ako vidíte, teraz nastalo konečné oddelenie Html a Css. Tie. aj pre čistý HTML kód bude prehliadač stále používať predvolené vlastnosti štýlov. Takže tu sú predvolené vlastnosti: majú najnižšiu prioritu.

Vlastnosti, ktoré používateľ priradí v nastaveniach svojho prehliadača, majú vyššiu prioritu. Tieto štýly sa použijú na všetky dokumenty, ktoré si prezerá v tomto prehliadači.

Je pravda, že nie všetky prehliadače majú túto funkciu, ale aspoň Ie a Opera ju majú. Tie. Ak je to potrebné, používateľ bude môcť zahrnúť svoj vlastný súbor CSS ako zdroj označenia štýlu.

Napríklad v Ie, aby ste to urobili, musíte vybrať „Nástroje“ - „Možnosti internetu“ z ponuky vpravo hore a potom na prvej karte „Všeobecné“ kliknúť na spodné tlačidlo „Vzhľad“. V okne, ktoré sa otvorí, musíte začiarknuť políčko „Navrhnúť pomocou vlastného štýlu“ a pomocou tlačidla „Prehľadávať“ nájsť súbor značiek štýlu CSS, ktorý potrebujete v počítači:

Tie. používateľ má možnosť, aby každá stránka otvorená v prehliadači vyzerala v súlade s jeho požiadavkami popísanými v súbore CSS. To sa nazýva "vlastné štýly" a majú prednosť pred štýlmi, ktoré sú definované v predvolenej špecifikácii. Ale ešte väčšiu prednosť budú mať takzvané autorské štýly.

To znamená, že ak by som (vývojár stránky) chcel pri návrhu akéhokoľvek prvku kódu Html použiť iné štýly ako predvolené (nezabudnite, že sú popísané v špecifikácii), používateľ nebude môcť prepísať môj návrh pomocou jeho vlastný súbor CSS.

Bude používateľ nútený to akceptovať? Nie Má možnosť Zvýšte prioritu svojich vlastností CSS pridaním položky Dôležité na konci každého z nich. Toto slovo sa píše oddelené medzerou a pred ním je výkričník:

P (farba:červená !dôležité;)

Ak má používateľ rovnakú vlastnosť s Dôležitým vo svojom vlastnom súbore štýlu, ktorý si pripojil k prehliadaču, tak všetky odseky uvidí červenou farbou. Ale autor (vývojár) stránky by mohol pre túto vlastnosť použiť aj Dôležité. Kto potom vyhrá a koho priorita bude vyššia?

Rozhodli sme sa tak vlastné štýly s dôležitým bude mať v každom prípade vyššiu prioritu ako autorské štýly, či už s dôležitým alebo bez neho.

Zhrňme si vo forme zoznamu všetky prezentované informácie týkajúce sa priorít vlastností štýlu. Priorita sa zníži zhora nadol:

1. Vlastné s dôležitým
2. Autorské práva s dôležitým
3. Autorské práva
4. Vlastné
5. Štandardne akceptované štýly pre prvky Html v špecifikácii (keď autor ani používateľ nešpecifikovali nič iné)

Tie. bez Dôležité sú dôležitejšie autorské štýly a pri nich sú najdôležitejšie a prioritné používateľské štýly. Teraz sa poďme zaoberať autorskými tabuľkami, pretože to, čo používateľ robí, je nám neznáme a je zahalené temnotou.

Ako zvýšiť priority vlastností CSS v autorských štýloch

Teraz prejdeme k otázke kaskádové šablóny CSS štýlov. Pozrime sa na to na príklade, aby to bolo jasnejšie. Povedzme, že máme kúsok kódu s nasledujúcimi prvkami Html (odsek v kontajneri Div):

Najprv si napíšme nasledujúce vlastnosti:

P (farba:červená) .sbox (pozadie:#f0f0f0)

V dôsledku toho sa na odsek použije prvá z nich (keďže je tvorená značkou P), ako aj vlastnosť, ktorá nastavuje sivé pozadie pre prvok s triedou „sbox“, ktorú má tento odsek opäť:

Teraz pridajme do druhého selektora (triedy) ešte jednu vlastnosť, ktorá bude v konflikte s prvým riadkom (obe majú nastavené , ale používajú iné hodnoty):

P (farba:červená) .sbox (pozadie:#f0f0f0;farba:modrá)

To spôsobí, že farba textu odseku sa zmení na modrú namiesto červenej.

prečo? Pretože toto je presne spôsob, ako vyriešiť konflikt, keď rovnaký prvok kódu Html dostane niekoľko rovnakých pravidiel naraz, ale s rôznymi hodnotami a z rôznych miest v kóde CSS. Ak chcete určiť, ktoré pravidlo má vyššiu prioritu, musíte spočítať jeho selektory.

Okrem tohto seba selektory majú odstupňovanie podľa priorít. ID má najvyššiu prioritu. V tomto príklade bude farba textu modrá práve preto, že priorita Id (#out) bude vyššia ako priorita selektora tagu (p):

P (farba:červená) #out (farba:modrá)

Ďalej v rebríčku priorít sú selektory tried, pseudotried a atribútov. V nasledujúcom príklade sa značka (p) prehrá znova a farba textu odseku bude modrá, pretože konkuruje selektoru vyššej priority (triedy):

P (farba:červená) .sbox (farba:modrá)

No a najnižšiu prioritu (nepočítajúc univerzálnu *, ktorá má najnižšiu váhu a nerobí na takomto buttingu žiadne zmeny) sú selektory tagov a pseudoprvkov.

Div p (farba:červená) p (farba:modrá)

Akú farbu bude mať výsledný text odseku? Presne tak, je to červené, pretože... Táto vlastnosť má viac selektorov značiek (dva oproti jednému). Ach ako. Tie. Ako prvé sa berú do úvahy ID. Ak víťaz nie je určený, potom sa berú do úvahy triedy, pseudotriedy a atribúty. No ak sa tam nič nevyriešilo alebo sa také nenašli, tak sa berú do úvahy selektory tagov a pseudoprvkov.

Je ale dosť možné, že víťaz nevznikne a selektori súťažných tried budú mať v súčte rovnakú prednosť. Napríklad pre náš dlhotrvajúci odsek uzavretý v kontajneri Div:

Bolo by celkom možné napísať kúsok kódu CSS takto:

Div.box #out(farba:červená) #v p.sbox(farba:modrá)

A akú farbu by mal mať text odseku? Obe kombinácie presne vystihujú náš odsek. Prvý by sa mal, ako obvykle, čítať sprava doľava: tieto vlastnosti (farba: červená) aplikujte na prvok s ID #out, ktorý sa nachádza niekde vo vnútri (máte ho medzi „predkami“) kontajnera Div s trieda.box (div.box ). Úplne zodpovedá nášmu odseku.

Druhá kombinácia: aplikujte tieto vlastnosti (color:blue) na prvok odseku s triedou sbox (p.sbox), ktorý je vo vnútri akéhokoľvek prvku s ID #in. Opäť to úplne vystihuje náš odsek. Spočítajme selektory.

ID sa vyskytujú raz v oboch kombináciách a to isté možno povedať o triedach. Zostáva len spočítať selektory tagov, ale tie sa používajú rovnako veľakrát v oboch kombináciách (jedna). Prepadnutie.

Máme to rovnaké priority rovnaká vlastnosť s rôznymi hodnotami (farba textu červená alebo modrá). Ako prehliadač vyrieši túto dilemu?

Tu bude platiť pravidlo - kto je posledný, má pravdu. Preto v mojom príklade bude farba textu odseku modrá, pretože táto vlastnosť (color:blue) je v kóde umiestnená nižšie. Ak sú tieto pravidlá obrátené:

#in p.sbox(farba:modrá) div.box #out(farba:červená)

V dôsledku toho sa farba textu odseku zmení na červenú. Q.E.D. Do ľubovoľnej kombinácie môžete pridať napríklad ďalší selektor tagov a misky váh nakloníme v jeho prospech, aj keď nie je v kóde nižšie:

Telo #in p.sbox(farba:modrá) div.box #out(farba:červená)

V tomto prípade sa farba odseku zmení na modrú. Univerzálny volič „*“ nemá na výpočet priorít vôbec žiadny vplyv. Mimochodom, vyššie sme sa pozreli na spôsob, ako zvýšiť prioritu pravidiel CSS pridaním Dôležité. V našom príklade to môže vyzerať takto:

P (farba:zelená !dôležité) #v p.sbox(farba:modrá) div.box #out(farba:červená)

Akú farbu bude mať text odseku v tomto prípade? Zelená, samozrejme. A nemusíte ani nič počítať, pretože pridanie Dôležité vlastnosť štýlu rieši tento kontroverzný problém jednoznačne, bez ohľadu na to, kde sa v kóde nachádza a koľko selektorov má.

Dôležité však nie je jediný spôsob, ako bezpodmienečne zvýšiť prioritu nehnuteľnosti. Druhým spôsobom zvýšenia môže byť použitie štýlu vlastnosti v atribúte Style prvok HTML, ktorý potrebujete.

Tie. do toho istého dlhotrvajúceho P tagu pridajte atribút Style špecifikujúci akúkoľvek farbu:

To je všetko. Teraz, bez ohľadu na to, aké vlastnosti sú špecifikované pre tento prvok v externom súbore so štýlmi alebo vo vnútri značiek Html kódu štýlu, farba textu odseku bude žltá.

Nebude však môcť poraziť vlastnosti s dôležitým. Tie. v poslednom príklade, kde sme pridali pravidlo „p (color:green !dôležité)“, bude farba textu stále zelená, aj keď style="color:yellow".

V skutočnosti je priorita týchto dvoch pravidiel (s Dôležitým v externom súbore so štýlmi a v atribúte štýlu) rovnaká, čo znamená, že musíme pristúpiť k počítaniu selektorov. Môžu byť skutočne vo vnútri atribútu štýlu?

Áno, nemôže byť žiadny, čo znamená, že pravidlo napísané v atribúte style vždy prehrá s pravidlom s Dôležité len kvôli menšiemu počtu selektorov (nula bude menšia ako ľubovoľné číslo).

No a čo potom? bude dávať najvyššiu prioritu vlastnosti Css? Správne, bude to napísané v atribúte style a dokonca aj s Dôležité:

V tomto prípade bude farba odstavcového textu žltá a nebude možné to prerušiť čímkoľvek v autorových štýloch. Našli sme absolútny spôsob, ako nastaviť štýly. Môže ho prerušiť iba používateľ s vlastným súborom štýlu a na to určenou vlastnosťou Dôležité.

Skúsme teda skladať zoznam faktorov ovplyvňujúcich prioritu vlastnosti v štýloch autora v zostupnom poradí:

1. Zadanie vlastnosti v atribúte štýlu požadovanej značky spolu s dôležitým
2. Pridanie položky Dôležité do vlastnosti v externom súbore so štýlmi alebo v značke štýlu priamo v kóde Html
3. Na elemente je potrebné jednoducho nastaviť túto vlastnosť v atribúte style
4. Použitie väčšieho počtu ID pre danú vlastnosť
5. Použitie viacerých selektorov tried, pseudotried alebo atribútov
6. Použitie viacerých selektorov značiek a pseudoprvkov
7. Znížte umiestnenie vlastnosti v kóde CSS, pričom všetky ostatné veci sú rovnaké

V skutočnosti sa pravidlá v atribúte style používajú veľmi zriedka (predstavte si, aké ťažké by bolo v tomto prípade vykonať zmeny v celom kóde lokality, a nie v samostatnom súbore CSS).

Tento atribút sa používa hlavne vtedy, keď potrebujete len rýchlo niečo otestovať. Je tiež vhodné, ak vložíte svoj kód na Html stránky iných ľudí, ktoré majú svoj vlastný štýl a ktoré možno zdediť () pre vložené prvky.

Prečo a ako vložiť svoj kód na stránky iných ľudí? Možno to nepotrebujeme, ale Yandex a Google to robia, keď alebo na stránkach iných ľudí (našich stránkach).

Pridaním atribútu style ku všetkým prvkom kódu reklamného bloku s vlastnosťami v ňom uvedenými a pridaným Dôležitým sa už nemusíte obávať, že by sa kód reklamy akýmkoľvek spôsobom zmenil (hoci reklamy Yandex je možné stále meniť pomocou CSS a Dôležité, zrejme túto metódu nepoužili).

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu

Mohlo by vás zaujímať

Selektory značiek, tried, Id a univerzálne selektory, ako aj selektory atribútov v modernom CSS
Selektory pseudotried a pseudoprvkov v CSS (hover, first-child, first-line a iné), vzťahy medzi značkami HTML kódu
Štýl zoznamu (typ, obrázok, pozícia) – CSS pravidlá pre prispôsobenie vzhľadu zoznamov v Html kóde
Na čo slúži CSS, ako prepojiť kaskádové štýly s Html dokumentom a základná syntax tohto jazyka
CSS - čo to je, ako sú kaskádové štýly spojené s Html kódom pomocou štýlu a prepojenia
Jednotky rozmerov (pixely, Em a Ex) a pravidlá dedenia v CSS
Pozadie v CSS (farba, pozícia, obrázok, opakovanie, príloha) - všetko pre nastavenie farby pozadia alebo obrázka pozadia Html prvkov
Ako nájsť a odstrániť nepoužívané riadky štýlu (extra selektory) v súbore CSS vašej stránky Rôzne štýly pre interné a externé odkazy cez CSS

Pravidlá sú súčasťou nášho sveta a neustále riadia naše každodenné činy. Takmer v každej oblasti nášho života existujú pravidlá - pravidlá správania, pravidlá etikety, pravidlá prechodu cez ulicu - zoznam môže byť nekonečný.

aké sú pravidlá? Je to súbor pokynov, ktoré je potrebné dodržiavať alebo dodržiavať. Existuje veľa anglických slov, ktoré znamenajú pravidlá alebo sa na pravidlá odvolávajú:

• Upozornenia - varovanie
• Prikázania – príkaz, príkaz
• Pokyny - pokyny
• Varovania - varovanie
• Sprievodcovia
• Smernice
• Návod - návod
• Zákony - zákony
• Zásady – nastavenia
• Postupy
• Predpisy - pravidlá
• Varovania - varovania

Skrátený kód Google

Pravidlá nás ovplyvňujú každý deň a je ťažké sa im vyhnúť aj na tých najjednoduchších miestach, dokonca aj keď len kráčame po ulici, nie je možné prehliadnuť všetky nápisy rozmiestnené okolo nás, ktoré nás varujú a nasmerujú k pravidlám, ktoré treba dodržiavať. Najjednoduchší spôsob, ako vysvetliť pravidlo, je zapísať ho do knihy alebo umiestniť značky, ktoré každý vidí. Tu je niekoľko pravidiel uverejnených vo forme značiek, ktoré môžeme často vidieť na uliciach a na verejných miestach, známych ako výstražné značky.

• žiadna cyklistika – nemôžete jazdiť na bicykli
• zákaz vstupu – vstup je zakázaný
• zákaz korčuľovania - nemôžete korčuľovať na kolieskových korčuliach
• pozor na protiidúce bicykle – pozor na protiidúce bicykle
• Držte sa ďalej = neblokujte túto oblasť – neobsadzujte túto oblasť
• nemôžete tu naplniť svoje plynové plechovky - nemôžete naplniť plynové fľaše
• jed = nejedz to – jed = nemôžeš jesť
• zákaz fajčenia - zákaz fajčenia
• dajte si pozor na ľudí prechádzajúcich cez cestu - buďte opatrní, chodci
• zákaz parkovania – parkovanie je zakázané
• nevyhadzujte odpadky - nevyhadzujte odpadky
• zákaz vstupu detí – deti nie sú povolené
• zákaz fotografovania – fotografovanie je zakázané
• prosím upratať po svojom psovi – upratať po svojom psovi
• nebezpečenstvo smrti – nebezpečenstvo, elektrina vysokého napätia v blízkosti – nebezpečné! - nebezpečné, vysoké napätie
• nie je dovolené pľuvať - ​​nemôžete pľuvať

Ako vidíte, okolo nás je veľa pravidiel a my ich musíme dodržiavať, aj keď treba povedať, že niekedy ľudia pravidlá nedodržiavajú, porušujú pravidlá, alebo idú proti pravidlám. sú „chytení“ a potrestaní (sú potrestaní). Ak porušíte pravidlo, môžete byť nútený zaplatiť peniaze, t.j. pokuta/trest, alebo ešte horšie, vás môže prinútiť ísť na policajnú stanicu.

Porušil si niekedy pravidlá? Ľudia, ktorí vždy dodržiavajú pravidlá, sa nazývajú „dodržiavajúci zákony“ a ľudia, ktorí pravidlá porušujú, sa nazývajú „porušovatelia zákona“.

Na záver by sme vám chceli zaželať „buďte dobrí!“ , "dodržujte pravidlá!", "vyhnite sa problémom!"

Ako napísať správny CSS kód?

Bez znalosti základov sa nedá pohnúť vpred. Navyše, tieto základy musia byť trénované na podvedomej úrovni. Všetky pravidlá na písanie čistého a zrozumiteľného kódu musíte poznať naspamäť a všade ich aplikovať. Začnite hneď so svojím súčasným alebo nanajvýš ďalším projektom. Toto bude vaša CSS biblia

Nižšie nájdete 15 zlatých pravidiel pre písanie užívateľsky prívetivého a profesionálneho kódu CSS

1) Použite CSS-Reset

CSS-reset- ide o určitý kus kódu, ktorý je napísaný na začiatku nášho súboru štýlu, v ktorom sú všetky hodnoty resetované a všetky základné parametre sú nastavené pre všetky štýly, ktoré by sme s najväčšou pravdepodobnosťou museli napísať pre každé konkrétne id /trieda. To vám umožní skrátiť kód neskôr, ako aj vyhnúť sa rozdielom v zobrazení medzi prehliadačmi.

Tu je príklad CSS-Reset prevzatý z http://meyerweb.com/eric/tools/css/reset/index.html

/* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, citovať, code, del , dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul , li, fieldset, forma, label, legend, table, caption, tbody, tfoot, thead, tr, th, td ( margin: 0; padding: 0; border: 0; obrys: 0; font-size: 100%; vertical-align: baseline; background: transparent; ) body ( line-height: 1; ) ol, ul (list-style: none; ) blockquote, q (quote: none; ) blockquote:before, blockquote:after, q: before, q:after ( content: ""; content: none; ) /* nezabudnite definovať štýly zamerania! */:focus ( obrys: 0; ) /* nezabudnite nejako zvýrazniť vložky! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* tabuľky stále potrebujú "cellspacing="0"" v označení */ tabuľka ( border-collapse: Collapse; border-spacing : 0 ;)

2) Používajte skratky

Napríklad napísať dlhý

Horný okraj: 5 pixelov; border-right: 10px; border-bottom: 15px; border-left: 20px;

môžeme stručne napísať:

Orámovanie: 5px 10px 15px 20px;

to znamená v smere hodinových ručičiek začínajúc zhora.

Hlavne skrátený okraj, okraj, výplň, font a pozadie.

Viac o tom môžete vidieť

Farby sa však dajú zmenšiť takto:

Ak kód farby pozostáva z 3 opakujúcich sa číslic, potom si tieto tri číslice jednoducho zapíšte.
Napríklad: #FFFFFF možno zapísať ako #FFF alebo #990055 možno zapísať ako #905, ale #F091A4 nemožno skrátiť.

3) Použite komentáre

Používajte komentáre všade tam, kde by ste mali – skutočne pomáhajú organizovať kód a robia ho zrozumiteľnejším pre vás aj pre tých, ktorí s ním budú pracovať

Vyzerá to asi takto:

/* Váš komentár tu */

komentár:

a) Názov stránky štýlu - napíšte, kto je autorom kódu a kedy bol napísaný

b) Označte sekcie štýlu – týmto usporiadate celý kód do sekcií.
Napríklad:

/*******************************************************/ /* Bočný panel */ /** ************************************************/

c) Komentujte problémové oblasti. Napríklad tie, kde sa stránka môže líšiť v rôznych prehliadačoch. Napríklad:

Vstup /* Problém IE6 */

d) Píšte malé komentáre tým, s ktorými spolupracujete – napríklad, keď treba niečo zlepšiť.

4) Pridajte kvetinovú legendu

S malými CSS súbormi nie je ťažké sledovať všetky farby stránky.
Ale čo ak máme 5000 riadkov kódu? - nemôžete dovoliť, aby boli použité nesprávne farby.
Na tento účel slúži farebná legenda – teda zoznam farieb, ktoré v našom súbore používame. Napríklad:

/* /* svetlomodrá: #4595be /* tmavomodrá: #367595 /* červená pre odkazy: #9F1212 ****************************** *****/

5) Pamätajte si, čo sú Pozícia:reálna a Pozícia:absolútna

Väčšina začínajúcich dizajnérov rozloženia je zmätená týmito konceptmi, ale existuje pravidlo, ktoré vám umožňuje vyhnúť sa zmätku.

Pozícia: absolútna umiestňuje objekt vzhľadom na stránku - a nezáleží na tom, kde sa v prúde HTML nachádza. Predvolená hodnota je 0 vľavo a 0 hore.

Zvyčajne sa táto možnosť nepoužíva, pretože je nepohodlná a má obmedzené možnosti. Ale čo bude pre vás užitočné, je to, že ak nastavíte rodič (“obal”) nášho prvku na Pozícia: reálna, potom Pozícia: absolútna bude už zarovnaná. Vo vzťahu k ľavému hornému rohu rodiča. Túto vlastnosť teda môžete pridať podľa potreby. Jasne na obrázku:

6) Vyhnite sa používaniu hackov

Niekedy nás prehliadače ako IE6 a IE7 jednoducho nútia používať hacky. Khaki je okamžitá chyba pre validátor. Vložte ho teda do špeciálnych css súborov pre každý prehliadač.
Môžete vidieť špeciálne položky pre hacky pre každý prehliadač a ako ich umiestniť do samostatných súborov

7) V popisoch miest použite okraje

Nie je to niečo, čo si človek všimne veľmi často, ale pomáha vyhnúť sa problémom v rôznych prehliadačoch.

Myšlienka je takáto: namiesto použitia výplne na rodičovi používame okraj na podriadené prvky. Takže namiesto toho

#main-content ( padding-left: 10px )

#main-content ( ) #main-content #left-column (left margin: 10px)

Na použití výplne nie je nič zlé, ale skúsenosti ukazujú, že marža je lepšia

8) Používajte plaváky

Ak chcete prvku priradiť float, potom napíšte jeho rodičovi pretečenie:skryté

Ul ( pretečenie: skryté; ) ul li ( plávajúce: vľavo; )

Bez tejto vlastnosti môže prvok nepríťažlivo tiecť, problémy môžu nastať aj pri nastavovaní okrajov alebo okrajov.

Ak chcete, aby prvok nepretekal - špecifikujte jasné: oboje pod prúdnicovým prvkom. Toto sa často používa namiesto pretečenia: skryté;

9) Pridajte display:inline pre float elementy

Pomerne známy problém v IE6 so zdvojením okrajov na prvkoch float. To znamená, že ak potrebujeme 20px, tak musíme napísať 10px, pretože táto zarážka sa zdvojnásobí. IE6 už síce vymiera a veľa dizajnérov preň netrávi čas optimalizáciou stránky, predsa len malý kúsok kódu spríjemní zobrazenie v ňom. Takže, poďme

Displej: inline /* Problém IE6 */

pre prvok, na ktorý je aplikovaný plavák

10) Uľahčite si život so škriatkami

Sprite obrázky sú veľmi pohodlná vec. Poskytujú prehľad o grafike celej stránky a skracujú časy načítania.

Ak viete anglicky, tak tu

11) Štruktúra súborov stránok by mala byť jasná

Nájdite si čas na to, aby bola štruktúra stránky jasná. Položte všetko na police.
Napríklad:

Tu "Názov webovej stránky"- názov stránky, s ktorou pracujeme. Tento priečinok obsahuje súbory HTML pre lokalitu plus priečinky aktíva A štýlov.
V priečinku aktíva obsahujú súbory, ktoré je možné stiahnuť z lokality, napríklad archívy alebo súbory PDF. V priečinku štýlov obsahujú zasa css, obrázky, priečinky javascript.

• css- obsahuje všetky css súbory ako reset.css, layout.css a main.css
• snímky- všetky obrázky stránky. Tento priečinok možno tiež rozdeliť na sekcie.
• javascript- všetky súbory javascript.

Tento diagram je približný a môže byť zobrazený rôznymi spôsobmi. Myšlienkou je, že vám pomôže pracovať rýchlejšie a web bude prehľadnejší a prehľadnejší.

12) Rozbaľte štýly

Nepovinná rada – Názvy tried a ID štýlov je lepšie napísať stromovým spôsobom, aby bolo všetko jasné a vizuálne.

13) Namiesto relatívnej hodnoty používajte pixely

Všetko je celkom jednoduché - pixely načítajú kód menej, pretože dokument nemusí počítať percentá relatívnych hodnôt.

Problémom relatívnych veličín je prenos tejto relativity.
Aby to bolo jasné, vysvetlím to na príklade:

body ( font-size: 62.5%) znamená font-size: 1em, teda 10px.

Ak #blog-content potrebuje 14px, napíšte:

#blog-content (veľkosť písma: 1,4em; )

Ak teraz značka H3 v #blog-content potrebuje 20 pixelov, mohla by byť nastavená takto:

#blog-content ( font-size: 1.4em; ) #blog-content h3 ( font-size: 2.0em )

Všetko by bolo v poriadku, ale máme relativitu. A tieto 2,0 em sa vzťahuje na 1,4 em
#obsah blogu a nakoniec získame veľkosť 28 pixelov.

Preto používajte pevné hodnoty.

14) Obmedzte pseudotriedy na kotviace značky

Nové prehliadače tento problém nemajú, všetko je spôsobené množstvom starších prehliadačov, na čele s IE6.
Problém je v tom, že v starších prehliadačoch pseudotriedy (ako :hover) fungujú iba vtedy, keď sú aplikované na značku a, teda

#header ul li:hover (farba pozadia: #900)

nefunguje v IE6

Tento problém je vyriešený pomocou jQuery

15) Vyhnite sa problémom s voličmi

Ak je to možné, použite selektory

Namiesto toho použite napríklad

#main-content.main-header

#main-content h1

Buďte opatrní pri výbere skupín

Koniec koncov, relatívne hodnoty tu môžu hrať nesprávne, ak ich použijete

Ak je v tomto príklade všetko v poriadku,

Main-content div,.main-content p ( farba: #000; )

V tejto súvislosti buďte opatrní s relatívnymi hodnotami.

Main-content div,.main-content p ( line-height: 1.3em; )

A nakoniec

Ak chcete napísať úspešný kód, vyhnite sa neustálemu zabaľovaniu jednej veci do druhej a podobne.
Naučte sa značky h1, ul a p.
Kľúč k úspechu je jednoduchý – cvičiť, cvičiť, cvičiť

Veľa šťastia s tréningom)

» »

Zdieľanie je starostlivosť!

Atribút Čo robí robiť? Bol použitý na špecifikáciu zobrazenia vnútorných hraníc medzi riadkami a stĺpcami. Tento atribút bol zastaraný. Na úpravu okrajov tabuľky použite namiesto toho CSS.

Atribút pravidiel bol zastaraný Tento atribút je zastaraný a nemal by sa používať. Podpora prehliadača pre tento atribút je obmedzená a jeho použitie môže viesť k neočakávaným výsledkom. Namiesto toho použite na štýl tabuliek CSS.

Atribút RULES

RULES , atribút HTML 4.0, označuje, či by v tabuľke mali byť vnútorné hranice. Prejdeme si každú z hodnôt RULES a ukážeme, ako sa používajú. RULES a FRAME majú nepríjemný spôsob, ako si navzájom meniť predvolené hodnoty. Aby ste si zjednodušili život, tu je základné pravidlo: ak používate PRAVIDLÁ, použite aj FRAME a BORDER. Je jednoduchšie vyhnúť sa zmätku.

Hodnota NONE pre atribút RULES

RULES=NONE znamená, že neexistujú žiadne vnútorné hranice. RULES=NONE je predvolená hodnota, ak nepoužívate BORDER alebo ho nenastavíte na nulu, ale inak musí byť výslovne uvedené, že nemá žiadne vnútorné okraje.Všimnite si, že v súčasnosti Netscape nerozpoznáva PRAVIDLÁ .

názov	Jedlo
Starflower	miešať tofu
Miko	zeleninová ryžová polievka
Andy	hummus
Ping	francúzsky toast

Hodnota ALL pre atribút RULES

RULES=ALL znamená, že všetky vnútorné hranice by mali byť viditeľné. RULES=ALL sa zvyčajne používa v spojení s FRAME=VOID, takže existujú vonkajšie okraje, ale žiadne vnútorné okraje.

Keď sa použije na tabuľku, táto hodnota nám poskytne tento výsledok:

názov	Jedlo
Starflower	miešať tofu
Miko	zeleninová ryžová polievka
Andy	hummus
Ping	francúzsky toast

Hodnota COLS pre atribút RULES

COLS označuje, že medzi stĺpcami by mali byť hranice, ale nie medzi riadkami.

Keď sa použije na tabuľku, táto hodnota nám poskytne tento výsledok:

názov	Jedlo
Starflower	miešať tofu
Miko	zeleninová ryžová polievka
Andy	hummus
Ping	francúzsky toast

Hodnota ROWS pre atribút RULES

RULES=ROWS označuje, že medzi riadkami by mali byť hranice, ale nie medzi stĺpcami.

Keď sa použije na tabuľku, táto hodnota nám poskytne tento výsledok:

názov	Jedlo
Starflower	miešať tofu
Miko	zeleninová ryžová polievka
Andy	hummus
Ping	francúzsky toast

Hodnota GROUPS pre atribút RULES

RULES=GROUPS vám umožňuje vložiť hranice medzi skupiny buniek tabuľky. Existujú dva spôsoby, ako môžu byť bunky zoskupené: podľa riadka a podľa stĺpca. Pozrime sa na každý z nich. Všimnite si, že Netscape v súčasnosti nepozná PRAVIDLÁ.

Zoskupovanie podľa riadkov

Na zoskupenie podľa riadkov použite , , značky. označuje riadky hlavičky tabuľky, označuje hlavnú časť tabuľky a označuje spodné riadky. Napríklad tento kód vytvorí tabuľku s tromi skupinami. Hranice sa zobrazujú len medzi skupinami:

názov	Jedlo	cena
Starflower	miešať tofu	5.95
Miko	zeleninová ryžová polievka	4.95
Andy	hummus	3.95
Ping	francúzsky toast	5.95
Celkom		20.80

Tabuľka sa vykresľuje takto:

názov	Jedlo	cena
Starflower	miešať tofu	5.95
Miko	zeleninová ryžová polievka	4.95
Andy	hummus	3.95
Ping	francúzsky toast	5.95
Celkom		20.80

Zoskupenie podľa stĺpca

Na zoskupenie podľa stĺpca použite tag a jeho atribút SPAN. trvá to trochu si zvyknúť, pretože v skutočnosti neobchádza žiadne bunky tabuľky. Ide na začiatok kódu tabuľky, kde nastavuje pravidlá pre stĺpce tabuľky vrátane tých, ktoré sú zoskupené. až označuje, koľko stĺpcov je v každej skupine. Ak vynecháte SPAN, predpokladá sa, že skupina má iba jeden stĺpec. Takže napríklad nasledujúci kód hovorí, že prvý stĺpec je v skupine sám o sebe a tri nasledujúce sú spolu v skupine. Všimni si vyžaduje koncovú značku. Hranice budú prechádzať len medzi skupinami.

V súčasnosti väčšina prehliadačov zobrazuje stránky, ktoré nezávisle dešifrujú a opravujú chyby správcu webu. Pri písaní HTML si však treba dávať pozor – treba dodržiavať pravidlá platnosti, pretože správne rozloženie je dôležité pre optimalizáciu stránok a tiež pomôže nezblázniť sa z používateľov, ktorí otvoria vaše stránky v starších verziách prehliadačov.

Použite

Elementnachádza v prvom riadku akejkoľvek HTML stránky. Určuje verziu značkovacieho jazyka, ktorý sa používa na stránke. V súčasnosti sa odporúča používať doctype like- je univerzálny pre akúkoľvek verziu jazyka.

Použite správnu štruktúru dokumentu

Tagy , , musí byť vždy prítomný v kóde, vďaka tomu je stránka v súlade s normami a zabezpečuje, že sa bude zobrazovať správne.

Nesprávne

ahoj svet!

Správny

ahoj svet!

Správne definujte informácie o technickej stránke

Metaznačky a štýly by mali byť špecifikované v a nie niekde v tele stránky. Je lepšie zahrnúť skripty do spodnej časti stránky pred uzatváraciu značku. Výhodou tohto prístupu je, že pred zobrazením obsahu stránky prehliadač načíta iba štýly a skripty načíta ako posledné, čo používateľovi umožňuje rýchlejšie vidieť obsah stránky.

Nesprávne

Správny

Dodržiavajte štandardy označovania

Použite prvky podľa ich sémantiky

Skontrolujte platnosť html kódu

Pre obrázky použite alternatívny text

Obrázky musia vždy obsahovať atribút alt. Prehliadač sa spolieha na tento atribút pri poskytovaní kontextu pre obrázok. Atribút alt musí obsahovať text, ktorý sa zobrazí, ak sa obrázok nenačítal.

Nesprávne

Správny

Nepoužívajte štýly v značkách HTML

Vznikajú tak stránky, ktorých načítanie trvá príliš dlho a je ťažké ich udržiavať. Všetky štýly zapíšte do samostatného dokumentu CSS. Pokúste sa použiť atribút tag a style na minimum.

Píšte komentáre

Komentujte kód, ale nepreháňajte to. Komentáre, ktoré sú napísané stručne a jasne, môžu poslúžiť ako veľká pomôcka pre ostatných vývojárov, ale aj ako dôležitá pripomienka pre vás po určitom čase.

Príklad:

Použite vhodné názvy tried

Pomenujte triedy css v súlade s obsahom bloku, napríklad: hlavička - hlavička, päta - päta, menu - menu, obsah - obsah. Vďaka tomu bude kód oveľa prehľadnejší a ľahšie sa udržiava.

Zlý kód

• Bod ponuky 1


• Bod ponuky 2


• Položka menu 3

Dobrý kód

• Bod ponuky 1


• Bod ponuky 2


• Položka menu 3

Pravidlá pre písanie CSS

CSS má tiež pravidlá, ktoré môžete dodržiavať, aby bol váš kód jednoduchý, ľahko čitateľný a dobre organizovaný.

Obnovte predvolené štýly prehliadača

Môžu zasahovať do štýlov, ktoré skutočne chceme použiť. Súbor na resetovanie štandardných štýlov prehliadača si môžete stiahnuť tu - reset.css.

Použite stenografické vlastnosti a hodnoty

Zlý kód

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;

Dobrý kód

padding: 5px 10px 15px 20px;

Zadajte selektory a pravidlá na novom riadku

Zlý kód

Element (zobrazenie:blok;pozícia: relatívna;odsadenie:5px 10px 15px 20px;)

Dobrý kód

Element (
displej: blok;
poloha: relatívna;
padding: 5px 10px 15px 20px;
}

Zadajte nulové hodnoty bez jednotiek

Zlý kód

padding: 10px 0px;
ľavý okraj: 0 %;

Dobrý kód

padding: 10px 0;
ľavý okraj: 0;

Píšte komentáre

Hlavné bloky oddeľte komentármi, zlepší sa tým čitateľnosť kódu.

Príklad:

/*HLAVIČKA*/
hlavička(
}
/*KONIEC HEADER*/

/*HLAVNÁ*/
Hlavná(
}
/*HLAVNÝ KONIEC*/

/*Päta*/
päta(
}
/*KONIEC FOOTER*/

Skontrolujte platnosť kódu CSS

Záver

Tieto pokyny a pravidlá sú len základy, keďže jazyky HTML a CSS sa vyvíjajú rýchlejšie a vyvíjajú sa nové metódy písania správneho kódu. Dodržiavaním našich odporúčaní budete mať istotu, že váš kód je jednoduchý, ľahko čitateľný a optimalizovaný. Dostanete aj +100 karmy a vďaku od vývojárov, ktorí budú na stránke pracovať po vás.