Учебник CSS - CSS класове

Класовете са ключови селектори CSS, тъй като те дават почти неограничени възможности за прилагане на стилове за различните HTML-елементи. Клас Selector винаги започва с точка (.), След което се записва без име пространство клас. Като цяло следния синтаксис:







Името на класа - произволна дума не излезе със себе си, но има ограничение, тя може да се състои само от латинската азбука знаци (A-Z, A-Z), цифри (0-9), тирета (-) и долни черти (_). Освен това, името на класа не може да започва с цифра, или тире, последван от цифра. Например, класове .block-1. -block3. kartinkiBlock. _7Block_vnizu - правилно и 0,1-блок. -7block - не.

Добре, клас, създадохме стилове за него са регистрирани, но как да го прилага по отношение на елементите? Е, всичко е лесно. Маркерът е основен елемент е необходимо просто да се уточни клас = "име на класа" атрибут. където CLASS_NAME е името на класа, в който е измислил. И от същия клас може да се използва в произволен брой етикети. Това е всичко.

Както си спомняте, CSS не е чувствителна, но има едно "но". Името на класа трябва винаги да отговаря точно на това, което предписва атрибут клас. Например, ако имате клас .menuHeader, е необходимо да се напише "menuHeader" клас = маркер. и не на класа = "menuheader". клас = "MenuHeader" и т.н.

Е, това е време, за да се разгледа пример, но не се тревожете предварително толкова много стилове. В действителност, ако сте само малко да им се вгледате внимателно, аз съм сигурен, че всички наведнъж разбере.







Пример за използване на класове в CSS

Резултатът в браузъра

Комбинирайте CSS класове

В CSS е разрешено класове асоцииране, при което може да се използва за напълно различна цел: да се прилагат няколко класа на един елемент или елементи за намаляване на пробата.

За да приложите стил към елемент на няколко класа, тези класове трябва да преминете през пролука в атрибута клас. където, ако няколко класа представят един и същ имот, а след това той ще се използва, което е по-ниско в стиловете кодовата таблица.

Използването на множество CSS класове на един елемент

Резултатът в браузъра

Bold син текст.

Удебелен курсив текст.

Bold текст зелено.

Както можете да видите, в последния параграф на пример текст зелено като .green клас е по-ниска от .blue. Да вървим по-нататък.

Понякога е необходимо за свързване с друг клас или друг селектор клас (например, маркер), или и двете едновременно да намали обхвата на проби. За да направите това, всички селектори са посочени в ред, без интервал, в този случай, стиловете ще се прилагат само за онези елементи, които напълно отговарят на всички тези селектори. Общият синтаксис:

Примерни класове в асоциацията селектори CSS

Резултатът в браузъра

Забележка: по принцип, съчетаващ няколко класа на селектори, използвани в оформлението е доста рядко. но обединението на класовете с други селектори - много често. особено с таг селектора.

В този пример използваме същия клас (.Забележка) за различни маркери, както и с много различни стилове. Също така обърнете внимание на последния маркер . текстът е не само свойствата на тези класове са били използвани в него, но и за тях и общото имущество.

Тази задача ще бъде по-трудно, по-рано. Отначало го мислех да се изчака малко, но след това той реши, че е в класа си определят. В края на краищата, това е по-добре сега, отколкото подутини попълват по-късно, когато наистина предпочитам да създадете своя сайт. Особено, защото с всички свойства на CSS, които са необходими тук, вече сте изправени, добре, с изключение, че един може да не е запознат. И така