Стили CSS

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

Стили CSS

В блокноте notepad++ откроем новый документ: и сохраним его на локальном диске «С», присвоив название «style.css». Сохраняю в папке, которую назвала, blog2.

Подключение файла стилей css

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

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

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

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

 Селекторы  

селектор

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

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

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

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

Затем этот класс нужно приписать тем элементам кода html, которые мы хотим выделить заданным цветом.

 Эти 3 вида селекторов для стилей CSS употребляются наиболее часто.

Цвета 

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

Автор: Ксенья Юрьевна Бастрикова

Комментарии 2

  • Вот отсутствие знаний программирования мне очень мешает, надо вплотную заняться этим. Зимой наверно займусь. Много беру на вашем сайте. Мне ведь именно азы и нужны.

  • Вы молодец, Ксенья Юрьевна, — всерьёз занимаетесь сайтами и их продвижением. А мне многое и не понятно, и руки не доходят. Конечно, не взявшись за дело, его и не изучишь…

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

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