Наследяването и групиране в CSS, разработка на уебсайтове и печалба

Здравейте, скъпи читатели! Днес, в рубриката на "Инструкция CSS» ключови понятия групиране и наследство в CSS. Кой отдавна са гледане на моите публикации, най-вероятно, вече пропити с идеята за необходимостта да се разберат основите на Cascading Style Sheets (Cascading Style Sheets). И с право, защото съвременната уебмастера трябва определено знаят основните понятия на алгоритъм и прилагане на основни познания по HTML и CSS на практика.

Наследяването и групиране в CSS, разработка на уебсайтове и печалба

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

Групирането на CSS

Вземете за пример дял етикети h1 h2 Н3. стилове, които са регистрирани в style.css файла. Така например, по следния начин:

Ако се вгледате внимателно, може да забележите, че таговете заглавните всички имат една обща компонент на CSS стилове, а именно стойността на шрифт семейство, което определя вида на шрифта. Можете да комбинирате селектори h1-H3 на тази основа и да ги направят общото правило по отношение на стойността на шрифт семейство:

И индивидуалните качества на всеки селектор, които не са общи, бр поотделно:

Това е групата в CSS. Тя позволява на множество записи за оптимизиране на дизайна стилове и предлага възможност да се опрости четене на документа. Мисля, че можем да се е занимавал с това, нищо сложно тук, обърнете се към концепцията за наследство.

Наследяването в CSS

Как съвършено ясно от самото име, наследство включва прехвърляне на правилата стил с елементи вътре в другата. Тези елементи се наричат ​​дете, и те ще наследят имотите стил на своите родители. Най-успешният пример, който може да бъде визуално опознаване на нюансите на CSS наследство е, по мое скромно мнение, HTML таблица, която е създадена с помощта на маса таг, TR, и ТД. Да предположим, сценография имоти за маркер на маса:

Сега да състави ясна таблица с 4 клетки:

На уеб страницата ще изглежда по следния начин:

За тази маса, със зелен цвят на текста, така че клетките са взели думата оттенък. Това се дължи на факта, че TD маркер дете елемент наследява свойствата на неговата маса главен маркер. Надявам се, че всичко е ясно тук. Но ние трябва да разберем, че не всички стилови свойства са обект на наследяване.

Така например, определя граничния рамката около масата, но не и около клетките, така че тези клетки не са подчертани в рамката на маса. Също така, не наследяват свойствата на фон. Въпреки това, в този случай, възниква въпросът: защо е цвета на фона на клетките, придобити цвят на пясък, който е включен в списъка на главен маркер стойностите на масата, ако тя не се предава по наследство?

Тук въпросът е, че свойствата на заден план като стойностите по подразбиране за TD етикет извършва прозрачно, т.е. прозрачност. По този начин, цвета на фона на майка елемент "вижда" през фона на дете елемент, който е прозрачен. Бих искала да отбележа, че по подразбиране стойност, в много случаи, за повечето CSS свойства. Ето защо, ако за някои свойства ясно опции, за да влязат в сила при условие, по подразбиране не са настроени.

Наследяването позволява да се определи стойността на времето, да ги създава за майка елемент най-високо ниво. Да приемем, че ние трябва да зададете цвят и шрифт на основния текст на уеб страница или блог сайт. Това е достатъчно, за да се определи най-подходящите стойности за избор на тяло и задачата ще бъде изпълнена:

Сега всяка точка на тази уеб страница, например, както следва:

Той ще бъде издаден съответен стил:

Заради наследството не е необходимо да се определят свойствата на абсолютно всеки елемент поотделно. Въпреки това, понякога е необходимо да се направят промените за определен контейнер, например, за някои от уникалната параграф, текстът на която трябва да бъде разпределена. В този случай, ние задайте параметрите за този елемент изрично:

Сега обикновен точка на страницата ще има следния вид:

Уникална раздел с отделен цвят стойност е формулирано по следния начин:

Точно така, като се използва, когато е необходимо, за клъстериране алгоритми и наследството, можете да оптимизирате използването на стилове, което го прави както лесен за четене. Споменах по-горе, че не всички CSS свойства се наследяват, така че аз ще ви дам един от страниците на официалния W3C сайта. където можете да се събере повече информация по този въпрос, ако желаете. Така страница «маса Пълното собственост":

Наследяването и групиране в CSS, разработка на уебсайтове и печалба

На екранната червена рамка, очертана от данните, върху които са наследени CSS свойства, и какво - не. И накрая, обясни по-подробно в колоните, които се представя информация тук:

«Име» - името на CSS свойства;
«Ценности» - всички възможни стойности за този имот;
«Първоначална стойност» - първоначалната стойност на имота, който се използва по подразбиране (споменах това)
«Важи за» - кои елементи се прилага правилото, което включва CSS собственост;
«Наследено?» - това правило се наследява или не.

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