Текст style CSS

using-css

Если вы решили разобраться как устроены документы в Интернет, тогда сразу после знакомства с гипертекстовой разметкой (HTML), вам нужно освоить каскадные таблицы стилей — CSS.

Стили используются для задания оформления гипертекстовых документов. Они позволяют задавать цвет, фон, настраивать шрифты и расположение отдельных блоков. Стили можно задавать непосредственно в тегах HTML (атрибут style), объявлять в с секциях <style> HTML документа и подключать их как отдельные файлы.

Для чего нужны CSS?

Основная роль каскадных таблиц стилей — отделить документ от его оформления. С помощью CSS можно определить разный вывод документа для разных случаев, представить его по разному, к примеру, для вывода на экран монитора и для печати на принтере.

Это несомненно повышает гибкость и управляемость документа. Позволяет избежать дублирование повторяющихся инструкций стилей оформления.

Как устроены CSS?

В общем виде, стили записываются в виде набора вот таких текстовых инструкций:

Селекторы описывают объекты HTML (XML) документа, к которым должны применяться перечисленные в фигурных скобках правила. Возможные имена свойств и их значений можно изучить подробно на сайте w3school.

Какие бывают селекторы?

Селектор элемента

Данное правило предписывает отображать все элементы документа DIV шириной 100 точек, а для текста внутри таких блоков устанавливать шрифт семейства Arial. Если Arial не найден в системе, то попытаться использовать Helvetica, а затем Sans-serif.

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

Данные селекторы применяются к элементам, отмеченным соответствующим классом. Инструкции в примере предписывают использовать жирный шрифт.

Элементы могут быть отмечены сразу несколькими классами в отличии от идентификатора, который тоже может использоваться как селектор.

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

Здесь настройки применятся к элементу документа с id «one». По правилам документ не должен содержать несколько элементов с одинаковым идентификатором. Тем не менее, стили будут применены ко всем таким элементам, даже если их больше одного.

Описания всех селекторов, а только их типов порядка 10, вы также можете изучить на сайте w3school.

Приоритеты стилей CSS.

Так как информация о стиле может быть задана разными способами, получена из разных источников, дублироваться и даже унаследована от родительских элементов, то необходимы правила, по которым определяется приоритет того или иного стиля.

Эти правила называются принципами каскадирования (правилами каскадирования).

Вот эти правила по порядку возрастания значимости:

Стили браузера

Те умолчания оформления элементов, которые подразумевает программа, обрабатывающая HTML документ (браузер). Они применяются, если их оформление не указано каким либо образом в самом документе.

Стили документа

Браузер читает подключаемые CSS файлы и инструкции в секциях <style> последовательно. Более поздние объявления с одинаковыми селекторами — имеют более высокий приоритет.

Разные комбинации селекторов, влияющих на один и тот же элемент, определяют свой вес таким образом:

Идентификатор всегда значимее класса или атрибута, а селектор класса важнее селектора элемента.

Далее по значимости идут стили, указанные непосредственно в элементе.

Но есть способ усилить приоритет описания какого либо свойства. Это делается с помощью инструкции «!important»:

Свойства, отмеченные как важные, имеют наивысший приоритет.

Более подробно можно прочитать в WIKI.

Написать комментарий

Мало букафф? Читайте есчо !

box-sizing: padding-box на Chrome

Сентябрь 19, 2015 г.

Пока Хром не поддерживает данное значение атрибута спецификации CSS, что то надо делать! Можно отказаться, но удобно ведь? Самый простой выход написать вместо злополучного экспериментального padding-box: [crayon-5adf2310b288c635012959/] Во ...

Читать

Перенос слов в CSS

Март 28, 2016 г.

Каскадные стили позволяют управлять переносом слов в выбранном контейнере. Для этих целей служат два свойства - word-wrap и word-break. Работу с ними и ...

Читать

 

Комментарии к «Текст style CSS»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: