Приветствую вас в первой части "Базовые знания по css"
Сегодня я расскажу вам как подключить css к html коду, расскажу как он работает, зачем нужен id,class и что он делает...
Так же как и у html, у css есть версии. Самая новая - это CSS3
Что же такое css?
CSS (/siːɛsɛs/ англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. ( https://ru.wikipedia.org/wiki/CSS )
Язык css на сайте помогает настроить анимацию, фон и другие интересные настройки.
Как подключить к языку html язык css?
Для начала в папке, где находиться html, сделаем css-документ. Для этого создадим текстовый документ, и поменяем его расширение на .css , а название на style. Получиться "style.css"
Откроем его в нашем редакторе. Чтобы открыть его в Sublime Text 3, нужно просто перетащить его в редактор.
Полезная фишка:
Мы будем писать код сразу в двух файлах и чтобы разделить экран редактора на 2 части нам нужно будет нажать на кнопки Alt+shift+2
Вот результат:
Если мы хотим к тегу "p" сделать фон красным, то что нам надо сделать?
Есть три способа.
1) Напрямую обратиться к p. Вот так:
p{
background:red;
}
Обновим, но у нас проблема. Ничего не произошло... Она заключается в том, что браузер не знает в каком css файле написаны эти строки, и чтобы указать ему их надо прописать тег link, с назначенными свойствами в теге head.
Вот так:
<link rel="stylesheet" href="style.css" type="text/css">
Теги rel и type обязательны, а в href мы указываем название файла.
Теперь все работает.
Второй способ:
обратиться к обозначенному "p" , указав ему id
К id обращаются через #
Все осталось так же.
Третий способ:
Вместо id вставить class и обращаться надо через "."
Вывод: в css обращаются напрямую к тегу, id или class.
Вот и конец первой части базовых знаний по css!
Скоро будут и другие!
Удачи вам!
