Týka sa to pracovných verzií súborov pomocou HTML, CSS a GSS

Je povolené použiť akýkoľvek nástroj na minimalizáciu kompilácie alebo zahmlenia kódu za predpokladu, že sa zachová celková kvalita kódu.

Vynechajte názov protokolu (http:, https:) v odkazoch na obrázky alebo iné mediálne zdroje, súbory štýlov alebo skripty, samozrejme, ak sú tieto súbory dostupné cez oba protokoly.

Neodporúčané:
Odporúčané:
Neodporúča sa: .example ( background: url(http://www.google.com/images/example); )
Odporúčané: .example ( background: url(//www.google.com/images/example); )

Nepoužívajte tabulátory ani nemiešajte tabulátory s medzerami.

Celý kód musí byť napísaný malými písmenami: Platí to pre názvy prvkov, názvy atribútov, hodnoty atribútov (okrem textu/CDATA), selektory, vlastnosti a ich hodnoty (okrem textu).

Medzery na konci riadkov sú voliteľné a komplikujú použitie rozdielu.

Uistite sa, že váš editor používa kódovanie UTF-8 bez značky poradia bajtov (BOM).

Špecifikujte kódovanie v HTML šablónach a dokumentoch pomocou . Pre css súbory vynechajte kódovanie: štandardne je pre ne nastavené UTF-8.

(Viac o kódovaní a o tom, ako ich používať, sa dozviete na tomto odkaze: Znakové sady a kódovania v XHTML, HTML CSS.)

Pomocou komentárov vysvetlite svoj kód: čo robí, čo robí a prečo sa používa zvolené riešenie.

(Tento bod je voliteľný, pretože nemá zmysel očakávať, že kód bude vždy dobre zdokumentovaný. Užitočnosť komentovania závisí od zložitosti projektu a môže sa líšiť v prípade kódu HTML a CSS.)

Označte úlohy pomocou kľúčového slova TODO. Nepoužívajte iné bežne používané formáty, ako napríklad @@ .

Kontakty (používateľské meno alebo zoznam adries) vložte do zátvoriek: TODO(kontakt) .

Úlohu opíšte za dvojbodkou, napríklad: TODO: Úloha.

Odporúčané: (# TODO(Ivan Ivanov): Vyrovnať sa so zarovnaním #) Test
Odporúčané:

• uhorky
• Paradajky

(Odporúča sa používať HTML s typom obsahu text/html. Nepoužívajte XHTML, pretože application/xhtml+xml má slabú podporu prehliadača a obmedzuje možnosti optimalizácie.)

Použite platný HTML kód, pokiaľ vám použitie neumožňuje dosiahnuť veľkosť súboru potrebnú pre požadovanú úroveň výkonu.

W3C HTML validator (anglicky) na kontrolu platnosti kódu.

Validita je dôležitá a merateľná kvalita kódu. Písanie platného HTML podporuje učenie sa technických požiadaviek a obmedzení a zabezpečuje správne používanie HTML.

Neodporúča sa: Začiarknite políčko Len skontrolovať
Odporúčané: Začiarknite políčko Len kontrola.

Použite prvky (niekedy nesprávne nazývané „tagy“) na zamýšľané účely: nadpisy pre nadpisy, p pre odseky, a pre odkazy atď.

To uľahčuje čítanie, úpravu a údržbu kódu.

Pokúste sa poskytnúť alternatívny obsah pre médiá, ako sú obrázky, videá alebo animácie definované pomocou plátna. Pre obrázky ide o zmysluplný alternatívny text (alt) a pre video a zvuk prepis textu a popis, ak je to možné.

Alternatívny obsah môže pomôcť ľuďom so zdravotným postihnutím. Napríklad pre slabozrakého človeka je ťažké pochopiť, čo je na obrázku, ak na to nie je nastavený @alt. Iní ľudia môžu mať problém porozumieť tomu, čo sa hovorí vo video alebo audio nahrávke.

(Ak je alt obrázka nadbytočný alebo sa len používa na dekoratívne účely na miestach, kde nemožno použiť CSS, použite prázdny alt text alt="" )

Udržujte štruktúru (označenie), vzhľad (štýly) a správanie (skripty) oddelené a snažte sa obmedziť interakcie medzi nimi na minimum.

Uistite sa, že dokumenty a šablóny obsahujú iba HTML a že HTML slúži len na definovanie štruktúry dokumentu. Presuňte všetok kód zodpovedný za dizajn do súborov štýlov a kód zodpovedný za správanie do skriptov.

Pokúste sa zredukovať ich priesečníky na minimum zahrnutím minimálneho počtu súborov štýlov a skriptov do svojich šablón.

Oddelenie štruktúry od prezentácie a správania pomáha zjednodušiť údržbu kódu. Zmena šablón a dokumentov HTML vždy trvá dlhšie ako zmena súborov štýlov alebo skriptov.

Neodporúča sa: HTML je na hovno HTML je na hovno

Niekde som o tom čítal, ale teraz je všetko jasné: HTML je úplný odpad!!1 Neverím, že na to, aby ste zmenili dizajn, musíte zakaždým všetko prerobiť.
Odporúčané: Môj prvý redizajn len pre CSS Môj nový dizajn CSS

Už som o tom čítal, ale nakoniec som to urobil sám: používam princíp oddelenia obáv a nestrkám dizajn do HTML

Aké cool!

Jedinou výnimkou z tohto pravidla sú znaky služby HTML (napr< и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).

Ak chcete zmenšiť veľkosť súboru a zlepšiť čitateľnosť kódu, môžete vynechať voliteľné značky. Špecifikácia HTML5 obsahuje zoznam voliteľných značiek.

(Môže chvíľu trvať, kým sa tento prístup stane široko používaným, pretože je veľmi odlišný od toho, čo sa zvyčajne učia weboví vývojári. Z hľadiska konzistencie, kódu a jednoduchosti je najlepšie vynechať všetky voliteľné značky a nie niektoré).

Neodporúča sa: Míňame bajty – míňame peniaze.
Odporúčané: Bajty sú peniaze!

Takže to

Atribút type nepoužívajte pri spájaní štýlov (okrem prípadov, keď používate niečo iné ako CSS) a skripty (okrem prípadov, keď používate niečo iné ako JavaScript).

Zadanie atribútu type v tomto prípade nie je potrebné, pretože HTML5 štandardne používa text/css (angličtinu) a text/javascript (angličtinu). Toto bude fungovať aj v starších prehliadačoch.

Neodporúčané:
Odporúčané:
Neodporúčané:
Odporúčané:

Bez ohľadu na štýly špecifikované pre prvok (CSS vám umožňuje zmeniť správanie prvku pomocou vlastnosti display), zabaľte každý prvok bloku alebo tabuľky na nový riadok.

Taktiež odsadzujte všetky prvky vnorené do prvku bloku alebo tabuľky.

(Ak máte problém s medzerami medzi prvkami zoznamu, môžete umiestniť všetky prvky li na jeden riadok. V tomto prípade sa odporúča, aby Lint namiesto chyby vydal varovanie.

• Máša
• Glasha
• Cheburash

Okrem prípadov, keď sa vyžaduje kód závislý od prehliadača, alebo chýb validátora, použite platný kód CSS.

Na overenie kódu použite nástroje ako W3C CSS Validator.

Validita je dôležitá a merateľná kvalita kódu. Zápis platného CSS pomáha eliminovať nadbytočný kód a zaisťuje správne používanie šablón štýlov...

Namiesto použitia kódov alebo opisu vzhľadu prvku skúste vyjadriť význam jeho vytvorenia v názve triedy alebo identifikátora, prípadne mu dajte názov šablóny...

Názvy zástupných znakov sú jednoducho variantné názvy prvkov, ktoré nemajú žiadny špeciálny účel alebo sú na nerozoznanie od svojich súrodencov. Zvyčajne sú potrební ako „pomocníci“.

Používanie funkčných názvov alebo názvov šablón znižuje potrebu zbytočných zmien dokumentu alebo šablón.

Zastarané: /* Zastarané: bezvýznamné */ #yee-1901 () /* Zastarané: popis vzhľadu */ .button-green() .clear()
Odporúčané: /* Odporúčané: presné a k veci */ #galéria () #prihlásenie () .video () /* Odporúčané: názov šablóny */ .aux () .alt ()

Pokúste sa sformulovať, čo presne by mal tento prvok robiť, pričom buďte čo najstručnejší.

Toto použitie tried a identifikátorov prispieva k tomu, že kód je ľahšie pochopiteľný a efektívnejší.

Ak to nie je absolútne nevyhnutné (napríklad pri pomocných triedach), nepoužívajte názvy prvkov s názvami tried alebo identifikátormi.

CSS ponúka mnoho rôznych skrátených tvarov (napríklad font ), ktoré sa odporúčajú používať všade, kde je to možné, aj keď je zadaná iba jedna z hodnôt.

Použitie skráteného zápisu vlastností je užitočné pre väčšiu efektivitu a lepšie pochopenie vášho kódu.

Neodporúča sa: /* Neodporúča sa */ border-top-style: none; font-family: palatino, georgia, serif; veľkosť písma: 100 %; výška riadku: 1,6; polstrovanie-dno: 2em; polstrovanie-vľavo: 1em; padding-right: 1em; vrchná výplň: 0;
Odporúčané: /* Odporúčané */ border-top: 0; písmo: 100%/1,6 palatino, georgia, serif; výplň: 0 1em 2em;

Neuvádzajte jednotky pre nulové hodnoty, pokiaľ na to nie je dôvod.

V hodnotách medzi -1 a 1 nevkladajte 0 do celočíselnej časti.

Nepoužívajte úvodzovky ("", "") s url() .

Trojmiestny hexadecimálny zápis farieb je kratší a zaberá menej miesta.

Vo veľkých projektoch, ako aj v kóde, ktorý sa bude používať v iných projektoch alebo na iných lokalitách, použite prefixy (ako priestory názvov) pre identifikátory a názvy tried. Používajte krátke, jedinečné názvy, za ktorými nasleduje spojovník.

Používanie priestorov názvov pomáha predchádzať konfliktom mien a môže zjednodušiť údržbu vašej lokality. Napríklad pri hľadaní a výmene.

Na spájanie slov a skratiek v selektoroch nepoužívajte nič iné ako spojovník, aby ste zlepšili čitateľnosť a ľahšie porozumenie kódu.

Neodporúča sa: /* Neodporúča sa: slová „demo“ a „image“ nie sú oddelené */ .demoimage () /* Neodporúča sa: namiesto spojovníka sa používa podčiarknutie */ .error_status ()
Odporúčané: /* Odporúčané */ #video-id().ads-sample()

Môže byť lákavé bojovať proti rozdielom v prehliadači pomocou filtrov CSS, hackov alebo iných riešení. Všetky tieto prístupy by sa mali považovať len za poslednú možnosť, ak chcete efektívnu a ľahko udržiavateľnú kódovú základňu. Jednoducho povedané, povolenie hackov a detekcie prehliadača poškodí projekt z dlhodobého hľadiska, pretože to znamená, že projekt sa uberá cestou najmenšieho odporu. Čo uľahčuje používanie hackov a umožňuje ich čoraz častejšie používanie, čo bude mať za následok ich príliš časté používanie.

Definujte deklarácie v abecednom poradí, aby ste zaistili konzistentný kód, s ktorým sa ľahko pracuje.

Pri triedení ignorujte predpony prehliadača. Navyše, ak sa pre jednu vlastnosť používa niekoľko predpôn prehliadača, musia byť tiež zoradené (napríklad -moz by malo byť pred --webkit)

Vždy odsadzujte akýkoľvek obsah bloku, ako sú pravidlá v pravidlách alebo deklaráciách, aby ste zobrazili hierarchiu a uľahčili pochopenie kódu.

Pre konzistenciu kódu a uľahčenie pridávania nových vlastností použite za každým vyhlásením bodkočiarku.

V deklaráciách vždy používajte jednu medzeru za dvojbodkou (ale nie pred), kvôli poradiu v kóde.

Začnite každý selektor alebo deklaráciu na novom riadku.

Medzi pravidlá vždy vložte zalomenie riadku.

Vždy, keď je to možné, skupinové pravidlá spoločne. Označte skupiny komentármi a oddeľte ich zalomením riadkov.

Ak upravujete kód, venujte niekoľko minút tomu, aby ste pochopili, ako je napísaný. Ak sú matematické operátory oddelené medzerami, urobte to isté. Ak sú komentáre ohraničené zátvorkami alebo pomlčkami, urobte to isté so svojimi komentármi.

Myšlienkou tejto príručky je vytvoriť spoločnú slovnú zásobu, ktorá vývojárom umožní zamerať sa na to, čo chcú vyjadriť, a nie ako.

Ponúkame jednotné pravidlá dizajnu, ktoré umožňujú písať kód v rovnakom štýle, ale dôležitý je aj štýl kódu, ktorý už bol v projekte použitý.

Ak sa váš kód veľmi líši od existujúceho kódu, môže narušiť rytmus čítačky a sťažiť čítanie. Skúste sa tomu vyhnúť.

Ďakujem všetkým, ktorí sa dočítali až sem.

Článok nie je úplne relevantný
Vo verzii 10.2 a vyššej pribudla možnosť premenovať stránku s pravidlami webu priamo v administračnom paneli enginu, pri priamej úprave textu pravidiel. Stránka s pravidlami webu však zostáva. Existuje a nachádza sa na ľubovoľnej webovej lokalite DLE na adrese http://my_site/rules.html
Ako vytlačiť všetku šťavu z tejto adresy - čítajte ďalej

Stránka pravidiel lokality je systémová statická stránka. Je spracovaná motorom a generovaná rovnakým spôsobom ako bežná statická stránka. Je jednoducho nemožné ho odstrániť - nezabezpečuje to vývojár motora. Aj keď sú samotné pravidlá stránky pri registrácii zakázané na zobrazenie, tak stránka s pravidlami stránky je vždy dostupná na http://my_site/rules.html Prvý vyhľadávač, ktorý ju tam nájde, začne zvracať a pľuvať na text a titul. niet sa čo čudovať. Koniec koncov, na všetkých stránkach DLE je to to isté.

Keď stránka s pravidlami lokality skončí na mape lokality, vyhľadávač ju považuje za „nevyžiadanú“ a nie je zahrnutá do indexu vyhľadávania, pretože pravidlá lokality sú takmer všade rovnaké. Stránka s pravidlami lokality v DLE má preto štandardne zakázané (uzavreté) indexovanie vyhľadávania v súbore ( riadok Disallow: /rules.html).

Môj osobný názor na stránku s pravidlami stránky a jej jedinečnosť je, že ide o atavizmus, ktorý odvádza pozornosť užívateľa pri registrácii. Pravidlá stránky sú rudimentárnym výplodom, ktorého zbytočnosť úspešne dokázali organizátori sociálnych sietí.

Nie, videl niekto nejaké impozantné alebo špeciálne pravidlá pri registrácii na Facebooku alebo Twitteri? Alebo možno sú na VKontakte a Odnoklassniki? Rovnaká vec!

A nejaké webové stránky s návštevníkmi 1000 unikátov -
začína písať svoje vlastné jedinečné pravidlá pre používateľov.
Pokiaľ ide o mňa, najlepšie pravidlá na stránke sú ich úplná absencia.
Ak je používateľ normálny a primeraný, už všetkému rozumie.

Nie je žiadnym tajomstvom, že blokovanie stránok a adresárov pred indexovaním vyhľadávania nie je všeliekom. Tak či onak, vyhľadávač skôr či neskôr „prežúva“ akúkoľvek stránku webu. Napríklad, vezmite rovnaký Yandex. Jeho vyhľadávacie roboty vypumpujú zo stránky úplne všetko, čo nájdu a až potom začnú triediť a rozmýšľať, či stránky vrátiť do vyhľadávania alebo nie. To je celkom zrejmé, napriek dojemným uisteniam spoločnosti Yandex, že on a jeho roboti nesťahujú zo stránky nepotrebný materiál. Napríklad, ak je webová stránka zatvorená z indexovania, Yandex uloží iba svoju adresu so značkou , alebo(kto to ako uzavrie).

Namiesto hrabania sa a blokovania „nevyžiadanej“ stránky s pravidlami webu z indexovania vyhľadávania je oveľa lepšie prerobiť ju na inú užitočnú vec a otvoriť k nej prístup vyhľadávačom – nech sa upokoja. Alebo aspoň napíšte svoje správanie na stránku a opäť povoľte vyhľadávačom prístup na stránku.

Robíme odvážny krok a poskytujeme vyhľadávacím nástrojom prístup na stránku pravidiel webu. Aby sme to urobili, v našom súbore nájdeme riadok Disallow: /rules.html a vymažeme ho nafik. Je to hotové! Teraz sa každý vyhľadávací robot bude môcť oficiálne dostať do otvorených „Pravidiel stránky“ a, samozrejme, povedať „Fe-e!“ a "Be-e!" Aby sme tomu zabránili, prerábame stránku „Pravidlá stránky“ – vložíme vlastný jedinečný text na akúkoľvek tému, obrázky a zmeníme názov (nadpis) stránky.

Úprava stránky s pravidlami lokality je dostupná v administračnom paneli nástroja DLE v časti „Zoznam všetkých sekcií“ - „Pravidlá na stránke“. Úprava stránky „Pravidlá lokality“ sa vykonáva ako pri akejkoľvek inej statickej stránke – v bežnom prevádzkovom režime vizuálneho textového editora. Jediným problémom môže byť písanie jedinečného textu a výber jedinečných obrázkov. O niečo vyššie sa nachádza špeciálne okno na zadanie názvu (nadpisu) pre aktualizovanú stránku. Takáto inovácia sa však objavila od verzie 10.2.

Ak chcete premenovať stránku pravidiel lokality
v starších modeloch motorov -
budete sa musieť pohrabať v jeho systémových súboroch.

Priame premenovanie samotnej stránky „Pravidlá lokality“ sa vykonáva v súbore adminpanel.lng, ktorý sa nachádza v priečinku language/Russian/adminpanel.lng. Súbor adminpanel.lng je systémový súbor motora DLE. Ak ho chcete upraviť, prejdite na svoj server (inak to nie je možné).

Otvorte súbor adminpanel.lng.
Hľadá sa reťazec
"rules_edit" => "Všeobecné pravidlá na stránke"
Slová „Všeobecné pravidlá na stránke“ meníme na náš nový názov. Poďme zavrieť. Ušetríme. (Môžete zmeniť iba azbuku, ktorá je medzi úvodzovkami. V opačnom prípade prestane fungovať úplne.)

Vymažte vyrovnávaciu pamäť motora a prehliadača. Po úprave a uložení súboru adminlogs.lng musíte vymazať vyrovnávaciu pamäť nástroja a vyrovnávaciu pamäť prehliadača, aby ste prinútili nástroj vygenerovať novú stránku s novým názvom a prehliadač ju stiahnuť. Ak to nepomôže a starý názov sa bude naďalej zobrazovať, musíte prejsť na panel správcu nástroja, upraviť a znova uložiť stránku „Pravidlá lokality“ s malým znakom. Napríklad do textu vložte bodku (potom môžete všetko opraviť späť). Takéto šikanovanie a zverstvá určite vyčistia mozog motora a servera a prinútia ich vygenerovať a zobraziť nové meno.

Myslieť nahlas. Zdá sa, že drahý celsoft číta tento blog. O niečo neskôr, po tejto publikácii, bolo v administračnom paneli motorovej verzie CMS DLE 10.2 možné premenovať stránku s pravidlami webu normálnym civilizovaným spôsobom, bez zdĺhavého hrabania sa v súboroch systémových skriptov. Veľká vďaka patrí vývojárom CMS DLE za ich prácu a pozornosť k problémom bežných ľudí.

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 na písanie užívateľsky prívetivého a profesionálneho kódu CSS

CSS-reset je určitý kus kódu, ktorý je napísaný na začiatku nášho súboru štýlov, 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étny 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: 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;

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.

Môžete vidieť ďalšie podrobnosti o tomto

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ť.

Používajte komentáre všade tam, kde by ste mali – skutočne pomáhajú organizovať kód, vďaka čomu je zrozumiteľnejší 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:

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

Vstup /* Problém IE6 */

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

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.
K tomu slúži farebná legenda – teda zoznam farieb, ktoré používame v našom súbore. Napríklad:

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

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útne umiestňuje objekt vzhľadom na stránku – bez ohľadu na to, kde sa v streame 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 sa vám bude hodiť, je, že ak nastavíte rodič (“obal”) nášho prvku na Pozícia:reálna, potom Pozícia:absolútna bude zarovnaná relatívne k ľavému hornému rohu rodiča. Túto vlastnosť teda môžete pridať podľa potreby. Jasne na obrázku:

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

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

Ak chcete prvku priradiť float, potom napíšte overflow: hidden k jeho rodičovi

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

Bez tejto vlastnosti môže prvok neatraktívne plynúť aj pri nastavovaní okrajov alebo okrajov.

Ak chcete, aby prvok nebol plávajúci, zadajte pod plávajúcim prvkom clear:both. Toto sa často používa namiesto pretečenia: skryté;

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

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

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

Tu je „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ív a štýlov.
Priečinok aktív obsahuje súbory, ktoré je možné stiahnuť z lokality, napríklad archívy alebo súbory PDF. Priečinok štýlov zase obsahuje priečinky css, obrázky a javascript.

• css – obsahuje všetky css súbory ako reset.css, layout.css a main.css
• obrázky - 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ší.

Nepovinná rada - Názvy tried a id štýlov je lepšie písať pri dodržaní stromovej štruktúry, aby bolo všetko jasné a vizuálne.

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 sú aplikované na 1,4 em
#blog-content’a a nakoniec bude veľkosť 28 pixelov.

Preto používajte pevné hodnoty.

Nové prehliadače tento problém nemajú, všetko sa týka viacerých 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

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; )

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 pravidiel bol zastaraný Tento atribút bol 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.

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.

RULES=NONE znamená, že neexistujú žiadne vnútorné hranice. RULES=NONE je predvolená hodnota, ak nepoužijete 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Á .

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:

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:

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:

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. Poďme si prejsť každý z nich. Všimnite si, že Netscape v súčasnosti nepozná PRAVIDLÁ.

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

Tabuľka sa vykresľuje takto:

Na zoskupenie podľa stĺpca použite značku a jej atribút SPAN. chce si na to trochu 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é. Označuje, koľko stĺpcov je v každej skupine Ak vynecháte SPAN, predpokladá sa, že skupina má iba jeden stĺpec. 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 skupinovom oznámení, ktoré vyžaduje. koncová značka bude prechádzať iba medzi skupinami.