Начало работы с CSS — Изучение веб-разработки

  • Назад
  • Обзор: First steps
  • Далее

В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.

Необходимые знания:Базовая компьютерная грамотность, Базовое программное обеспечение, базовые знания работа с файлами, и базовые знания HTML (смотрите Введение в HTML.)
Задача:Понять основы связывания CSS-документа с HTML-файлом и уметь выполнять простое форматирование текста с помощью CSS.

Нашей отправной точкой является HTML-документ. Вы можете скопировать код снизу, если вы хотите работать на своём компьютере. Сохраните приведённый ниже код как index.html в папке на вашем компьютере.

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Начало работы с CSS</title>
</head>
<body>
    <h2>Я заголовок первого уровня</h2>
    <p>Это абзац.
 
  В нём есть <span>элемент span</span>,
а также <a href="http://example.com">ссылка</a>.</p>
    <p>Это второй абзац. Он содержит <em>акцентирующий</em> текст.</p>
    <ul>
        <li>Элемент один</li>
        <li>Элемент два</li>
        <li>Элемент <em>три</em></li>
    </ul>
</body>
</html>

Примечание: Если вы читаете это на устройстве или в среде, где вы не можете легко создавать файлы, не беспокойтесь — ниже представлены редакторы кода, чтобы вы могли написать код прямо здесь, на странице.

Самое первое, что нам нужно сделать, — это сообщить HTML-документу, что у нас есть некоторые правила CSS, которые мы хотим использовать. Существует три различных способа применения CSS к документу HTML, с которым вы обычно сталкиваетесь, однако сейчас мы рассмотрим наиболее обычный и полезный способ сделать это — связать CSS с заголовком вашего документа.

Создайте файл в той же папке, что и документ HTML, и сохраните его как styles.css. Расширение .css показывает, что это файл CSS.

Чтобы связать styles.css с index.html, добавьте следующую строку где-то внутри

<head> HTML документа:

<link rel="stylesheet" href="styles.css">

Элемент <link> сообщает браузеру, что у нас есть таблица стилей, используя атрибут rel, и местоположение этой таблицы стилей в качестве значения атрибута href. вы можете проверить, работает ли CSS, добавив правило в styles.css. Используя ваш редактор кода, добавьте следующее в ваш файл CSS:

h2 {
  color: red;
}

Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдёт, поздравляю — вы успешно применили CSS к документу HTML. Если этого не произойдёт, внимательно проверьте, правильно ли вы ввели всё.

Вы можете продолжить работу в styles.css локально, или вы можете использовать наш интерактивный редактор ниже, чтобы продолжить этот урок. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с документом HTML, как это было в нашем документе выше.

Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путём нацеливания на элемент selector

— это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, вы должны использовать селектор p. Чтобы сделать все абзацы зелёными, вы должны использовать:

p {
  color: green;
}

Вы можете выбрать несколько селекторов одновременно, разделив их запятыми. Если я хочу, чтобы все параграфы и все элементы списка были зелёными, моё правило выглядит так:

p, li {
    color: green;
}

Попробуйте это в интерактивном редакторе ниже (отредактируйте поля кода) или в своём локальном документе CSS.

Когда мы смотрим на хорошо размеченный HTML-документ, даже такой простой, как наш пример, мы можем увидеть, как браузер делает HTML читаемым, добавив некоторые стили по умолчанию. Заголовки большие и жирные, в нашем списке есть маркеры. Это происходит потому, что в браузерах есть внутренние таблицы стилей, содержащие стили по умолчанию, которые по умолчанию применяются ко всем страницам; без них весь текст работал бы вместе, и мы должны были бы стилизовать всё с нуля. Все современные браузеры по умолчанию отображают HTML-контент практически одинаково.

Однако вам часто захочется что-то другое, кроме выбора, сделанного браузером. Это можно сделать, просто выбрав элемент HTML, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является наш

<ul> — неупорядоченный список. Он добавляет маркеры, и если я решу, что я не хочу эти маркеры, я могу удалить их вот так:

li {
  list-style-type: none;
}

Попробуйте добавить это в свой CSS сейчас.

Свойство list-style-type — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для list-style-type и вы найдёте интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.

