Текст 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.

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

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

Эффект тряски элемента на сайте при наведении с помощью CCS3

Октябрь 23, 2015 г.

В последнее время как то кучно пошло у меня использование CCS3 анимации. Продолжаю делиться шаблонами. Сегодня рассмотрим анимацию, которая, запускаясь при наведении, имитирует дрожание элемента. Её можно подключать и в других случаях (не только при наведении). ...

Читать

Почему не работает стиль :: before или :: after?

Октябрь 22, 2017 г.

Замечательные псевдо-классы, которые позволяют добавить виртуальные контейнеры в начало или конец контейнера. Как они работают и почему могут "не сработать"? ...

Читать

 

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

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



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