Как связать CSS с HTML, чтобы сделать разметку более читаемой

Папка проекта должна выглядеть так, когда вы добавляете файл index.css Программирование и разработка

Как новички в программировании, мы сначала начинаем включать 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.css

  1. В основной папке проекта, где находится ваш файл index.html, создайте новый файл с именем index.css. Файл index.css будет содержать весь CSS для нашего файла index.html. Мне нравится называть свои CSS-файлы в честь HTML-файлов, которые они создают, чтобы всё было организованно, но вы, безусловно, можете называть их как хотите, если знаете, какие файлы они стилизуют.
  2. Если у вас есть CSS между <style>тегами в <head>вашем файле HTML, вырежьте и вставьте только код CSS (без тегов) в соответствующий файл CSS.
  3. В <head> своём HTML-файле вы собираетесь создать тег <link>, указывающий на ваш CSS-файл:

<link rel=»stylesheet» type=»text/css» href=»./index.css»>

Ссылка состоит из трёх частей:

  1. Атрибут rel: он сообщает нам, что между этим файлом и другим файлом будет связь, и эта ссылка расскажет нам, каковы эти отношения.
  2. Атрибут type: описывает тип отношения связанного файла к HTML-файлу.
  3. А также атрибут href: относительный путь к файлу, откуда находится файл HTML — расположение файла.
Читайте также:  Структуры в C

HTML-файл ссылается на соответствующий CSS-файл, добавляя элемент

HTML-файл ссылается на соответствующий CSS-файл, добавляя элемент <link>. 

Помните, что даже несмотря на то, что мы отделяем файл CSS от файла HTML, каскадный характер CSS по-прежнему доминирует. Это означает, что если у вас несколько файлов CSS, вам необходимо:

  1. Сделайте ссылку <link>, указывающую на каждый отдельный файл CSS.
  2. Убедитесь, что эти файлы расположены в том порядке, в котором они вам нужны, чтобы был виден правильный стиль. Если они не в правильном порядке, укладка может не сработать.

Это всё, что нужно сделать. Теперь вы на правильном пути к созданию внешних таблиц стилей для своего проекта!

ЧИТАЙТЕ ТАКЖЕ: 10 лучших проектов для начинающих по отработке навыков HTML и CSS.

Оцените статью
bestprogrammer.ru
Добавить комментарий