CSS je jedna z nejdůležitějších změn, kterou webové stránky zaznamenaly v posledním desetiletí, a připravila cestu pro oddělení stylu a obsahu. XHTML moderně definuje sémantiku Co je sémantická značka a jak se změní internet navždy [Vysvětlená technologie] Co je sémantická značka a jak to změní strukturu Internet navždy [vysvětlení technologie] - význam a obsah webové stránky , zatímco CSS se zabývá prezentací. Zatímco většina z nás pohodlně píše trochu HTML, zdá se, že si myslíme, že CSS je nějaká černá magie. Doufám, že to změním s těmito 5 kojeneckými kroky, aby se z vás stal čaroděj CSS.

Tento článek je zaměřen na uživatele, kteří mají s CSS zatím jen velmi malé zkušenosti, ale doufejme, že je tu něco pro každého.

(1) Gramatika

Stejně jako jakýkoli jiný jazyk má CSS určitou gramatiku a může to vypadat trochu “počítačové programování” zpočátku, ale je to opravdu jen seznam věcí. Všechny CSS jsou psány takto:

VÝBĚR VLASTNOST: HODNOTA; HODNOTA MAJETKU; HODNOTA MAJETKU;

Jak již možná víte, CSS funguje tak, že aplikuje styl na vybraný prvek na webové stránce. Například, chcete-li styl, jak jsou zobrazeny všechny vaše odkazy, byste použít “A” jako selektor. Různé vlastnosti a hodnoty, které se naučíte se zkušenostmi, ale některé jsou snadné - věci jako BARVA, HRANICE, VELIKOST, VÝŠKA jsou všechny možné vlastnosti, jejichž hodnoty mohou být červené, 14pt, 150%, 1000px - je to opravdu tak, snadný. Podívejme se, jak bychom šli stylizovat všechny odkazy červeně:

a color: red;

Stejný blok CSS můžete také použít k provádění více než jednoho typu prvku současně čárkami:

a, h2, h3 barva: červená;

Tím se vytvoří nejen všechny odkazy, ale také všechny záhlaví h2 a h3, ve stejné červené barvě. Všimněte si, že všechny mohou mít různé velikosti, protože tento konkrétní kódový kód POUZE mění barvu.

(2) Výběr tříd a ID

Někdy však nechcete stylizovat VŠECHNY prvky stejným způsobem - a v takových případech můžete použít TŘÍDA nebo ID. Obecně se ID používá pro jednorázové prvky a nejčastěji se používá pro definování velkých bloků obsahu nebo jednotlivých speciálních tlačítek a podobně.

Můžete mít například velké DIV pro bloky HEADER, CONTENT a FOOTER na své stránce - takže definovat je jako ID by byl chytrý tah. Třídy na druhé straně se používají, pokud je pravděpodobné, že se prvky stylu budou opakovat po celé stránce. Možná budete chtít mít spoustu položek, které mají zaoblené rohy s pevným červeným rámečkem 2px - namísto toho, aby jste miliónkrát psali stejný styl inline, měli byste pro ni definovat třídu a místo toho k nim připojit třídu. Jak tedy definujete tyto ID a třídy?

 
SIDEBAR
Tím otevřete nový panel ve spodní části prohlížeče. Na levé straně je pohled XHTML, pěkně naformátovaný a skládací. Pokud umístíte kurzor myši na jakýkoli prvek, zvýrazní tento prvek na stránce a zobrazí vám kolem něj model CSS boxu (v následující lekci se o modelu boxu bavíme více). Klíčovým bodem je, že můžete také vybrat jakýkoli prvek a přesně vidět, který CSS na něj působí na pravé straně, a rozdělí ty, na které to selektoři způsobili. Vše přidané vložené se zobrazí pod ikonou “element.style” nadpis. Vyzkoušejte to nyní na této stránce. Všimněte si, že mnoho CSS uvedených napravo je často přeškrtnuto středovou čarou - to znamená, že jiný selektor pracující na tomto prvku má prioritu a má přednost před přeškrtnutým.
To je pro dnešek, ale neváhejte a zanechte komentáře, pokud si myslíte, že jsem vynechal některé základní klíčové začátečníky, nebo pokud máte nějaké konkrétní dotazy nebo problémy s CSS, zeptejte se v sekci technické podpory na našem webu. Příště bych rád rozšířil vaše znalosti CSS nad základní změny barev a velikostí.