v ktorej sú napísané pravidlá. On sám sa tiež registruje v

- Ak sa rozhodnete špecifikovať štýl priamo vnútorný obsah , potom by ste mali použiť parameter štýl = "..."

Správne pravidlá CSS a spôsob komentovania v CSS

Tu, samozrejme, môžete napísať obrovské množstvo teórie, ale nemáme tu referenčnú knihu. Všetko ukážem na jednoduchom príklade, hlavne si treba zapamätať, že existujú selektory, vlastnosti a hodnoty. Selektor je to, na čo sa pravidlá použijú, vlastnosť je typ pravidiel, ktoré použijeme, a hodnota, to je hodnota. (vlastnosť + hodnota = pravidlo)

Písanie vyzerá takto selektor (vlastnosť: hodnota;), ak potrebujete použiť niekoľko selektorov, prepíšeme ich čiarka ak niekoľko pravidiel cez bodkočiarka... Na konci vždy bodkočiarka.

Ak chcete komentovať akýkoľvek text v CSS, musíte text uzavrieť do úvodzoviek, ako je tento /* text */ a všetko 🙂

Ako bolo sľúbené, Príklady vizuálnych CSS :

p (
rodina fontov: Verdana;
pozadie: biele;
farba: červená;
}

Selektor je tu p, to znamená, že pre každý odsek so značkami platia tieto pravidlá. Aby ste nepísali navrch, odsek bude biely s červeným textom vo fonte Verdana. Aj keď je všeobecné pozadie žlté a písmo je iné.

• Návod

Napísal som chyby a rady z vlastnej skúsenosti. Ak sa vyskytnú chyby ako „zlé rady“, rád si vypočujem konštruktívnu kritiku. Príspevok je určený pre začiatočníkov, aby sa naučili HTML a CSS, ale možno budú mať záujem prečítať si tento materiál aj špecialisti.

1. W3C Validator

• štítok nie je uzavretý;
• zastarané znaky v odkazoch;
• Používa sa zastaraná značka.
• požadovaný atribút nie je špecifikovaný;
• a ďalšie.

2. Rozloženie vo formáte UTF-8

Súbor vo formáte UTF-8 vám umožňuje používať neštandardné znaky (napríklad symboly rôznych jazykov, znak meny a iné).

Tiež musíte prehliadačom povedať, že stránka sa otvára v kódovaní UTF-8. To sa deje pomocou značky nižšie:

3. Rovnaké id pre niekoľko prvkov

4. Škriatkovia

Teraz je tiež populárne používať fonty s ikonami namiesto spritov. Tie. namiesto písmen sa zobrazujú ikony ozubeného kolieska, smajlík a iné ikony. Príkladom sú ikony glyfík používané v službe Twitter Bootstrap.

Výhodou fontov oproti sprite je zachovanie kvality pri zmene veľkosti ikon a menšia veľkosť. Nevýhodou však je, že v ikone nemôžete použiť viac ako jednu farbu.

5. Veľa selektorov

/ * neodporúča sa, veľké vkladanie * / .strana .item .title a () / * možno skrátiť * / .strana .item a ()
Prehliadače čítajú CSS sprava doľava. Tie. vo vyššie uvedenom kóde sa najprv vyberú všetky odkazy, ktoré sú na stránke, a potom sa vyberú tie odkazy, ktoré sú vo vnútri prvku .item.

6. Štýly v HTML

Chyba v kóde

Chyba v kóde

7. Nesprávne názvy tried

Text správy

Text správy

Text správy

8. Zlomkové pixely

P (/ * nesprávne * / medzery medzi písmenami: 1,5 pixelov; / * správne * / medzery medzi písmenami: 0,005 em;)

9. Používanie tried namiesto id

#modal a (farba: modrá;) / * farbu nižšie nemožno prepísať, pretože #modal má väčšiu váhu ako triedy * / .modal-header a (farba: # 333;) / * v tomto prípade musíte pridať #modal * / #modal .modal-header a (farba: # 333;)
Tiež sa neodporúča používať!Dôležité, pretože jeho váha je vyššia ako atribút id a bolo by tiež ťažké ho prepísať.

10. Menu

Domov Novinky O spoločnosti

• Domov
• správy
• O spoločnosti

11. V obrázkoch chýba alt

12. Tagy

... Táto značka v podstate obsahuje názov stránky.

