CSS. Базовые принципы (Урок 1)

Оглавление:

На данный момент мы с вами научились создавать структуру HTML документа. Это так называемый фундамент. Теперь наша задача подключить к данному документу таблицу стилей css (или по другому каскадные таблицы стилей), что бы придать нашей HTML странице дизайн или какие-нибудь атрибуты.
В области HEAD мы пропишем с вами специальный тег и укажем, что мы хотим подключить файл style.css. Это и есть таблица стилей, которые всегда имеют расширение 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

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

css селекторы

 

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

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

css селекторы

 

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

css селекторы

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

css селекторы

 

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

css селекторы

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

css селекторы

 

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

css селекторы

 

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

css селекторы

 

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

Удачи вам! До скорых встреч на страницах блога VyacheslavDanilov.ru


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

Смотри и удивляйся:
Десерт

*посмотреть еще ролик можно обновив страницу в браузере

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

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