Если вы решили разобраться как устроены документы в Интернет, тогда сразу после знакомства с гипертекстовой разметкой (HTML), вам нужно освоить каскадные таблицы стилей — CSS.
Стили используются для задания оформления гипертекстовых документов. Они позволяют задавать цвет, фон, настраивать шрифты и расположение отдельных блоков. Стили можно задавать непосредственно в тегах HTML (атрибут style), объявлять в с секциях <style> HTML документа и подключать их как отдельные файлы.
Для чего нужны CSS?
Основная роль каскадных таблиц стилей — отделить документ от его оформления. С помощью CSS можно определить разный вывод документа для разных случаев, представить его по разному, к примеру, для вывода на экран монитора и для печати на принтере.
Это несомненно повышает гибкость и управляемость документа. Позволяет избежать дублирование повторяющихся инструкций стилей оформления.
Как устроены CSS?
В общем виде, стили записываются в виде набора вот таких текстовых инструкций:
|
1 2 3 4 5 |
селектор, селектор { свойство: значение; ... свойство: значение; } |
Селекторы описывают объекты HTML (XML) документа, к которым должны применяться перечисленные в фигурных скобках правила. Возможные имена свойств и их значений можно изучить подробно на сайте w3school.
Какие бывают селекторы?
Селектор элемента
|
1 2 3 4 |
div { font-family: arial, helvetica, sans-serif; width: 100px; } |
Данное правило предписывает отображать все элементы документа DIV шириной 100 точек, а для текста внутри таких блоков устанавливать шрифт семейства Arial. Если Arial не найден в системе, то попытаться использовать Helvetica, а затем Sans-serif.
Селектор класса
|
1 2 3 |
.bolder-text { font-weight: bold; } |
Данные селекторы применяются к элементам, отмеченным соответствующим классом. Инструкции в примере предписывают использовать жирный шрифт.
|
1 2 3 |
<p>этот текст в параграфе <span class="bolder-text">должен быть выведен жирным шрифтом.</span> </p> |
Элементы могут быть отмечены сразу несколькими классами в отличии от идентификатора, который тоже может использоваться как селектор.
Селектор идентификатора
|
1 2 3 |
#one { background-color: #FFF; } |
Здесь настройки применятся к элементу документа с id «one». По правилам документ не должен содержать несколько элементов с одинаковым идентификатором. Тем не менее, стили будут применены ко всем таким элементам, даже если их больше одного.
Описания всех селекторов, а только их типов порядка 10, вы также можете изучить на сайте w3school.
Приоритеты стилей CSS.
Так как информация о стиле может быть задана разными способами, получена из разных источников, дублироваться и даже унаследована от родительских элементов, то необходимы правила, по которым определяется приоритет того или иного стиля.
Эти правила называются принципами каскадирования (правилами каскадирования).
Вот эти правила по порядку возрастания значимости:
Стили браузера
Те умолчания оформления элементов, которые подразумевает программа, обрабатывающая HTML документ (браузер). Они применяются, если их оформление не указано каким либо образом в самом документе.
Стили документа
Браузер читает подключаемые CSS файлы и инструкции в секциях <style> последовательно. Более поздние объявления с одинаковыми селекторами — имеют более высокий приоритет.
Разные комбинации селекторов, влияющих на один и тот же элемент, определяют свой вес таким образом:
Идентификатор всегда значимее класса или атрибута, а селектор класса важнее селектора элемента.
Далее по значимости идут стили, указанные непосредственно в элементе.
Но есть способ усилить приоритет описания какого либо свойства. Это делается с помощью инструкции «!important»:
|
1 2 3 |
p { margin: 0px !important; } |
Свойства, отмеченные как важные, имеют наивысший приоритет.
Более подробно можно прочитать в WIKI.