13. Prepis

/ * zle * / .tovar () .stranica () .zapros () / * správne * / .produkt () .stránka () .dopyt ()

14. Clearfix

Trieda .clearfix by mala byť špecifikovaná v rodičovskej značke, nie vedľa nej.

15. HTML je programovací jazyk

Predstavujeme preklad článku „Why CSS Grid is better than Bootstrap for creation layouts“ od Pera Haralda Borgena, publikovaného na ru.hexlet.io.

CSS Grid je nový spôsob vytvárania rozložení na webe. Prvýkrát je priamo v prehliadači dostupný plnohodnotný systém rozloženia, ktorý prináša množstvo výhod.

Tieto výhody sú obzvlášť dramatické, keď porovnáte CSS Grid s najpopulárnejším rámcom Bootstrap. Nielenže môžete vytvárať rozloženia, ktoré boli predtým nemožné bez JavaScriptu, ale váš kód sa bude ľahšie udržiavať a rozumieť.

Poďme sa pozrieť na tri hlavné dôvody, prečo si myslím, že CSS Grid je lepší ako Bootstrap.

Značenie bude jednoduchšie

Nahradením Bootstrapu mriežkou CSS bude váš HTML čistejší. Aj keď to nie je najdôležitejšia výhoda, je to pravdepodobne prvá, ktorú si všimnete.

Kvôli prehľadnosti som vytvoril fiktívne rozloženie webových stránok, aby bolo možné porovnať kód potrebný pre dve verzie. Tu:

Bootstrap

Začnime tým, že sa pozrieme na značky potrebné na vytvorenie tejto lokality v Bootstrape.

Tu by som chcel, aby ste venovali pozornosť nasledovnému:

1. Každý riadok musí mať samostatný štítok
   .
2. Na označenie rozloženia sa musia použiť názvy tried (col-xs-2).
3. Keď sa tento vzor skomplikuje, skomplikuje sa aj HTML.

Ak ide o responzívnu stránku, značky majú tendenciu vyzerať ešte horšie:

CSS mriežka

Teraz sa pozrime na spôsob, ako to isté implementovať do CSS Grid. Tu je HTML:

Mohol som použiť sémantické prvky, ale rozhodol som sa zostať pri div, aby bolo porovnanie s Bootstrap jasnejšie.

Hneď vidíte, že toto označenie je jednoduchšie. Škaredé názvy tried a ďalšie značky div pre každý riadok sú minulosťou. Je to len kontajner pre mriežku a polohu v nej.

A na rozdiel od Bootstrapu nebude toto označenie príliš zložité, pretože rozloženie stránky bude zložitejšie.

V príklade Bootstrap ste nemuseli pridať CSS, v CSS Grid to určite potrebujete. Presnejšie, musíte pridať toto:

Pre niekoho to môže byť argument v prospech Bootstrapu: pri vytváraní jednoduchej mriežky sa nemusíte starať o CSS – stačí vytvoriť rozloženie v HTML.

Ale ako uvidíte v nasledujúcom odseku, prepojenie medzi označením a rozložením je v skutočnosti zraniteľnosťou, pokiaľ ide o flexibilitu.

Oveľa väčšia flexibilita

Povedzme, že chcete zmeniť rozloženie na základe veľkosti obrazovky. Napríklad zdvihnite ponuku do horného riadku na prezeranie z mobilných zariadení.

Inými slovami - zmeňte rozloženie z tohto:

do tohto:

CSS mriežka

Pomocou CSS Grid je to veľmi jednoduché. Pridáme mediálny dotaz a zamiešame rôzne bloky, ako chceme:

Schopnosť vytvoriť rozloženie týmto spôsobom - bez obáv o to, ako je HTML napísané - sa nazýva nezávislosť na poradí zdroja a pre vývojárov a dizajnérov je to obrovská výhra.

CSS Grid vám umožňuje zmeniť HTML na to, čo by malo byť. Označenie obsahu, nie viditeľnosť, čo je pre CSS.

Bootstrap

Ak by sme chceli urobiť to isté v Bootstrape, museli by sme zmeniť HTML. Okrem hlavičky by sme potrebovali presunúť značku ponuky do horného riadku, pretože ponuka v druhom rade je rukojemníkom.

