Osobná stránka a debilníček

Používame správne názvoslovie pri CSS?

Viete, ako správne sa nazývajú rôzne definície v tabuľke štýlov? Ak nie tak by vám mohol pomôcť tento článok.

Pri jeho písaní som použil knihu od Petra Staníčka.

Na nasledujúcich príkladoch sa pokúsim vysvetliť správne názvoslovie jednotlivých definícií používaných pri CSS.

Začneme od základu a to od tabuľky štýlov, takzvanej stylesheets.

Do tabuľky štýlov budeme zapisovať pravidlá.
V každom pravidle sa najskôr uvedie pre aké prvky stránky má pravidlo platiť, a následne sa do zložených zátvoriek {} zapíše predpis štýlu. Tabuľku štýlov potom tvorí zoznam takýchto pravidiel.

Definícia CSS

V jazyku CSS sa definíciami štýlov pridelujú hodnoty jednotlivým vlastnostiam.
Tieto definície majú vždy tvar vlastnosť: hodnota (medzera je nepovinná) a vyjadrujú priradenie príslušnej hodnoty k tejto vlasnosti.

Definície sa môžu následne spájať do zoznamu definícií, v ktorom sa jednotlivé definície oddelujú ; (stredníkom).

Prvky pre ktoré má definícia platiť, popisujú selektory.
Selektorom môže byť názov prvku, napr. p, body, h1 atď., pravidlo sa potom vsťahuje na všetky prvky tohoto typu.

Napr. h1 { color: red;} definuje vlastnosť color pre všetky prvky h1.

Druhou možnosťou je prvok danej triedy class.
Zapisuje sa bodkou . za menom prvku, napr. h1.prvok
Takéto pravidlo sa vsťahuje na prvky, ktoré sú daného typu a navyše majú definovanú danú triedu.

Tretím z najpoužívanejších selektorov je prvok s daným pomenovaním id.
Zapisuje sa dvojkrížkom # za menom prvku, napr. h1#prvok.

Každý prvok na stránke možno pomenovať atribútom id, napr. <div id=„prvok“>.
Na stránke sa ale nesmú vyskytovať dva prvky s rovnakým id, toto pomenovanie je teda jednoznačné a bude platiť len pre jediný prvok na stránke.

h1 { color: red;}  /* názov prvku */
h1.prvok { border: 1px solid #000;} /* prvok danej triedy */
#prvok { color: blue;} /* názov prvku s daným pomenovaním */

Páči sa vám tento článok, zalinkujte ho:

««« Predchádzajúci text: Prechod na EasyBlog Následujúcí text: Eric Meyer o CSS »»»

Verzia pre tlač | 2 komentáre | 389x