Глядя на эту страницу, вы обнаружите, что помимо удаления маркеров списка вы можете изменить их — попробуйте изменить их на квадратные маркеры, используя значение square.

Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока вы хотите, чтобы все элементы этого типа в вашем документе выглядели одинаково. В большинстве случаев это не так, и вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространённый способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.

В своём HTML-документе добавьте Атрибут class ко второму пункту списка.

Ваш список теперь будет выглядеть так:

<ul>
  <li>Элемент один</li>
  <li>Элемент два</li>
  <li>Элемент <em>три</em></li>
</ul>

В вашем CSS вы можете выбрать класс special к любому элементу на странице, чтобы он выглядел так же, как и этот элемент списка. Добавьте следующее в ваш файл CSS:

.special {
  color: orange;
  font-weight: bold;
}

Сохраните и обновите, чтобы увидеть результат.

Вы можете захотеть, чтобы <span> в абзаце также был оранжевым и жирным. Попробуйте добавить класс «

special", затем перезагрузите страницу и посмотрите, что получится.

Иногда вы увидите правила с селектором, который перечисляет селектор HTML-элемента вместе с классом:

li.special {
  color: orange;
  font-weight: bold;
}

Этот синтаксис означает «предназначаться для любого элемента li, который имеет класс special». Если бы вы сделали это, вы бы больше не смогли применить класс к <span> или другому элементу, просто добавив к нему класс; вы должны добавить этот элемент в список селекторов:

li.
 
 special,
span.special {
  color: orange;
  font-weight: bold;
}

Как вы можете себе представить, некоторые классы могут быть применены ко многим элементам, и вам не нужно постоянно редактировать свой CSS каждый раз, когда что-то новое должно принять этот стиль. Поэтому иногда лучше обойти элемент и просто обратиться к классу, если только вы не знаете, что хотите создать некоторые специальные правила для одного элемента и, возможно, хотите убедиться, что они не применяются к другим элементам.

Есть моменты, когда вы хотите, чтобы что-то выглядело иначе, в зависимости от того, где оно находится в документе. Здесь есть несколько селекторов, которые могут вам помочь, но сейчас мы рассмотрим только пару. В нашем документе два элемента

<em> — один внутри абзаца, а другой внутри элемента списка. Чтобы выбрать только <em> который вложен в элемент <li>, я могу использовать селектор под названием descendant combinator (комбинатор-потомок), который просто принимает форму пробела между двумя другими селекторами.

Добавьте следующее правило в таблицу стилей.

li em {
  color: rebeccapurple;
}

Этот селектор выберет любой элемент <em>, который находится внутри (потомка) <li>

. Итак, в вашем примере документа вы должны найти, что <em> в третьем элементе списка теперь фиолетовый, но тот, который находится внутри абзаца, не изменился.

Ещё можно попробовать стилизовать абзац, когда он идёт сразу после заголовка на том же уровне иерархии в HTML. Для этого поместите + (соседний братский комбинатор) между селекторами.

Попробуйте также добавить это правило в таблицу стилей:

h2 + p {
  font-size: 200%;
}

Пример ниже включает в себя два правила выше. Попробуйте добавить правило, чтобы сделать элемент span красный, если он внутри абзаца. Вы узнаете, правильно ли вы это сделали, так как промежуток в первом абзаце будет красным, но цвет в первом элементе списка не изменит цвет.

Примечание: Как вы можете видеть, CSS даёт нам несколько способов нацеливания на элементы, и мы пока только слегка изучили его! Мы будем внимательно смотреть на все эти селекторы и многое другое в нашей статье Селекторы позже в нашем курсе.

Последний тип стилей, который мы рассмотрим в этом уроке, — это возможность стилизовать элементы в зависимости от их состояния. Прямым примером этого является стиль ссылок. Когда мы создаём ссылку, мы должны нацелить элемент <a> (якорь). Он имеет различные состояния в зависимости от того, посещается ли он, посещается, находится над ним, фокусируется с помощью клавиатуры или в процессе нажатия (активации). Вы можете использовать CSS для нацеливания на эти разные состояния — CSS-код ниже отображает невидимые ссылки розового цвета и посещённые ссылки зелёного цвета.

a:link {
  color: pink;
}
a:visited {
  color: green;
}

Вы можете изменить внешний вид ссылки, когда пользователь наводит на неё курсор, например, удалив подчёркивание, что достигается с помощью следующего правила:

