Урок 23. Use Attribute Selectors to Style Elements връзка>>
Вече знаете да добавяте атрибути на id или class към елементи, които искате да стилизирате специално. Те са известни като ID и class селектори. Има и други CSS селектори, които можете да използвате, за да изберете персонализирани групи елементи за стил.
Нека отново представим CatPhotoApp, за да практикуваме CSS селекторите.
За това предизвикателство ще използвате селектора на атрибути [attr=value], за да стилизирате квадратчетата за отметка (checkboxes) в CatPhotoApp. Този селектор съпоставя и стилизира елементи със специфична стойност на атрибута. Например, кодът по-долу променя полетата на всички елементи с type атрибут и съответната стойност на radio:
[type='radio'] {
margin: 20px 0px 20px 0px;
}
Задачата е: Използвайки селектора на атрибути type, опитайте да дадете на квадратчетата за отметка в CatPhotoApp горно поле margin от 10px и долно поле margin от 15px.
Урок 24. Understand Absolute versus Relative Units
Последните няколко урока задават полето на елемента или запълване (margin and padding) с пиксели (px). Пикселите са вид единица за дължина, която казва на браузъра как да оразмерява или разпределя елемент. В допълнение към px, CSS има редица различни опции за единица дължина, които можете да използвате.
Двата основни типа единици за дължина са абсолютни и относителни. Абсолютните единици са свързани с физическите единици за дължина. Например, in и mm се отнасят съответно за инчове и милиметри. Единиците за абсолютна дължина са приблизително действителното измерване на екрана, но има някои разлики в зависимост от разделителната способност на екрана.
Относителните единици, като em или rem, са относителни към друга стойност на дължината. Например, em се основава на размера на шрифта на елемент. Ако го използвате, за да зададете самото свойство font-size, то е спрямо размера на шрифта на родителя.
Забележка: Има няколко опции за относителни единици, които са обвързани с размера на изгледа. Те са обхванати в раздела Принципи на Responsive Web Design (адаптивния уеб дизайн).
Задачата е: Добавете padding свойство към елемента с клас red-box и го задайте на 1.5em.
Продължете към следващия урок: Style the HTML Body Element
Всички уроци от Responsive Web Design>>