Что такое язык CSS и для чего это нужно?

Аббревиатура CSS расшифровывается, как Cascading Style Sheets или же, в русском переводе, как каскадные таблицы стилей. Что же это такое и для чего этот язык был в свое время придуман?

Итак, опираясь на изученный нами чуть раньше учебник Html мы можем сказать, что разметка веб документа осуществляется с помощью тегов этого языка. Т.е. с помощью ХТМЛ мы создаем структуру наших документов (вебстраницы). Например, в чистом Html мы можем задавать заголовки через теги h2-H6, абзацы P и другие элементы структуры документов, и даже придать им нужный нам вид в браузере.

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

Почему? А вы вспомните, как можно в чистом Html задать цвет фрагменту текста? Правильно, с помощью тега Font и атрибута Color. А если вы хотите покрасить в нужный цвет сразу несколько абзацев в вашем тексте?

Тогда придется внутри каждого из них (тег абзаца P является блочным, а значит его нельзя будет помещать внутри строчного элемента Font) вставлять теги Font с нужным значением цвета в атрибуте Color.

Все это жутко будет загромождать исходный код, что очень и очень нежелательно, ибо пострадает скорость загрузки сайта, а на коммуникационное оборудование интернета будет создаваться излишняя нагрузка. На это разработчики спецификаций Html 4.01 из валидатора W3C «пойтить» не могли.

Поэтому они придумали следующий выход из создавшейся ситуации. Разработчики из W3C решили оформить все визуальные представления web документа в виде специального языка стилевой разметки, который назвали каскадными таблицами стилей или же попросту CSS (читается как си-эс-эс). В чем суть технологии?

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

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

Базовый вид документа (веб страницы) вы сможете увидеть, перейдя по этой ссылке:

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

Обратите внимание, что исходный Html код при этом остается в точности таким же, а изменяется лишь CSS оформление. Поражает, не правда ли?!

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

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

Итак, что же это такое и из чего он состоит? Этот якобы язык можно разделить на две части:

1. Правила, которые говорят браузеру, как должен выглядеть элемент на экране.
2. Селекторы — метки, которые позволяют браузеру понять, к каким именно элементам ХТМЛ кода нужно будет применять данные правила.

Теперь давайте посмотрим, как оформление заданное в стилях подключается к исходному коду вебстраницы. Существуют три основных способа использования CSS совместно с Html:

1. Вложение — CSS код прописывается непосредственно в нужном теге элемента с помощью атрибута Style
2. Встраивание — весь стилевой код для web документа прописывается в его шапке (внутри тегов Head) с помощью элемента Style
3. Связывание — весь CSS код размещается (выносится) в отдельном внешнем файле, который подключается к документу с помощью элемента Link в его шапке

Ну вот, видите как мы уже много узнали о языке стилевой разметки. Теперь самое время поговорить о его синтаксисе. В общем-то, он довольно прост:

Одно правило в CSS коде состоит из двух элементов — свойство (в нашем примере это color — цвет текста и background — цвет фона) и его значение (в нашем примере это код цвета red и #CCCCCC). Обязательным условием является отделение свойства от его значения двоеточием.

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

Использование Style для подключения Css к Html коду

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

Первый способ называется методом вложения CSS в Html с использованием атрибута Style:

Давайте посмотрим, как можно использовать данный метод для задания цвета и фона абзацу:

Что такое метод вложения

Как вы можете видеть, одним легким движение мы окрасили текст абзаца в красный цвет (color:red) и одновременно подложили под него серый фон (background:#cccccc). Style относится к тем шести глобальным атрибутам в Html, которые могут использоваться совместно с абсолютно любыми тегами (они перечислены внизу приведенного скриншота):

В Css мы так же активно будем применять универсальные атрибуты Id и Class, но об этом разговор пойдет уже в последующих статьях, а пока что мы рассмотрели возможность использования Style для подключения стилевых правил оформления к определенным элементам Html кода. Он позволяет использовать в качестве своего значения набор этих самых правил (в неограниченном количестве).

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

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

Вместо того, чтобы включать в каждый тег на странице атрибут Style, содержащий правила языка стилей, мы теперь будет прописывать все нужные нам для этого web документа правила CSS внутри одного единственного тега Style, который в свою очередь будет размещаться в шапке этого документа (между элементами Head).

Вы помните, что такое Head и где он прописывается в структуре веб документа? Если не помните, то посмотрите это на данной блок-схеме:

Т.е. в коде это могло бы выглядеть так:

<head>
...
<style type=”text/css”>
...
"стилевые правила, применяемые ко всему этому документу (странице)"
. ..
</style>
...
</head>

Не совсем понятно? Ну, сейчас я попробую это проиллюстрировать:

Для того, чтобы браузер не принимал стилевые правила за язык гипертекстовой разметки, в элементе Style нужно будет прописать обязательный атрибут Type со значением ”text/css” (заголовок медиа контента для таблиц каскадных стилей). Т.о. заключенный внутри этого элемента код будет интерпретирован браузером как CSS.

Смотрим дальше на приведенный чуть выше пример. Как вы можете видеть, стилевые правила заключены в фигурные скобки, а перед ними прописан так называемый селектор в виде латинской буквы «P». Зачем нужен этот селектор?

А как иначе мы можем указать браузеру, что данные правила CSS нужно будет применить только к тегам абзацам (селектор P) данного web документа и ни к чему другому.

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

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

При использовании метода вложения селектор и фигурные скобки мы не использовали, т. к. браузеру было уже и так понятно, что данные правила CSS нужно применять именно к тому тегу, внутри которого и прописан атрибут Style.

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

В простейшем случае в качестве селектора можете использовать название тега, к которому должны быть применены правила языка CSS заключенные в фигурные скобки, открывающиеся сразу после названия селектора. В нашем примере в качестве селектора используется название тега абзаца «P». Уже более подробно про селекторы в языке стилевой разметки мы с вами поговорим в следующей статье (см. ссылку выше).

Подведем итог для метода встраивания CSS кода в Html документ — все нужные для этого документа стилевые правила будут описаны в одном единственном теге Style, а не во многих разных элементах, как это было бы в случае использования метода вложения, описанного чуть выше.

Вынос таблиц CSS стилей в отдельный файл с помощью Link

Последний способ интеграции стилевого кода в веб документ называется методом связывания. Проще всего будет проиллюстрировать этот метод:

Основное отличие его от рассмотренных чуть выше способов (вложения и встраивания) заключается в том, что при использовании метода связывания все правила языка CSS выносятся в отдельный внешний файл. Он будет опять же текстовым (как и любой Html документ) и ему обычно присваивают расширения .css, чтобы для его открытия на локальном компьютере под управлением Windows можно было бы назначить специальную программу (я советую использовать для этого лучший Html редактор Нотпад++, описанный тут).

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

Браузер в этом случае найдет указанный файл таблиц стилей (относительный или абсолютный путь до него указан в атрибуте Href тега Link), загрузит его и применит указанные в нем правила языка CSS для внешнего оформления текущего Html документа.

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

При использовании элемента Style (метод встраивания) браузер должен будет каждый раз подгружать вместе с ХТМЛ кодом документа и зашитые в нем CSS правила и селекторы, а в случае использования внешнего файла таблиц стилей, браузеру достаточно лишь один раз загрузить Style.css и уже потом брать его из собственного кеша (области на жестком диске компьютера пользователя) при оформления других страниц вашего сайта.

Атрибут type=”text/css” тега Link означает, что данный медиа контент будет ничем иным, как языком стилевой разметки. Но так же при связывании файла CSS и Html документа используется атрибут Rel со значением Stylesheet. Дело в том, что Link (служебная гиперссылка) может использоваться для абсолютно разных целей.

Если вы посмотрите исходный код этой страницы в браузере, то увидите, что в области Head имеется целая россыпь различных тегов Link:

И назначение каждой из этих служебных гиперссылок определяется значением атрибута Rel. Например, rel=»shortcut icon» используется для указания пути до файла иконки Favicon, а rel=»alternate» может использоваться для указания альтернативной версии страницы (примером альтернативного представления Html документа может служить RSS лента).

Ну, и в случае использования атрибута rel=»stylesheet» в Link, мы задаем браузеру путь до файла таблиц стилей (в атрибуте Href этот путь можно указать в абсолютном или относительном виде). Т.е. с помощью атрибута Rel мы говорим браузеру, что будет из себя представлять файл, путь к которому указан в Href (stylesheet — с CSS).

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

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

Важность знания CSS при работе с сайтом

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

1. Как вставлять изображения в Html код с помощью тега IMG описано тут и тут
2. Как создавать гиперссылки — здесь
3. Маркированные и нумерованные списки — тут
4. Таблицы различной сложности и вложенности — тут
5. Html формы — здесь
6. Фреймы на основе Iframe и Frame — тут
7. Вставка видео и другого медиаконтенкта с помощью Embed и object — здесь
8. Doctype, Html комментарии — тут
9. Как задаются цвета в Html и CSS коде — здесь
10. Форматирование текста в HTML, Html шрифты, Strong, Em, B, I — тут
11. Пробелы и спецсимволы (мнемоники) в Html коде — здесь

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

Дело в том, что сейчас чистый Html выполняет лишь роль поставщика содержимого веб страницы и позволяет в том или ином виде организовать ее структурное оформление (упомянутые выше списки, таблицы, формы, изображения, ссылки и т.п.).

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

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

Даже малейшее изменение внешнего вида (добавление иконки RSS ленты, счетчиков посещений и т.п.) потребует внесения изменений в CSS код.

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

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

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

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

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

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

1. Для оформления шрифтов: Font (Weight, Family, Size, Style) и Line Height — тут
2. Для оформления текста в Html: text-decoration, vertical-align, text-align, text-indent — здесь
3. Для задания цвета фона или фоновой картинки: Background (color, position, image, repeat, attachment) — тут
4. Для настройки внешнего вида списков: List style ( type, image, position) — здесь
5. Для задания отступов, рамок и границ: Padding, margin и border — тут
6. Задаем тип отображения Html элементов на вебстранице: Display (block, none, inline) — здесь
7. Для описания области контента при блочной верстке: Height, width и overflow — тут
8. Инструменты блочной верстки: Float и clear — здесь
9. Способы позиционирования Html элементов: (правила left, right, top и bottom) для Position (absolute, relative и fixed) — тут
10. Z-index и CSS правило Cursor — здесь

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

Как подключить CSS стили к Html документу

Но начать я хочу не с синтаксиса или свойств таблицы каскадных стилей, а с описания тех способов, с помощью которых можно их подключить к Html документу. Таких способов существует только три и самым часто используемым из них является размещение стилей в отдельном файле с расширением .css или нескольких таких файлах.

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href="https://ktonanovenkogo.ru/wp-content/themes/Organic/style.css" type="text/css" media="screen" />
</head>

Если вы используете CMS, то головная часть Html кода будет формироваться в одном из файлов PHP из папки с используемой вами темой оформления. Для движков Joomla, WordPress и SMF можете узнать расположение этого файла, формирующего открывающие и закрывающие теги HEAD, из этой публикации.

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

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

Кстати, если хотите более подробно изучить эту тему, то посмотрите статью — что это такое Style и Link для связывания языка Css и Html.

Глобальные стили прописываются внутри открывающего и закрывающего тегов STYLE и, в принципе, могут располагаться в любом месте кода вебстраницы, но чаще всего их помещают в головную часть документа между открывающим и закрывающим тегами HEAD:

<head>
...
<style type=”text/css”>
...
"CSS свойства глобальных стилей, применяемые ко всему Html документу"
...
</style>
...
</head>

Последний способ подключения реализуется за счет внутренних (встроенных) стилей. Для этого в требуемый Html тег вам нужно будет добавить атрибут Style, включающий в себя в качестве параметров CSS свойства, написанные с учетом синтаксиса таблиц каскадных стилей.

Код может выглядеть, например, так:

<p style=”color:#aa87cc";font-size:14px;font-family:verdana;”>Я абзац, выделенный красным цветом, других таких на сайте нет</p>

В тег абзаца P мы добавили свойства по правилам внутренних стилей, таким образом текст в данном абзаце будет выводиться шрифтом Verdana размером 14 пунктов и цветом, закодированным в #aa87cc.

Причем эти свойства будут применены исключительно только к данному абзацу. Я иногда использую внутренние (встроенные) стили на этапе отладки дизайна для ускорения процесса по внесению изменений, а затем переношу полученные CSS свойства в файл с внешними стилями.

Синтаксис CSS — правила, свойства, селекторы

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

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

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

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

Итак, давайте рассмотрим CSS правило и узнаем из каких частей оно состоит и как эти части отделяются друг от друга:

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

В фигурных скобках можно написать сколько угодно пар «Свойство — Значение» для данного правила, разделяя их точкой с запятой. Все, что заключено в фигурных скобках называют одним общим термином — блок объявлений, а пару «Свойство — Значение» называют объявлением.

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

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

Например, можно CSS правило записать в одну строку:

p {color:#aa87cc";font-size:14px;font-family:verdana;}

А можно записать и так:

p {
color:#aa87cc";
font-size:14px;
font-family:verdana;
}

В принципе, CSS допускает и такую трактовку приведенного выше кода:

p {color:#aa87cc";}
p {font-size:14px;}
p {font-family:verdana;}

Но предпочтительным для восприятия и в плане оптимизации размера этот способ записи нельзя назвать. Лучше все относящиеся к одному селектору прописать в одном правиле.

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

p {color:blue;}
p {color:black;}

Браузер отобразит текст в абзацах именно черным цветом, т.к. это правило расположено ниже в коде.

CSS селектор призван указывать браузеру, к какому именно элементу Html документа нужно будет применить данное плавило. В качестве селектора может быть использован какой-либо тег (P, h2-6, BODY, TABLE и т.д.), но также могут использоваться и так называемые классы или ID.

Кроме того, бывают и составные селекторы (контекстные), в которых несколько простых селекторов разделены пробелом. В общем тема CSS селекторов заслуживает того, чтобы прочитать все накопленные материалы.

1. Простейшие селекторы тега, класса (class), Id, универсальный и селекторы атрибутов — тут
2. Селекторы псевдоклассов и псевдоэлементов (hover, first-child, first-line) — здесь
3. Приоритеты (Important), примеры комбинаций и группировки селекторов, пользовательские и авторские стили — тут

Комментарии и размеры в языке стилевой разметки

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

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

Для того, чтобы браузер не пытался интерпретировать комментарии как CSS код, вам нужно их заключить в специальные слеши со звездочками:

/* текст комментария */

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

.tabberlive .tabbertab {
 padding:5px;
 border-top:0;
 position:relative;
 /* If you don't want the tab size changing whenever a tab is changed
 you can set a fixed height */
 /* height:200px; */
 /* If you set a fix height set overflow to auto and you will get a
 scrollbar when necessary */
 /* overflow:auto; */

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

Следует отметить, что в случае использования в значениях свойств десятичных дробей, их нужно разделять точкой, причем ноль в качестве целой части можно не писать (0. 5 или .5 будет интерпретировано браузером одинаково).

Примечательно, что при задании размера шрифта нужно указывать в значениях как относительные единицы размера шрифта (em, px, px или просто %), так и абсолютные единицы (pt, cm, mm). Чаще используют относительные единицы, но бывает, что размер шрифта указывают в pt (пунктах — 1/72 дюйма). Читате подробнее про единицы размеров (пикселы, Em и Ex), цвет и наследование в CSS.

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

Поэтому 1em можно принять за 100% и тогда, для увеличения размера текста относительно принятого в браузере по умолчанию, нужно будет прописать в CSS свойстве значение, например, 1.1 em. А для уменьшения — 0.9 em.

Размер шрифта задаваемый в ex по логике работы схож с em, с той лишь разницей, что за 100 процентов берется высота строчной буквы «x». Но самой популярной относительной единицей задания размера шрифта является, конечно же, px — пиксель.

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

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Что такое HTML+CSS

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

К примеру, зададим особый стиль для тега <b>. Этот тег выделяет текст жирным. А мы сделаем такой текст ещё и красным. Для этого используем следующий CSS код:

b {
   color: red;
}

Строчка «color: red;» называется свойством и его значением. Нетрудно догадаться из названия, что это свойство отвечает за цвет. А значение, которое пишется через двоеточие, делает его красным. В итоге, на странице браузера текст, выделенный тегом <b>, будет автоматически становиться красным:

Часть текста выделена жирным шрифтом

Есть возможностьзадавать сразу несколько свойств для одного селектора. Тогда надо разделять из через точку с запятой «;«. Об этом читайте далее в статье.

В CSS коде выше, в примере, b называется «селектором». Этот селектор соответствует тегу <b>. По аналогии вы можете использовать другие теги в качестве селекторов: «table«, «tr«, «i» и т.д.

Стили для элементов страницы задаются несколькими способами. Самый простой — это внутри тега <style> в любом месте страницы. В таком случае HTML код выглядит так:

<!DOCTYPE html>
<html>
<head>
<title>Про мышей</title>
</head>
<body>
Тише, <b>мыши</b>, кот на крыше,<br>
а котята ещё выше.<br>
<i>Кот</i> пошёл за молоком,<br>
а котята кувырком.<br>
<i>Кот</i> пришёл без молока,<br>
а котята ха-ха-ха.
<style>
b { 
color: green;
font-size: 120%;
}
i { 
color: red;
font-size: 80%;
}
</style>
</body>
</html>

Свойство «font-size: 120%;» задаёт размер шрифта относительно общего размера шрифта. При значении больше 100% оно увеличивает шрифт. Получится такой результат:

Тише, мыши, кот на крыше,

а котята ещё выше.
Кот пошёл за молоком,

а котята кувырком.
Кот пришёл без молока,

а котята ха-ха-ха.

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

Тег <style>, внутри которого пишется CSS код, может быть где угодно на странице. Часто этот тег ставят в раздел <head>.

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

b {
   color: red;
}
b {
   color: green;
}

— в таком случае текст внутри тега <b> будет зелёным, а не красным, потому что значение свойства будет переопределено последним совпадением.

Можно задать сколько угодно свойств. В том числе те свойства, которые будут переопределить родные свойства тегов. К примеру, тегу <b> можно задать свойство, при котором он перестанет выделять текст жирным.

При таком способе записи CSS и HTML перемешиваются, что сильно усложняет работу программисту. Логичным выходом является сбор всех стилей в одно место. А точнее — в один отдельный файл, который загружается при загрузке страницы. Такой файл можно подключить к HTML с помощью тега <link> внутри блока <head>:

<!DOCTYPE html>
<html>
<head>
<title>Про мышей</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
Тише, <b>мыши</b>, кот на крыше,<br>
а котята ещё выше.<br>
<i>Кот</i> пошёл за молоком,<br>
а котята кувырком.<br>
<i>Кот</i> пришёл без молока,<br>
а котята ха-ха-ха. 
</body>
</html>

На пятой строчке примера видно, что в блоке <head> появился подключаемый файл со стилями:

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

По аналогии со ссылками в href=»…» можно писать как относитльный путь к файлу стилей, так и абсолютный.

Подключаемый файл стилей «style.css» будет содержать всё, что было внутри тега <style>…</style> из предыдущего примера. То есть:

b { 
color: green;
font-size: 120%;
}
i { 
color: red;
font-size: 80%;
}

CSS файл «style.css» — это точно такой же текстовый файл, что и HTML. Для изменения этого файла вам понадобится любой текстовый редактор. Нет необходимости применять специальные программы.

Последний способ указать CSS свойство — это непосредственно внутри тега, в атрибуте style=». ..». В таком случае свойством будет обладать только один тег, а не все теги на странице. Применять это можно так:

Часть текста <b>выделена</b> жирным шрифтом

Можно указать сразу несколько свойств через «;«. Результат на странице будет таким:

Часть текста выделена жирным шрифтом

Помните о том, что свойства перезаписываются. Самым важным является CSS, указанный непосредственно внутри атрибута тега style=»…». Эти свойства будут применены в любом случае. А CSS в подключенном файле в секции <head>…</head> будет перезаписываться свойствами, которые находятся на странице ниже, внутри <style>…</style>.

CSS HTML уроки для начинающих академия

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

Манипулировать текстом

Цвета,  Коробки

Стилизация HTML с CSS

CSS означает каскадные таблицы стилей.

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

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

CSS можно добавлять к элементам HTML тремя способами:

• Встроенный — с помощью атрибута Style в элементах HTML
• Internal -с помощью <style> элемента в <head> разделе
• Внешний — с помощью внешнего CSS-файла

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

Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.

Встроенный CSS

Встроенный CSS используется для применения уникального стиля к одному элементу HTML.

Встроенный CSS использует атрибут style элемента HTML.

В этом примере устанавливается цвет текста элемента <h2> синим цветом:

Пример

<h2>This is a Blue Heading</h2>

Внутренняя CSS

Внутренний CSS используется для определения стиля для одной HTML-страницы.

Внутренняя таблица CSS определена в разделе <head> HTML-страницы в элементе <style> :

Пример

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h2   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

</body>
</html>

Внешние CSS

Внешняя таблица стилей используется для определения стиля для многих HTML-страниц.

С помощью внешней таблицы стилей можно изменить внешний вид всего веб-узла, изменив один файл!

Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе <head> страницы HTML:

Пример

<!DOCTYPE html>
<html>
<head>
  <link rel=»stylesheet» href=»styles. css»>
</head>
<body>

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

</body>
</html>

Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением. CSS.

Вот как выглядит «styles.css»:

body {
    background-color: powderblue;
}
h2 {
    color: blue;
}
p {
    color: red;
}

Шрифты CSS

Свойство CSS color определяет используемый цвет текста.

Свойство CSS font-family определяет используемый шрифт.

Свойство CSS font-size определяет размер текста, который будет использоваться.

Пример

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

<h2>This is a heading</h2>
<p>This is a paragraph. </p>

</body>
</html>

Граница CSS

Свойство CSS border определяет границу вокруг элемента HTML:

Пример

p {
    border: 1px solid powderblue;
}

CSS заполнение

Свойство CSS padding определяет отступ (пробел) между текстом и границей:

Пример

p {
    border: 1px solid powderblue;
    padding: 30px;
}

CSS маржа

Свойство CSS margin определяет поле (пробел) за пределами границы:

Пример

p {
    border: 1px solid powderblue;
    margin: 50px;
}

Атрибут ID

Чтобы определить конкретный стиль для одного специального элемента, добавьте атрибут id к элементу:

<p>I am different</p>

then define a style for the element with the specific id:

Пример

#p01 {
    color: blue;
}

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

Атрибут class

Чтобы определить стиль для специального типа элементов, добавьте атрибут class к элементу:

<p>I am different</p>

Затем определите стиль для элементов с определенным классом:

Пример

p. error {
    color: red;
}

Внешние ссылки

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

В этом примере используется полный URL-адрес для связывания с таблицей стилей:

Пример

<link rel=»stylesheet» href=»https://html5css.ru/html/styles.css»>

Этот пример связывается с таблицей стилей, расположенной в папке HTML на текущем веб-узле:

Пример

<link rel=»stylesheet» href=»/html/styles.css»>

Этот пример связывается с таблицей стилей, расположенной в той же папке, что и текущая страница:

Примере

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

Дополнительные сведения о путях к файлам можно прочитать в разделе пути к файлам HTML.

Справка

• Использование атрибута HTML style для встроенного стиля
• Используйте элемент HTML <style> для определения внутреннего CSS
• Используйте элемент HTML <link> для ссылки на внешний файл CSS
• Используйте элемент HTML <head> для хранения <Style> и <Link> элементов
• Используйте свойство CSS color для текстовых цветов
• Используйте свойство CSS font-family для текстовых шрифтов
• Используйте свойство CSS font-size для размеров текста
• Использовать свойство CSS border для границ
• Используйте свойство CSS padding для пространства внутри границы
• Использование свойства CSS margin для пространства за пределами границы

Теги стиля HTML

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

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

• Предыдущий
• Обзор: первые шаги
• Следующий

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

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

 

  <голова>
    <метакодировка="utf-8" />
    
  
  <тело>
     
Я заголовок первого уровня
 
    

      Это абзац текста. В тексте есть
      элемент span, а также
       com">ссылка.
    
    

      Это второй абзац. Он содержит элемент выделенный.
    
    <ул>
      
Элемент один
      
Второй пункт
      
Элемент три
    
  

 

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

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

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

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

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

 h2 {
  красный цвет;
}
 

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

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

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

 p {
  цвет: зеленый;
}
 

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

 p,
ли {
  цвет: зеленый;
}
 

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

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

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

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

 li {
  тип стиля списка: нет;
}
 

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

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

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

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

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

 

  
Первый пункт
  
Второй пункт
  
Элемент три

 

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

 .special {
  оранжевый цвет;
  вес шрифта: полужирный;
}
 

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

Вы можете применить класс special к любому элементу на странице, который должен выглядеть так же, как этот элемент списка. Например, вы можете захотеть, чтобы в абзаце также был оранжевым и полужирным. Попробуйте добавить к нему class of special , затем перезагрузите свою страницу и посмотрите, что произойдет.

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

 ли. специальный {
  оранжевый цвет;
  вес шрифта: полужирный;
}
 

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

 li.special,
диапазон.специальный {
  оранжевый цвет;
  вес шрифта: полужирный;
}
 

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

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

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

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

   li em {
    цвет: ребеккапурпл;
  }
   

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

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

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

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

   h2 + p {
    размер шрифта: 200%;
  }
   

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

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

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

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

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

   a:hover {
    текстовое оформление: нет;
  }
   

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

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

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

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

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

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

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

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

   body h2 + p .special {
    цвет: желтый;
    цвет фона: черный;
    отступ: 5px;
  }
   

  Это стилизует любой элемент с классом special , который находится внутри

  , который идет сразу после

  , который находится внутри . Фу!

  В исходном HTML-коде, который мы предоставили, единственный стилизованный элемент — <диапазон> .

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

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

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

  • Предыдущий
  • Обзор: первые шаги
  • Следующий
  • Что такое CSS?
  • Начало работы с CSS
  • Структура CSS
  • Как работает CSS
  • Оформление страницы биографии

  Последнее изменение: 14 сентября 2022 г. , участниками MDN

  Каскадная таблица стилей для начинающих

  КСС

  08 сентября 2022 г.

  Artūras B.

  4min Read

  CSS был разработан W3C (Консорциум World Wide Web) в 1996 году по довольно простой причине. HTML-элемент не предназначен для использования тегов, помогающих форматировать страницу. Вы должны были только написать разметку для веб-страницы.

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

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

  Загрузить полную памятку по CSS

  Что такое CSS?

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

  Каскадные таблицы стилей в видеоуроке

  Узнайте больше о CSS и о том, как он работает, посмотрев этот видеоурок.

  Подпишитесь на другие обучающие видео! Академия Хостингер

  Подписывайся

  Преимущества CSS на веб-страницах

  Разница между веб-страницей, реализующей CSS, и страницей, не использующей CSS, огромна и, безусловно, заметна.

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

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

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

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

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

  Как работает CSS?

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

  Это абзац.

  .

  Но как оформить абзац? Структура синтаксиса CSS довольно проста. Он имеет селектор и блок объявления. Вы выбираете элемент, а затем объявляете, что хотите с ним сделать. Довольно просто, правда?

  Однако есть правила, которые вы должны помнить. Правила структуры довольно просты, так что не волнуйтесь.

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

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

  Давайте рассмотрим пример:

  Все элементы

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

   <стиль>
  п {
  цвет синий;
  вес текста: полужирный;
  }
   

  Дополнительные примеры см. в нашей шпаргалке по CSS.

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

  Внутренние, внешние и встроенные стили CSS

  Мы кратко рассмотрим каждый стиль, для подробного объяснения каждого метода будет ссылка под обзором.

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

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

  Наконец, мы поговорим о стиле CSS Inline . Inline работает с определенными элементами, имеющими тег

  Выход:
  

  
  

  .

  Интуированный на CSS?? Полное руководство, как избавиться от страха »

  Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

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

  Изображение справа не только менее интересно, но и намного сложнее в использовании.

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

  Содержание

  • 1 Что такое CSS?
    • 1.1 Чем CSS отличается от HTML?
  • 2 Синтаксис CSS
    • 2.1 Пример синтаксиса CSS
  • 3 Подготовка разметки HTML для оформления
    • 3.1 Когда использовать классы
    • 3.2 Когда использовать идентификаторы
    • 3.3 Когда не использовать хуки
    • 3.4 Рекомендации по подготовке разметки к стилизации
  • Стили
  • 4.2 Внутренние таблицы стилей
  • 4.3 Внешние таблицы стилей
  • 4.4 Когда использовать каждый метод
• 5 Как работает CSS
  • 5.1 Каскадное наследование
  900 Специфика0004
• 6 Что может CSS?
  • 6.1 Модель коробки
  • 6.2 Создание макетов
  • 6.3 Веб-шрифты и типография
  • 6.4 Создание постоянного перекрестного опыта
• 7 Связанные элементы
• 8 учебных пособий и ресурсов

Что такое CSS?

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

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

Чем CSS отличается от HTML?

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

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

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

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

Синтаксис CSS

Синтаксис CSS включает селекторы, свойства, значения, объявления, блоки объявлений, наборы правил, at-правила и операторы.

• Селектор — это фрагмент кода, используемый для идентификации элемента или элементов веб-страницы, на которые должны влиять стили.
• Свойство — это аспект элемента, на который нужно воздействовать. Например, цвет, отступы, поля и фон являются одними из наиболее часто используемых свойств CSS.
• Значение используется для определения свойства . Например, свойству color может быть присвоено значение red следующим образом: color: red; .
• Комбинация свойства и значения называется объявлением .
• Во многих случаях несколько объявлений применяются к одному селектору . Блок объявлений — это термин, используемый для обозначения всех объявлений, применяемых к одному селектору .
• Одиночный селектор и блок объявления , который следует за ним в комбинации, называются набором правил .
• At-правила аналогичны наборам правил , но начинаются со знака @ , а не с селектор . Наиболее распространенным правилом at является правило @media , которое часто используется для создания блока правил CSS, которые применяются в зависимости от размера устройства, просматривающего веб-страницу.
• Оба набора правил и at-rules являются операторами CSS .

Пример синтаксиса CSS

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

 h2 {
    красный цвет;
    размер шрифта: 3em;
    оформление текста: подчеркивание;
    }
 

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

Используя h2 в качестве селектора, мы говорим, что каждый заголовок уровня 1 на веб-странице должен следовать объявлениям, содержащимся в этом наборе правил.

Набор правил содержит три объявления:

• цвет:красный;
• размер шрифта: 3em;
• оформление текста: подчеркивание;

color , font-size и text-decoration — все это свойства. Существуют буквально сотни свойств CSS, которые вы можете использовать, но обычно используются лишь несколько десятков.

Мы применили значения red , 3em и underline к свойствам, которые мы использовали. Каждое свойство CSS определено для приема значений, отформатированных определенным образом.

Для свойства color мы можем использовать либо ключевое слово цвета, либо формулу цвета в формате Hex, RGB или HSL. В этом случае мы использовали ключевое слово цвета red . В CSS3 доступно несколько десятков ключевых слов для цветов, но с помощью других цветовых моделей можно получить доступ к миллионам цветов.

Мы применили значение 3em к свойству font-size . Мы могли бы использовать широкий диапазон единиц размера, включая пиксели, проценты и многое другое.

Наконец, мы добавили значение underline к свойству text-decoration . Мы могли бы также использовать overline или line-through в качестве значений для text-decoration . Кроме того, CSS3 позволяет использовать сплошные, двойные, точечные, пунктирные и волнистые стили линий, которые хорошо соответствуют цветам оформления текста. Мы могли бы применить все три значения одновременно, используя такое объявление:

 text-decoration: blue double underline;
 

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

Подготовка HTML-разметки к стилю

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

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

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

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

Когда использовать классы

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

Когда использовать идентификаторы

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

Вот пример кода HTML и CSS для простой панели навигации для простого сайта электронной коммерции.

 <стиль>
    #nav {
        фон: светло-серый;
        переполнение: авто;
        }
    #нав ли {
        плыть налево;
        отступ: 10 пикселей;
        }
    #navli:hover {
        фон: серый;
        }

<ул>
    
Главная
    
Магазин
    
О нас
    
Свяжитесь с нами

 

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

Этот код не повлияет на любые дополнительные списки на той же веб-странице.

#example-nav {
фон: светло-серый;
переполнение: авто;
}
#example-nav li {
поплавок: левый;
отступ: 10 пикселей;
}
#example-nav li:hover {
фон: серый;
}

• Домашняя страница
• Магазин
• О нас
• Свяжитесь с нами

Когда не следует использовать хуки

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

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

 <стиль>
    ул {
        тип стиля списка: верхний роман;
        поле слева: 50px;
        }
    п {
        цвет: темно-синий
        }

Текст абзаца здесь.  Два коротких предложения.
<ул>
Краткий список
Всего два элемента

Дополнительный текст абзаца здесь. На этот раз давайте напишем три предложения. Вот так.
 

Этот код будет отображаться следующим образом.

.code_sample ул {
тип-стиля-списка: верхний римский;
поле слева: 50px;
}
.code_sample p {
цвет: темно-синий
}

Здесь текст абзаца. Два коротких предложения.

• Краткий список
• Всего два пункта

Дополнительный текст абзаца здесь. На этот раз давайте напишем три предложения. Как это.

• Другой список
• Всего два пункта

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

Рекомендации по подготовке разметки к стилизации

Теперь, когда вы знаете, как классы, идентификаторы и теги элементов можно использовать в качестве ловушек для наборов правил CSS, как лучше всего применить эти знания для написания разметки, которая упрощает указание конкретных элементы?

• Обильно и последовательно применяйте занятия. Используйте классы для элементов, которые должны быть выровнены в том или ином направлении, а также для любых элементов, которые постоянно появляются на одной веб-странице.
• Применение идентификаторов к элементам, которые появляются на веб-странице только один раз. Например, используйте идентификатор на div , который содержит содержимое вашей веб-страницы, на ul , который содержит меню навигации, и на div , который содержит заголовок вашей веб-страницы.

Способы привязки правил CSS к HTML-документу

Существует три способа добавления правил CSS на веб-страницу:

• Встроенные стили
• Внутренние таблицы стилей
• Внешние таблицы стилей

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

Встроенные стили

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

 
Пример заголовка
 
 

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

Внутренние таблицы стилей

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

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

 <голова>
    <стиль>
        ч2 {
            красный цвет;
            отступ: 10 пикселей;
            оформление текста: подчеркивание;
            }
    

<тело>
     
Пример заголовка
 

 

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

Внешние таблицы стилей

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

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

 /****************************************************** **
Сохраните с именем, оканчивающимся на . css, например styles.css.
****************************************************/
ч2 {
    красный цвет;
    отступ: 10 пикселей;
    оформление текста: подчеркивание;
    }
 

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

 <голова>


<тело>
     
Пример заголовка
 

 

При загрузке этого HTML-документа тег link вызовет загрузку стилей из файла styles.css на веб-страницу. В результате все элементы заголовка уровня 1 будут отображаться с красным текстом, подчеркнутым и с 10-пиксельным отступом, примененным к каждой стороне.

Когда использовать тот или иной метод

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

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

Встроенные стили можно использовать в двух случаях:

1. При написании правил CSS, которые будут применяться только к одному элементу на одной веб-странице.
2. При применении редактором WYSIWYG, таким как редактор tinyMCE, интегрированный в систему управления контентом, такую ​​как WordPress.

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

Как работает CSS

При написании CSS много раз пишутся правила, конфликтующие друг с другом. Например, при стилизации заголовков все следующие правила могут применяться к элементу h2 .

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

Как разработчик может написать правила, которые будут достаточно общими, чтобы охватывать каждый h2 , но при этом достаточно специфичными, чтобы определять стили, которые должны появляться только в определенных экземплярах данного элемента?

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

Два правила, определяющие поведение CSS, — это наследование и специфичность.

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

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

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

 <голова>
    <стиль>
        р {цвет: красный;}
        р {цвет: синий;}
    

<тело>
Какого цвета будет текст этого абзаца?

 

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

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

Какого цвета будет текст этого абзаца?

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

Правила из styles_2.css будут применяться в случае возникновения конфликтов между стилями, содержащимися в этих двух таблицах стилей.

Наследование стилей — еще один пример каскадного поведения стилей CSS.

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

 <голова>
    <стиль>
        ул {цвет: красный;}
    

<тело>
    <ул>
        
Элемент 1
        
Элемент 2
    

 

Вот как будет выглядеть этот код.

.code-sample-ul {цвет: красный;}

• Элемент 1
• Элемент 2

Не каждое свойство передается от родительского к его дочерним элементам. Браузеры считают определенные свойства неунаследованными свойствами. Поля — это один из примеров свойства, которое не передается от родительского к дочернему элементу.

Специфика

Второе правило, определяющее, какие правила применяются к каждому элементу HTML, — это правило специфики.

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

• Наименее конкретный тип селектора — это селектор уровня элемента.
• Когда класс используется в качестве селектора, он отменяет правила CSS, написанные с помощью тега элемента в качестве селектора.
• Когда идентификатор используется в качестве селектора, он имеет приоритет над правилами CSS, написанными с помощью селекторов элементов или классов.

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

Еще один способ повысить специфичность селектора — использовать ряд элементов, классов и идентификаторов, чтобы определить элемент, к которому вы хотите обратиться. Например, если вы хотите определить неупорядоченные элементы списка в списке с классом «список-примеров», содержащимся с div с идентификатором «example-div», вы можете использовать следующий селектор для создания селектора с высоким уровнем специфичности.

 div#example-div > ul.example-list > li {стили здесь}
 

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

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

Что может CSS?

Лучше задать вопрос: «Что не может сделать CSS?»

С помощью CSS можно превратить HTML-документ в профессиональный отточенный дизайн. Вот несколько вещей, которые вы можете сделать с помощью CSS:

• Создайте гибкую сетку для разработки полностью адаптивных веб-сайтов, которые прекрасно отображаются на любом устройстве.
• Придайте стиль всему: от типографики до таблиц, форм и многого другого.
• Расположение элементов на веб-странице относительно друг друга с использованием таких свойств, как float , position , overflow , flex и box-sizing .
• Добавление фоновых изображений к любому элементу.
• Создание фигур, взаимодействий и анимации.

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

Блочная модель

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

 
Заголовок 1
 
Короткий абзац текста. Всего четыре фразы. Большинство предложений довольно короткие. Особенно этот.
 
Заголовок 2
 
<ул>
    
Небольшой список
    
Три элемента в этом списке
    
Сделаем это ненумерованным списком

 
Заголовок 3
 
Последний короткий абзац текста.  Всего четыре фразы. Большинство предложений довольно короткие. Особенно этот.