Самоучитель по css: Самоучитель CSS | htmlbook.ru

CSS Selector

❮ Назад Дальше ❯

В CSS селекторы являются шаблонами, используемыми для выбора элементов, которые требуется присвоить стилю.

Используйте наш тестер селектора CSS для демонстрации различных селекторов.

Селектор	Пример	Пример описания
.class	.intro	Выбор всех элементов с
#id	#firstname	Выбор элемента с
*	*	Выбор всех элементов
element	p	Выбор всех элементов <p>
element,element	div, p	Выбор всех элементов <div> и всех элементов <p>
element element	div p	Выбор всех <p> элементов внутри элементов <div>
element>element	div > p	Выбор всех элементов <p>, в которых родительский элемент является элементом <div>
element+element	div + p	Выбор всех <p> элементов, помещенных сразу после <div> элементов
element1~element2	p ~ ul	Выбор каждого элемента <ul>, которому предшествует элемент <p>
[attribute]	[target]	Выбор всех элементов с целевым атрибутом
[attribute=value]	[target=_blank]	Выбор всех элементов с target=»_blank»
[attribute~=value]	[title~=flower]	Выделяет все элементы с атрибутом title, содержащим слово «flower»
[attribute|=value]	[lang|=en]	Выбор всех элементов со значением атрибута lang, начиная с «en»
[attribute^=value]	a[href^=»https»]	Выбирает каждый элемент <a>, значение атрибута href которого начинается с «https»
[attribute$=value]	a[href$=». pdf»]	Выбирает каждый элемент <a>, значение атрибута href которого заканчивается «.pdf»
[attribute*=value]	a[href*=»html5css.ru»]	Выбирает каждый элемент <a>, значение атрибута href которого содержит подстроку «html5css.ru»
:active	a:active	Выбор активной ссылки
::after	p::after	Вставка чего-либо после содержимого каждого элемента < p >
::before	p::before	Вставка чего-либо перед содержимым каждого элемента <p>
:checked	input:checked	Выбор каждого отмеченного <input> элемента
:disabled	input:disabled	Выбор всех отключенных элементов <input>
:empty	p:empty	Выбор каждого элемента <p>, не имеющего дочерних элементов (включая текстовые узлы)
:enabled	input:enabled	Выбор всех включенных элементов <input>
:first-child	p:first-child	Выбирает каждый элемент <p>, являющийся первым дочерним элементом родительского элемента
::first-letter	p::first-letter	Выбор первой буквы каждого элемента <p>
::first-line	p::first-line	Выбор первой строки каждого элемента <p>
:first-of-type	p:first-of-type	Выбор каждого элемента <p>, являющегося первым элементом <p> родительского элемента
:focus	input:focus	Выбор элемента ввода, имеющего фокус
:hover	a:hover	Выбор ссылок при наведении указателя мыши
:in-range	input:in-range	Выбор входных элементов со значением в указанном диапазоне
:invalid	input:invalid	Выбор всех входных элементов с недопустимым значением
:lang(language)	p:lang(it)	Выбирает каждый элемент <p> с атрибутом lang, равным «it» (Итальянский)
:last-child	p:last-child	Выбирает каждый элемент <p>, являющийся последним дочерним элементом родительского элемента
:last-of-type	p:last-of-type	Выбирает каждый элемент <p>, являющийся последним <p> элементом его родительского элемента
:link	a:link	Выбор всех непосещаемых ссылок
:not(selector)	:not(p)	Выбор каждого элемента, не являющегося элементом <p>
:nth-child(n)	p:nth-child(2)	Выбирает каждый элемент <p>, являющийся вторым дочерним элементом родительского элемента
:nth-last-child(n)	p:nth-last-child(2)	Выбирает каждый элемент <p>, являющийся вторым дочерним элементом родительского объекта, считая от последнего дочернего элемента
:nth-last-of-type(n)	p:nth-last-of-type(2)	Выбирает каждый элемент <p>, являющийся вторым элементом <p> родительского элемента, считая от последнего дочернего элемента
:nth-of-type(n)	p:nth-of-type(2)	Выбор каждого элемента <p>, являющегося вторым элементом <p> родительского элемента
:only-of-type	p:only-of-type	Выбор каждого элемента <p>, являющегося единственным элементом <p> родительского элемента
:only-child	p:only-child	Выбирает каждый элемент <p>, являющийся единственным дочерним элементом родительского элемента
:optional	input:optional	Выбор входных элементов без атрибута «обязательный»
:out-of-range	input:out-of-range	Выбор входных элементов со значением за пределами заданного диапазона
:read-only	input:read-only	Выбор входных элементов с указанным атрибутом «ReadOnly»
:read-write	input:read-write	Выбор входных элементов с атрибутом «ReadOnly» не указан
:required	input:required	Выбор входных элементов с указанным атрибутом «required»
:root	:root	Выбор корневого элемента документа
::selection	::selection	Выбор части элемента, выбранной пользователем
:target	#news:target	Выбор текущего активного элемента #news (щелчок по URL-адресу, содержащему это имя привязки)
:valid	input:valid	Выбор всех входных элементов с допустимым значением
:visited	a:visited	Выбор всех посещенных ссылок

❮ Назад Дальше ❯

Fonts CSS HTML шрифты, цвет и размер текста

❮ Назад Дальше ❯

Свойства шрифта CSS определяют семейство шрифтов, смелость, размер и стиль текста.

Разница между засечками и шрифтами без засечек

Семейства шрифтов CSS

В CSS существует два типа имен семейств шрифтов:

• родовое семейство — группа семейств шрифтов с похожим видом (например, «засечка» или «однодисковая»)
• семейство шрифтов — конкретная семья шрифтов (например, «Times New Roman» или «Arial»)

Примечание: На компьютерных экранах шрифты без засечек считаются более удобными для чтения, чем шрифты с засечками.

Семейство шрифтов

Семейство шрифтов текста задается с помощью свойства font-family.

Свойство font-family должно содержать несколько имен шрифтов в качестве «резервной» системы. Если обозреватель не поддерживает первый шрифт, он пытается следующий шрифт и т. д.

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

Примечание: Если имя семейства шрифтов больше одного слова, оно должно быть в кавычках, например: «Times New Roman».

В списке, разделенном запятыми, указано несколько семейств шрифтов:

Пример

p {
    font-family: «Times New Roman», Times, serif;
}

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

Стиль шрифта

Свойство font-style в основном используется для указания текста курсивом.

Это свойство имеет три значения:

• normal — Текст отображается нормально
• italic — Текст показан курсивом
• oblique — Текст «опираясь» (косой очень похож на курсив, но менее поддерживается)

Пример

p. normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Размер шрифта

Свойство font-size задает размер текста.

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

Всегда используйте правильные HTML-теги, например < h2 >-< H6 > для заголовков и < p > для абзацев.

Значение размера шрифта может быть абсолютным или относительным размером.

Абсолютный размер:

• Устанавливает заданный размер текста
• Не позволяет пользователю изменять размер шрифта во всех браузерах (плохо для специальных возможностей)
• Абсолютный размер полезен, когда известен физический размер выходных данных

Относительный размер:

• Устанавливает размер относительно окружающих элементов
• Позволяет пользователю изменять размер текста в обозревателях

Примечание: Если размер шрифта не указан, по умолчанию для обычного текста, как и для абзацев, используется 16px (16px = 1em).

Задать размер шрифта с пикселями

Установка размера текста с пикселями дает полный контроль над размером текста:

Пример

h2 {
    font-size: 40px;
}

h3 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Совет: При использовании пикселов можно по-прежнему использовать инструмент «Масштаб» для изменения размера всей страницы.

Установить размер шрифта с em

