Как новички в программировании, мы сначала начинаем включать CSS в наши веб-страницы в виде встроенных стилей. Мы используем атрибут style для вставки CSS непосредственно в наш HTML-элемент:
<!DOCTYPE html>
<html>
<head>
<title>Inline Style</title>
</head>
<body>
<h1 style=»color:blue;text-align:center;»>Star Wars</h1>
<h4 style=»color:red;text-align:center;»>Return of the Jedi</h4>
</body>
</html>
По мере перехода к более сложным сайтам мы переходим к включению нашего CSS в качестве внутреннего CSS. Здесь мы пишем весь наш CSS между <style>тегами в <head> разделе HTML-документа:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
h1, h4 {
text-align: center;
}
h1 {
color: blue;
}
h4 {
color: red;
}
</style>
</head>
<body>
<h1>Star Wars</h1>
<h4>Return of the Jedi</h4>
</body>
</html>
Это хорошо очищает наш HTML. Однако, что, если бы у нас было 500 строк CSS? Этот файл будет трудно читать довольно быстро. Однако у нас есть возможность создавать внешние таблицы стилей, а затем связывать их с нашим файлом HTML!
Настройка:
Папка проекта должна выглядеть так, когда вы добавляете файл index.css
- В основной папке проекта, где находится ваш файл index.html, создайте новый файл с именем index.css. Файл index.css будет содержать весь CSS для нашего файла index.html. Мне нравится называть свои CSS-файлы в честь HTML-файлов, которые они создают, чтобы всё было организованно, но вы, безусловно, можете называть их как хотите, если знаете, какие файлы они стилизуют.
- Если у вас есть CSS между <style>тегами в <head>вашем файле HTML, вырежьте и вставьте только код CSS (без тегов) в соответствующий файл CSS.
- В <head> своём HTML-файле вы собираетесь создать тег <link>, указывающий на ваш CSS-файл:
<link rel=»stylesheet» type=»text/css» href=»./index.css»>
Ссылка состоит из трёх частей:
- Атрибут rel: он сообщает нам, что между этим файлом и другим файлом будет связь, и эта ссылка расскажет нам, каковы эти отношения.
- Атрибут type: описывает тип отношения связанного файла к HTML-файлу.
- А также атрибут href: относительный путь к файлу, откуда находится файл HTML — расположение файла.
HTML-файл ссылается на соответствующий CSS-файл, добавляя элемент <link>.
Помните, что даже несмотря на то, что мы отделяем файл CSS от файла HTML, каскадный характер CSS по-прежнему доминирует. Это означает, что если у вас несколько файлов CSS, вам необходимо:
- Сделайте ссылку <link>, указывающую на каждый отдельный файл CSS.
- Убедитесь, что эти файлы расположены в том порядке, в котором они вам нужны, чтобы был виден правильный стиль. Если они не в правильном порядке, укладка может не сработать.
Это всё, что нужно сделать. Теперь вы на правильном пути к созданию внешних таблиц стилей для своего проекта!
ЧИТАЙТЕ ТАКЖЕ: 10 лучших проектов для начинающих по отработке навыков HTML и CSS.
