12.08.2015      274      2
 

Стили 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=, означающий: «взаимосвязь».

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

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

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

селектор

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

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

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

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

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

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

Цвета 

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


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

Обсуждение: 2 комментария
  1. Алевтина:

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

  2. Лада:

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

Ваш комментарий

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

Для отправки комментария, поставьте отметку, что разрешаете сбор и обработку ваших персональных данных . Политика конфиденциальности

Яндекс.Метрика