Прегледајте ниво приоритета ЦСС стила

Цасцадинг Стиле Схеет (ЦСС) је, чини ми се, најједноставнији језик у поређењу са другим језицима везаним за веб, тако да није изненађујуће да многи људи који тек почињу да уче како да креирају веб сајт, најчешће науче овај језик и ХТМЛ прво.

У овом посту враћамо се на ЦСС основе. Прегледаћемо како се иницијално примењују ЦСС стилови, који ће се стилови примењивати, како се декларација стилова преписује, док други не.

Дакле, овај пост је посебно намењен почетницима који тек почињу да добијају изазове, вероватно још увек праве грешке и грешке приликом компајлирања своје прве стилске табеле. Дакле, хајде да почнемо.

Дефаулт Бровсер Стилес

Фирефок, Цхроме, Сафари, Опера и Интернет Екплорер тренутно су пет најбољих десктоп претраживача на тржишту. Ови претраживачи и сви остали претраживачи имају стандардно правило да би укључили уграђене подразумеване стилове за приказивање ХТМЛ елемената.

Дакле, када ставимо неке насумичне ХТМЛ елементе без икаквих стилова, видјет ћете да је још увијек исправно приказан у прегледнику.

Али, ако пажљиво прегледамо те елементе, сваки од претраживача има (мало) различите вредности за свој “Уобичајено” декларација која изазива недоследност у претраживачима, посебно у старом као што су ИЕ6, 7 и Фирефок 3.0.

На пример, као што можете видети из горње слике екрана, најновији Фирефок је приказао блоцккуоте по дефаулту са маргин: 16пк 40пк 16пк 40пк, док са друге стране Интернет Екплорер 7 ће приказати блоцккуоте са маргин: 0пк 40пк.

Да би се превазишле горе наведене недоследности, многи веб дизајнери и програмери преферирају да препишу све те стилове ЦСС Ресет. Ова ЦСС датотека обично садржи скоро сав ХТМЛ Тип селектора, дефинишући их једнаким правилима.

Доступно је много ЦСС ресетирања, али ево три најбоља фаворита:

• Нормализе.цсс
• ЦСС Ресет
• ХТМЛ5 Ресет стилесхеет

Селектори

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

Селектор у ЦСС-у је синтакса која се користи за циљање било ког дела ХТМЛ документа за стилове на које се примењује. Постоје три основна селектора о којима ћемо овде расправљати, јер ће они вероватно бити уобичајени селектори који се користе на вашем првом сајту. Ми ћемо покривати друге у будућим порукама.

Тип Селектор

Већ смо поменули горе, селектор типова ће циљати све специфициране ХТМЛ елементе на документу. На пример:

 п / ** декларација ** / 

ће одговарати свим п или параграф елемената и кори е е га на крају преписати подразумеване стилове који су дати у прегледницима.

Селектор класе

Када сте елементу додали класу или чак многе класе, можете циљати и те класе. Тхе Селектор класе почиње са дот параметар.

 .бок / ** декларација ** / 

Горњи исечак ће одговарати свим елементима који имају класу поља, или можемо да изаберемо прецизније.

 п.бок / ** декларација ** / 

Циљат ће само на п елемент који има бок класа.

Када користимо Класа селектор, све исте декларације стилова из оба Тип селектор и Подразумевани претраживач ће бити преписана.

ИД Селецтор

Тхе ИД је врло рестриктиван атрибут, можемо имати само један ид на елементу и мора бити јединствен.

 
Садржај
 

У случају да имамо ид у елементу можемо користити ид селецтор циљати тај елемент; селектор ид је дефинисан са хешом # параметар.

 #уникуеИД / ** декларација ** / 

Синце тхе ИД је јединствен, има најјачи ниво приоритета типа селектора. Дакле, када декларишемо стилове са ИД селектор ће на крају преписати сву исту декларацију из Класа, Тип селектора и Подразумевани претраживач стилес.

Ембеддинг тхе Стилес