Urobiť to pomocou mediálneho dotazu nie je triviálna úloha. Dá sa to urobiť iba pomocou HTML a CSS a museli by ste sa pohrať s JavaScriptom.

Tento príklad ukazuje obrovskú výhodu CSS Grid, ktorú som sám zažil.

Už žiadne obmedzenie na 12 stĺpcov

Nie je to najväčší problém, ale veľakrát ma to naštvalo. Keďže mriežka Bootstrap je rozdelená na 12 stĺpcov, máte problémy, ak chcete päťstĺpcové rozloženie. Alebo sedem. Alebo deväť. Alebo z čísla, ktoré nie je dvanásť.

Toto nie je prípad CSS Grid. Môžete si vytvoriť vlastné rozloženie s ľubovoľným počtom stĺpcov. Tu je rozloženie so siedmimi stĺpcami.

To sa dosiahne nastavením hodnoty opakovania (7, 1fr) pre stĺpce šablóny mriežky, napríklad:

V Bootstrape môžu existovať nejaké šikovné spôsoby, ako to urobiť ... A som si vedomý toho, že Bootstrap 4 používa Flexbox, ktorý umožňuje túto flexibilitu, ale stále nebude v žiadnom prípade mimo beta.

Pred ukončením tohto článku sa samozrejme musíme porozprávať o podpore prehliadača. V čase písania tohto článku podporuje CSS Grid 75 % globálnej návštevnosti webu.

Ale skôr, než sa úplne vzdáte myšlienky používania CSS Grid, odporúčam vám vypočuť si, čo o tom hovorí Morten Rand-Hendriksen. Tvrdí, že CSS Grid je príležitosťou prehodnotiť spôsob, akým predstavujeme spätnú kompatibilitu:

„CSS Grid je značkovací modul, ktorý nám umožňuje zmeniť označenie dokumentu bez toho, aby sme zasahovali do poradia zdrojového kódu. Inými slovami, CSS Grid je úplne vizuálny nástroj a pri správnom použití nebude zasahovať do interných odkazov obsahu v dokumente. Z toho vyplýva jednoduchý, ale prekvapivý fakt: nedostatočná podpora CSS Grid v starom prehliadači by nemala ovplyvniť vnímanie návštevníka stránky, mala by len zmeniť toto vnímanie.

Inými slovami, akonáhle oddelíte obsah od viditeľnosti, všetci návštevníci ho uvidia, ale CSS Grid zlepší zážitok z prehliadania pre tých, ktorí ho podporujú lepším označením.

Záver

„Čím viac používam CSS Grid, tým viac som presvedčený, že pridanie abstrakcie na jeho vrch nie je výhodné. CSS Grid je značkovací rámec zabudovaný priamo do prehliadača.

Mám tento html:

Rozlúčka je taký sladký smútok!- Bill Rattleandrollspeer

A tento css (pridaný do spodnej časti stránky Site.css):

Fancify (veľkosť písma: 1,5 em; váha písma: 800; rodina písma: Consolas, "Segoe UI", Calibri, bezpätkové; štýl písma: kurzíva;)

Očakával by som teda, že citát ("Rozlúčka je taký sladký smútok!") bude napísaný kurzívou a iným typom písma ako názov citátu (Bill Rattleandrollspeer), keďže jeho tag span má priradenú triedu "fancify". Triedu by ste určite mali vidieť, pretože súbor, v ktorom sa nachádza, odkazuje na súbor rozloženia, ktorý používa súbor Site.css.

Akú začiatočnícku chybu teraz robím?

AKTUALIZOVAŤ

Myslel som si, že problém je v tom, že som pridal novú triedu do Site.css po tejto sekcii v tomto súbore:

Ale posunul som to vyššie a stále to nefunguje a nevidel som to cez F12 | Skontrolujte, či položka nemá zodpovedajúci štítok.

AKTUALIZÁCIA 2

Takto vychádza HTML:

Rozlúčka je taký sladký smútok!

A tu je moje css pravidlo v Site.css:

P span štítok .fancify (veľkosť písma: 1,5 em; váha písma: 800; rodina písma: Consolas, "Segoe UI", Calibri, bezpätkové; štýl písma: kurzíva; zobrazenie: vložené;)

Toto sa však neuznáva. Považujem to za vykonanie protokolu css / html a malo by to byť posudzované nejakým svetovým orgánom. Opäť som možno urobil nejakú hlúpu chybu.