Стили CSS позволяют создавать различные красочные дизайны сайтов. Например, зададим размеры и расположение файлов и шрифтов. Основой кода сайта является HTML. Это гипертекстовая разметка, где в заголовок вписывается сторонний файл таблицы стилей. К файлу Index.html подключается файл стилей. Он будет управлять таблицами стилей CSS.
Стили css — подключение файла
Находя эту ссылку в коде HTML, браузер будет переходить к таблице стилей CSS. Станет отображать страницу соответственно заданным параметрам. Например, цвета, размеры, отступы, выравнивание, расположение элементов на странице. Файл html является каркасом страницы. Но за счет таблицы стилей она становится выразительной и красочной.
В блокноте notepad++ откроем новый документ. Сохраним его на локальном диске «С», присвоив название «style.css». Например, сохраняю его в папке, которую назвала «blog2». Теперь файл «style.css» нужно подключить к индексному документу.
В коде заголовка сайта впишем его перед закрывающим тегом </head>. Подключается он с помощью специального не парного тега <link>. У link есть несколько атрибутов, которые нужно указать.
- Атрибут ссылки href=к нему добавляем путь к файлу.
- Далее следует атрибут «type», который тоже подключим к документу: text/css.
- Третий атрибут rel=, означающий: «взаимосвязь».
Все вместе получиться в коде:
<!Doctype html> <html> <head> <meta <harset UTF-8> <title>блог 2</title> <strong><span style="color: #993366;" data-mce-style="color: #993366;"><link href= c://xampp/htdocs/blog2/style.css.txt / “type text/css" rel="stylishest"</span> </strong> </head> <body>…..</body> </html>
Чтобы выделить строку стилей в коде, покрасила ее и сделала жирной. Потому образовались дополнительные теги.
Стили CSS — cелекторы
Подключив к странице html файл style.css, мы должны его заполнить. Вначале заполняем селекторы. Это теги кода, для которых нужны стили: заголовков, шрифтов, абзацев, картинок и др.
Например, селекторов может быть много. Однако всем селекторам присущи два типа: свойства и значения. Для одинакового изменения цвета всех абзацев применим, общий селектор — <p>. Например, мы решили, что все абзацы будут на сером фоне. Для этого в файле запишем
| 1 | p{color#404040; }p |
Но не всегда нужны однотипные селекторы, можно изменить один элемент. Сделаем только заголовок страницы — красным цветом. Тогда запишем: в header
| 1 | { color:#32017; } |
Однако не редко встречаются ситуации, когда нужно выделить группу похожих элементов, в разных строках абзацев. Для этого применим идентификатор класс. В файле стилей, он будет начинаться с точки:
| 1 | .new{color 6bc5e3;} |
Но класс нужно приписать тем элементам кода html, который мы хотим выделить заданным цветом. Например, в стилях CSS — эти 3 вида селекторов употребляются наиболее часто.
Цвета из программы
Например, для изменения цветов можно пользоваться небольшой программой «color mania». В программе указываются их шестнадцатеричные значения из букв и цифр. Скачать программу можно с официального сайта. Причем коды в виде букв и цифр можно просто копировать и вставлять в файл.