Чтобы разрешить пользователям изменять размер текста (в меню обозревателя), многие разработчики используют EM вместо пикселов.

Единица измерения размера em рекомендуется консорциумом W3C.

1em равен текущему размеру шрифта. Размер шрифта по умолчанию в обозревателях — 16px. Таким образом, по умолчанию размер 1em является 16px.

Размер можно вычислить от пикселов к EM использующ эту формулу: пикселы/16 =EM

Пример

h2 {
    font-size: 2.

h3 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

В приведенном выше примере размер текста в EM совпадает с предыдущим примером в пикселях. Однако, с размером EM, можно настроить размер текста во всех браузерах.

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

Используйте комбинацию процентов и EM

Решение, которое работает во всех браузерах, заключается в том, чтобы задать размер шрифта по умолчанию в процентах для элемента <BODY>:

Пример

body {
    font-size: 100%;
}

h2 {
    font-size: 2.5em;
}

h3 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

Наш код теперь отлично работает! Он показывает тот же размер текста во всех браузерах, и позволяет всем браузерам, чтобы увеличить или изменить размер текста!

Вес шрифта

Свойство font-weight задает вес шрифта:

Пример

p. normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

Отзывчивый размер шрифта

Размер текста может быть установлен с помощью vw единицы, что означает «ширина видового экрана».

Таким образом размер текста будет следовать размеру окна браузера:

Измените размер окна обозревателя, чтобы увидеть, как масштабируется размер шрифта.

Пример

<h2>Hello World</h2>

Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.

Шрифт вариант

Свойство font-variant указывает, должен ли текст отображаться в шрифте с малыми прописными буквами.

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

Пример

p. normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}

Другие примеры

Все свойства шрифта в одном Декларации
В этом примере демонстрируется использование сокращенного свойства для установки всех свойства шрифта в одном объявлении.

Все свойства шрифта CSS

❮ Назад Дальше ❯

Padding внутренние отступы CSS уроки для начинающих академия

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯

Этот элемент имеет заполнение 70px.

CSS заполнение

Свойства CSS padding используются для создания пространства вокруг содержимого элемента внутри любых определенных границ.

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

Обивка-отдельные стороны

CSS имеет свойства для указания заполнения для каждой стороны элемента:

• padding-top
• padding-right
• padding-bottom
• padding-left

Все свойства Padding могут иметь следующие значения:

• length — задает заполнение в пикселах, PT, cm и т. д.
• % — задает заполнение в% от ширины содержащего элемента
• Наследование-указывает, что заполнение должно наследоваться от родительского элемента

Примечание: Отрицательные значения не допускаются.

В следующем примере устанавливается разное заполнение для всех четырех сторон элемента <div>:

Пример

div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

Заполнение-Сокращенное свойство

Чтобы сократить код, можно указать все свойства Padding в одном свойстве.

Свойство padding является сокращенным свойством для следующих отдельных свойств заполнения:

• padding-top
• padding-right
• padding-bottom
• padding-left

So, here is how it works:

If the padding property has four values:

• padding: 25px 50px 75px 100px;
  • top padding is 25px
  • right padding is 50px
  • bottom padding is 75px
  • left padding is 100px

Пример

div {
    padding: 25px 50px 75px 100px;
}

Если свойство padding имеет три значения:

• padding: 25px 50px 75px;
  • top padding is 25px
  • right and left paddings are 50px
  • bottom padding is 75px

Пример

div {
    padding: 25px 50px 75px;
}

Если свойство padding имеет два значения:

• padding: 25px 50px;
  • top and bottom paddings are 25px
  • right and left paddings are 50px

Пример

div {
    padding: 25px 50px;
}

Если свойство padding имеет одно значение:

• обивка: 25пкс;
  • все четыре поля являются 25пкс

Пример

div {
    padding: 25px;
}

Заполнение и ширина элемента

