Единици за измерение (пиксели, Em и Ex) и наследяване на CSS правила

Здравейте, скъпи читатели на блога KtoNaNovenkogo.ru. Днес ще продължим да говорим за каскадни таблици със стилове (можете да намерите материали по тази тема в справочника за CSS). Почти никой сайт в Интернет не може без тази технология, така че изучаването на езика за маркиране на стилове е също толкова необходимо, колкото изучаването на учебник по Html).

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

Стойности за правила в CSS - цветове, функционалности и размери

В последната статия говорихме за това какво е CSS и как да свързваме стилове с кода на Html (Style и Link). Днес ще продължим темата, която започнахме, и ще говорим за наследяване на стилове и задаване на размери на шрифта (пиксел, точка, процент и т.н.).

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

Стойностите за тези правила могат да бъдат всякакви думи (например ляво, дясно, центриране, оправдание и др.), Които са известни предварително и са посочени в таблицата от тази спецификация (вижте фигурата по-горе - колона „Стойности“ ) ... Стойностите могат да бъдат и прости числа, които нямат измерение (например в правилото "z-index") или обозначения на шестнадесетични цветови кодове (например # fff8dc).

Нека разгледаме по-отблизо задаване на цветове в CSS и как може да се приложи:

просто указвайки с думи името на един от 17-те цвята, за които са дефинирани тези думи (аква, черно, синьо, фуксия, сиво, зелено, вар, кестеняво, морско, маслинено, оранжево, лилаво, червено, сребро, тийл, бяло и жълто)
# 186EAE - шестнадесетични цветови кодове (за подробно описание вижте връзката точно по-горе)
# CA7 е стенографично шестнадесетично цветово представяне в CSS. Ако имаме три двойки еднакви числа (в шестнадесетичната система някои числа се записват с букви от А до F), например # CCAA77, тогава за съкращаване на записа всяка двойка може да бъде заменена с една едноцифрена - # CA7.
rgb (0, 148, 253) - задаване на цвета с помощта на така наречената функционалност, където числовите стойности и в трите канала са изброени в скоби, разделени със запетаи в съответствие с RGB палитрата (диапазонът на промяна е от 0 до 255)
rgb (0%, 50%, 98%) - все едно, но стойностите в каналите са дадени като процент

Може да се използва като стойности за CSS правила и т.нар функционери. Поразителен пример за функционалност е Url и url, затворени в скоби (images/navtabr.png). По този начин е много често да се задава фоново изображение в стилове:

Е, а също и в CSS като стойности много често се използват размери на шрифта и други. Ако си спомняте, в таг Font с атрибута Size те бяха зададени просто с числа от 1 до 7. И например размерите на изображенията в атрибутите Width и Height на тага Img бяха зададени просто от числа без обозначение на размера, въпреки че тези цифри означават пиксели.

Първоначално стилната маркировка е била предназначена за различни изходни устройства - не само за монитори, но и например за форматиране на информация, предназначена за печат. Следователно размерите на шрифтовете или, например, отстъпите са винаги посочени в CSS с мерни единици. Освен това синтаксисът предполага непрекъснато писане на числа и мерни единици (без добавяне на интервали между тях).

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

Абсолютни размери в CSS всички могат да се използват за един и същи печат. Сантиметрите (cm) и милиметрите (mm) са основните единици на метричната система, а инчовете (in) са основната единица, от която точките (pt) и щуките (pc) много често се използват при печат.

Инч (инч) е 25,4 милиметра (мм) и точка (pt) се формира чрез разделяне на един инч (инча) на 72 части. Така една точка (pt) ще бъде равна на около една трета от милиметъра (mm). Е, един връх (pc) има размер, равен на 12 точки (pt). Тук, мисля, всичко вече е ясно.

Пикселите, Em, Ex и процентите са относителни размери в CSS

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

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

Относителни размери в CSS може да се настрои, като се използват следните единици:

Следват по-сложни относителни единици за размера на шрифта, които се използват в CSS - Em и Ex. Първият е височината на шрифта по подразбиране, използван на компютъра на потребителя, а Ex е височината на главната буква "x" в шрифта по подразбиране. Вероятно малко неясно. Нека разгледаме по-отблизо това.

Много браузъри приемат Ex като половината от стойността на Em (напр. IE). Всеки шрифт има базова линия, има главни букви и някои специални малки букви, които се простират отвъд базовата линия (например "y"). Има и букви с диакритични знаци, например "e" и "y" на руски или някои умлаути и т.н. Следователно размер на шрифта (Em) дефинирани от разширителни елементи.

Е, Ex е, както казах, височината на голямата (малка) буква "x" (x) в латинското оформление. Ясно е, че в зависимост от съотношението на малките и големите букви в шрифта, тези стойности на Em и Ex могат да се отнасят помежду си по различни начини, а не просто като Ex = Em/2.

Единицата за относителни размери Ex се използва доста рядко в CSS, използва се предимно Em (с изключение на пикселите, които се използват още по-често за определяне на размера). Но има и друг начин да зададете относителни размери - лихва, тези. ще трябва да се изчисли спрямо нещо.

Не всички CSS правила могат да бъдат посочени с проценти. Дори в списъка на консорциума W3C това е подчертано в отделна колона:

Ако нищо не е написано в колоната „Проценти“ срещу правилото, тогава използването на проценти за това правило не е налично. За същите правила за стил, които имат право да използват процентни размери, тази колона ще обясни защо може да се използва.

Наследяване на CSS според спецификацията

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

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

И така, на страницата "свойства" таблицата с правила съдържа следните стойности:

колоната "Име" съдържа името на правилото,
в колоната "Стойности" - възможни стойности за нея,
в колоната "Начална стойност" - началната стойност (използвана по подразбиране),
в колоната „Отнася се за“ - за какво се отнася правилото,
в графата "Наследен?" - дали това правило се наследява или не.

Тук стигнахме концепцията за наследяване в CSS. Какво е? Първо, ако разгледаме горната таблица, ще видим, че за някои от правилата за стил наследяването се извършва (разрешено), а за другата част е забранено.

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

По този начин, ако в горната таблица срещу правилото, което ви интересува, в графата "Наследени?" е написано "Да", тогава съответно се допуска наследяване за него (например за цвят), а ако "Не", тогава наследството ще бъде забранено (например за фон).

Нека да разгледаме наследяването в CSS с примери за закотвяне, така да се каже, материал. За целта ще създадем вид кукла за гнездене от три контейнера Div, вложени един в друг и ще разгледаме този пример, как се извършва наследяването за някои правила, а не за други:

Така че, не забравяйте, че наследяването е разрешено за правилото за цвят, но не и за правилото за фон. Съответно имаме следната картина:

В първия елемент (външен контейнер) задаваме правилото "цвят: червено", използвайки атрибута Style, който дава инструкции за оцветяване на текста, затворен в този контейнер, в червено. Защото правилото "цвят" поддържа наследяване, това означава, че във всички елементи, вложени във външния контейнер, текстът също трябва да бъде оцветен в червено.

Всъщност се случва точно това, с изключение на най-вътрешния контейнер Div, за който е написан собствен "цвят: син". Естествено, правилото, написано директно за този Html таг, ще има предимство пред това, което е написано във външния елемент. Следователно текстът във вътрешния контейнер ще се окаже син.

Въпреки че правилото "фон" според спецификацията на CSS не поддържа наследяване, но оттогава третият div е разположен във втория, това създава илюзията за наследяване на запълването на фона. Но това не е така. Ако се опитаме хипотетично да преместим вътрешния контейнер извън втория, той вече няма да има фон.

В следващата статия вече ще стигнем до такава основна концепция в CSS като селектора.