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

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

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

Делаем эффект параллакса для заднего фона на сайте

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

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

Читать

Меняем оформление input checkbox с помощью CSS

Декабрь 27, 2017 г.

Оформление элементов формы - это старая проблема. Ситуация несомненно улучшается, но финала пока не видно. С появлением псевдо-контейнеров :after и :before ...

Читать

 

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

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



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