Свойство CSS width определяет ширину области содержимого элемента. Область содержимого — это часть внутри поля, границы и поля элемента (Модель коробки).

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

В следующем примере элементу <div> дается ширина 300px. Однако фактическая Отображаемая ширина элемента <div> будет 350 пикселей (300px + 25пкс левого отступа + 25пкс правого заполнения):

Пример

div {
    width: 300px;
    padding: 25px;
}

Чтобы сохранить ширину в 300px, независимо от объема заполнения, можно использовать свойство box-sizing. Это приводит к тому, что элемент сохраняет свою ширину; При увеличении заполнения доступное пространство содержимого уменьшится. Вот пример:

Пример

div {
    width: 300px;
    padding: 25px;
    box-sizing: border-box;
}

Другие примеры

Установка левого отступа
В этом примере демонстрируется установка левого отступа элемента <p>.

Установить правое заполнение
В этом примере демонстрируется, как задать правое заполнение элемента <p>.

Установка верхнего отступа
В этом примере демонстрируется установка верхнего отступа элемента <p>.

Установка нижнего отступа
В этом примере демонстрируется установка нижнего отступа элемента <p>.

Все свойства заполнения CSS

❮ Назад Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

Полное руководство по CSS для начинающих программистов

Интернет сильно изменился с момента своего появления. Одно из самых больших отличий? Как это выглядит.

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

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

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

В этом руководстве вы узнаете все, что вам нужно знать, чтобы начать читать и писать CSS, в том числе:

• Что такое CSS
• Разница между HTML и CSS
• Как написать код CSS
• Как связать код CSS с документами HTML
• Важные концепции каскада, специфичности и наследования

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

Что такое CSS?

CSS — это язык, определяющий дизайн и макет веб-страниц. Другими словами, CSS управляет тем, как веб-страницы выглядят при загрузке в браузере. Мы называем этот дизайн и макет «стилем» страницы. CSS является стандартным языком для стилей и обычно работает в сочетании с HTML (язык, определяющий содержимое веб-страниц).

CSS означает каскадные таблицы стилей. «Таблицы стилей» относятся к самому документу CSS, а «Каскадирование» относится к тому, как правила стиля применяются к элементам страницы. Позже я объясню, что это значит, более подробно, но давайте сначала узнаем, что делает CSS.

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

Без CSS веб, каким мы его знаем, не выглядел бы так, как сегодня. Для иллюстрации возьмем этот пост в блоге HubSpot:

Выглядит нормально, правда? Но на самом деле к этой, казалось бы, простой странице применяется много CSS. Если мы отключим CSS, который HubSpot применяет к HTML, мы увидим следующее:

Отодвинув завесу CSS, мы увидим, насколько она улучшает взаимодействие с пользователем.

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

Здорово. Меня не волнует, насколько информативен этот пост — он выглядит довольно плохо.

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

В чем разница между HTML и CSS?

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

HTML (язык гипертекстовой разметки) определяет содержимое веб-страницы, включая текст, ссылки, изображения, видео и т. д. вещи выглядят при отображении в браузере.

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

Вам может быть интересно: зачем разделять эти два языка? Это резонный вопрос, поскольку HTML и CSS работают вместе. Ответ заключается в том, что разделение стиля и содержания значительно упрощает разработку веб-сайтов.

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

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

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

Преимущества CSS

Как оказалось, разделение кода содержимого и кода стиля дает множество преимуществ. К ним относятся:

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

Как писать CSS

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

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

Правило в CSS выглядит так:

Вы заметите четыре основных компонента: селектор, объявления, свойства и значения. Давайте разберем каждый из них.

Что такое селектор CSS?

Правило CSS всегда начинается с селектора. Селектор указывает часть документа, к которой применяется правило. При обработке кода CSS браузер использует селектор, чтобы «выбрать» целевые элементы и применить к ним правила стиля. За селектором следует одно или несколько объявлений в фигурных скобках.

