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

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

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

Bootstrap extra large - стили для сетки свыше 1600 точек

Апрель 20, 2017 г.

3я версия Bootstrap определяет 4 размера сетки: <768px, ≥768px, ≥992px, ≥1200px. Этих размерностей явно не достаточно. В то время как на телефонах ...

Читать

Делаем треугольник на CSS с помощью border

Апрель 19, 2016 г.

Мы не будем углубляться в CSS3, где есть такое свойство как shape-outside, т.к. с его помощью легко можно сделать из обычного слоя любой многоугольник: ...

Читать

 

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

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



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