Рубрики
программирование

Стили CSS для оформления дизайна страницы

Стили CSSСтили CSS позволяют создавать различные красочные дизайны сайтов. Задаются размеры и расположение файлов и шрифтов. Основой кода сайта является HTML. Это гипертекстовая разметка, где в заголовок вписывается файл таблицы стилей. В заголовок файла Index.html подключается файл стилей. Он будет управлять таблицами стилей CSS. Находя эту ссылку в коде HTML, браузер будет переходить к таблице стилей CSS. Станет отображать страницу соответственно заданным параметрам. Например, цветов, размеров, отступов, выравнивания, расположения элементов на странице. Файл html является каркасом страницы, но за счет таблицы стилей она становится выразительной и красочной.

Стили css — подключение файла

В блокноте notepad++ откроем новый документ: и сохраним его на локальном диске «С», присвоив название «style.css». Сохраняю в папке, которую назвала, blog2.Файл style.css нужно подключить к индексному документу. Впишем его перед закрывающим тегом </head>. Подключается он с помощью специального не парного тега  <link>.  У link есть несколько атрибутов, которые нужно указать.

  • Атрибут ссылки href=к нему добавляем путь к файлу.
  • Далее следует атрибут «type», который тоже подключим к документу: text/css.
  • Третий атрибут rel=, означающий: «взаимосвязь».

Все вместе получиться в коде:

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

 Стили CSS — cелекторы  

Подключив к странице html  файл style.css, мы должны его заполнить. Вначале заполняем селекторы – это теги кода, для которых нужны стили: заголовков, шрифтов, абзацев, картинок и др. Селекторов может быть много, однако всем селекторам присущи  два типа: свойства и значения. Например, для одинакового изменения цвета всех абзацев применим, общий селектор — <p>.

Допустим, мы решили, что все абзацы будут на сером фоне. Для этого в файле запишем :

Но не всегда нужны однотипные селекторы, можно изменить один элемент. Сделаем только заголовок страницы — красным цветом. Тогда запишем:  header

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

Затем этот класс нужно приписать тем элементам кода html, которые мы хотим выделить заданным цветом.  СтилиCSS — эти 3 вида селекторов употребляются наиболее часто.

Цвета 

Для изменения цветов можно пользоваться небольшой программой «color mania». В программе указываются их шестнадцатеричные значения из букв и цифр. Скачать программу можно с официального сайта.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *