Всем Привет! Сегодня я решил поговорить о css.
CSS - это каскадные таблицы стилей.
CSS помогает разработчику сделать сайт красивым. Все кнопки, все шрифты, цвет текста можно менять при помощи css.
В этой статье мы поговорим о том, как можно соединять html с css (разберем все способы) в процессе я буду писать код с пояснением всего.
1. Через тег <link>
Это самый популярный и правильный способ подключение файла css. Что для этого нужно? Давайте разберем.
1. Создайте файл "style.css" Назвать вы можете как угодно, но расширение файла должно быть строго ".css".
2. Создайте файл "index.html" И далее все подключение осуществляться будет в этом файле.
3. Прописываете в файле "index.html" следующий код:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
И между тегом <head> и <title> пишите тег <link> выглядеть это будет так: <link rel="stylesheet" type="text/css" href="style.css"> Теперь разберем это все. Содержание атрибута rel и атрибута type говорит нам, что подключаемый файл будет в формате "css". Атрибут href подключает файл. Вот и все.
Далее скопируйте и напишите в "index.html":
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<h1>Привет, я пишу красными буквами и это заголовок первого уровня!</h1>
<h2>Привет, я пишу зелеными буквами и это заголовок второго уровня!</h2>
<h3>Привет, я пишу желтыми буквами и это заголовок третьего уровня!</h3>
<h4>Привет, я пишу розовыми буквами и это заголовок четвертого уровня!</h4>
<h5>Привет, я пишу коричневыми буквами и это заголовок пятого уровня!</h5>
<h6>Привет, я пишу черными буквами и это заголовок шестого уровня!</h6>
</body>
</html>
И пишите в "style.css":
h1 {
color: red;
}
h2 {
color: green;
}
h3 {
color: yellow;
}
h5 {
color: brown;
}
h6 {
color: black;
}
В css мы можем обращаться к тегу 3 разными способами:
1. Обращение сразу к тегу. Таким образом вы даете стили всем тегам <h1> и т.д
2. Обращение через класс: <h1 class = "color">Привет! Тут через class</h1>
CSS: .color {color: red;} Вы можете писать любой "class" и стили будут применятся только к тегам с таким же классом.
3. Через атрибут id. Этот способ я использую очень редко, но он же есть) К id может быть привязан только один тег. Не два, не три, только один. Имейте ввиду) выглядеть в html будет так: <h2 id = "color">Тут через id</h2>, в css так: #color {color: green;}.
Вот и все, пора идти дальше)
2. Через атрибут style
Самый убогий способ, но он имеет место быть. Когда - то он вам да пригодится.
Тут не нужен файл ".css", это атрибут. <a style = "color: pink;">Это розовая ссылка</a> Вот так это оформляется) Это все, идем дальше.
3. Через тег <style>
Этот способ был бы отличным, если бы не занимал очень много места. Как это работает? Очень легко. Вы даете так же класс или id, а может и обращаетесь к тегу. Потом где - то в конце пишите тег <style>И вот тут пишите стили</style> Все это легко.
Думаю на этом можно закончить. Если вам что - то непонятно, пишите в комменты, я на все ваши вопросы отвечу
Всем удачи и пока!
