Что такое таблица стилей CSS, ее селекторы и свойства


Здравствуйте, уважаемые читатели сайта Uspei.com. На данный момент мы с вами успели создать структуру HTML документа. Это так называемый фундамент. Теперь наша задача подключить к данному документу таблицу стилей css (или по другому каскадные таблицы стилей), что бы придать нашей HTML странице дизайн или какие-нибудь атрибуты.
В области HEAD мы пропишем с вами специальный тег и укажем, что мы хотим подключить файл style.css. Это и есть таблица стилей, которые всегда имеют расширение .css. Браузер, дойдя до этой строки, начинает искать файл с расширением .css по тому пути, который мы укажем. 


В таблице стилей css указываются стили, которые говорят браузеру как отражать тот или иной элемент. Например, в стилях может быть прописано, что все заголовки будут красного цвета или необходимо на фон текста вставить изображение (как это сделать тут), и многое многое другое. То есть, в HTML документе мы создаем "что", а в стилях CSS прописываем "как".

К оглавлению ↑

Создание и расположение файлов .css

Заходим в наш любимый Notepad++, создаем новый документ, и сохраняем его как "style.css". При этом все файлы с лучше поместить в отдельную папку "css". В документе HTML в области HEAD мы создаем одинарный тег <link> и прописываем ему уже знакомый атрибут "href", указывающий путь к нашему файлу "style.css". Далее мы прописываем атрибут "type", который говорит о типе подключаемого документа, в нашем случае это "text/css". Кроме этого также укажем атрибут "rel", значение которого будет равно "stylesheet".

<link href= "css/style.css" type= "text/css" rel="stylesheet">

Все это будет говорить, что подключается "таблица стилей" в виде текстового файла по такому-то адресу.

Подключение css

К одному HTML документу можно подключить несколько таблиц стилей css, соответственно к одной таблице стилей можно подключить несколько HTML документов.

К оглавлению ↑

Селекторы и свойства таблицы стилей .css

Теперь пришло время заполнить таблицу стилей css. Каждый стиль состоит из двух элементов, это "селектор" и его "свойства" со значениями.

Что такое селектор css

- Селектор p

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

Селектор цвета

Где #404040 (серый) это способ отражения цвета в стилях css, который мы разберем чуть позже, а "p" это тег абзаца. Естественно запоминать их не нужно, позже я познакомлю вас с программой, с помощью которой вы будите оперировать ими с легкостью.

После этого в браузере мы увидим, что все абзацы получили серый цвет.

Серый цвет текста

К оглавлению ↑

- Селектор # (id)

Второй пример, мы хотим сделать красным наш главный заголовок, для этого воспользуемся "id" нашего заголовка H1, который у нас имеет значение "header".

Красный цвет заголовка

Далее в таблице стилей css мы прописываем, что у id="header" будет красный цвет. Для обозначения "id" в стилях css применяется #.

Пропишем красный цвет заголовку

В браузере мы увидим, что наш заголовок окрасился в красный цвет.

У заголовка цвет стал красный

К оглавлению ↑

- Селектор "class"

Это был второй распространенный вид селектора по "id". Третьим видом селектора является "class", присваиваеваемый всем элементам, которые мы хотим изменить. Конечно, можно было бы присвоить каждому элементу свой "id", но использование селектора "class" намного удобней. Создадим его для начала в "таблице стилей", а уж потом пропишем в html код. Для обозначения данного селектора в css используется точка.

class селектор

Теперь пропишем данный класс трем любым элементам, которые мы хотим изменить.

Пропишем класс

Обновляем браузер и видим, что наши выделенные элементы приобрели синеватый оттенок.

Текст стал синеватым

Это последний из трех видов селекторов, которые используются в 90% случаев. Если будите знать их, то 90% знаний стилей css у вас в кармане))))).

До встречи! Успевайте всё и всегда на страницах блога Uspei.com

Плюсануть
Поделиться
Класснуть
Линкануть
Запинить

Буду благодарен, если поделитесь новостью в соцсетях

Вам также понравится...

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

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