Прошли смо кроз све основне селекторе и сада ћемо истражити како су ти стилови уграђени у ХТМЛ документ.

Ектернал Стилес

Екстерни стилови су стилови који се додају у засебну датотеку, обично у а .цсс који се затим повезују са ХТМЛ документом користећи да примените те стилове.

И сви стилови декларисани у фајловима ће се понашати као што смо споменули у Селектори горе наведеног, наиме, углавном ће преписати подразумевани претраживач стил, и преписати на другу декларацију стила у зависности од нивоа приоритета селектора.

Ова пракса је најпрепоручљивији начин за повезивање стилова, посебно када имате на хиљаде редова ЦСС кодова са много страница.

На тај начин, стилови ће такође бити лако управљиви, на пример, можете одвојити ЦСС датотеке у неколико датотека у зависности од његове специфичне улоге, као што је типограпхи.цсс да контролишете све стилове везане за типографију и тако даље.

Интернал Стилес

Унутрашњи стилови су стилови који су уграђени директно у ХТМЛ документ, углавном унутар таг.

Али ова пракса се не препоручује када ћете имати стотине линија стилова јер ће ваша ХТМЛ страница бити предугачка и стил ће утицати само тамо гдје су стилови уграђени. Када кажете десет страница, морат ћете копирати те стилове и уградити их на све странице и када требате промијенити стилове морате промијенити на десет различитих страница, што је очигледно заморан задатак..

На основу нивоа приоритета, унутрашњи стил је већи, тако да ће преписати спољашње стилове.

Инлине Стилес

Инлине стилови су стилови који су директно уграђени у ХТМЛ елемент.

 
Ово је параграф
 

Овај пример ће додати 5пк маргине елемента параграфа и такође ће преписати маргине које су декларисане за тај елемент иу интерним и екстерним стиловима.

Али немојте то чинити, јер ће ваша ознака бити затрпана свим тим декларацијама стилова; ако имате уграђену гомилу стилова, она ће чак постати ноћна мора да види и одржава све ваше ХТМЛ и стилове.

Додатна литература: Три начина за убацивање ЦСС - В3ЦСцхоолс.

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

Постоје неке околности када морамо да применимо одређени стил за елемент, али исти стил за тај елемент је такође декларисан негде другде у стилу стилова или у документу. На пример:

Имамо следећу ознаку за сидро са уграђеним стиловима

 Ово је веза 

Такође имамо посебан стил за тај сидрени таг у стилу.

 а бордер: 1пк солид # 333; бацкгроунд-цолор: # 555;  

У том примеру можемо да користимо !важно правило да примора прегледач да користи стилове у стилу табеле уместо оне у елементу.

 а бордер: 1пк солид # 333! бацкгроунд-цолор: # 555!  

Тхе !важно Правило ће показати да је овај стил највише важно и мора бити примењен над другим стилом чак и када је директно уграђен у елемент (Инлине Стилес).

Додатна литератураважне ЦСС декларације: Како и када их користити - Смасхинг Магазине.

Закључак

Прошли смо кроз читаву тему у овом чланку. Сада можемо да видимо да сваки селектор и начин на који уграђујемо стилове имају различите нивое приоритета у механизму претраживача. Као што сам већ поменуо, ови предмети су намењени за почетнике, тако да дефинитивно нису нешто ново за искусне веб дизајнере.

Али, мислим да ће се сваки веб дизајнер уопште сложити да је повратак на основе понекад неопходан да би се прегледало наше основно знање о предмету. У ствари, често нам недостају неке основне ствари, јер смо обично импресионирани страшним (и лудим) стварима као што је овај.

На крају, ја сам вам дао демо и изворну датотеку како бисте даље разматрали нашу дискусију у овом чланку.

• Демо
• Довнлоад Соурце

Надам се да ћете уживати у овом посту и ако нађете неку нетачност у њему или сам пропустио неке важне тачке, не устручавајте се да ме обавестите у одељку за коментаре испод.