Преглед на CSS стил приоритет ниво

Cascading Style Sheet (CSS) мисля, че е най-простият език в сравнение с други езици, свързани с уеб, така че не е изненадващо, че много хора, които току-що започват да се научават да създават уебсайт, най-напред ще научат този език.

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

Така че този пост е специално предназначен за начинаещи, които само започват да се справят с предизвикателствата, вероятно все още правят грешки и грешки при съставянето на първия си стилов лист. Така че, нека започнем.

Стандартни стилове на браузъра

Firefox, Chrome, Safari, Opera и Internet Explorer понастоящем са петте най-популярни браузъра на пазара. Тези браузъри и всички останали браузъри следват стандартно правило, което включва вградени стилове по подразбиране, за да визуализират HTML елементите.

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

Но, ако инспектираме тези елементи внимателно, всеки от тях има (леко) различни стойности за тях “по подразбиране” декларация, която води до несъгласуваност в браузърите, особено в старата като IE6, 7 и Firefox 3.0.

Например, както можете да видите от горната снимка на екрана, най-новият Firefox е предоставил блоков цитат по подразбиране с марж: 16px 40px 16px 40px, а от другата страна Internet Explorer 7 ще направи блоков цитат с марж: 0px 40px.

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

Има много налични CSS нулиране, но тук са трите ми любими:

• Normalize.css
• Нулиране на CSS
• HTML5 Reset stylesheet

селектори

Вероятно често четете този термин в блоговете за уеб дизайн / разработки, които сте посетили; селектори.

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

Тип селектор

Вече споменахме по-горе, че Селекторът на типове ще се насочи към всички определени HTML елементи на документа. Например:

 p / ** декларация ** / 

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

Избор на клас

Когато сте добавили клас или дори много класове към елемент, можете също да насочите тези класове. Най- Избор на клас започва с a точка параметър.

 .кутия / ** декларация ** / 

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

 p.box / ** декларация ** / 

Тя ще бъде насочена само към р елемент, който има кутия клас.

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

Селектор за идентификация

Най- документ за самоличност е много ограничителен атрибут, можем да имаме само един документ за самоличност върху елемент и трябва да е уникален.

 
съдържание
 

В случай, че имаме документ за самоличност в елемент можем да използваме Селектор за идентификация да се насочи към този елемент; селекторът за идентификация се дефинира с хеш # параметър.

 #uniqueID / ** изявление ** / 

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

Вграждане на стиловете

Дойдохме през всички основни селектори и сега ще разгледаме как тези стилове са вградени в HTML документ.

Външни стилове

Външните стилове са стиловете, които се добавят в отделен файл, обикновено в a .CSS файл, който след това е свързан с HTML документа, използвайки да приложите тези стилове.

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

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

По този начин стиловете също ще бъдат лесно управляеми, например, можете да разделите CSS файловете на няколко файла в зависимост от конкретната му роля, като например typography.css за контрол на всички стилове, свързани с типографията и т.н..

Вътрешни стилове

Вътрешните стилове са стиловете, които са вградени директно в HTML документ, обикновено вътре в свободен край.

Но тази практика не се препоръчва, когато имате стотици стилови линии, тъй като вашата HTML страница ще бъде твърде дълга и стилът ще засегне само къде са вградени стиловете. Когато кажете 10 страници, ще трябва да копирате тези стилове и да ги вградите във всички страници и когато трябва да промените стиловете, трябва да го промените на десет различни страници, което очевидно е досадна задача..

Въз основа на неговото приоритетно ниво, вътрешният стил е по-висок, така че той ще замени външните стилове.

Вградени стилове

Вградените стилове са стиловете, които са директно вградени в HTML елемента.

 
Това е параграф
 

Този пример по-горе ще добави 5px марж на елемента на абзаца и ще презапише маржовете, декларирани за този елемент, както във вътрешен, така и във външен стил..

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

Допълнителна информация: Три начина за вмъкване на CSS - W3CSchools.

Важното правило

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

Имаме следния маркер за закрепване с вградени стилове

 Това е връзка 

Също така имаме отделен стил за този анкерен етикет в стиловия лист.

 a border: 1px solid # 333; фон-цвят: # 555;  

В този пример можем да използваме !важно правило, за да принуди браузъра да използва стиловете в стиловия лист вместо този в елемента.

 a border: 1px solid # 333! background-color: # 555!  

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

Допълнителна информацияважни CSS декларации: как и кога да ги използваме - списанието Smashing.

заключение

Ние преминахме през целия предмет в тази статия. Сега можем да видим, че всеки селектор и начинът, по който вграждаме стиловете, имат различни нива на приоритет в механизма на браузъра. Както споменах по-рано, тези теми са предназначени за начинаещи нива, така че те определено не са нещо ново за опитни уеб дизайнери.

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

И накрая, предоставих демо и изходен файл, за да разгледате нашата дискусия в тази статия.

• Демонстрация
• Изтеглете Източник

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