Введение в CSS | htmlbook.ru
После знакомства с HTML разработчики сайтов разделяются на две основные категории. Одна часть считает, что с помощью HTML на сайте можно создавать всё или практически всё, другая же понимает, что в целом средств разметки недостаточно для оформления веб-документов. Действительно, HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей).
Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1.
Рис. 1.1. Веб-страница, созданная только на HTML
Это обычная веб-страница, оформленная без всяких изысков. Тот же самый документ, но уже с добавлением стилей приобретает совершенно иной вид (рис. 1.2).
Рис. 1.2. Веб-страница, созданная на HTML и CSS
Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.1).
Пример 1.1. Исходный код документа
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<title>Флексагон</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Флексагон</h2>
<p>Флексагон представляет собой бумажную фигуру, которая имеет
три и более стороны. Поначалу кажется, что это невозможно, но вспомните
ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа бумаги,
и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и
склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но
стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться,
что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета.
Перегибая флексагон, по очереди будем наблюдать все его поверхности.</p>
</body>
</html>Сам код HTML никаких изменений не претерпел и единственное добавление — это строка <link rel=»stylesheet» href=»style.css»>. Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано в примере 1.2.
Пример 1.2. Содержимое стилевого файла style.css
body { font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */ font-size: 11pt; /* Размер основного шрифта в пунктах */ background-color: #f0f0f0; /* Цвет фона веб-страницы */ color: #333; /* Цвет основного текста */ } h2 { color: #a52a2a; /* Цвет заголовка */ font-size: 24pt; /* Размер шрифта в пунктах */ font-family: Georgia, Times, serif; /* Семейство шрифтов */ font-weight: normal; /* Нормальное начертание текста */ } p { text-align: justify; /* Выравнивание по ширине */ margin-left: 60px; /* Отступ слева в пикселах */ margin-right: 10px; /* Отступ справа в пикселах */ border-left: 1px solid #999; /* Параметры линии слева */ border-bottom: 1px solid #999; /* Параметры линии снизу */ padding-left: 10px; /* Отступ от линии слева до текста */ padding-bottom: 10px; /* Отступ от линии снизу до текста */ }
В файле style.css как раз и описаны все параметры оформления таких тегов как <body>, <h2> и <p>. Заметьте, что сами теги в коде HTML пишутся как обычно.
Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объёма повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.
CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.
Стиль браузера
Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом <h2>, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.
Стиль автора
Стиль, который добавляет к документу его разработчик. В примере 1.2 показан один из возможных способов подключения авторского стиля.
Стиль пользователя
Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню , как показано на рис. 1.3.
Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду (рис. 1.4).
Рис. 1.4. Подключение стиля пользователя в браузере Opera
Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.
Вопросы для проверки
1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?
- font-color
- color
- font-family
- text
- font-size
2. Что такое стиль?
- Способ сокращения HTML-кода за счёт переноса части данных в другой файл.
- Язык разметки гипертекстовых документов.
- Набор правил форматирования элементов веб-страницы.
- Метод преобразований текстовых документов в HTML.
- Технология, представляющая собой разные приёмы для вёрстки HTML-кода.
3. Как расшифровывается аббревиатура CSS?
- Colorful Style Sheets
- Cascading Style Sheets
- Computer Style Sheets
- Creative Style Sheets
- Common Style Sheets
Ответы
1. color
2. Набор правил форматирования элементов веб-страницы.
3. Cascading Style Sheets
Начало работы с CSS — Изучение веб-разработки
В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.
Нашей отправной точкой является HTML-документ. Вы можете скопировать код снизу, если вы хотите работать на своём компьютере. Сохраните приведённый ниже код как index.html в папке на вашем компьютере.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Начало работы с CSS</title>
</head>
<body>
<h2>Я заголовок первого уровня</h2>
<p>Это абзац. В нём есть <span>элемент span</span>,
а также <a href="http://example.com">ссылка</a>.</p>
<p>Это второй абзац. Он содержит <em>акцентирующий</em> текст.</p>
<ul>
<li>Элемент один</li>
<li>Элемент два</li>
<li>Элемент <em>три</em></li>
</ul>
</body>
</html>
Примечание: Если вы читаете это на устройстве или в среде, где вы не можете легко создавать файлы, не беспокойтесь — ниже представлены редакторы кода, чтобы вы могли написать код прямо здесь, на странице.
Самое первое, что нам нужно сделать, — это сообщить HTML-документу, что у нас есть некоторые правила CSS, которые мы хотим использовать. Существует три различных способа применения CSS к документу HTML, с которым вы обычно сталкиваетесь, однако сейчас мы рассмотрим наиболее обычный и полезный способ сделать это — связать CSS с заголовком вашего документа.
Создайте файл в той же папке, что и документ HTML, и сохраните его как styles.css. Расширение .css показывает, что это файл CSS.
Чтобы связать styles.css с index.html, добавьте следующую строку где-то внутри<head> HTML документа:
<link rel="stylesheet" href="styles.css">Элемент <link> сообщает браузеру, что у нас есть таблица стилей, используя атрибут rel, и местоположение этой таблицы стилей в качестве значения атрибута href. вы можете проверить, работает ли CSS, добавив правило в styles.css. Используя ваш редактор кода, добавьте следующее в ваш файл CSS:
Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдёт, поздравляю — вы успешно применили CSS к документу HTML. Если этого не произойдёт, внимательно проверьте, правильно ли вы ввели всё.
Вы можете продолжить работу в styles.css локально, или вы можете использовать наш интерактивный редактор ниже, чтобы продолжить этот урок. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с документом HTML, как это было в нашем документе выше.
Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путём нацеливания на элемент selector — это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, вы должны использовать селектор
Вы можете выбрать несколько селекторов одновременно, разделив их запятыми. Если я хочу, чтобы все параграфы и все элементы списка были зелёными, моё правило выглядит так:
Попробуйте это в интерактивном редакторе ниже (отредактируйте поля кода) или в своём локальном документе CSS.
Когда мы смотрим на хорошо размеченный HTML-документ, даже такой простой, как наш пример, мы можем увидеть, как браузер делает HTML читаемым, добавив некоторые стили по умолчанию. Заголовки большие и жирные, в нашем списке есть маркеры. Это происходит потому, что в браузерах есть внутренние таблицы стилей, содержащие стили по умолчанию, которые по умолчанию применяются ко всем страницам; без них весь текст работал бы вместе, и мы должны были бы стилизовать всё с нуля. Все современные браузеры по умолчанию отображают HTML-контент практически одинаково.
Однако вам часто захочется что-то другое, кроме выбора, сделанного браузером. Это можно сделать, просто выбрав элемент HTML, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является наш <ul> — неупорядоченный список. Он добавляет маркеры, и если я решу, что я не хочу эти маркеры, я могу удалить их вот так:
li {
list-style-type: none;
}Попробуйте добавить это в свой CSS сейчас.
Свойство list-style-type — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для list-style-type и вы найдёте интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.
Глядя на эту страницу, вы обнаружите, что помимо удаления маркеров списка вы можете изменить их — попробуйте изменить их на квадратные маркеры, используя значение
Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока вы хотите, чтобы все элементы этого типа в вашем документе выглядели одинаково. В большинстве случаев это не так, и вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространённый способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.
В своём HTML-документе добавьте Атрибут class ко второму пункту списка. Ваш список теперь будет выглядеть так:
<ul>
<li>Элемент один</li>
<li>Элемент два</li>
<li>Элемент <em>три</em></li>
</ul>В вашем CSS вы можете выбрать класс special к любому элементу на странице, чтобы он выглядел так же, как и этот элемент списка. Добавьте следующее в ваш файл CSS:
.special {
color: orange;
font-weight: bold;
} Сохраните и обновите, чтобы увидеть результат.
Вы можете захотеть, чтобы <span> в абзаце также был оранжевым и жирным. Попробуйте добавить класс «special", затем перезагрузите страницу и посмотрите, что получится.
Иногда вы увидите правила с селектором, который перечисляет селектор HTML-элемента вместе с классом:
li.special {
color: orange;
font-weight: bold;
}Этот синтаксис означает «предназначаться для любого элемента li, который имеет класс special». Если бы вы сделали это, вы бы больше не смогли применить класс к <span> или другому элементу, просто добавив к нему класс; вы должны добавить этот элемент в список селекторов:
li.special,
span.special {
color: orange;
font-weight: bold;
}Как вы можете себе представить, некоторые классы могут быть применены ко многим элементам, и вам не нужно постоянно редактировать свой CSS каждый раз, когда что-то новое должно принять этот стиль. Поэтому иногда лучше обойти элемент и просто обратиться к классу, если только вы не знаете, что хотите создать некоторые специальные правила для одного элемента и, возможно, хотите убедиться, что они не применяются к другим элементам.
Есть моменты, когда вы хотите, чтобы что-то выглядело иначе, в зависимости от того, где оно находится в документе. Здесь есть несколько селекторов, которые могут вам помочь, но сейчас мы рассмотрим только пару. В нашем документе два элемента <em> — один внутри абзаца, а другой внутри элемента списка. Чтобы выбрать только <em> который вложен в элемент <li>, я могу использовать селектор под названием descendant combinator (комбинатор-потомок), который просто принимает форму пробела между двумя другими селекторами.
Добавьте следующее правило в таблицу стилей.
li em {
color: rebeccapurple;
}Этот селектор выберет любой элемент <em>, который находится внутри (потомка) <li>. Итак, в вашем примере документа вы должны найти, что <em> в третьем элементе списка теперь фиолетовый, но тот, который находится внутри абзаца, не изменился.
Ещё можно попробовать стилизовать абзац, когда он идёт сразу после заголовка на том же уровне иерархии в HTML. Для этого поместите + (соседний братский комбинатор) между селекторами.
Попробуйте также добавить это правило в таблицу стилей:
h2 + p {
font-size: 200%;
}Пример ниже включает в себя два правила выше. Попробуйте добавить правило, чтобы сделать элемент span красный, если он внутри абзаца. Вы узнаете, правильно ли вы это сделали, так как промежуток в первом абзаце будет красным, но цвет в первом элементе списка не изменит цвет.
Примечание: Как вы можете видеть, CSS даёт нам несколько способов нацеливания на элементы, и мы пока только слегка изучили его! Мы будем внимательно смотреть на все эти селекторы и многое другое в нашей статье Селекторы позже в нашем курсе.
Последний тип стилей, который мы рассмотрим в этом уроке, — это возможность стилизовать элементы в зависимости от их состояния. Прямым примером этого является стиль ссылок. Когда мы создаём ссылку, мы должны нацелить элемент <a> (якорь). Он имеет различные состояния в зависимости от того, посещается ли он, посещается, находится над ним, фокусируется с помощью клавиатуры или в процессе нажатия (активации). Вы можете использовать CSS для нацеливания на эти разные состояния — CSS-код ниже отображает невидимые ссылки розового цвета и посещённые ссылки зелёного цвета.
a:link {
color: pink;
}
a:visited {
color: green;
}Вы можете изменить внешний вид ссылки, когда пользователь наводит на неё курсор, например, удалив подчёркивание, что достигается с помощью следующего правила:
a:hover {
text-decoration: none;
}В приведённом ниже примере вы можете поиграть с разными значениями для разных состояний ссылки. Я добавил к нему правила, приведённые выше, и теперь понимаю, что розовый цвет довольно лёгкий и трудно читаемый — почему бы не изменить его на лучший цвет? Можете ли вы сделать ссылки жирным шрифтом?
Мы удалили подчёркивание на нашей ссылке при наведении курсора. Вы можете удалить подчёркивание из всех состояний ссылки. Однако стоит помнить, что на реальном сайте вы хотите, чтобы посетители знали, что ссылка является ссылкой. Оставив подчёркивание на месте, люди могут понять, что на какой-то текст внутри абзаца можно нажимать — к такому поведению они привыкли. Как и всё в CSS, существует возможность сделать документ менее доступным с вашими изменениями — мы постараемся выделить потенциальные подводные камни в соответствующих местах.
Примечание: вы часто будете видеть упоминание о доступности в этих уроках и по всей MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятными и доступными для всех.
Ваш посетитель вполне может быть на компьютере с мышью или сенсорной панелью или на телефоне с сенсорным экраном. Либо они могут использовать программу чтения с экрана, которая считывает содержимое документа, либо им может потребоваться использовать текст значительно большего размера, либо перемещаться по сайту только с помощью клавиатуры.
Простой HTML-документ, как правило, доступен каждому — когда вы начинаете оформлять этот документ, важно, чтобы вы не сделали его менее доступным.
Стоит отметить, что вы можете комбинировать несколько селекторов и комбинаторов вместе. Вот пример:
article p span { ... }
h2 + ul + p { ... }Вы также можете комбинировать несколько типов вместе. Попробуйте добавить следующее в ваш код:
body h2 + p .special {
color: yellow;
background-color: black;
padding: 5px;
}Это будет стиль любого элемента с классом special, который находится внутри <p>, который приходит сразу после <h2>, который находится внутри <body>. Уф!
В оригинальном HTML, который мы предоставили, единственный элемент в стиле <span>.
Не беспокойтесь, если это покажется сложным — вы скоро начнёте понимать это, когда будете писать больше на CSS.
В этом уроке мы рассмотрели несколько способов стилизации документа с использованием CSS. Мы будем развивать эти знания по мере прохождения остальных уроков. Однако вы уже знаете достаточно, чтобы стилизовать текст, применять CSS на основе различных способов нацеливания на элементы в документе и искать свойства и значения в документации MDN.
На следующем уроке мы рассмотрим структуру CSS.
Что такое CSS? — Изучение веб-разработки
CSS (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS, с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.
В модуле Основы HTML мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше, чем обычный текст, абзацы разбиваются на новую строку и будут иметь пространство между друг другом. Ссылки выделены цветом и подчёркнуты, чтобы отличить их от остального текста. То, что вы видите, — это стили браузера по умолчанию — самые основные стили, которые браузер применяет к HTML, чтобы гарантировать, что он будет в основном читабельным, даже если автор страницы не указал явный стиль.
Тем не менее, интернет был бы скучным, если бы все сайты выглядели так. Используя CSS, вы можете до мелочей контролировать, как элементы HTML выглядят в браузере, представляя вашу разметку, используя любой понравившийся вам дизайн.
Как мы уже упоминали ранее, CSS — это язык для определения того, как документы представляются пользователям — как они оформляются, размещаются и т. д.
Документ обычно представляет собой текстовый файл, структурированный с использованием языка разметки: HTML — самый распространённый язык разметки, но вы также можете встретить другие языки разметки, такие как SVG или XML.
Представление документа пользователю означает преобразование его в форму, используемую вашей аудиторией. Browsers, такие как Firefox (en-US), Chrome (en-US) или Edge (en-US) , предназначены для визуального представления документов, например, на экране компьютера, проектора или принтера.
Примечание: Браузер иногда называют user agent, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, но он не единственный. Доступны и другие пользовательские агенты, например, те, которые преобразуют документы HTML и CSS в файлы PDF для печати.
CSS может использоваться для очень простой стилизации текста документа, например, изменение цвета и размера заголовков и ссылок. Он может быть использован для создания макета, например, превращение одного столбца текста в макет с основной областью контента и боковой панелью для соответствующей информации. Это может даже использоваться для эффектов, таких как анимация. Посмотрите на ссылки в этом параграфе для конкретных примеров.
CSS — это язык на основе правил: вы задаёте правила, определяющие группы стилей, которые должны применяться к определённым элементам или группам элементов на вашей веб-странице. Например:
«Я хочу, чтобы основной заголовок на моей странице отображался крупным красным текстом».
В следующем коде показано очень простое правило CSS, которое будет соответствовать стилю, описанному выше:
h2 {
color: red;
font-size: 5em;
}Правило открывается с помощью селектора . Этот селектор выбирает HTML-элемент, который мы собираемся стилизовать. В этом случае мы используем заголовки первого уровня — (<h2> (en-US)).
Затем у нас есть набор фигурных скобок { }. Внутри них будет один или несколько объявлений, которые принимают форму пары свойства и его значения. Каждая пара указывает свойство элемента(-ов), который(-е) мы выбираем, а затем значение, которое мы хотели бы присвоить свойству.
Перед двоеточием у нас есть свойство, а после двоеточия — значение. CSS-свойства (en-US) имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство color, которое может принимать различные цветовые значения. У нас также есть свойство font-size. Это свойство может принимать различные значения размера, как и свойства.
Таблица стилей CSS будет содержать много таких правил, написанных одно за другим.
h2 {
color: red;
font-size: 5em;
}
p {
color: black;
}Вы обнаружите, что вы быстро изучаете некоторые значения, тогда как другие вам нужно искать. Страницы отдельных свойств в MDN дают вам быстрый способ поиска свойств и их значений, когда вы забыли или хотите узнать, что ещё вы можете использовать в качестве значения.
Примечание: вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN Руководстве по CSS. Кроме того, вы должны привыкнуть к поиску «MDN css-feature-name» в вашем браузере, когда вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!
Поскольку существует множество вещей, которые можно стилизовать с помощью CSS, язык разбит на модули. По мере изучения MDN вы увидите ссылки на эти модули, а многие страницы документации организованы вокруг определённого модуля. Например, вы можете взглянуть на ссылку MDN в модуле Свойства фона и границ, чтобы узнать, какова его цель и какие различные свойства и другие функции он содержит. Вы также найдёте ссылки на спецификацию CSS, которая определяет технологию (см. ниже).
На этом этапе вам не нужно слишком беспокоиться о том, как структурирован CSS, однако это может упростить поиск информации, если, например, вы знаете, что определённое свойство может быть найдено среди других похожих вещей, и поэтому, вероятно, в той же спецификации.
Для конкретного примера давайте вернёмся к модулю Свойства фона и границ — вы можете подумать, что это логично для свойств background-color и border-color, которые будут определены в этом модуле. И Вы правы.
Технические характеристики CSS
Все технологии веб-стандартов (HTML, CSS, JavaScript и т. д.) определены в гигантских документах, называемых спецификациями, которые публикуются организациями по стандартизации (такие как W3C, WHATWG, ECMA или Khronos (en-US)) и определяют, как эти технологии должны вести себя.
CSS ничем не отличается — он разработан группой в W3C, которая называется CSS Working Group. Эта группа состоит из представителей производителей браузеров и других компаний, которые заинтересованы в CSS. Есть также другие люди, известные как приглашённые эксперты, которые выступают как независимые голоса; они не связаны с членами организации.
Новые функции CSS разрабатываются или определяются рабочей группой CSS. Иногда потому, что конкретный браузер заинтересован в том, чтобы иметь какие-то возможности, иногда потому, что веб-дизайнеры и разработчики запрашивают функцию, а иногда потому, что сама рабочая группа определила требование. CSS постоянно развивается, появляются новые функции. Тем не менее, ключевым моментом в CSS является то, что все работают очень усердно, чтобы никогда не менять вещи таким образом, чтобы это сломало старые сайты. Веб-сайт, созданный в 2000 году, с использованием ограниченного CSS, доступного в то время, должен всё ещё использоваться в браузере сегодня!
Как новичок в CSS, вполне вероятно, что вы найдёте CSS-спецификации ошеломляющими — они предназначены для инженеров, чтобы использовать их для реализации поддержки функций в пользовательских агентах, а не для веб-разработчиков, чтобы читать, чтобы понимать CSS. Многие опытные разработчики предпочитают обращаться к документации MDN или другим учебникам. Однако стоит знать, что они существуют, понимать взаимосвязь между используемым CSS, поддержкой браузера (см. ниже) и спецификациями.
BCD tables only load in the browser
После того как CSS был указан, он будет полезен для разработки веб-страниц, только если один или несколько браузеров его реализовали. Это означает, что код был написан для превращения инструкции в нашем CSS-файле во что-то, что может быть выведено на экран. Мы рассмотрим этот процесс подробнее на уроке Как работает CSS. Это необычно для всех браузеров, чтобы реализовать функцию одновременно, и поэтому обычно есть пробел, где вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине полезно проверять состояние реализации. На каждой странице свойств в MDN вы можете видеть статус интересующего вас свойства, чтобы вы могли определить, сможете ли вы использовать её на веб-сайте.
Ниже приведена диаграмма данных для CSS свойства font-family:
Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдём к Началу работы с CSS, где вы можете начать писать CSS самостоятельно.
Как структурирован CSS — Изучение веб-разработки
Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.
Первое, что мы рассмотрим, это три метода применения CSS к документу.
Внешняя таблица стилей
В статье Начало работы с CSS мы связывали внешнюю таблицу стилей с нашей страницей. Это самый распространённый и полезный способ крепления CSS к документу, так вы можете привязать CSS сразу к нескольким страницам, что позволяет стилизовать их всё с той же таблицей стилей. В большинстве случаев различные страницы сайта будут выглядеть почти так же, поэтому вы можете использовать один и тот же набор правил для основного вида.
Внешняя таблица стилей — это когда у вас есть CSS отдельным файлом с расширением .css, и ссылка на него из HTML-элемента <link>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Я пробую писать CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Привет!</h2>
<p>Это мой первый опыт в CSS</p>
</body>
</html>Файл CSS может выглядеть следующим образом:
h2 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}Атрибут href элемента <link> должен ссылаться на файл в файловой системе.
В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/general/style.css">
<link rel="stylesheet" href="../styles/style.css">Внутренняя таблица стилей
Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента <style>, содержащейся внутри HTML <head>.
Таким образом, HTML будет выглядеть вот так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Я пробую писать CSS</title>
<style>
h2 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h2>Привет!</h2>
<p>Это мой первый опыт в CSS</p>
</body>
</html>Это может быть полезно в некоторых обстоятельствах (возможно, вы работаете с системой управления контентом, где вы не можете изменить CSS-файлы непосредственно), но это менее эффективно, чем внешние таблицы стилей: CSS будет необходимо прописывать отдельно для каждой страницы и изменять, если требуются изменения.
Встроенные стили
Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте style:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Я пробую писать CSS</title>
</head>
<body>
<h2>Привет!</h2>
<p>Это мой первый опыт в CSS</p>
</body>
</html>Пожалуйста, не делайте этого! Это очень плохо для технического обслуживания (вам, возможно, придётся обновить одну и ту же информацию несколько раз в одном документе), а также смешивает ваши презентационные данные CSS с структурной информацией HTML, что делает код трудным для чтения и понимания. Хранение различных типов кода отделено делает работу гораздо более лёгкой для всех, кто работает над кодом.
Есть несколько мест, где встроенные стили являются более распространёнными или даже желательными. Вам, возможно, придётся прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.
Существует много возможностей, чтобы поиграть с CSS в этой статье. Для этого мы рекомендуем создать новый каталог / папку на вашем компьютере и внутри него создать копии следующих двух файлов:
index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Я пробую писать CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Пишите сюда свой код</p>
</body>
</html>styles.css:
Затем, когда вы столкнётесь с CSS и захотите поэкспериментировать со стилями, измените содержимое <body> HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.
Если вы не используете систему, в которой вы можете легко создавать файлы, вы можете вместо этого использовать интерактивный редактор ниже чтобы экспериментировать.
Читайте дальше и получайте удовольствие!
Говоря о CSS, нельзя не упомянуть о селекторах, о некоторых типах которых мы уже говорили в руководстве Начало работы с CSS. Селектор — это то, как мы обозначаем что-либо в нашем HTML-документе, чтобы стилизовать его. Если стиль не применился, то это, скорее всего, потому, что селектор в таблицах стилей не совпал с тем, что в HTML-документе.
Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:
h2
a:link
.manythings
#onething
*
.box p
.box p:first-child
h2, h3, .intro
Примечание: вы узнаете больше о селекторах в руководстве CSS-селекторы в следующем модуле.
Спецификация
Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента p — он будет синим; также я задал класс, который сделает элемент красным:
.special {
color: red;
}
p {
color: blue;
}А теперь допустим, что в нашем HTML-коде у нас есть абзац p с классом special. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?
<p>Какого же я цвета?</p>В языке CSS есть правила, которые определяют, какое правило «выиграет» в случае подобного столкновения — они называются каскадами, или спецификациями. В примере ниже мы задали два правила для селектора p, но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.
p {
color: red;
}
p {
color: blue;
}А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.
Попрактикуйтесь сами — добавьте два правила для параграфа p { ... } в вашу таблицу стилей. Затем добавьте класс к одному элементу p и попробуйте применить к нему какой-нибудь стиль.
Понимание каскадов, или правил, улучшается с практикой. В статье Каскад и наследование я хорошенько объясню, как определить уровень спецификации. А пока что запомните, что иногда CSS не применяется так, как вы того хотели бы, так как у чего-то в таблице стилей больший уровень спецификации.
Если говорить в общем, CSS строится на двух его составляющих:
- Свойства
- Определяют, какую характеристику вы желаете изменить (например,
font-size,width,background-color).
- Значения
- Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.
На изображении внизу выделены свойство и его значение. Здесь свойство — color, а его значение — blue.
Свойство вкупе со значением называется CSS-объявлением. CSS-объявления помещаются внутри блока объявлений CSS. Ниже показан наш CSS-код с выделенным блоком объявлений.
Наконец блок объявлений воссоединяется с селекторами, образуя CSS-правила. Наше изображение содержит два правила — одно для селектора h2, другое для селектора p. Правило для h2 выделено.
Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием (:).
Попробуйте подобрать нужные значения к следующим свойствам, а свойства добавить в ваш код:
Важно: Если свойство или значение не определено, то объявление считается недействительным — и будет попросту проигнорировано.
Важно: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, color надо всегда писать color; британский вариант colour не будет работать.
Функции
Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию calc(). Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:
<div><div>The inner box is 90% - 30px.</div></div>.outer {
border: 5px solid black;
}
.box {
padding: 10px;
width: calc(90% - 30px);
background-color: rebeccapurple;
color: white;
}В результате получим это:
Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!
В следующем примере будут различные значения для свойства <transform> rotate().
.box {
margin: 30px;
width: 100px;
height: 100px;
background-color: rebeccapurple;
transform: rotate(0.8turn)
}Результат этого кода будет:
Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл:
До сих пор не сталкивались мы с правилами @rules (произносится как эт-рулс, от английского «at-rules»). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил @rules простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать @import:
Чаще других встречается @rules под названием @media: оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).
Ниже у нас CSS-файл, в котором значение заднего фона элемента <body> равно pink. Однако после мы добавили правило @media, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.
body {
background-color: pink;
}
@media (min-width: 30em) {
body {
background-color: blue;
}
}Вы столкнётесь и с другими правилами @rules в продолжение следующих уроков.
Добавьте правило, которое изменяет стиль элемента, основываясь на ширине окна. Измените ширину окна, чтобы увидеть результат.
Некоторые свойства вроде font, background, padding, border и margin называются стенографическими свойствами, — они позволяют установить несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.
К примеру, это строка (комментарий не в счёт):
padding: 10px 15px 15px 5px;делает то же самое, что и эти четыре, вместе взятые:
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
или эти:
padding-block-start: 10px
padding-inline-end: 15px;
padding-block-end: 15px;
padding-inline-start: 5px;в то время как строка:
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;делает то же, что и эти строки:
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в Руководстве по CSS.
Добавьте вышеупомянутые объявления в ваш код. Попробуйте изменить значения и посмотреть на результат.
Осторожно: Стенографии позволяют пропускать некоторые величины, и это может отразиться на результате недолжным образом.
Как и в HTML, вы можете делать комментарии, чтобы прояснить тот или иной отрывок кода.
Комментарии в CSS начинаются с /* и окачиваются с */. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.
body {
font: 1em/150% Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0 auto;
max-width: 33em;
}
@media (min-width: 70em) {
body {
font-size: 130%;
}
}
h2 {font-size: 1.5em;}
div p, #id:first-line {
background-color: red;
background-style: none
}
div p{
margin: 0;
padding: 1em;
}
div p + p {
padding-top: 0;
}Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора .special.
Добавьте комментарии в ваш CSS-код, чтобы приноровиться к ним.
Под отступами подразумеваются пробелы, табуляция и перенос на новую строку. Как и в HTML, браузер будет стараться игнорировать большие отступы в CSS-коде; к тому же большие отступы пагубны для читаемости кода.
В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:
body {
font: 1em/150% Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0 auto;
max-width: 33em;
}
@media (min-width: 70em) {
body {
font-size: 130%;
}
}
h2 {
font-size: 1.5em;
}
div p,
#id:first-line {
background-color: red;
background-style: none
}
div p {
margin: 0;
padding: 1em;
}
div p + p {
padding-top: 0;
}
То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }
h2 {font-size: 1.5em;}
div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}
Как вы будете оформлять код — решать вам; хотя, работая в команде, вы обнаружите, что она придерживается тех правил форматирования, которые в ней утверждены.
Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:
margin: 0 auto;
padding-left: 10px;А такие объявления не действительны:
margin: 0auto;
padding- left: 10px;Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.
Добавьте отступы в ваш код и посмотрите, что повлияет на код, а что нет.
Полезно знать, как браузер делает из HTML и CSS готовую страницу, поэтом следующая ваша статья — Как работает CSS — мы рассмотрим этот процесс.
CSS | Введение в веб-разработку
HTML отвечает за то, ЧТО будет выведено на экран. А вот за то, КАК оно будет выглядеть, и где будут располагаться разные части страницы, отвечает CSS.
Проще говоря, HTML — это структура и содержание, а CSS — внешний вид.
CSS — это отдельный язык со своим форматом и правилами, но он создан специально для HTML. С помощью CSS можно описать внешний вид страницы и отдельных элементов. Например, цвет текста, размер шрифта, размеры и отступы картинок, рамки вокруг элементов, закругления в фотках и так далее.
Основной целью разработки CSS являлось разделение структуры страницы от описания внешнего вида документа. Это позволяет создавать представления (можно сказать, «версии») одного HTML-документа, адаптированные для людей с ограниченными возможностями, оптимизированные под мобильные устройства, предназначенные для печати и так далее. Кроме того, последние версии CSS позволяют накладывать анимацию и, фактически, рисовать.
Допустим, вы хотите изменить внешний вид всех абзацев (элементов <p>...</p>). С помощью CSS-кода ниже мы сделаем так, что у всех элементов p будет синий фон, отступ со всех сторон по 10 пикселей и шрифт Arial:
<head>
...
<style>
p {
background-color: blue; /* Фон */
margin: 10px; /* Отступы от границ блока с абзацем */
font-family: Arial; /* Шрифт */
}
</style>
...
</head>
<body>
<p>Это абзац с голубым фоном, отступами и шрифтом Arial</p>
<p>Это еще один абзац с голубым фоном, отступами и шрифтом Arial</p>
</body>
Элемент <style>...</style> вставляется в HTML страницу внутрь элемента head (то есть между тегами <head> и </head>).
Но что, если мы хотим применить такой стиль не ко всем параграфам, а только к некоторым? Для подобных задач в HTML и CSS существуют классы (classes).
<head>
...
<style>
.strange {
background-color: blue; /* Фон */
margin: 10px; /* Отступы от границ блока с абзацем */
font-family: Arial; /* Шрифт */
}
</style>
...
</head>
<body>
<p>Это абзац с голубым фоном, отступами и шрифтом Arial</p>
<p>Это абзац без стилей</p>
</body>
Атрибут class есть у каждого тега, а значит, можно изменить внешний вид и расположение всего, что представлено на странице (иногда с ограничениями).
Иногда в документе есть элемент, который по смыслу может быть только один. Например, в статьях это зачастую заголовок: на странице статьи может быть только один заголовок статьи. Другой пример — логотип сайта где-нибудь наверху. Для уникальных «разовых» элементов стоит использовать id:
<head>
...
<style>
#important {
color: red; /* красный цвет шрифта */
}
</style>
...
</head>
<body>
<p>Это абзац с красным текстом</p>
</body>
В CSS id указываются через решетку #, а классы — через точку .. А в HTML они пишутся прямо словами: например, <p> или <p>.
В наших примерах CSS p, .strange и #important называются селекторами. Ими мы выбираем то, к чему применять стиль.
В CSS существует несколько видов селекторов, но для начала достаточно знать о трёх:
div– элементы конкретного типа, в данном примереdiv(тег<div>...</div>)#id– элемент с данным id.class– элементы с таким классом
Попробуйте создать файл index.html со следующим содержанием и открыть его в браузере:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
.note {
color: grey;
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p>Абзац со стилем, указанным прямо в теге!</p>
<div>Абзац класса "note"</div>
</body>
</html>
С помощью CSS можно менять сотни разных свойств. Поэкспериментируйте со своей страницей и стилями.
Каждый браузер содержит определенный набор стилей «по умолчанию». Этот набор применяется всегда и формирует базовое представление элементов. С одной стороны, это избавляет от необходимости писать стили тогда, когда устраивает умолчание, но с другой — появляются серьезные проблемы.
Этот набор отличается от браузера к браузеру. Все усугубляется тем, что и сами стили работают по-разному в разных браузерах. В этот момент проявляется самая большая боль вёрстки. Необходимо знать тонкости старых и новых браузеров, причём в современном мире это не только браузеры для обычных компьютеров, но также браузеры для мобильных устройств и даже для автомобилей с телевизорами (например, Tesla).
Есть определенные инструменты, позволяющие частично сгладить эту проблему, но системно, скорее всего, она не решится никогда, и чем дальше, тем больше появляется подобных различий. Их можно увидеть на сайте caniuse.com.
Файл стилей
В реальных приложениях стили описывают не внутри HTML-страниц, а в отдельных файлах, например style.css, и с помощью специального тега подключают на страницу:
<link rel="stylesheet" href="style.css">
Эта строчка должна также находиться внутри элемента head (то есть между тегами <head> и </head>).
Layouting
Отдельным большим блоком в CSS является позиционирование. Эта тема, наверное, самая сложная и крайне важная. Благодаря определенному набору свойств можно творить чудеса. Располагать элементы как угодно на странице, менять их размеры и вид, в зависимости от ширины экрана и даже скрывать.
Bootstrap
Раньше каждый верстальщик копировал из проекта в проект заготовки CSS для упрощения разработки (а кто-то делает это и сейчас). В конце концов, появились люди, которые увидели закономерности и смогли их обобщить. Так появились первые CSS-фреймворки. Их центральным элементом была модульная сетка, набор стилей, в простейшем случае позволяющая разбить все пространство на независимые блоки. По сути, это каркас, на который уже можно нанизывать конкретные элементы.
Дальнейшее их развитие привело к созданию таких монстров как Bootstrap. Bootstrap — это больше, чем просто CSS-фреймворк. Кроме модульной сетки, Bootstrap поставляется с большим количеством компонентов, благодаря которым можно собрать сайт практически любой сложности. Ко всему этому стоит добавить то, что он автоматически хорошо работает и для разных размеров экранов, и для мобильных устройств. А благодаря огромному комьюнити, он развивается огромными темпами.
Хекслет целиком и полностью построен на Bootstrap’e. Такой подход позволяет нам не отвлекаться на непрофильную деятельность и ускорить разработку проекта в разы.
Подробнее об основных концепциях и элементах Bootstrap можно узнать из нашего гайда.
Полезные ссылки
Инструментарий разработчика, предлагаемый браузерами, позволяет просматривать не только структуру HTML, но и CSS. Более того, вы можете очень быстро проводить эксперименты, изменяя CSS прямо тут же.
В нашем курсе Основы HTML, CSS и веб-дизайна есть урок, посвященный Chrome Developer Tools.
Заключение
Как видно, владение CSS на должном уровне — совсем не то же самое, что и понимание HTML. Чтобы хорошо его применять, недостаточно прочитать справочник. Нужно целенаправленно учиться и практиковаться. Однако, это не означает, что все его знают. Большинство веб-разработчиков знают CSS так себе. Все же это прерогатива верстальщиков, да и фреймворки, такие как Bootstrap, позволяют оставаться в неведении.
На Хекслете есть бесплатный курс Основы HTML, CSS и веб-дизайна, содержащий текстовые и видео-уроки, интерактивные упражнения и тесты. Теме CSS там посвящены несколько уроков.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Ошибки, сложный материал, вопросы >Нашли опечатку или неточность?
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Что-то не получается или материал кажется сложным?
Загляните в раздел «Обсуждение»:
- задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
- расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
- изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
» Урок 4. Введение в css (Cascading style sheets —каскадные таблицы стилей)
CSS – формальный язык описания внешнего вида документа, работающий совместно с HTML. Он связывает с элементами документа разнообразные визуальные стили, определяющие их размер, цвет, фон, рамки и т. п. Т.е. с помощью инструмента CSSмы задаем размеры сайта и его блокам, определяем размеры шрифта заголовкам и абзацам, раскрашиваем таблицы и другие элементы и т.д.
Стили можно задавать внутри HTML документа
<p style=»font—size: 16рх»>Текст первой новости</p>
В данном абзаце мы изменили шрифт до 16 пикселей
Если у нас будет текст, состоящий из 20 абзацев, то для каждого абзаца дано будет указать данный стиль!
Поэтому все элементы стилей выносят в отдельный файл style.css, ссылаясь на него в шапке страницы (тег <head>) в тэге <link>
Создадим файл style.css в папке, где находится страница index.html
В файле style.css зададим шрифт 16px (пикселей) для всех абзацев
р {
font-size: 16px
}
Как задать определенные параметры только части абзацев?
Для этого используются атрибут id (идентификатор) и class
АТРИБУТ id
В файле index.html нужно указать
<p id=»text»> Текст первой новости</р>
В файле style.css: #text {font-size: 16рх}
Если вы используете атрибут id, то в файле style.css нужно перед значением идентификатора указать #
АТРИБУТ class
В файле index.html нужно указать
<p class=»text»> Текст первой новости</р>
В файле style.css: .text {font-size: 16рх}
Если вы используете атрибут class, то в файле style.css нужно перед значением идентификатора поставить . (точку)
Смысл добавления точки в начале имени класса заключается в том, что одно название класса можно связывать с разными элементами и назначать каждому из них собственный стиль.
Атрибуты id и class применяют не только к тексту, но и к картинкам, блокам и прочим элементам.
Как правило, с помощью атрибута id задают имена блоков <div id=»имя блока»>, а атрибут class применяют к конкретных элементам (тэгам): p (абзац), img (картинка), h2,h3,… (заголовки) и т.д.
Введение в CSS — Viasite
Введение
Ознакомившись с HTML разработчики сайтов делятся на 2 части. Первые — это те, которые утверждают, что для создания сайта достаточно HTML. Вторые понимают, что средствами разметки тут не обойтись. Ведь HTML лишь первый этап в процессе обучения создания сайтов, а далее нужно проходить CSS.
Что такое CSS?
CSS (Cascading Style Sheets) переводится как «каскадные таблицы стилей». Отвечает за внешний вид HTML-страницы. Синтаксис простой, состоит из селекторов и свойств.
Для чего нужен CSS?
Используется для определения стилей ваших документов (дизайн, верстка, макеты). Позволяет разместить стили CSS внутри тега документа с встроенной таблицей стилей, или ссылаться на отдельный CSS-файл, который определяет ваши стили извне.
Псевдоклассы
Определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на неё курсора мыши.
Стиль
Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Для представления о чем идет речь ниже представлены.
Добавление стилей в документ приобретает совершенно иной вид. Перемена в документе разительна,чтобы понять в чем разница нужно заглянуть в код (пример 1.1).
Пример 1.1. Исходный код документа
<!DOCTYPE HTML>
<html>
<head>
<title>Флексагон</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Флексагон</h2>
<p>Флексагон представляет собой бумажную фигуру, которая имеет
три и более стороны. Поначалу кажется, что это невозможно, но вспомните
ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа бумаги,
и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и
склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но
стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться,
что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета.
Перегибая флексагон, по очереди будем наблюдать все его поверхности.</p>
</body>
</html>
Код HTML не был изменен, добавлена только строка <link rel=»stylesheet» href=»style.css»> . Она является ссылкой на внешний файл с описанием стилей под именем style.css.
Пример 1.2. Содержимое стилевого файла style.css
body {
font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */
font-size: 11pt; /* Размер основного шрифта в пунктах */
background-color: #f0f0f0; /* Цвет фона веб-страницы */
color: #333; /* Цвет основного текста */
}
h2 {
color: #a52a2a; /* Цвет заголовка */
font-size: 24pt; /* Размер шрифта в пунктах */
font-family: Georgia, Times, serif; /* Семейство шрифтов */
font-weight: normal; /* Нормальное начертание текста */
}
p {
text-align: justify; /* Выравнивание по ширине */
margin-left: 60px; /* Отступ слева в пикселах */
margin-right: 10px; /* Отступ справа в пикселах */
border-left: 1px solid #999; /* Параметры линии слева */
border-bottom: 1px solid #999; /* Параметры линии снизу */
padding-left: 10px; /* Отступ от линии слева до текста */
padding-bottom: 10px; /* Отступ от линии снизу до текста */
}
В файле style.css описаны все параметры оформления таких тегов как , <h2> и <p>.
Благодаря тому, что на файл со стилем можно ссылаться из любого веб-документа,то сокращается объем повторяющихся данных. Повышение гибкости и скорости работы над сайтом увеличивается из — за разделения кода и оформления.
CSS совпадает с HTML тем, что способы определения цветов одинаковые.
Типы стилей
Различают несколько типов стилей, которые могут совместно применяться к одному документу:
• стиль браузера
• стиль автора
• стиль пользователя
Стиль браузера
Оформление, которое применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае, когда к документу не добавляется никаких стилей.
Например, заголовок страницы, формируемый тегом </p> <h2>, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.
Анатомия набора CSS правил
Вся структура — набор правил (но зачастую для краткости «правило» ). Отметим также имена отдельных частей:
Селектор
Cелектор — это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля.
Он выбирает элементы для применения стиля (элементы p ). Для стилизации другого элемента, — измените селектор.
Пробел в последовательности селекторов соответствует понятию «селектор потомков».
Символ «>» в последовательности селекторов соответствует понятию «дочерний селектор».
Объявление (Declaration)
Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.
Свойства (Properties)
Вы выбираете, какие свойства Вы хотите затронуть в вашем правиле. Способы, которыми вы можете стилизовать определенный HTML элемент ( color является свойством для элементов <p>).
Значение свойства (Property value)
Справа от свойства, после двоеточия, есть значение свойства, который выбирает одно из множества возможных значений для данного свойства (существует множество значений color, помимо red).
Обратите внимание на важные части синтаксиса:
- Каждый набор правил (кроме селектора) должен быть обернут в фигурные скобки ({}).
- В каждом объявлении необходимо использовать двоеточие (:), чтобы отделить свойство от его значений.
- В каждом наборе правил вы должны использовать точку с запятой (;), чтобы отделить каждое объявление от следующего.
Для изменения нескольких значений свойств сразу, вам нужно написать их, разделяя точкой с запятой, например так:
p {
color: red;
width: 500px;
border: 1px solid black;
}
Выбор нескольких элементов
Также Вы можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Для этого добавьте несколько селекторов, разделенных запятыми. Например:
p,li,h2 {
color: red;
}
Разные типы селекторов
Выше мы рассматривали только селектор элементов, который выбирает все элементы определенного типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространенных типов селекторов:
Имя селектора | Что выбирает | Пример |
Селектор элемента (иногда называемый селектором тега или типа) | Все HTML элементы указанного типа. | |
ID селектор | Элемент на странице с указанным ID (на одной HTML странице, может быть только один элемент с каким-либо ID). | |
Селектор класса | Элементы на странице с указанным классом (множество экземпляров класса может объявляться на странице). | |
Селектор атрибута | Элементы на странице с указанным атрибутом. | |
Селектор псевдокласса | Указанные элементы, но только в случае определенного состояния, например, при наведении курсора. | |
Что такое CSS? — Изучите веб-разработку
CSS (каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как это работает под капотом? В этой статье объясняется, что такое CSS, на простом примере синтаксиса, а также рассматриваются некоторые ключевые термины, связанные с языком.
В модуле «Введение в HTML» мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше обычного текста, абзацы переходят на новую строку и имеют пробелы между ними.Ссылки окрашены и подчеркнуты, чтобы их можно было отличить от остального текста. То, что вы видите, — это стили браузера по умолчанию — очень простые стили, которые браузер применяет к HTML, чтобы убедиться, что он будет в основном читаемым, даже если автор страницы не указал явного стиля.
Однако Интернет был бы скучным местом, если бы все веб-сайты выглядели так. Используя CSS, вы можете точно контролировать, как элементы HTML выглядят в браузере, представляя вашу разметку с использованием любого дизайна, который вам нравится.
Чтобы узнать больше о стилях браузера / по умолчанию, посмотрите следующее видео:
Как мы уже упоминали ранее, CSS — это язык для определения того, как документы представляются пользователям — как они стилизованы, расположены и т. Д.
Документ обычно представляет собой текстовый файл, структурированный с использованием языка разметки — HTML является наиболее распространенным языком разметки, но вы также можете встретить другие языки разметки, такие как SVG или XML.
Представление документа пользователю означает преобразование его в форму, пригодную для использования вашей аудиторией.Браузеры, такие как Firefox, Chrome или Edge, предназначены для визуального представления документов, например, на экране компьютера, проекторе или принтере.
Примечание: Браузер иногда называют пользовательским агентом, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, однако он не единственный. Доступны и другие пользовательские агенты — например, те, которые конвертируют документы HTML и CSS в PDF-файлы для печати.
CSS можно использовать для очень простой стилизации текста документа — например, для изменения цвета и размера заголовков и ссылок. Его можно использовать для создания макета — например, преобразования одного столбца текста в макет с областью основного содержимого и боковой панелью для связанной информации. Его даже можно использовать для таких эффектов, как анимация. Взгляните на ссылки в этом абзаце для конкретных примеров.
CSS — это язык, основанный на правилах — вы определяете правила, определяющие группы стилей, которые должны применяться к определенным элементам или группам элементов на вашей веб-странице.Например, «Я хочу, чтобы основной заголовок на моей странице отображался в виде большого красного текста».
В следующем коде показано очень простое правило CSS, обеспечивающее описанный выше стиль:
h2 {
красный цвет;
размер шрифта: 5em;
}
Правило открывается с помощью селектора. Этот выбирает HTML-элемент, который мы собираемся стилизовать. В данном случае мы стилизуем заголовки первого уровня ( ).
Затем у нас есть набор фигурных скобок {} .Внутри них будет одно или несколько объявлений , которые принимают форму пар свойств и значений . Каждая пара определяет свойство элемента (ов), которое мы выбираем, а затем значение, которое мы хотели бы присвоить этому свойству.
Перед двоеточием стоит свойство, а после двоеточия — значение. Свойства CSS имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере у нас есть свойство color , которое может принимать различные значения цвета.У нас также есть свойство font-size . Это свойство может принимать в качестве значения единицы разного размера.
Таблица стилей CSS будет содержать множество таких правил, написанных одно за другим.
h2 {
красный цвет;
размер шрифта: 5em;
}
п {
черный цвет;
}
Вы обнаружите, что быстро усваиваете одни значения, тогда как другие вам нужно будет искать. Отдельные страницы свойств в MDN дают вам быстрый способ поиска свойств и их значений, когда вы забываете или хотите знать, что еще вы можете использовать в качестве значения.
Примечание: Вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в справочнике MDN CSS. В качестве альтернативы вам следует привыкнуть к поиску «mdn css-feature-name » в вашей любимой поисковой системе всякий раз, когда вам нужно узнать больше информации о функции CSS. Например, попробуйте выполнить поиск по ключевым словам «mdn color» и «mdn font-size»!
Поскольку существует так много вещей, которые можно стилизовать с помощью CSS, язык разбит на модулей .Вы увидите ссылки на эти модули по мере изучения MDN, и многие страницы документации организованы вокруг определенного модуля. Например, вы можете взглянуть на ссылку MDN на модуль Backgrounds and Borders, чтобы узнать, какова его цель, а также какие различные свойства и другие функции он содержит. Вы также найдете ссылки на CSS Specification , которая определяет технологию (см. Ниже).
На этом этапе вам не нужно слишком беспокоиться о том, как структурирован CSS, однако это может упростить поиск информации, если, например, вы знаете, что определенное свойство может быть найдено среди других подобных вещей и поэтому, вероятно, находятся в той же спецификации.
Для конкретного примера давайте вернемся к модулю Backgrounds and Borders — вы можете подумать, что имеет логический смысл определить свойства background-color и border-color в этом модуле. И ты был бы прав.
Спецификации CSS
Все технологии веб-стандартов (HTML, CSS, JavaScript и т. Д.) Определены в гигантских документах, называемых спецификациями (или «спецификациями»), которые публикуются организациями по стандартизации (такими как W3C, WHATWG, ECMA, или Хронос) и точно определите, как эти технологии должны себя вести.
CSS ничем не отличается — он разработан группой в W3C, которая называется CSS Working Group. В эту группу входят представители производителей браузеров и других компаний, интересующихся CSS. Есть также другие люди, известные как приглашенных экспертов , которые выступают в качестве независимых голосов; они не связаны с членской организацией.
Новые функции CSS разработаны или определены Рабочей группой CSS. Иногда из-за того, что конкретный браузер заинтересован в некоторых возможностях, в других случаях из-за того, что веб-дизайнеры и разработчики запрашивают функцию, а иногда потому, что сама рабочая группа определила требование.CSS постоянно развивается, и становятся доступными новые функции. Тем не менее, ключевым моментом в CSS является то, что все очень стараются никогда не менять вещи так, чтобы это могло сломать старые веб-сайты. Веб-сайт, созданный в 2000 году с использованием ограниченного CSS, доступного тогда, должен быть доступен в браузере сегодня!
Как новичок в CSS, вы, вероятно, найдете спецификации CSS ошеломляющими — они предназначены для инженеров, которые могут использовать их для реализации поддержки функций в пользовательских агентах, а не для того, чтобы веб-разработчики могли читать, чтобы понять CSS.Многие опытные разработчики предпочли бы обратиться к документации MDN или другим руководствам. Однако стоит знать, что они существуют, понимать взаимосвязь между используемым вами CSS, поддержкой браузера (см. Ниже) и спецификациями.
После того, как CSS был определен, он будет полезен для нас при разработке веб-страниц только в том случае, если один или несколько браузеров реализовали его. Это означает, что код был написан, чтобы превратить инструкцию в нашем файле CSS во что-то, что можно вывести на экран.Мы рассмотрим этот процесс подробнее в уроке «Как работает CSS». Для всех браузеров необычно реализовывать какую-либо функцию одновременно, поэтому обычно существует пробел, в котором вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине полезно иметь возможность проверить статус реализации.
Статус поддержки браузера отображается на каждой странице свойств MDN в разделе «Совместимость браузера» (используйте это, чтобы проверить, можно ли использовать свойство на вашем веб-сайте). Например, раздел совместимости для свойства семейства шрифтов CSS воспроизводится ниже.
Таблицы BCD загружаются только в браузере
Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдем к началу работы с CSS, где вы можете начать писать CSS самостоятельно.
Как работает CSS - Изучите веб-разработку
Мы узнали основы CSS, для чего он нужен и как писать простые таблицы стилей. В этом уроке мы рассмотрим, как браузер использует CSS и HTML и превращает их в веб-страницу.
Когда браузер отображает документ, он должен объединить содержимое документа с информацией о его стиле.Он обрабатывает документ в несколько этапов, которые мы перечислили ниже. Имейте в виду, что это очень упрощенная версия того, что происходит, когда браузер загружает веб-страницу, и что разные браузеры будут обрабатывать этот процесс по-разному. Но примерно так и происходит.
- Браузер загружает HTML (например, получает его из сети).
- Он преобразует HTML в DOM ( Document Object Model ). Модель DOM представляет собой документ в памяти компьютера.Подробнее о модели DOM в следующем разделе.
- Затем браузер извлекает большинство ресурсов, на которые ссылается документ HTML, таких как встроенные изображения и видео ... и связанный CSS! JavaScript обрабатывается немного позже в этом процессе, и мы не будем говорить об этом здесь, чтобы упростить задачу.
- Браузер анализирует полученный CSS и сортирует различные правила по типам их селекторов в разные «сегменты», например элемент, класс, идентификатор и т. д. На основе найденных селекторов он определяет, какие правила следует применять к каким узлам DOM, и при необходимости прикрепляет к ним стиль (этот промежуточный шаг называется деревом визуализации).
- Дерево рендеринга размещается в той структуре, в которой оно должно появиться после применения к нему правил.
- Визуальное отображение страницы отображается на экране (этот этап называется рисованием).
Следующая диаграмма также предлагает простой вид процесса.
Модель DOM имеет древовидную структуру. Каждый элемент, атрибут и фрагмент текста на языке разметки становится узлом DOM в древовидной структуре. Узлы определяются их отношениями к другим узлам DOM.Некоторые элементы являются родителями дочерних узлов, а дочерние узлы имеют братьев и сестер.
Понимание DOM помогает вам разрабатывать, отлаживать и поддерживать ваш CSS, потому что DOM - это место, где встречаются ваш CSS и содержимое документа. Когда вы начнете работать с DevTools браузера, вы будете перемещаться по DOM при выборе элементов, чтобы увидеть, какие правила применяются.
Вместо длинного скучного объяснения, давайте рассмотрим пример, чтобы увидеть, как реальный фрагмент HTML преобразуется в DOM.
Возьмите следующий HTML-код:
Воспользуемся:
Каскадный
Стиль
Таблицы
В модели DOM узел, соответствующий нашему элементу . Узлы SPAN также являются родительскими, а их дочерними узлами являются текстовые узлы:
P ├─ «Давайте использовать:» ├─ SPAN | └─ «Каскадный» ├─ SPAN | └─ «Стиль» └─ SPAN └─ «Листы»
Вот как браузер интерпретирует предыдущий фрагмент HTML - он отображает указанное выше дерево DOM, а затем выводит его в браузере следующим образом:
Допустим, мы добавили CSS в наш документ, чтобы стилизовать его.Опять же, HTML выглядит следующим образом:
Воспользуемся:
Каскадный
Стиль
Таблицы
Предположим, мы применили к нему следующий CSS:
пролет {
граница: сплошной черный 1px;
цвет фона: салатовый;
}
Браузер проанализирует HTML и создаст из него DOM, а затем проанализирует CSS. Поскольку единственное правило, доступное в CSS, имеет селектор span , браузер сможет очень быстро сортировать CSS! Он применит это правило к каждому из трех s, а затем нарисует окончательное визуальное представление на экране.
Обновленный вывод выглядит следующим образом:
В нашей статье «Отладка CSS» в следующем модуле мы будем использовать DevTools браузера для отладки проблем с CSS и узнаем больше о том, как браузер интерпретирует CSS.
В предыдущем уроке я упоминал, что не все браузеры реализуют новый CSS одновременно. Кроме того, многие люди не используют последнюю версию браузера. Учитывая, что CSS постоянно разрабатывается и, следовательно, опережает то, что браузеры могут распознать, вы можете задаться вопросом, что произойдет, если браузер обнаружит селектор CSS или объявление, которое он не распознает.
Ответ заключается в том, что он ничего не делает, а просто переходит к следующему биту CSS!
Если браузер анализирует ваши правила и обнаруживает свойство или значение, которое он не понимает, он игнорирует их и переходит к следующему объявлению. Он сделает это, если вы допустили ошибку и неправильно написали свойство или значение, или если свойство или значение слишком новое и браузер еще не поддерживает его.
Точно так же, если браузер встречает селектор, которого он не понимает, он просто проигнорирует все правило и перейдет к следующему.
В приведенном ниже примере я использовал написание цвета в британском английском, что делает это свойство недействительным, поскольку оно не распознается. Так что мой абзац не был окрашен в синий цвет. Однако все остальные CSS были применены; игнорируется только недопустимая строка.
Я хочу, чтобы этот текст был большим, жирным и синим.
p {
font-weight: жирный;
цвет: синий;
размер шрифта: 200%;
}
Это очень полезное поведение.Это означает, что вы можете использовать новый CSS в качестве расширения, зная, что не произойдет никаких ошибок, если он не будет понят - браузер либо получит новую функцию, либо нет. Это позволяет использовать базовый резервный стиль.
Это особенно хорошо работает, когда вы хотите использовать новое значение, которое поддерживается не везде. Например, некоторые старые браузеры не поддерживают calc () в качестве значения. Я мог бы указать резервную ширину для поля в пикселях, а затем перейти к ширине со значением calc () , равным 100% - 50px .Старые браузеры будут использовать пиксельную версию, игнорируя строку о calc () , поскольку они ее не понимают. Новые браузеры интерпретируют строку с использованием пикселей, но затем заменяют ее строкой с помощью calc () , поскольку эта строка появляется позже в каскаде.
.box {
ширина: 500 пикселей;
ширина: calc (100% - 50 пикселей);
}
В последующих уроках мы рассмотрим еще много способов поддержки различных браузеров.
Вы почти закончили этот модуль; у нас есть только одно дело.В следующей статье вы будете использовать свои новые знания, чтобы изменить стиль примера, тестируя в процессе некоторый CSS.
Начало работы с CSS - изучение веб-разработки
В этой статье мы возьмем простой HTML-документ и применим к нему CSS, попутно изучая некоторые практические вещи о языке.
Наша отправная точка - это HTML-документ. Вы можете скопировать приведенный ниже код, если хотите работать на своем компьютере. Сохраните приведенный ниже код как index.html в папке на вашем компьютере.
Начало работы с CSS
Я заголовок первого уровня
Это абзац текста. В тексте есть элемент span
а также ссылку .
Это второй абзац. Он содержит выделенный элемент.
- Элемент один
- Пункт второй
- Пункт три
Примечание: Если вы читаете это на устройстве или в среде, где вы не можете легко создавать файлы, тогда не волнуйтесь - ниже представлены редакторы живого кода, которые позволят вам написать пример кода прямо здесь, на странице.
Самое первое, что нам нужно сделать, это сообщить HTML-документу, что у нас есть некоторые правила CSS, которые мы хотим использовать.Существует три различных способа применения CSS к HTML-документу, с которыми вы часто будете сталкиваться, однако пока мы рассмотрим наиболее обычный и полезный способ сделать это - привязать CSS из заголовка вашего документа.
Создайте файл в той же папке, что и ваш HTML-документ, и сохраните его как styles.css . Расширение .css показывает, что это файл CSS.
Чтобы связать styles.css с index.html , добавьте следующую строку где-нибудь внутри HTML-документа:
Этот элемент сообщает браузеру, что у нас есть таблица стилей, используя атрибут rel и расположение этой таблицы стилей в качестве значения атрибута href . Вы можете проверить, что CSS работает, добавив правило в файл styles.css . С помощью редактора кода добавьте в файл CSS следующее:
Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным.Если это произойдет, поздравляем - вы успешно применили CSS к HTML-документу. Если этого не произошло, внимательно проверьте, все ли вы набрали правильно.
Вы можете продолжить работу с styles.css локально, или вы можете использовать наш интерактивный редактор ниже, чтобы продолжить это руководство. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с HTML-документом, как мы это сделали с нашим документом выше.
Сделав наш заголовок красным, мы уже продемонстрировали, что можем настроить таргетинг и стилизовать элемент HTML.Мы делаем это, ориентируясь на селектор элемента - это селектор, который напрямую соответствует имени элемента HTML. Чтобы настроить таргетинг на все абзацы в документе, используйте селектор p . Чтобы сделать все абзацы зеленым, вы должны использовать:
Вы можете настроить таргетинг сразу на несколько селекторов, разделив их запятыми. Если я хочу, чтобы все абзацы и все элементы списка были зелеными, мое правило выглядит так:
Попробуйте это в интерактивном редакторе ниже (отредактируйте поля кода) или в локальном документе CSS.
Когда мы смотрим на хорошо размеченный HTML-документ, даже такой простой, как наш пример, мы можем увидеть, как браузер делает HTML-код читаемым, добавляя некоторые стили по умолчанию. Заголовки большие и жирные, а в нашем списке есть маркеры. Это происходит потому, что в браузерах есть внутренние таблицы стилей, содержащие стили по умолчанию, которые по умолчанию применяются ко всем страницам; без них весь текст слился бы в кучу, и нам пришлось бы стилизовать все с нуля. Все современные браузеры по умолчанию отображают HTML-контент практически одинаково.
Однако вам часто может понадобиться нечто иное, чем выбор, сделанный браузером. Это можно сделать, выбрав HTML-элемент, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является наш
li {
тип-стиль-список: нет;
}
Попробуйте добавить это в свой CSS сейчас.
Свойство типа списка - хорошее свойство, которое стоит посмотреть в MDN, чтобы увидеть, какие значения поддерживаются.Взгляните на страницу list-style-type , и вы найдете интерактивный пример в верхней части страницы, где можно попробовать различные значения, а затем все допустимые значения подробно описаны ниже.
Глядя на эту страницу, вы обнаружите, что помимо удаления маркеров списка вы можете их изменить - попробуйте изменить их на квадратные маркеры, используя значение квадрат .
До сих пор мы стилизовали элементы на основе их имен HTML-элементов. Это работает до тех пор, пока вы хотите, чтобы все элементы этого типа в вашем документе выглядели одинаково.В большинстве случаев это не так, поэтому вам нужно будет найти способ выбрать подмножество элементов, не изменяя другие. Наиболее распространенный способ сделать это - добавить класс к вашему элементу HTML и нацелить его на этот класс.
В своем HTML-документе добавьте атрибут класса ко второму элементу списка. Ваш список теперь будет выглядеть так:
- Пункт первый
- Пункт второй
- Пункт три
В вашем CSS вы можете нацелить класс на специальный , создав селектор, который начинается с символа точки.Добавьте в свой файл CSS следующее:
.special {
оранжевый цвет;
font-weight: жирный;
}
Сохраните и обновите, чтобы увидеть результат.
Вы можете применить класс special к любому элементу на вашей странице, который должен иметь тот же вид, что и этот элемент списка. Например, вы можете захотеть, чтобы в абзаце также было оранжевым и жирным. Попробуйте добавить к нему class из special , затем перезагрузите страницу и посмотрите, что произойдет.
Иногда вы видите правила с селектором, который перечисляет селектор HTML-элемента вместе с классом:
li.special {
оранжевый цвет;
font-weight: жирный;
}
Этот синтаксис означает «целевой любой элемент li , имеющий специальный класс». Если бы вы сделали это, вы бы больше не смогли применить класс к или другому элементу, добавив к нему класс; вам нужно будет добавить этот элемент в список селекторов:
ли.особый,
span.special {
оранжевый цвет;
font-weight: жирный;
}
Как вы понимаете, некоторые классы могут применяться ко многим элементам, и вам не нужно продолжать редактировать свой CSS каждый раз, когда что-то новое требует этого стиля. Поэтому иногда лучше обойти элемент и обратиться к классу, если вы не знаете, что хотите создать некоторые специальные правила только для одного элемента и, возможно, хотите убедиться, что они не применяются к другим вещам.
Бывают случаи, когда вам нужно, чтобы что-то выглядело по-другому в зависимости от того, где оно находится в документе.Есть несколько селекторов, которые могут вам здесь помочь, но пока мы рассмотрим только пару. В нашем документе два элемента - один внутри абзаца, а другой внутри элемента списка. Чтобы выбрать только , вложенный в элемент
Добавьте следующее правило в свою таблицу стилей.
li em {
цвет: пурпурный;
}
Этот селектор выберет любой элемент , который находится внутри (потомка) в третьем элементе списка теперь фиолетового цвета, но тот, который находится внутри абзаца, не изменился.
Еще вы можете попробовать стилизовать абзац, когда он идет сразу после заголовка на том же уровне иерархии в HTML.Для этого поместите + ( смежный одноуровневый комбинатор ) между селекторами.
Попробуйте также добавить это правило в свою таблицу стилей:
h2 + p {
размер шрифта: 200%;
}
Живой пример ниже включает два правила, указанные выше. Попробуйте добавить правило, чтобы сделать промежуток красным, если он находится внутри абзаца. Вы узнаете, правильно ли вы все сделали, поскольку диапазон в первом абзаце будет красным, а в первом пункте списка цвет не изменится.
Примечание: Как видите, CSS дает нам несколько способов нацеливания на элементы, и мы пока лишь поверхностно коснулись! Мы подробно рассмотрим все эти и многие другие селекторы в наших статьях по Селекторам позже в этом курсе.
Последний тип стилей, который мы рассмотрим в этом уроке, - это возможность стилизовать предметы в зависимости от их состояния. Простой пример этого - стилизация ссылок. Когда мы стилизуем ссылку, нам нужно настроить таргетинг на элемент (привязка). Он имеет разные состояния в зависимости от того, не был ли он посещен, посещен, на него наведен курсор, фокусируется с помощью клавиатуры или находится в процессе нажатия (активации). Вы можете использовать CSS для нацеливания на эти различные состояния - нижеприведенный CSS выделяет непосещенные ссылки розовым цветом, а посещенные - зеленым.
a: link {
цвет: розовый;
}
а: посетил {
цвет: зеленый;
}
Вы можете изменить вид ссылки, когда пользователь наводит на нее курсор, например, удалив подчеркивание, что достигается следующим правилом:
a: hover {
текстовое оформление: нет;
}
В приведенном ниже живом примере вы можете поиграть с разными значениями для различных состояний ссылки. Я добавил к нему приведенные выше правила и теперь понимаю, что розовый цвет довольно светлый и его трудно читать - почему бы не изменить его на лучший цвет? Можете ли вы сделать ссылки жирными?
Мы удалили подчеркивание в нашей ссылке при наведении курсора.Вы можете удалить подчеркивание во всех состояниях ссылки. Однако стоит помнить, что на реальном сайте вы хотите, чтобы посетители знали, что ссылка является ссылкой. Оставление подчеркивания на месте может быть важным ключом к пониманию того, что на некотором тексте внутри абзаца можно щелкнуть - это то поведение, к которому они привыкли. Как и все в CSS, есть вероятность сделать документ менее доступным с вашими изменениями - мы постараемся выделить потенциальные подводные камни в соответствующих местах.
Примечание: вы часто будете видеть упоминания о доступности в этих уроках и в MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятны и могли использоваться всеми.
Ваш посетитель вполне может быть за компьютером с мышью или трекпадом или телефоном с сенсорным экраном. Или они могут использовать программу чтения с экрана, которая считывает содержимое документа, или им может потребоваться использовать текст гораздо большего размера, или они могут перемещаться по сайту, используя только клавиатуру.
Обычный HTML-документ обычно доступен каждому - когда вы начинаете стилизовать этот документ, важно, чтобы вы не сделали его менее доступным.
Стоит отметить, что вы можете комбинировать несколько селекторов и комбинаторов вместе. Например:
article p span {...}
h2 + ul + p {...}
Вы также можете комбинировать несколько типов вместе. Попробуйте добавить в свой код следующее:
корпус h2 + p .special {
цвет: желтый;
цвет фона: черный;
отступ: 5 пикселей;
}
Это будет стилизовать любой элемент с классом special , который находится внутри , который находится внутри .Уф!
В исходном HTML, который мы предоставили, единственный стилизованный элемент - .
Не волнуйтесь, если это кажется сложным в данный момент - вы скоро начнете понимать это, когда будете писать больше CSS.
В этом руководстве мы рассмотрели несколько способов стилизации документа с помощью CSS. Мы будем развивать эти знания по мере прохождения оставшихся уроков. Однако теперь вы уже знаете достаточно, чтобы стилизовать текст, применять CSS на основе различных способов нацеливания на элементы в документе и искать свойства и значения в документации MDN.
В следующем уроке мы рассмотрим, как устроен CSS.
Базовое введение в CSS. Время от времени я слышу жалобы от… | Просси Накимера | The Andela Way
Фото агентства Kobu на UnsplashИногда я слышу жалобы от большинства моих коллег-разработчиков на то, насколько проблематичен CSS. Они постоянно подчеркивают, что это отнимает у них много времени и для этого нужен дизайнер, а не разработчик или ученый-компьютерщик. Они не считают это занятием развлечением, а скорее необходимостью.
Послушайте, я не знаю, что вы слышали о CSS или что вы думаете о нем (вы можете сообщить мне об этом в разделе комментариев ниже). Это то, что я знаю. Играть с CSS - одно из моих развлечений. Это пробуждает во мне творческий потенциал. Думать об этом. Программное обеспечение разработано для конечного пользователя. Это означает, что помимо убойного бэкэнда, который обрабатывает все крайние случаи, пользователю нужен интерфейс для взаимодействия с приложением, а не просто какой-то дурацкий интерфейс без чувства стиля.Здесь на помощь приходит CSS. Проще говоря, интерфейс и серверная часть дополняют друг друга. Вы просто не можете [ читать kent ] позволить себе катастрофу пользовательского интерфейса.
Мы спасаем здесь жизни, люди
CSS означает каскадные таблицы стилей. Он описывает, как объекты HTML отображаются в браузере.
CSS используется не только для определения стилей для ваших веб-страниц, но также для макета и вариантов для устройств с разным размером экрана, например ноутбуков, мобильных телефонов и т. Д., Что обычно называется отзывчивостью.
Почему я считаю, что вы должны сделать CSS своим другом
- Это делает ваши страницы презентабельными.
- Он позволяет оптимизировать контент для более чем одного типа устройств.
Синтаксис CSS
selector {property: value} - Селектор указывает на элемент HTML, который нужно стилизовать. В этом примере давайте используем div в качестве нашего селектора
- Свойство - это просто атрибут элемента HTML.Это может быть background-color , width или height .
- Свойствам присвоены значения .
Блок кода ниже представляет стиль CSS для div
div {background-color: red} В этом руководстве предполагается, что вы имеете базовое понимание HTML. Ниже показано, как наша веб-страница будет выглядеть в конце этого руководства. Простите мой выбор цвета. Я дизайнер по убеждению, и в моем мире цвет в тренде 💁.Но смело используйте цвета, которые соответствуют вашим предпочтениям.
Начало работы
Чтобы все стало возможным, вам понадобится следующее.
- Текстовый редактор для написания кода. Предпочтительно vscode
- Веб-браузер для отображения веб-страницы
- Желание учиться. Как это не очевидно 💁
Как добиться успеха
Откройте текстовый редактор и добавьте 2 файла, то есть index.html и index.css . Файл .html, для определения содержимого нашей страницы и файл .css для хранения стилей для страницы. Убедитесь, что оба файла сохранены в том же каталоге / папке, что и изображение, которое вы будете использовать.
Импортируйте файл CSS, добавив эту строку кода ниже в заголовок вашего HTML-файла.
<ссылка rel = "таблица стилей" href = "index.css">
Внутри основного раздела файла .html добавьте div.Этот div содержит тег изображения , 2 поля ввода и кнопку . Назначьте каждому элементу селектор, добавив атрибут класса к каждому тегу. Ваш файл должен выглядеть следующим образом 👇
Стиль фона страницы
Присвойте тегу body свойство background-color в файле .css и присвойте ему значение.
body {background-color: coral} Стиль div
- Добавьте класс div в файл CSS и задайте ему белый фон, ширину и высоту.
.card {background-color: white; ширина: 450 пикселей; высота: 550 пикселей; } - Разместите карточку в центре страницы, добавив следующие пары свойств и значений в основной текст. Flexbox - простая альтернатива для этого. Вы можете прочитать больше об этом здесь.
дисплей: гибкий; align-items: center; justify-content: center; высота: 100вх;
vh - это единица CSS, обозначающая высоту обзора.
Стиль изображения
- Присвойте классу
card-imageвысоту, ширину и радиус границы, чтобы сделать его изогнутым.
.карта-изображение {ширина: 250 пикселей; высота: 250 пикселей; border-radius: 150px} Стиль полей ввода
Обратите внимание, что оба поля ввода имеют один и тот же класс? Это потому, что они имеют одинаковые атрибуты, то есть ширину и высоту.
- Присвойте
.card-inputширину и высоту
Значение ширины 95% представляет 95% общего родительского div, т.е. 95% 430px
.card-input {width: 95%; height: 50px} - Добавьте свойство
margin-top, чтобы дать каждому полю ввода некоторое пространство вверху
.card-input {ширина: 95%; высота: 50 пикселей; margin-top: 30px} Стиль кнопки
Задайте для кнопки ширину, высоту, цвет фона и цвет шрифтов.
.card-button {width: 450px; высота: 50 пикселей; цвет фона: коралловый; color: white} Придайте содержимому карточки некоторый интервал от границы карточки, добавив свойство padding к .card class
Ниже показано, как должен выглядеть ваш файл CSS.
Надеюсь, это руководство было полезным.И, надеюсь, это изменило ваше отношение к CSS 😅
Введение в CSS - Полный курс от новичка до эксперта
Я здесь, чтобы помочь вам выучить , осуществите свою мечту , приходите присоединяйтесь ко мне на этом удивительное приключение сегодня
Google Developers Expert - GSuite
Предлагает курсы веб-разработки и курсы по стратегии цифрового маркетинга с 2002 года.
Эксперт в области инновационных технологий с широким спектром практического опыта. Предоставление интеллектуальных цифровых решений в Интернете как для малого, так и для корпоративного уровня.
«У меня есть страсть ко всему, что связано с цифровыми технологиями, мне нравится программирование и задача разработки успешного цифрового опыта. Как опытный разработчик, я создал свои первые компьютерные приложения в 1990 году и свой первый веб-сайт в 1998 году. Мне нравится делиться своими знания с другими и хочу помочь вам поделиться чудесными возможностями, которые предоставляет Интернет ».
«Обучение, понимание и сильная страсть к образованию. Интернет предоставил нам новые возможности для расширения и обмена знаниями. ».
Хотите узнать больше о том, как стать веб-разработчиком, хотите ли вы ощутить свободу, которую предоставляет нам технология? Узнайте, как принести удивительные вещи в жизнь онлайн. Технологии соединяют всех нас разными способами. Они открывают двери для тех, кто их принимает и узнает, как сделать эти связи реальными.
«Мои курсы разработаны, чтобы помочь вам достичь ваших целей, изучить и обновить навыки»
Предпосылки : Опытный разработчик веб-приложений, работавший над несколькими приложениями корпоративного уровня, сотнями веб-сайтов, бизнес-решениями и множеством уникальных и инновационных веб-приложений.Специализация в области разработки веб-приложений включает HTML, CSS, JavaScript, JQuery, Bootstrap, PHP и MySQL . Все, что связано с веб-созданием и цифровым опытом. Увлечен всем, что связано с разработкой веб-приложений , программированием и интернет-маркетингом с упором на социальных сетей и SEO .
" Понимание технологий дает возможность лучше общаться с пользователями . Это также открывает множество дверей.Знания - ключ к успеху, и я хочу помочь вам узнать, что предлагают технологии. Я увлечен веб-технологиями и с нетерпением жду возможности поделиться с вами своими знаниями и опытом! »
Введение в CSS | руководство по каскадным таблицам стилей для начинающих
Путь // www.yourhtmlsource.com → Таблицы стилей → ВВЕДЕНИЕ В CSS
HTML был первоначально разработан как простой способ представления информации, при этом эстетика веб-страницы была гораздо менее важна, чем контент (и в значительной степени оставалась на усмотрение веб-браузера).Конечно, теперь, когда Интернет стал таким же популярным, представление вашего контента стало почти критически важным для успеха сайта. CSS - это ключевая презентационная технология, которая используется для разработки веб-сайтов.
Навигация по страницам:
Что такое таблицы стилей?
· Преимущества CSS
| Реализация
· Единая центральная таблица стилей
· Прикрепление таблицы стилей
· Индивидуальные блоки стилей
· Использование атрибута стиля
Эта страница последний раз обновлялась 21.08.2012
Что такое таблицы стилей?
В конце 90-х разработчики HTML заметили, что они снова и снова набирают одни и те же старые теги на одной и той же странице, что приводит к большим размерам файлов HTML и, прежде всего, к затратам времени и разочарованию.Возможно, вы оказались в той же ситуации, добавляя горы тегов , несмотря на то, что хотели, чтобы они все были одинаковыми; или используя уловки вроде невидимых гифок для интервала.
Тогда кому-то пришла в голову отличная идея: иметь один файл , который определяет все значения, которые могли бы сделать эти стопки тегов, а затем все ваши страницы проверяют этот файл и соответствующим образом форматируют ваши страницы. Таким образом, вы можете опустить большую часть тегов форматирования в HTML и использовать только красивые структурные элементы (например, заголовки, абзацы и ссылки) - разделяющая структура и представления.
В конце 1996 года CSS (каскадные таблицы стилей) стал реальностью, созданной нашими хорошими друзьями из »Консорциума всемирной паутины (W3C). Ваша таблица стилей выступает в роли партнера вашего HTML-кода; заботясь о макете, шрифтах, цветах и общем внешнем виде вашего сайта.
Если вы когда-нибудь решите изменить внешний вид своего сайта, вы измените этот файл CSS (ваша таблица стилей ), и все HTML-страницы, читаемые из этого файла, будут отображаться по-другому . Это значительно упрощает обслуживание вашего дизайна .
Преимущества CSS
Еще одним преимуществом CSS является то, что вы определяете сразу после , что делает его более эффективным , чем определение всего в HTML на каждой странице. Это означает:
- Страницы загружаются быстрее , иногда на 50%
- Вам нужно вводить меньше кода, и ваши страницы будут короче и аккуратнее.
- Внешний вид вашего сайта остается неизменным на всех страницах, использующих одну и ту же таблицу стилей.
- Обновление дизайна и общее обслуживание сайта стало намного проще, а ошибки, вызванные редактированием нескольких HTML-страниц, возникают гораздо реже.
Хорошо написанный CSS также улучшает доступность веб-контента , обеспечивая доступ через бесчисленное количество устройств (например, карманные КПК ) и гарантируя, что веб-пользователи с ограниченными возможностями по-прежнему смогут его получать. Это также устраняет необходимость во взломах и тегах для конкретных браузеров, что означает, что у вашего сайта больше шансов работать во всех основных браузерах.
Изначально CSS представлял собой хорошо продуманный и элегантный язык, который казался немного устрашающим. Это чрезвычайно важно для будущего веб-дизайна и помогло дизайнерам отойти от проблемных, хакерских дней презентационных HTML-тегов, таких как , и позволило нам вернуться к использованию логических, структурных элементов. которые делают наши сайты более доступными.
Все это, и есть десятки мощных дополнительных параметров форматирования и возможностей, доступных с помощью команд таблицы стилей, которые невозможны с помощью обычного HTML.Вы увидите это позже, когда мы перейдем к таким вещам, как фон, интервалы, слои и границы.
Примечание о совместимости с браузером:
На данный момент W3C выпустил две основные версии спецификаций CSS: »CSS 1 и» CSS 2 в '96 и '98 соответственно. Эти стандарты работают так же, как и новые стандарты HTML, с новыми функциями, добавляемыми в каждую последующую версию. CSS 3 в настоящее время находится в стадии разработки, но не будет доработан еще несколько лет.
Браузеры начали правильно поддерживать таблицы стилей с версии 4.Internet Explorer 3 имел некоторые базовые знания, а Netscape Navigator 4.7 был очень глючным. К 5-й версии »Internet Explorer браузер приближался к полной совместимости с первым из этих двух стандартов, хотя многие ошибки в его реализации оставались.
CSS 2 и более поздние версии почти полностью поддерживаются, особенно в более сложных браузерах, таких как »Firefox,» Chrome, »Opera и» Safari. Это заняло много болезненных лет, но каждый должен использовать CSS сегодня.
Реализация
CSS-файлы называются «каскадными» таблицами стилей по двум причинам: одна таблица стилей может каскадировать или влиять на несколько страниц. Точно так же многие файлы CSS могут определять одну страницу.
Есть 3 способа реализовать команды css на вашем сайте:
- Используйте один файл CSS для всех страниц . Это лучший способ сделать это.
- Интегрируйте команды CSS в заголовок
- Используйте атрибут стиля
, чтобы поместить код CSS непосредственно в элемент HTML.
CSS позволяет вам использовать все три из этих методов в великолепном тандеме, наследуя и переопределяя значения по ходу дела (мы вернемся ко всему этому в следующем уроке).
Одна центральная таблица стилей
Вот как вы должны использовать большую часть вашего CSS. Вы пишете только один файл .css и имеете всех ваших страниц, ссылающихся на него. Таким образом, изменение чего-либо в этом одном файле приведет к корректировке этого элемента (например, шрифта) на всем вашем сайте.Вы можете изменить всю цветовую схему с помощью одной модификации, если хотите, на неограниченном количестве страниц. Это одна из вещей, для которой был разработан CSS - , гибкость, .
Чтобы создать таблицу стилей, откройте текстовый редактор (подойдет Блокнот или SimpleText). Помните, на самом первом уроке на этом сайте вы научились сохранять из текстового редактора в файл формата .html? Что ж, здесь вы будете делать примерно то же самое, за исключением того, что ваш файл будет иметь суффикс .css .Просто сохраните пустой файл под именем mystyles.css и поместите его в тот же каталог, что и ваша домашняя страница. Теперь, когда он у вас есть, я могу показать вам синтаксис, используемый в CSS:
. Очень важно селектор {свойство: значение ; свойство: значение ; свойство: значение ; }А теперь рабочий пример:
p {цвет: синий ; размер шрифта: 120% ; }
Просто вставьте эту строчку в свой файл на время этого урока.Это все, что тебе нужно. Это правило применяется ко всем элементам абзаца. После того, как вы связали таблицу стилей со своими страницами, наличие этого объявления стиля в вашем файле css сделает весь текст на ваших страницах заключенным в теги
Так будут отформатированы все затронутые абзацы.
Ознакомьтесь с этими правилами:
- Селектор - это обычно имя тега без окружающих его угловых скобок.
- Фигурные скобки - это {фигурные} , а не [квадратные] или (круглые).
- После имени свойства ставится двоеточие, а между каждой отдельной частью ставится точка с запятой . Каждая из этих пар свойств и значений представляет собой объявление .
Вы можете добавить еще одну строку под своей первой. Попробуйте эту строку CSS, а затем используйте несколько больших заголовков на своей странице:
h2 {font-family: Verdana, sans-serif ; цвет: красный ; font-size: 20px ; }
Ваша таблица стилей должна выглядеть примерно так.Если вы хотите повлиять на несколько селекторов с одинаковым форматированием CSS, добавьте их все вместе с запятыми:
p, div, h2 {цвет: # 00DDFF; ширина: 80%; } / * изменяет все 3 тега * /
Как и выше, вы также можете добавлять комментарии к вашей таблице стилей, используя разделители /*...*/. Они могут дать вам или кому-либо еще, использующему вашу таблицу стилей, важные советы о том, что происходит в вашем коде.
Прикрепление таблицы стилей
Теперь, когда у вас есть что-то в вашем файле, вам нужно показать свои страницы, где их файл css - .Поместите эту строку кода в часть head любого документа, который вы хотите прочитать этот файл:
Это может быть новый тег для вас - rel обозначает «RELationship» файла, а тип показывает, что это текстовый файл, действующий как таблица стилей CSS. Убедившись, что href верен (он может быть определен абсолютно или относительно), вы должны увидеть, что ваши страницы отформатированы с вашими предпочтительными значениями.Вы можете связать несколько таблиц стилей с каждой страницей, если хотите, например, иметь один файл со всеми вашими шрифтами, другой для полей и интервалов и т. Д.
Индивидуальные блоки стилей
Если вы используете общий дизайн для всех страниц своего сайта, вам следует использовать описанный выше метод. Однако, если для ряда страниц требуется определенный стиль и вам нужно переопределить значения, которые вы определили в своей основной таблице стилей, вы можете использовать метод блоков стилей. Чтобы встроить стиль, поместите его в голову :
Атрибут type здесь позволяет браузерам обрабатывать этот код как CSS.Примененный таким образом код CSS технически не является листом стиля , а называется «встроенным блоком стиля».
Использование атрибута стиля
Если вам нужно изменить один тег самостоятельно, вы можете встроить в него информацию о стиле с помощью атрибута стиля :
style = "color: blue; font-family: Arial;">
Форматирование стиля прекратится, как только вы закроете тег, к которому он применен, как и любой другой атрибут, поэтому затронут только этот абзац.Также обратите внимание, что здесь не используются фигурные скобки, но по-прежнему применяется правило двоеточия / точки с запятой.
Этот метод полезен для однократного форматирования и переопределения ранее определенных свойств, но вы не должны использовать его слишком часто. Если вы обнаружите, что добавляете один и тот же стиль к нескольким тегам, возможно, стоит продвинуть его в свою основную таблицу стилей, чтобы сэкономить время и место.
Если вы хотите увидеть полнофункциональную таблицу стилей, вы можете посмотреть наш: bubbleicious.css (для открытия используйте Блокнот).Пусть вас не смущает сложность, поскольку используются более продвинутые методы, которые еще не были объяснены ...
Итак, это было ваше введение. Теперь получите решающий контроль над своим CSS с помощью более продвинутых методов ...
Введение в CSS и стили - E 115: Введение в вычислительную среду
Что такое CSS?
В предыдущей главе мы узнали, что XHTML используется для категоризации данных таким образом, чтобы браузер мог делать значимые выводы; например, браузер знает, что тег заголовка должен отображаться крупным и жирным шрифтом.CSS или Cascading Style Sheets - это способ переопределить стиль отображения по умолчанию в браузере. Другими словами, CSS позволяет нам написать набор правил, которые точно определяют, как отображать определенный тип данных на веб-сайте. Правило CSS можно перевести как «отображать все абзацы шрифтом Arial».
Практическое применение
Помимо возможности настройки, CSS дает возможность легко и просто создавать единообразный внешний вид всего веб-сайта.Веб-сайт может использовать один файл CSS для каждой страницы - каждая страница будет иметь свои уникальные данные и информацию, но все страницы будут иметь одинаковый внешний вид, и изменение внешнего вида для всего веб-сайта может быть выполнено мгновенно, изменив один файл. Эта согласованность помогает вашему веб-сайту поддерживать единую визуальную тему или бренд, обеспечивая легкий опыт конечного пользователя для посетителей.
Дополнительная информация
Как и XHTML, все особенности правил языка CSS стандартизированы Консорциумом World Wide Web (W3C).Самой последней версией основного языка для CSS является CSS3, но новые наборы правил все время принимаются как часть официального языка. W3C предоставляет онлайн-инструмент, который может использовать каждый, чтобы проверить, является ли фрагмент кода CSS полностью допустимым, называемый службой проверки CSS.
Поскольку CSS постоянно развивается (даже быстрее, чем XHTML), этот учебник познакомит вас с синтаксисом и использованием CSS, а также обсудит наиболее часто используемые правила CSS. Содержание, обсуждаемое в этом учебнике, представляет собой очень небольшое подмножество того, что возможно в CSS, и для дальнейшего чтения можно просмотреть документацию CSS Mozilla Developer Network или официальную спецификацию языка W3C.
Важные программы
Файлы CSSнаписаны с использованием текстовых редакторов, как и файлы XHTML. Большинство текстовых редакторов, специализирующихся на редактировании документов HTML и XHTML, также имеют специальные функции для редактирования файлов CSS.