a:hover {
  text-decoration: none;
}

В приведённом ниже примере вы можете поиграть с разными значениями для разных состояний ссылки. Я добавил к нему правила, приведённые выше, и теперь понимаю, что розовый цвет довольно лёгкий и трудно читаемый — почему бы не изменить его на лучший цвет? Можете ли вы сделать ссылки жирным шрифтом?

Мы удалили подчёркивание на нашей ссылке при наведении курсора. Вы можете удалить подчёркивание из всех состояний ссылки. Однако стоит помнить, что на реальном сайте вы хотите, чтобы посетители знали, что ссылка является ссылкой. Оставив подчёркивание на месте, люди могут понять, что на какой-то текст внутри абзаца можно нажимать — к такому поведению они привыкли. Как и всё в CSS, существует возможность сделать документ менее доступным с вашими изменениями — мы постараемся выделить потенциальные подводные камни в соответствующих местах.

Примечание: вы часто будете видеть упоминание о доступности в этих уроках и по всей MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятными и доступными для всех.

Ваш посетитель вполне может быть на компьютере с мышью или сенсорной панелью или на телефоне с сенсорным экраном. Либо они могут использовать программу чтения с экрана, которая считывает содержимое документа, либо им может потребоваться использовать текст значительно большего размера, либо перемещаться по сайту только с помощью клавиатуры.

Простой HTML-документ, как правило, доступен каждому — когда вы начинаете оформлять этот документ, важно, чтобы вы не сделали его менее доступным.

Стоит отметить, что вы можете комбинировать несколько селекторов и комбинаторов вместе. Вот пример:

/* выбирает любой <span> внутри <p>, который находится внутри <article>  */
article p span { ... }
/* выбирает любой <p>, который идёт сразу после <ul>, который идёт сразу после <h2>  */
h2 + ul + p { ... }

Вы также можете комбинировать несколько типов вместе. Попробуйте добавить следующее в ваш код:

body h2 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

Это будет стиль любого элемента с классом special, который находится внутри <p>, который приходит сразу после <h2>, который находится внутри <body>. Уф!

В оригинальном HTML, который мы предоставили, единственный элемент в стиле <span>.

Не беспокойтесь, если это покажется сложным — вы скоро начнёте понимать это, когда будете писать больше на CSS.

В этом уроке мы рассмотрели несколько способов стилизации документа с использованием CSS. Мы будем развивать эти знания по мере прохождения остальных уроков. Однако вы уже знаете достаточно, чтобы стилизовать текст, применять CSS на основе различных способов нацеливания на элементы в документе и искать свойства и значения в документации MDN.

На следующем уроке мы рассмотрим структуру CSS.

  • Назад
  • Обзор: First steps
  • Далее
  1. Что такое CSS?
  2. Начало работы с CSS
  3. Как структурирован CSS
  4. Как работает CSS
  5. Используя ваши новые знания

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Основы CSS

Главная / Редактирование сайта / Что такое расширенный режим? / Что такое HTML и CSS? / Основы CSS

В предыдущей инструкции мы рассказывали об HTML. И если HTML — это структура страницы, ее навигационные блоки и контент, то CSS позволяет придать этой структуре оформление, чтобы страницы выглядели красиво и хорошо отображались на дисплеях разных разрешений.

Грубо говоря, HTML — это каркас страницы, а CSS — это ее декорирование.

Для начала стоит разобраться, как взаимодействуют HTML и CSS внутри Системы Управления.

Существует три способа подключения стилей CSS к документу HTML.

Подключение CSS. Способ 1: внутри элемента

Сразу оговоримся, этого способа по возможности стоит избегать, поскольку крайне нежелательно, чтобы HTML и CSS присутствовали в одном документе.

Итак, суть данного способа в том, что Вы прописываете стили прямо внутри тега HTML с помощью атрибута style.

Чтобы было нагляднее, представим пример:

<p>содержимое абзаца</p>

В данном примере в документе HTML у нас есть абзац (он находится внутри тегов <p> и </p>). Чтобы задать стиль конкретно для этого абзаца, мы дописали прямо в теге атрибут style=»color: blue», таким образом, весь текст в данном абзаце будет выделен синим цветом.

Подключение CSS. Способ 2: внутри документа

Данный способ тоже не является оптимальным, так как в нем Вам тоже придется вставлять стили CSS в документ HTML.

Он позволяет задавать стили не для каждого отдельного тега, а для всех элементов отдельной страницы.

Для того чтобы это сделать Вам необходимо прописать стили в самой структуре страницы в теге <head> (об этом теге мы упоминали тут).

Опять же для простоты приведем пример:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<style type=»text/css»>
p { color: yellow; }
a { color: blue; }
</style>
. ..

Как видите, в данном примере мы прямо в начале файла HTML прописали тег <style> и внутри него задали, что все абзацы должны быть выделены желтым цветом (p { color: yellow; }), а все ссылки в тексте синим (a { color: blue; }).

Подключение CSS. Способ 3: внешние стили (рекомендуемый)

Способ позволяет полностью разделить HTML и CSS. Внешние стили используются для подключения одновременно ко многим страницам сайта.

Чтобы подключить CSS подобным образом, необходимо:

1. Создать отдельный файл с расширением .css, в котором будут перечислены все необходимые стили (в нашем примере файл будет называться file.css). Пример содержимого файла:

p
{ color: yellow; }
a
{ color: blue; }

Тут, как и предыдущем примере, мы задали желтый цвет для абзацев и синий для ссылок.

2. Загрузить полученный файл в систему, воспользовавшись инструкцией по ссылке.

3. Прописать в нужных HTML-файлах в теге <head> ссылку на данный файл с помощью тега <link>:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<link rel=»stylesheet» type=»text/css» href=’file. css’ />
…

В данном примере мы прописали для HTML-документа, что ему следует использовать стили, прописанные в файле file.css (<link rel=»stylesheet» type=»text/css» href=’file.css’ />). Таким образом, для данной страницы все оформление будет тянуться из того самого файла, что мы сформировали и загрузили в систему.

Селекторы

Теперь, когда мы рассмотрели, как подключить файл CSS, попробуем разобраться, как его сформировать.

Чтобы прописать стиль для какого-либо элемента, Вам будет необходимо сперва задать, какой именно элемент в HTML-файлах должен использовать эти стили. Указание на тип элемента и будет селектором. К примеру, в качестве селектора Вы можете использовать имя элемента (например, <h2> или <a>), а также значение атрибута (например, id или class).

Приведем пример (как Вы уже могли заметить в стилях не нужно прописывать угловые скобки):

p { color: yellow; }

Тут в качестве селектора выступает «p» — это значит, что для всех элементов с тегом <p> будет применен стиль, заданный в скобках (желтый цвет текста).

Селекторы могут в том числе включать в себя различные комбинации, в зависимости от того, насколько прицельно должны быть применены стили — для всех абзацев или только для определенных.

Все селекторы условно можно поделить на группы:

  • Селекторы типа. Как видно из названия, указывают на применение стилей к элементам определенного типа, например, к элементам с тегом <a> или <div>. Таким образом, примерный вид кода с селектором типа будет выглядеть так (в нашем примере селектор задает стили для элементов с тегом <a> — то есть для всех ссылок в HTML-документе, а в фигурных скобках должны быть прописаны нужные стили):
a { … }
  • Селекторы класса. Как мы писали в инструкции к HTML, Вы можете прописать для определенных тегов атрибут class. Соответственно, в файле CSS Вы можете прописать стили для элементов с данным классом. Это более конкретный селектор, поскольку позволяет применить стили не только к элементам одного типа, но и к разным элементам, для которых прописан один и тот же class. К примеру, у Вас на страницах для разных элементов — скажем, для некоторых тегов <p> и некоторых ссылок <a> прописан (в файле HTML это будет выглядеть как <p>содержимое абзаца</p>). Теперь Вы хотите задать определенные стили для всех элементов с этим стилем (шрифты, цвета и пр.). Для этого Вам необходимо прописать в файле CSS примерно следующее (в фигурных скобках опять же должны быть вписаны нужные Вам стили):
.forexample { … }
  • Селекторы идентификатора. Поскольку идентификатор определяет только один уникальный элемент (в HTML это атрибут id), подобный селектор позволяет точечно применить стиль к отдельному элементу. Например, Вы пометили в HTML какой-либо абзац атрибутом-идентификатором unique (в коде страницы это будет <p id=»unique»>содержимое абзаца</p>) и теперь хотите задать стили конкретно для этого абзаца. Пропишите в CSS:
#unique { … }

Свойства

Как Вы могли заметить, после каждого селектора в фигурных скобках необходимо прописать свойства, которые будут применены к элементам.  

Свойства пишутся внутри фигурных скобок, перед двоеточием.

Перечень возможных свойств довольно обширен. Наиболее часто используемые это:

  • background — позволяет установить свойства фона (например, background-color — цвет фона; background-image — фоновая картинка для элемента),
  • color — цвет элемента,
  • font-size — размер шрифта,
  • height и width — высота и ширина элементов.

Например, если мы хотим задать для абзацев определенный размер шрифта и цвет текста, то в файле CSS прописываем:

p {
 color: …;
 font-size: …;
}

С полным перечнем свойств CSS Вы можете ознакомиться по ссылке.

Значения

Значения — это именно то, что идет после двоеточия. Иными словами, сперва мы указываем, к чему применить стили (селектор), потом указываем какие параметры изменить (свойства) и уже затем указываем значения для этих свойств.

Возьмем тот же пример с шрифтами и цветами для абзацев и теперь укажем значения в свойствах (красный цвет и размер шрифта в 20 пикселей):

p {
 color: red;
 font-size: 20px;
}

Каскадность и приоритетность

Пара особенностей, которые стоит учитывать при работе с CSS — каскадность и приоритетность.

О каскадности стоит сказать, что в CSS все стили идут каскадом сверху вниз, отсюда следует, что Вы можете добавлять другие стили и переписывать их. Для простоты снова приведем пример: ранее в файле стиля для всех ссылок были прописаны синий цвет текста и размер шрифта в 12 пикселей. Теперь, если мы добавим в конце файла новое значение и переопределим цвет текста на зеленый — все ссылки в файле станут зеленого цвета.

a {
 color: blue;
 font-size: 12px;
}
a {
 color: green;
}

Грубо говоря, то значение цвета, что указано ниже — будет обладать приоритетом и именно оно и применится к элементам (размер шрифта в этом случае останется 12, поскольку его не переопределяли).

Также стоит отметить, что в CSS стили наследуются от родительских тегов к дочерним. Проще это продемонстрировать на примере:

body { font-family: Calibri; }
p { font-size: 14px; }
em { color: yellow; }

Тут для родительского тега <body> задан шрифт Calibri, затем для абзацев в тексте указан размер 14 пикселей и для курсивных текстов задан цвет желтый. В данном случае тег <p> унаследует шрифт Calibri, а тег <em> шрифт Calibri и размер шрифта в 14 пикселей.

Однако, если мы пропишем для дочерних тегов собственные стили (собственный шрифт и размер) — приоритетом будут обладать они:

body { font-family: Calibri; }
p { font-size: 14px; font-family: Arial; }
em { color: yellow; font-family: Comic Sans; font-size: 16px; }

В этом случае у абзацев уже будет свой шрифт Arial размером 14 пикселей, а у курсивных текстов не только свой шрифт Comic Sans, но и размер шрифта будет отличным от другого текста в том же абзаце — 16 пикселей и желтого цвета.

Комбинация селекторов

Для удобства и сокращения кода CSS Вы можете группировать и комбинировать селекторы.

Комбинируя селекторы Вы можете быть более конкретными в том, какой элемент или группу элементов Вы хотели бы выбрать.

К примеру, если Вы хотите, чтобы абзацы и заголовки h3 и h4 были написаны одним шрифтом и цветом и отличались только лишь размером, Вы можете сперва сгруппировать элементы <p>, <h3> и <h4> и указать для них шрифт и цвет, и уже ниже для каждого элемента указать отдельно размер шрифта. Выглядеть это будет примерно следующим образом:

