Основы css: основы CSS — Основы CSS — HTML Academy

основы CSS — Основы CSS — HTML Academy

CSS-правила

CSS — это язык для оформления структурированных документов, например, HTML- документов. Синтаксис — это плоский список CSS-правил. CSS-правило состоит из селектора и перечня свойств и их значений:

селектор {
  свойство: значение;
  свойство: значение;
}

Для комментариев в CSS используются символы /* и */.

Селекторы

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

.feature-kitten {
  padding-top: 60px;
}

Простейшие (и самые популярные) селекторы — это селекторы по тегам и по классам. Селекторы по тегам содержат имя тега без символов < и > и применяются ко всем подходящим тегам. Селекторы по классам начинаются с точки, за которой идёт имя класса, и применяются ко всем тегам с подходящим атрибутом class.

h2 { color: red; }
. info { color: blue; }

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

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

Также можно комбинировать любые типы селекторов через пробел. Такие селекторы называются вложенными или контекстными и читаются справа налево. Например:

nav a {…}
  .menu ul {…}
  .post .title {…}

Свойства и значения

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

.feature-kitten {
  padding-top: 60px;
}

Каждый раз, когда мы добавляем новое свойство или изменяем его значение, мы меняем что-то на странице.

Наследование

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

Составные свойства

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

font: 16px/26px "Arial", sans-serif;

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

Типы значений: абсолютные и относительные

Абсолютные единицы измерения привязаны к настоящим физическим размерам и связаны между собой жёсткими пропорциями. Пиксели,

px, используют чаще всего, остальные абсолютные единицы почти не применяют. Примеры абсолютных единиц измерения:

font-size: 1cm;
font-size: 10mm;
font-size: 38px;

Относительные единицы измерения описывают значения, которые зависят от других значений. Например, ширина элемента в процентах зависит от ширины родительского элемента, а ширина элемента в em зависит от размера шрифта самого элемента. К относительным единицам относятся em, rem, vh, vw и некоторые другие, ну и, конечно же, проценты.

Стили по умолчанию

Некоторым элементам можно не задавать никаких стилей, но у них всё равно будет какое-то оформление. Например, у списка <ul> есть отступы и маркеры. Такие стили называются стилями по умолчанию и задаются внутри браузерных стилей изначально. Их можно переопределить или сбросить, задав другие значения свойств элементу.

Каскадирование

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

Например, есть такой элемент в разметке:

<p>Зелёный - мой любимый цвет</p>

Заданные стили:

.beloved-color { color: green; }

Браузерные стили:

margin: 1em 0;

Итоговые стили:

color: green;
margin: 1em 0;

Конфликт свойств

На один элемент могут действовать несколько CSS-правил. Если в этих правилах есть одинаковые свойства с разными значениями, то возникает конфликт. Например:

ul { list-style: disc; }
.blog-navigation ul { list-style: none; }

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

1. Сравниваются приоритеты стилевых файлов, в которых находятся конфликтующие свойства. Например, авторские (то есть наши) стили приоритетнее браузерных.
2. Сравнивается специфичность селекторов у CSS-правил с конфликтующими свойствами. Например, селектор по классу более специфичен, чем селектор по тегу.
3. Побеждает то свойство, которое находится ниже в коде.

Каскад работает и внутри CSS-правил.

Встраивание и подключение внешних стилей

Внешние стили подключаются через тег <link>

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

Встраивание стилей в тег <style>. Его обычно размещают внутри <head>:

<head>
  <style>
    CSS-код
  </style>
</head>

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

Встраивание в атрибут style:

<div>&lt/div>

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

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

Продолжить

Основы 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 | edX

Выберите сеанс:

121 636 уже зарегистрированы!

Начало 14 апреля

Завершение 28 мая

Регистрация

Я хочу получать электронные письма от W3Cx и узнавать о других предложениях, связанных с основами CSS.

Об этом курсе

Чему вы научитесь

Преподаватели

Как пройти этот курс

edX For Business

5 недель

5–7 часов в неделю 9

004 Самостоятельно

Прогресс на собственной скорости

БЕСПЛАТНО

Доступное обновление

Выберите свой сессия:

Запускается 14

Законные конец 28

. Зарегистрирован

узнать о других предложениях, связанных с основами CSS.

Основы CSS

Этот курс является частью профессионального сертификата W3C «Front-End Web Developer».

Вы только начали свой путь в веб-разработке? Этот курс познакомит вас с основами веб-дизайна и научит вас стилизовать веб-сайт, чтобы он выглядел профессионально.

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

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

at a Glance

• Учреждение: W3CX
• Тема: Интелсов наука
• Уровень: Вводной
• Пререквизиты:

• . Сертификат в Front-End Web Developer

• Базовый выбор свойств CSS
• Основные селекторы CSS
• Разработка макета страницы с помощью относительного позиционирования с помощью CSS
• Лучшие практики веб-дизайна

Модуль 1: Начало работы с CSS

• Что такое CSS?
• Почему CSS важен?

Модуль 2. Создание правил CSS

• Обзор HTML
• Создание правила CSS
• Присоединение CSS к HTML с помощью селекторов
• Применение стилей с использованием свойств CSS

Модуль 3: Конкретный HTML-таргетинг с помощью селекторов CSS

• Использование классов и идентификаторов HTML
• Псевдоклассы CSS
• Комбинированные селекторы