Есть несколько способов написать селектор. Самый простой тип селектора CSS — это селектор элементов, используемый в приведенном выше примере. Селектор элементов выбирает HTML-элементы по их именам (например, p , span , div , a ):

См. Pen Element Selector от Кристины Перриконе (@hubspot) на CodePen.

Также можно выбрать элемент по его классу или атрибуту id. Селектор класса записывается в виде точки (.), за которой следует имя класса. Селектор идентификатора записывается как решетка (#), за которой следует имя идентификатора.

См. «Селекторы класса пера и идентификатора» Кристины Перриконе (@hubspot) на CodePen.

Чтобы указать конкретный дочерний элемент внутри родительского элемента, напишите селектор как родительский элемент, а затем дочерний элемент (с пробелом между ними):

См. Pen Parent/Child Selector от Christina Perricone (@ hubspot) на CodePen.

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

См. Селектор группировки перьев Кристины Перриконе (@hubspot) на CodePen.

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

Что такое объявление CSS?

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

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

Что такое свойство CSS?

Как первая часть объявления CSS, свойство CSS сообщает браузеру, какую особенность стиля элемента следует изменить. Есть много свойств CSS, которые влияют на разные вещи. Например, свойство может ориентироваться на цвет, размер, шрифт, форму или расположение элемента на странице. Свойство всегда связано по крайней мере с одним значением. Свойство и его значение(я) разделяются двоеточием.

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

Вот почему справочные страницы свойств CSS, подобные этой, включают раздел «Совместимость с браузером». Для каждого браузера в приведенной ниже таблице указаны самые ранние совместимые выпуски (если доступны):

Источник изображения

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

Что такое значение CSS?

Каждое свойство CSS имеет собственный набор значений. Значение определяет стиль свойства элемента. Вот некоторые общие свойства и их значения:

• Свойства, связанные с цветом, могут принимать простые однословные значения, такие как синий и красный , а также шестнадцатеричные коды — #33E0FF и #FF5733 — и значения RGB — rgb(51, 224, 255) и rgb(255, 87, 51) .
• Свойство width принимает значение длины — например, пикселей (пикселей) — или процентное значение, которое определяет размер элемента относительно ширины родительского контейнера. Например,
  внутри тега , установленного на 50% Ширина будет охватывать половину ширины области просмотра.
• Свойство font-family принимает письменные имена веб-безопасных шрифтов, таких как Arial , Times New Roman или Courier .

См. Значения Pen CSS от Кристины Перриконе (@hubspot) на CodePen.

Некоторые свойства принимают несколько значений. Свойство padding может принимать до четырех значений, которые задают пространство над, справа, снизу и слева от содержимого элемента соответственно.

См. Pen Span With Padding Кристины Перриконе (@hubspot) на CodePen.

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

Комментарии CSS

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

Чтобы прокомментировать в CSS, напишите /* , затем текст комментария и закончите на */ .

 
 /* Я комментарий в CSS! */ 
 

Комментарии также можно использовать для проверки вашего CSS — чтобы отключить правило или объявление, просто «закомментируйте» код, а затем «раскомментируйте» код, чтобы повторно активировать его:

См. комментарии Pen CSS by Кристина Перриконе (@hubspot) на CodePen.

Как добавить CSS в HTML

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

Внешний CSS

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

Чтобы создать файл CSS, напишите код CSS в любом текстовом редакторе или редакторе кода и сохраните файл с расширением .css. Чтобы связать файл CSS с файлом HTML, поместите файл HTML и файлы CSS в одну папку, а затем вставьте следующий код в папку 9.0074 раздел HTML-файла:

…где style.css — это имя вашего файла CSS. Правила в этом файле CSS будут применяться к любому файлу HTML, который ссылается на него с помощью элемента выше.

См. Pen External CSS от Кристины Перриконе (@hubspot) на CodePen.

Внутренний CSS

Внутренний CSS — это код CSS, встроенный в документ HTML. Это написано внутри