p, h3, h4
{ font-family: Georgia, 'Times New Roman', Times, serif;
color: #333; }
p {font-size:1. 1rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.3rem; }

Разберем еще один, более сложный пример комбинации селекторов. Например, у Вас есть страница, в которой абзацы лежат внутри элемента с классом brightstyle, но при этом для отдельных абзацев прописан собственный стиль dullstyle, и Вы хотите для всех абзацев brightstyle установить красный цвет текста, а для тех абзацев, у которых свой класс dullstyle — серый цвет текста (иными словами, в HTML у Вас, скажем, есть <div> и для него прописан класс brightstyle — <div, внутри него несколько абзацев <p>, а также несколько абазцев с собственными классами <p>…</p>). Представим, как это будет выглядеть в CSS:

.brightstyle p {
color: red;
}
. brightstyle p.dullstyle {
color: gray;
}

Тут стоит обратить внимание на то, что крайний справа селектор будет всегда считаться основным, а все стоящие слева от него — уже уточняющими.

Иными словами, сперва в нашем примере описано, что для всех абзацев <p> (это основной селектор) с классом brightstyle (это уже уточнение) будет применяться красный цвет.

Затем указано, что для всех элементов с классом dullstyle (основной селектор), являющихся абзацами <p>, лежащими внутри класса brightstyle (это уточнения) будет применен серый цвет.

Также стоит заметить, что на применение стилей влияет наличие пробелов.

В нашем примере есть пробел между «.brightstyle» и «p.dullstyle», но нет пробела между «p» и «.dullstyle».

Отсутствие пробела указывает на то, что цвет будет применен только к абзацам <p> с классом .dullstyle, таким образом объединяя 2 селектора одного элемента, повышая специфичность селектора. Если просто убрать пробел — запись p .dullstyle будет означать последовательность селекторов, то есть читать можно будет так — элементы с классом .dullstyle внутри абзаца <p>. Если бы мы убрали пробел и селектор абзаца <p> — цвет применился бы ко всем элементам с классом .dullstyle, а не только к абзацам  <p>, таким образом снизится специфичность селектора.

Дополнительная информация

Это лишь основы CSS, позволяющие понимать общие принципы работы файлов стиля, их взаимодействие с HTML и прочие базовые нюансы верстки страниц сайта.

Чтобы узнать больше о CSS, Вы можете обратиться к тематическим сайтам и инструкциям, таким как:

  • https://html5book.ru/osnovy-css/
  • http://htmlbook.ru/samcss
  • https://htmlacademy.ru/courses/basic-css

Была ли статья вам полезна?

Да

Нет 

Укажите, пожалуйста, почему?

  • Рекомендации не помогли
  • Нет ответа на мой вопрос
  • Содержание статьи не соответствует заголовку
  • Другая причина

Комментарий

Для чего используется CSS

следующий → ← предыдущая

CSS используется для определения стилей веб-страниц. Он описывает внешний вид и форматирование документа, написанного на языке разметки. Он предоставляет дополнительную функцию для HTML. Обычно он используется с HTML для изменения стиля веб-страниц и пользовательских интерфейсов.

С помощью CSS проще сделать веб-страницы презентабельными. Его легко изучить и понять, и он используется для управления представлением HTML-документа. CSS помогает нам управлять цветом текста, стилем шрифта, расстоянием между абзацами, размером столбцов, дизайном макета и многим другим. Он не зависит от HTML, и мы можем использовать его с любым языком разметки на основе XML.

Рекомендуется использовать CSS, так как атрибуты HTML устарели. Итак, чтобы сделать HTML-страницы совместимыми с будущими браузерами, хорошо начать использовать CSS на HTML-страницах.

Существует несколько вариантов использования CSS, которые обсуждаются ниже:

Решает большую проблему

До появления CSS такие теги, как шрифт, цвет, стиль фона, выравнивание элементов, граница и размер, должны были повторяться на каждой веб-странице. Это был очень долгий процесс.

Например: если мы создаем большой веб-сайт, на каждой странице которого требуется добавлять информацию о шрифтах и ​​цветах, это будет долгий процесс. CSS был создан для решения этой проблемы. Это была рекомендация W3C.

Экономит много времени

определений стилей CSS сохраняются во внешних файлах CSS, поэтому можно изменить весь веб-сайт, изменив всего один файл.

Предоставьте больше атрибутов

CSS предоставляет более подробные атрибуты, чем обычный HTML, для определения внешнего вида веб-сайта.

Страницы загружаются быстрее

CSS не требует каждый раз записывать атрибуты тега HTML. Существует запись правила только один раз для тега, которое может быть применено ко всем вхождениям соответствующего тега. Таким образом, при использовании CSS меньше кода, а значит, загрузка быстрее.

Более простое обслуживание веб-сайта

CSS упрощает обслуживание веб-сайта. Он играет важную роль в обслуживании веб-сайта. Если нам требуется глобальное изменение в файле, это можно просто сделать, изменив стиль, благодаря которому все элементы на веб-странице будут обновляться автоматически. Файл CSS обеспечивает гибкий вид веб-сайта, который можно изменить удобным способом. Это также упрощает форматирование HTML и модификацию соответствующих элементов данных.

Совместимость с несколькими устройствами

CSS совместим со старыми языковыми версиями, поэтому мы можем использовать CSS с более ранними языковыми версиями. Из-за этого, если приложение CSS разработано с использованием более старых версий языка программирования и если разработчик сочетает их с новыми улучшениями, то CSS можно легко внедрить с соответствующими изменениями, чтобы разработчик мог успешно обновить существующий код. CSS позволяет оптимизировать содержимое для более чем одного типа устройств.

После обсуждения использования CSS становится ясно, что CSS очень полезен для стилей в разных областях.

Следующая темаЧто такое сетка CSS

← предыдущая следующий →

Как создать внешнюю таблицу стилей CSS

Внешние таблицы стилей создаются в отдельных документах с расширением . css. Внешняя таблица стилей — это просто список правил CSS. Он не может содержать теги HTML. Тег , который находится в заголовке HTML-страницы, используется для ссылки на внешнюю таблицу стилей. Количество внешних таблиц стилей, которые может использовать одна HTML-страница, не ограничено. Кроме того, внешние таблицы стилей можно комбинировать со встроенными таблицами стилей. Выполните следующие действия, чтобы создать внешнюю таблицу стилей.

  1. Начните с HTML-файла, содержащего встроенную таблицу стилей, например, эту. Скопируйте этот текст и вставьте в новый файл HTML.
     

<голова>
<мета-кодировка="UTF-8">
Встроенная таблица стилей
<стиль>
  ч2 {
    цвет: #009;
    размер шрифта: 1em;
    нижняя граница: .3em;
    выравнивание текста: по центру;
    оформление текста: подчеркивание;
  }
  
  стол {
    поле: .3em;
    ширина: 290 пикселей;
  }
  
  й {
    заполнение: .2em;
  }
  
  тд {
    цвет фона: #ffc;
    граница: 1px сплошная #900;
    отступ слева: . 5em;
    заполнение справа: .5em;
  }
  
  #trЗаголовок {
    цвет: #900;
    оформление текста: подчеркивание;
  }
  
  .centerCell {
    выравнивание текста: по центру;
  }