Модуль 4: Компоновка и размещение

• Основы компоновки
• Плавающие элементы
• Относительное позиционирование

Модуль 5: Дизайн веб-сайта для вашей аудитории

• Основы дизайна
• Дизайн для вашей аудитории
• Почему важна доступность
• Почему важна интернационализация
• Исторические тенденции веб-дизайна
• Текущие тенденции веб-дизайна

Выберите путь при регистрации.

	$199 USD	Free
	Unlimited	Limited Expires on May 19

Прочитайте эти часто задаваемые вопросы в новой вкладке о треках

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

В то время как html использует теги, css использует наборы правил. CSS прост в изучении и понимании, но он обеспечивает мощный контроль над представлением HTML-документа.

Почему CSS?

• CSS экономит время: Вы можете написать CSS один раз и повторно использовать один и тот же лист на нескольких HTML-страницах.
• Простое обслуживание: Чтобы внести глобальное изменение, просто измените стиль, и все элементы на всех веб-страницах будут обновлены автоматически.
• Поисковые системы: CSS считается чистой техникой кодирования, что означает, что поисковым системам не придется прилагать усилий, чтобы «прочитать» его содержимое.
• Превосходящие стили по сравнению с HTML: CSS имеет гораздо более широкий набор атрибутов, чем HTML, поэтому вы можете придать своей HTML-странице гораздо лучший вид по сравнению с HTML-атрибутами.
• Автономный просмотр: CSS может хранить веб-приложения локально с помощью автономного кэша. Используя это, мы можем просматривать офлайн-сайты.

Версии CSS годы выпуска:

Синтаксис CSS:
CSS содержит правила стилей, которые интерпретируются браузером и затем применяются к соответствующим элементам документа.
Набор правил стиля состоит из селектора и блока объявлений.

  Селектор -- h2 
  Объявление -- {color:blue;font size:12px;}  

Пример: В следующем примере все элементы p будут выровнены по центру с синим цветом текста:

CSS

p {    цвет : синий ;    text-align : center ;    }

Селекторы CSS.

1. UNIVERSAL SELECTORS: Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type

CSS

* {     цвет : #000000 ;    }

Вывод: Это правило отображает содержимое каждого элемента в нашем документе черным цветом.

2.СЕЛЕКТОРЫ ЭЛЕМЕНТОВ: Селектор элементов выбирает элементы на основе имени элемента. Вы можете выбрать все элементы p на странице следующим образом (в этом случае все элементы p будут выровнены по центру с красным цветом текста).

CSS

p {    выравнивание текста : центр;    цвет : красный ; }

Выход:

3. Специальные избиратели: Suppals Suppales Suppals Wrine You Want Arable At Altive Altine Alty Element. Как показано в следующем примере, правило стиля будет применяться к элементу em, только если он находится внутри тега ul.

CSS

ul em {        цвет : #000000 ; }

Выход:

4.ID SELECTORS: 9005 9004

4. ID SELECTORS: 9005 9004

4. ID SELECTORS: 9005 9004

4. ID SELECTORS: 9005 9004

4. ID SELECTORS: 9005 9004

.

Идентификатор элемента должен быть уникальным в пределах страницы, поэтому селектор идентификатора используется для выбора одного уникального элемента!

Чтобы выбрать элемент с определенным идентификатором, напишите символ решетки (#), за которым следует идентификатор элемента.

The style rule below will be applied to the HTML element with id=”para1″:

CSS

#gfg{      color : green ;      text-align : center ; }

Выход:

5.class Selectors:

• . Селектор SELECTER SELECTERS ATRIBUTERS ATTRIBUTERS с ATTRIBTIMES ATRIBUTES с ATTRIBUTERS с ATRIBUTES.
• Чтобы выбрать элементы определенного класса, напишите символ точки (.), а затем имя класса.
• В приведенном ниже примере все элементы HTML с class=»center» будут зелеными и выровнены по центру:

К данному элементу можно применить более одного селектора класса. Рассмотрим следующий пример:

html

.gfg{ цвет: зеленый; выравнивание текста: по центру; }

Output:

6.GROUPING SELECTORS If you have elements with the same style definitions, like this:

CSS

h 1 {     выравнивание по тексту : по центру ;     цвет : синий ;     } h 2 {     text-align : center ;     цвет : синий ;     } p {    text-align : center 5 ;     цвет : синий ;     }

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

CSS

h 1 , h 2 , p {     text-align : center ;     цвет : красный ;     }

Вывод:

HTML ЭФФЕКЦИИ0005

До CSS: В этом примере мы не добавляем CSS.

html

< html > < head >      < title > Пример title > head > < body >      < main >         < h2 >HTML Page h2 >         < p >Это простая веб-страница. p >           9 9 4

0295 > body > html >

Output:

After CSS: In this example, we добавьте немного CSS.

html

< html > < head >      < title >Example title >      < style >          main { ширина: 600 пикселей;          высота: 200 пикселей;          заполнение: 10 пикселей;          фон: бежевый;          }          h2 {        цвет 902 9d;          border-bottom: 1 пиксель с точками темно-зеленого цвета; } P { FANT-E-Family: Sans-Serif;          цвет: оранжевый;          }      style > head > < body >      < главная >          < h2 >Моя первая страница h2 >          < p >This is a basic web page. Оставить комментарий Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт