Как пользоваться css

Начало работы с CSS

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

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

Начнём с HTML

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

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

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

Добавление CSS в наш документ

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

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

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

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

h1  color: red; > 

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

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

Стилизация HTML-элементов

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

p  color: green; > 

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

p, li  color: green; > 

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

Изменение поведения элементов по умолчанию

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

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

li  list-style-type: none; > 

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

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

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

Добавление класса

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

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

ul> li>Элемент одинli> li class="special">Элемент дваli> li>Элемент em>триem>li> ul> 

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

.special  color: orange; font-weight: bold; > 

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

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

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

li.special  color: orange; font-weight: bold; > 

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

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

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

Стилизация элементов на основе их расположения в документе

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

li em  color: rebeccapurple; > 

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

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

h1 + p  font-size: 200%; > 

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

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

Стилизация элементов на основе состояния

a:link  color: pink; > a:visited  color: green; > 

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

a:hover  text-decoration: none; > 

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

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

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

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

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

Сочетание селекторов и комбинаторов

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

, который идёт сразу после */h1 + ul + p. >

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

body h1 + p .special  color: yellow; background-color: black; padding: 5px; > 

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

, который приходит сразу после , который находится внутри . Уф!

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

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

Завершение

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

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

В этом модуле

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

Found a content problem with this page?

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

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Основы CSS — Основы современной верстки

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

Для визуального оформления WEB-страницы создан язык CSS. CSS переводится как каскадные таблицы стилей (Cascading Style Sheets). Именно этот язык отвечает за то, как наши HTML-элементы будут выведены пользователю в браузере.

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

Стили CSS

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

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

 Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально. 

Изменим размер и цвет шрифта в этом предложении. Это можно сделать следующей CSS-записью:

p  color: red; font-size: 20px; > 

Что означает эта таинственная запись выше? Ее можно условно разбить на три основные составляющие:

1. p — это селектор. Здесь мы говорим, чтобы браузер выбрал все параграфы на странице. О том, какие бывают селекторы, мы поговорим чуть позже.
2. Фигурные скобки < >. Они отделяют селектор от правил. Все правила записываются уже внутри этих фигурных скобок.
3. Свойства. Они записываются по схеме, которая представлена ниже. Чем больше у вас будет практики, тем больше различных свойств и их значений вы будете знать. Не пытайтесь выучить их все сразу. Всегда используйте документацию. Даже опытные разработчики прибегают к ней, чтобы вспомнить правильные значения того или иного свойства.

Разберем некоторые свойства, которые помогут вам оформлять текст:

• font-size . Это свойство позволяет задать размер шрифта. Со временем вы узнаете множество различных единиц, в которых можно записать значение. На начальном этапе используйте значения в пикселях. Это достаточно простая и понятная единица измерения, которая не зависит от того, какие еще стили указаны у текста.
• color . Это свойство поможет вам установить новое значение цвета для выбранного текста. Цвет может записываться разными способами. Помимо этого есть большой набор цветов, которые можно записать словами. Это отличный способ познакомиться со свойством color . Посмотреть на все такие записи можно здесь .
• text-align . Свойство, устанавливающее выравнивание текста. Оно может принимать одно из следующих значений: left , right , center , justify .

Подключение CSS

Использовать CSS на странице можно с помощью нескольких способов:

• использование специального файла
• использование тега внутри HTML-разметки
• записывая стили непосредственно у нужного тега. Этот способ называется инлайн (inline) записью.

Разберемся с каждым способом отдельно.

Использование отдельного CSS-файла

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

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

Добавим основную информацию в файл index.html:

  lang="ru">  charset="UTF-8"> Основной файл index.html   

Теперь необходимо подключить файл main.css в наш файл index.html. Для этого используется специальный тег . У данного тега необходимо указать атрибут href , значением которого будет путь до файла main.css. Тег указывается в секции .

  lang="ru">  charset="UTF-8"> Основной файл index.html  rel="stylesheet" href="../css/main.css">   

Дополнительно разберем эту запись: ../css/main.css . Ее можно условно разбить на три составляющие:

1. ../ — переход в директорию выше. Изначально файл index.html находится в директории html/, поэтому мы «выходим» из нее в директорию site/.
2. css/ — переход в директорию css/.
3. main.css — указание имени и расширения файла, который мы хотим подключить.

Если бы наши файлы index.html и main.css находились в одной директории, то подключение выглядело бы следующим образом: href=»main.css» .

После подключения файла мы можем записывать все нужные стили именно в файле main.css. Они автоматически подключатся на наш сайт.

Использование тега style

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

  lang="ru">  charset="UTF-8"> Основной файл index.html p  color: red; font-size: 20px; >    Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.   

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

Inline-стили

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

Возьмем прошлый пример и добавим inline стили:

  lang="ru">  charset="UTF-8"> Основной файл index.html   style="color: red; font-size: 20px;"> Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.   

Классы и идентификаторы

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

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

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

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

Различие класса и идентификатора в количестве использований:

• class — значение атрибута может устанавливаться сколько угодно раз в рамках одной страницы
• id — значение атрибута устанавливается у одного элемента на странице. Не может быть двух одинаковых идентификаторов на странице

Если значений у атрибута несколько, то они указываются через пробел, например:

 class="title title-big">Как стать программистом  class="another-title title-big">Какими навыками обладает программист  id="help">Второго элемента с идентификатором help быть не должно  id="another-help">Второго элемента с идентификатором another-help быть не должно 

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

Селекторы

Селекторы — краеугольный камень всего CSS.

«Не так важны стили, как то, к чему они применяются» © Народная мудрость

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

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

1. Селектор по тегу. Такой селектор мы применяли на протяжении всего урока. Цель простая — просто указать тег, для которого будут применяться стили.
2. Селектор по классу. Если нужно выбрать только конкретные элементы в HTML, то можно дать тегу произвольный класс и, используя конструкцию .название-класса , добавить стили.
3. Селектор по идентификатору. Еще один случай выборки по дополнительному атрибуту тега. Главная разница заключается в самом HTML — идентификатор не может повторяться в рамках одной страницы. Одно имя может использоваться только один раз. В связи с этим нет возможности задать стили для идентификатора и использовать его на других элементах. Для выбора идентификатора используется конструкция #имя-идентификатора .

Рассмотрим все три селектора на реальном примере:

  lang="ru">  charset="UTF-8"> Основной файл index.html  rel="stylesheet" href="../css/main.css">   class="content">  id="main-title">Заголовок с идентификатором Просто параграф без класса или идентификатора    

#main-title  color: white; font-size: 20px; text-align: center; > .content  background-color: black; > p  color: white; > 

После применения этих стилей получится следующая картина:

• Черный фон секции . Для этого использовали класс content и селектор .content ;
• Заголовок первого уровня имеет белый цвет, размер шрифта 20 пикселей и расположение по центру. У заголовка есть идентификатор main-title , поэтому для добавления стилей мы смогли использовать селектор по идентификатору #main-title ;
• Все параграфы будут иметь белый цвет текста. Для этого использовался селектор по тегу.

Вложенность селекторов

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

 class="news"> Новости  Новость 1 Текст новости   Новость 2 Текст новости    class="stories"> Интересные истории  История 1 Текст истории   История 2 Текст истории   

Как добиться того, чтобы заголовки новостей были больше? Можно для каждого заголовка в новости добавить свой класс. Это хорошее решение, если новостей немного или нет необходимости для каждой такой секции вводить новые стили для заголовков.

Более простым решением станет использование вложенности селекторов. Вначале посмотрим, как решить нашу задачу:

.news article h2  font-size: 32px; > 

Этот селектор комбинирует два уже известных типа:

1. Селектор по классу .news
2. Селекторы по тегу article и h2

Разделив их пробелом, мы сказали браузеру: «Возьми все заголовки из , который лежит внутри элемента с классом news ». В примере это элемент .

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

Важно: для удобной работы не стоит использовать очень большую вложенность. Старайтесь использовать комбинацию не более 2 или 3 селекторов

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

 class="news"> Новости  Новость 1 Текст новости   Новость 2 Текст новости  Похожие новости  Похожая новость 1 Текст новости     

Ко второй новости мы добавили блок «Похожие новости». Самое интересное, что наше правило font-size: 32px; применится и к заголовку «Похожие новости», и к заголовку «Похожая новость 1». Так как оба заголовка так или иначе лежат внутри , которые находятся в блоке с классом .news .

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

Как же нам выбрать только те заголовки, которые относятся непосредственно к новостям, а не к похожим новостям или заголовкам других секций? Здесь нам на помощь придет дочерний селектор. Его суть в выборе только тех элементов, которые непосредственно лежат внутри нужного нам блока. Без учета всех остальных вложенностей. Чтобы указать такой селектор, используется символ > . Укажем, что нам нужны только те , которые лежат внутри .news . И нам нужны заголовки, которые находятся внутри этих . Это делается следующим образом:

.news > article > h2  font-size: 24px; > 

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

Самостоятельная работа

• Создайте у себя на компьютере файлы index.html и style.css. Подключите файл стилей. Создайте разметку любого текста и используя свойства, которые мы изучили в этом уроке, оформите текст.
• Попробуйте скопировать примеры из этого урока.

Остались вопросы? Задайте их в разделе «Обсуждение»

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

Как пользоваться css

Оглавление

1. Зачем используется CSS
2. Развитие CSS
3. Структура языка
4. Селекторы
5. Блок объявлений
6. Подключение CSS

CSS – это формальный язык, служащий для описания оформления внешнего вида документа, созданного с использованием языка разметки (HTML, XHTML, XML). Название происходит от английского Cascading Style Sheets, что означает «каскадные таблицы стилей».

Зачем используется CSS

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

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

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

Развитие CSS

Необходимость разработки CSS была признана консорциумом W3C в 1990-х годах. В 1996 году был принят стандарт CSS1, позволяющий изменять параметры шрифта, цвет, атрибуты текста, выравнивания и отступы. В 1998 году состоялся выход CSS2, добавивший возможности использования блочной верстки, звуковых таблиц, генерируемого содержания, указателей, страничных носителей. Версия CSS3 заметно увеличила возможности стилей: стало доступным создание анимированных элементов без использования JavaScript, появилась поддержка сглаживания, теней, градиентов и т. д. Спецификация была разделена на модули, каждый из которых стал развиваться обособленно. С 2011 года ведется разработка модулей CSS4. Возможности пока описаны в черновых вариантах.

Структура языка

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

Правило состоит из селектора и блока объявлений.

css1.png

Селекторы

Селектор сообщает, к какому элементу будут применены описываемые в CSS свойства стиля. В качестве селектора может выступать любой тег, которому задается форматирование (размер, цвет и т. д.). Если для тега нужно задать разные стили или применить один для отличных элементов, используются классы и запись вида «Тег.Класс ». Имя класса задается латиницей, может содержать подчеркивание или дефис. Если не указывать тег, а начинать запись с «.Класс», то можно использовать правило для любого тега. Если перечислять несколько классов для одного тега, к нему применятся все описанные стили. Идентификатор задает уникальное имя элемента для изменения стиля или обращения с помощью скрипта. Запись «#Идентификатор ». Название идентификатора состоит из букв латинского алфавита, допустимо использовать дефис и подчеркивание. Чтобы применить идентификатор к конкретному тегу, указывается его имя, потом без пробела и через знак решетки название идентификатора.

Блок объявлений

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

Подключение CSS

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

• внутри тега с помощью атрибута style. При этом нет нужды указывать селектор;
• добавить тег с атрибутом type=»text/css»;
• подключить внешнюю таблицу стилей: .

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

Начало работы по просмотру и изменению CSS

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

Просмотр CSS для элемента

1. Откройте демонстрационную страницу Примеры CSS в новом окне или вкладке. Чтобы открыть примеры, щелкните ссылку правой кнопкой мыши или нажмите и удерживайте нажатой клавишу CTRL (для Windows, Linux) или Command (для macOS), а затем щелкните ссылку. devtools-css-get-started](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-css-get-started) repo folder. —>
2. Щелкните текст правой Inspect Me! кнопкой мыши и выберите пункт Проверить. На панели дерево DOM под инструментом Inspect Me! Элементы элемент выделен.
3. В элементе Inspect Me! найдите значение атрибута data-message и скопируйте его.
4. В представлении страницы введите data-message значение, скопированное в текстовое поле Значение data-message: .
5. Щелкните текст правой Inspect Me! кнопкой мыши и выберите пункт Проверить.
6. В devTools в инструменте Элементы выберите панель Стили . Элемент Inspect Me! выделен на панели Стили.
7. В элементе найдите Inspect Me! aloha правило класса. Это правило отображается, так как оно применяется к элементу Inspect Me! .
8. В классе найдите aloha значение стиля padding и скопируйте его.
9. В представлении страницы вставьте padding значение в текстовое поле Значение заполнения: .

Добавление объявления CSS в элемент

Панель Стили используется при изменении или добавлении объявлений CSS в элемент.

1. Во-первых, рекомендуется выполнить предыдущее руководство по просмотру CSS для элемента .
2. Откройте демонстрационную страницу Примеры CSS в новом окне или вкладке.
3. Щелкните текст правой Add A Background Color To Me! кнопкой мыши и выберите пункт Проверить.
4. Щелкните element.style в верхней части панели Стили .
5. Введите background-color или выберите его в раскрывающемся списке и нажмите клавишу ВВОД.
6. Введите honeydew или выберите его из раскрывающегося списка цветов и нажмите клавишу ВВОД. После выбора цвета в дереве DOM отображается встроенное объявление стиля, применяемое к элементу. Объявление background-color:honeydew применяется к элементу с помощью element.style раздела панели Стили :

Добавление класса CSS в элемент

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

1. Во-первых, рекомендуется выполнить предыдущее руководство по просмотру CSS для элемента .
2. Откройте демонстрационную страницу Примеры CSS в новом окне или вкладке.
3. Щелкните текст правой Add A Class To Me! кнопкой мыши и выберите пункт Проверить.
4. Щелкните .cls. DevTools отображает текстовое поле, в котором можно добавить классы CSS в проверяемый элемент страницы.
5. Введите color_me в текстовое поле Добавить новый класс и нажмите клавишу ВВОД. Под текстовым полем Добавить новый класс появится флажок, в котором можно включить и выключить класс. Если к элементу Add A Class To Me! применены другие классы, можно также переключить каждый класс отсюда. Класс color_me применяется к элементу с помощью раздела .cls панели Стили :

Добавление псевдогосударя в класс

Используйте панель Стили для постоянного применения псевдосостояния CSS к элементу. DevTools поддерживает :active , :focus , :hover и :visited .

1. Во-первых, рекомендуется выполнить предыдущее руководство по просмотру CSS для элемента .
2. Откройте демонстрационную страницу Примеры CSS в новом окне или вкладке.
3. Наведите указатель мыши на Hover Over Me! текст. Цвет фона изменяется.
4. Щелкните текст правой Hover Over Me! кнопкой мыши и выберите пункт Проверить.
5. На панели Стили щелкните :hov.
6. Установите флажок :при наведении указателя мыши . Цвет фона меняется, как на первом шаге, даже если на самом деле вы не наведите указатель мыши на элемент. На следующем снимке экрана показан результат переключения псевдосостояния :hover для элемента.

Изменение размеров элемента

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

1. Во-первых, рекомендуется выполнить предыдущее руководство по просмотру CSS для элемента .
2. Откройте демонстрационную страницу Примеры CSS в новом окне или вкладке.
3. Щелкните текст правой Change My Margin! кнопкой мыши и выберите пункт Проверить.
4. На схеме Box Model на панели Стили наведите указатель мыши на заполнение. Заполнение элемента выделено в окне просмотра. В зависимости от размера окна DevTools может потребоваться прокрутить до нижней части панели Стили , чтобы отобразить модель box.
5. Дважды щелкните левое поле в box Model, которое в настоящее время имеет значение — . Означает — , что элемент не имеет значения для margin-left .
6. Введите 100px и нажмите клавишу ВВОД. Модель Box по умолчанию использует пиксели, но она также принимает другие значения, такие как 25% , или 10vw . Наведите указатель мыши на заполнение элемента: Изменение левого поля элемента:

Отладка запросов мультимедиа

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

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

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

1. Чтобы открыть средства разработки, щелкните правой кнопкой мыши веб-страницу и выберите Пункт Проверить.
2. Нажмите кнопку Переключить эмуляцию устройства (). Или, когда devTools будет фокусироваться, нажмите клавиши CTRL+SHIFT+M (Windows, Linux) или COMMAND+SHIFT+M (macOS).
3. Открыв панель инструментов устройства, щелкните меню . в правом верхнем углу и выберите Показать запросы мультимедиа: Цветные полосы над веб-страницей представляют различные запросы мультимедиа.
4. Наведите указатель мыши на границы на гистограммах, чтобы отобразить значения различных запросов мультимедиа. Щелкните каждое значение запроса мультимедиа, чтобы изменить размер веб-страницы в соответствии с ней.
5. Чтобы отладить запросы мультимедиа и открыть CSS-файл в редакторе источников , щелкните правой кнопкой мыши сегмент полосы и выберите пункт Показать в исходном коде:

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.