<тело>

<дел>
 
    Рекорд хоумрана за все время
     
<таблица>
  
    Игрок
    Хоумраны
    Команда
  
  
    Барри Бондс
    762
    Гиганты
  
  
    Хэнк Аарон
    755
    Выдерживает
  
  
    Бэйб Рут
    714
    Янкиз
  
  
    Вилли Мэйс
    660
    Гиганты
  • Создайте новый файл и сохраните его как StyleSheet.css в том же каталоге. (Вы можете дать файлу любое имя, если оно имеет расширение .css).
  • Переместите все правила CSS из файла HTML в файл StyleSheet.css . Не копируйте теги в стиле .
     ч2 {
  выравнивание текста: по центру;
  размер шрифта: 1em;
  цвет: #009;
  нижняя граница: .3em;
  оформление текста: подчеркивание;
}

стол {
  поле: .3em;
  ширина: 290 пикселей;
}

й {
  заполнение: .2em;
}

тд {
  отступ слева: .5em;
  заполнение справа: .5em;
  граница: 1px сплошная #900;
  цвет фона: #ffc;
}

#trЗаголовок {
  оформление текста: подчеркивание;
  цвет: #900;
}

.centerCell {
  выравнивание текста: по центру;
}
  • Удалите блок в стиле из HTML-файла.
  • В файле HTML добавьте тег link после закрывающего заголовка , который указывает на StyleSheet.css .
    Атрибуты включают:
    HREF баллы на местоположение листа внешнего стиля
    REL Должен быть установлен на «Стилсхет» для связывания.

    No related posts.

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

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