Добро пожаловать в следующий урок из серии уроков по CSS! С вами вновь Макс Метелев и сегодня мы разберем на практике как работать с CSS и как его подключить к html документу.
В прошлом уроке мы бегло узнали историю его появления. Если не читали, то настоятельно рекомендую.
Завариваем кофе, чай, берем плюшки и вперед за изучение основ сайтостроения.
Как работает CSS?
В этом уроке вы создадите свой первый файл стилей. Многие из свойств, используемых в каскадных таблицах стилей аналогичны в HTML. Поэтому если вы уверенно разбираетесь в гипертекстовой разметке, то, скорее всего, вы быстро усвоите многие «приблуды» CSS. Давайте рассмотрим на примере.
Базовый синтаксис CSS
Например, нам нужен красный фоновый цвет веб страницы. Используя HTML мы бы сделали примерно так:
В стилях подобное мы бы достигли написанием следующего кода:
body {background-color: #FF0000;}
body {background-color: #FF0000;} |
Как вы должны были заметить написание и там, и там одинаково. Данный пример демонстрирует фундаментальную модель CSS:
Но где размещать код CSS спросите Вы? Вполне логичный и здравый вопрос. Именно этим мы сейчас и займемся.
Как подключить CSS к HTML документу?
Можно выделить 3 способа подключения CSS к веб странице. Все их мы сейчас рассмотрим на примере. Внимательно смотрите 3 способ, так как он самый правильный с точки зрения стандартов верстки и логики. Другие тоже верны, но это «грубые» варианты. Их лучше не использовать.
Метод 1 – Внутристроковое размещение стилей (через атрибут style)
Первый путь заключается в подключении CSS к HTML посредством атрибута style. Основываясь на приведенным выше примере с красным цветом наш код записался бы так:
<html> <head> <title>Example</title> </head> <body> <p>Здесь красная страница</p> </body> </html>
<html> <head> <title>Example</title> </head> <body> <p>Здесь красная страница</p> </body> </html> |
Метод 2 – Через использование тегов style
Другой способ подразумевает включение парных тегов стилей <style></style> внутрь той страницы, где мы хотим применить их. Например, как здесь:
<html> <head> <title>Простой пример</title> <style type=»text/css»> body {background-color: #FF0000;} </style> </head> <body> <p>Здесь снова красная страница</p> </body> </html>
<html> <head> <title>Простой пример</title> <style type=»text/css»> body {background-color: #FF0000;} </style> </head> <body> <p>Здесь снова красная страница</p> </body> </html> |
Метод 3 – Внешнее подключение файлов стилей.
Это рекомендуемый и правильный метод заключается в увязке файла стилей и веб страницы через подключение в html документ всего лишь одной строчки:
<link rel=»stylesheet» type=»text/css» href=»style/style.css» />
<link rel=»stylesheet» type=»text/css» href=»style/style.css» /> |
Единственное условие вы должны сохранить отдельно файл со стилями и назвать его, например style.css и быть он должен в папке CSS или Style. Такую ситуацию можно проиллюстрировать вот так:
Следует обратить внимание на место, где будет подключаться наша строчка, которая вызывает файл со стилями. Она должна находиться между служебными тегами <head></head> . Можно разместить ее сразу после тега заголовка страницы <title> , как на этом примере:
<html> <head> <title>My document</title> <link rel=»stylesheet» type=»text/css» href=»style/style.css» /> </head> <body> </body> </html>
<html> <head> <title>My document</title> <link rel=»stylesheet» type=»text/css» href=»style/style.css» /> </head> <body> </html> |
Ссылка говорит браузеру, что он должен использовать макет из файла CSS для отображения html документа. Т.е как, своего рода, должная инструкция поисковику. Иди вот в это место, цепляй файл стилей и украшай страницу так, как я написал. Ну это образно говоря:-)
Самое важное то, что вы можете иметь неограниченное количество веб страниц и иметь при этом один файл со стилями.
Эта техника поможет сэкономить вам уйму времени. Представьте, что Вы хотите изменить цвет фона веб-сайта с количеством 100-200 страниц, таблица CSS спасет вас от необходимости вручную изменять все эти 100-200 документов.
Давайте еще раз закрепим все на практике.
Попробуйте самостоятельно
Откройте NOTEPAD++ или другую программу для редактирования и создания веб страниц и создайте два файла – один со страничкой html, а другой с файлом стилей:
Default.htm
<html> <head> <title>My document</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>My first stylesheet</h2> </body> </html>
<html> <head> <title>My document</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>My first stylesheet</h2> </body> </html> |
Style.css
body { background-color: #FF0000; }
body { background-color: #FF0000; } |
Теперь возьмите и поместите эти два файла в одну папку. Не забудьте сохранить файлы с правильными расширениями (.htm и .css соответственно)
Откройте в браузере файл default.htm и посмотрите, как ваша страница приобрела красный фон. Поздравляем Вас! Вы сделали свой первый файл стилей.
В следующем уроке мы взглянем на некоторые свойства CSS
Основы работы с языком CSS для новичков
Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.
Блок . Как работать с CSS
Каждому тегу в HTML соответствует так называемый
CSS свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство — это цвет, а «красный» — это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.
Давайте покрасим все абзацы в красный цвет:
Это HTML код:
<p>
Абзац с текстом.
</p>Это CSS код:
p {
color: red;
}Так код будет выглядеть в браузере:
Абзац с текстом.
А теперь давайте покрасим абзацы в зеленый цвети сделаем их большого размера:
<p>
Абзац с текстом.
</p>p {
color: red;
font-size: 25px;
}Так код будет выглядеть в браузере:
Абзац с текстом.
Обратите внимание на оформление CSS кода: каждое новое свойство пишется с новой строки.
Блок . Способы подключения CSS к HTML коду
Давайте теперь разберемся с тем, как сделать так, чтобы написанный CSS применился к нашему
Первый способ заключается в том, что CSSбудет написан в отдельном файле и специальным образом подключен к нашей HTML странице.
Еще два способа заключаются в том, что CSS код будет написан прямо на HTML странице.
Первый способ используется гораздо чаще (в подавляющем большинстве случаев). Одновременно можно применять все три способа.
Давайте разберемся с этими способами более подробно.
Способ 1. Отдельный CSS файл
Самый распространенный способ подключения CSS — это когда он хранится в отдельном файле и этот файл подключается ко всем страницам нашего сайта.
Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество, хоть тысяча. Мы сделаем изменение в одном месте CSS файла, например, покрасим все абзацы в красный цвет, и эти изменения применятся на всей 1000 HTML страниц, к которым подключен наш CSS файл. Очень удобно и быстро.
Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию: <link rel=»stylesheet» href=»путь к CSS файлу»>.
Сам CSS файл должен быть с расширением .css. Обычно его называют styles.css или style.css.
В следующем примере к нашему HTML файлу подключается CSS файл style.css:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
Это абзац с текстом.
</p>
</body>
</html>Можно подключать не один файл, а несколько. Давайте подключим файлы style1.css, style2.css и style3.css:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style3.css">
</head>
<body>
<p>
Это абзац с текстом.
</p>
</body>
</html>Способ 2. CSS внутри тега style
Второй способ заключается в том, что CSS код можно написать в теге <style> Его можно размещать как внутри <head> (чаще всего), так и внутри <body>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл </title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>
Это абзац с текстом.
</p>
</body>
</html>Недостаток этого способа в том, что CSS код применяется только к одной странице сайта, а не ко многим. Этот способ обычно применяется тогда, когда нужно написать CSS на конкретной странице сайта, не затрагивая остальных, и, в общем случае, к употреблению не рекомендуется.
Правило такое: если что-то можно сделать первым способом, то использовать второй способ — дурной тон.
Способ 3. CSS внутри атрибута style
Третий способ заключается в том, что можно добавить атрибут style любому тегу на странице и прямо там написать для него HTML код. Обратите внимание на то, что при этом никаких селекторов писать не нужно, так как CSS код применится только к тому тегу, для которого он написан:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<p>
Это абзац с текстом.
</p>
</body>
</html>Третий способ, так же, как и второй, не сильно рекомендуется к использованию, потому что он захламляет HTML код. В настоящее время общепринято то, что языки нужно разделять по отдельным файлам — в одном файле мы пишем на языке HTML, а в другом — на CSS.
Впрочем, иногда без второго и третьего способа не обойтись.
Блок . Комментарии CSS
Так же, как и в HTML, в CSS можно ставить комментарии. Они оформляются следующим образом: слеш и звездочка /*, потом текст комментария, потом звездочка и слеш */. Смотрите пример:
p {
/*
Тут находится
комментарий CSS.
*/
color: red;
font-size: 27px;
}Видео про CSS
Посмотрите следующее видео из заочного курса: скачайте его по данной ссылке. Там я рассказываю про подключение CSS, а также демонстрирую работу с некоторыми свойствами (эти знания пригодятся вам в следующем уроке).
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.
Когда все решите — переходите к изучению новой темы.
Введение в 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 — Изучение веб-разработки
CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. Основы CSS помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определенном месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?
Так что же такое CSS?
Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки — это язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать все элементы абзаца на HTML странице и изменить текст внутри них с черного на красный, вы должны написать этот CSS:
p {
color: red;
}Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как style.css в вашей папке styles.
Но нам все равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)
- Откройте ваш файл
index.htmlи вставьте следующую строку куда-нибудь в шапку, между<head>и</head>тегами:<link href="styles/style.css" rel="stylesheet" type="text/css">
- Сохраните
index.htmlи загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:
Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!
Анатомия набора CSS правил
Давайте взглянем на вышеупомянутый CSS немного более подробно:
Вся структура называется набором правил (но зачастую для краткости «правило» ). Отметим также имена отдельных частей:
- Селектор (Selector)
- Имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы
p). Для стилизации другого элемента, просто измените селектор. - Объявление (Declaration)
- Единственное правило, например
color: red;указывает, какие из свойств элемента вы хотите стилизовать. - Свойства (Properties)
- Способы, которыми вы можете стилизовать определенный HTML элемент (в данном случае,
colorявляется свойством для элементов<p>). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле. - Значение свойства (Property value)
- Справа от свойства, после двоеточия, у нас есть значение свойства, который выбирает одно из множества возможных значений для данного свойства (существует множество значений
color, помимоred).
Обратите внимание на важные части синтаксиса:
- Каждый набор правил (кроме селектора) должен быть обернут в фигурные скобки (
{}). - В каждом объявлении необходимо использовать двоеточие (
:), чтобы отделить свойство от его значений. - В каждом наборе правил вы должны использовать точку с запятой (
;), чтобы отделить каждое объявление от следующего.
Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:
p {
color: red;
width: 500px;
border: 1px solid black;
}Выбор нескольких элементов
Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделенных запятыми. Например:
p,li,h2 {
color: red;
}Разные типы селекторов
Существует множество различных типов селектора. Выше мы рассматривали только селектор элементов, который выбирает все элементы определенного типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространенных типов селекторов:
| Имя селектора | Что выбирает | Пример |
|---|---|---|
| Селектор элемента (иногда называемый селектором тега или типа) | Все HTML элемент(ы) указанного типа. | pВыбирает <p> |
| ID селектор | Элемент на странице с указанным ID на данной HTML. Лучше всего использовать один элемент для каждого ID (и конечно один ID для каждого элемента), даже если вам разрешено использовать один и тот же ID для нескольких элементов. | #my-idВыбирает <p> или <a> |
| Селектор класса | Элемент(ы) на странице с указанным классом (множество экземпляров класса может объявляться на странице). | .my-classВыбирает <p> и <a> |
| Селектор атрибута | Элемент(ы) на странице с указанным атрибутом. | img[src]Выбирает <img src="myimage.png"> но не <img> |
| Селектор псевдо-класса | Указанные элемент(ы), но только в случае определенного состояния, например, при наведении курсора. | a:hoverВыбирает <a>, но только тогда, когда указатель мыши наведен на ссылку. |
Существует еще много селекторов для изучения, и вы можете найти более подробный список в нашем Руководстве селекторов.
Шрифты и текст
Теперь, когда мы изучили некоторые основы CSS, давайте добавим ещё несколько правил и информацию в наш файл style.css, чтобы наш пример хорошо выглядел. Прежде всего, давайте сделаем, чтобы наши шрифты и текст выглядели немного лучше.
- Прежде всего, вернитесь и найдите вывод из Google Fonts, который вы уже где-то сохранили. Добавьте элемент
<link>где-нибудь внутри шапки вашегоindex.html(снова, в любом месте между тегами<head>и</head>). Это будет выглядеть примерно так:<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницой и позволяет вам применять их к вашим HTML элементам используя свою собственную таблицу стилей. - Затем, удалите существующее правило в вашем
style.cssфайле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит. - Добавьте следующие строки в нужное место, заменив строку
placeholderактуальнойfont-familyстрокой, которую вы получили из Google Fonts. (font-familyпросто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку<html>является родительским элементом для всей страницы, и все элементы внутри него наследуют такой жеfont-sizeиfont-family):html { font-size: 10px; /* px значит 'пиксели': базовый шрифт будет 10 пикселей в высоту */ font-family: placeholder: здесь должно быть имя шрифта из Google fonts }Примечание: Все в CSS документе между
/*и*/является CSS комментарием, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете. - Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела (
<h2>,<li>, и<p>). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения:h2 { font-size: 60px; text-align: center; } p, li { font-size: 16px; line-height: 2; letter-spacing: 1px; }
Вы можете настроить значения px так, как вам нравится, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:
Блоки, блоки и ещё раз блоки
Одна вещь, которую вы заметите в написании CSS, заключается в том, что многое из этого касается блоков — настройка их размера, цвета, положения и т.д. Большинство HTML элементов на странице можно рассматривать как блоки, расположенные друг над другом.
Не удивительно, макет CSS основан, главным образом, на блочной модели (box model). Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:
padding, пространство только вокруг контента (например, вокруг абзаца текста)border, сплошная линия, которая расположена рядом с paddingmargin, пространство вокруг внешней стороны элемента
В этом разделе мы также используем:
width(ширину элемента)background-color, цвет позади контента и padding элементовcolor, цвет контента элемента (обычно текста)text-shadow: устанавливает тень на тексте внутри элементаdisplay: устанавливает режим отображения элемента (пока что не волнуйтесь об этом)
Итак, давайте начнем и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.
Изменение цвета страницы
html {
background-color: #00539F;
}Это правило устанавливает цвет фона для всей страницы. Измените код цвета сверху, на цвет который вы выбрали при планировании вашего сайта.
Разбираемся с телом
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}Теперь для <body> элемента. Здесь есть немало деклараций, так что давайте пройдем через них всех по одному:
width: 600px;— заставляет тело быть всегда 600 пикселей в ширину.margin: 0 auto;— когда вы устанавливаете два значения для таких свойств какmarginилиpadding, первое значение элемента влияет на верхнюю и нижнюю сторону (делает их0в данном случае), и второе значение на левую и правую сторону (здесь,autoявляется особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано здесь.background-color: #FF9500;— как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для<html>элемента, но не стесняйтесь и эксперементируйте.padding: 0 20px 20px 20px;— у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.border: 5px solid black;— просто устанавливает сплошную черную рамку шириной 5 пикселей со всех сторон тела.
Позиционирование и стилизация нашего заголовка главной страницы
h2 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}Вы, возможно, заметили, что есть ужасный разрыв в верхней части тела. Это происходит, потому что браузеры применяют некоторый стиль по умолчанию для элемента <h2> (по сравнению с другими), даже если вы не применяли какой-либо CSS вообще! Это может звучать как плохая идея, но мы хотим, чтобы веб-страница без стилей имела базовую читаемость. Чтобы избавиться от разрыва, мы переопределили стиль по умолчанию, установив margin: 0;.
Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.
Здесь, мы использовали одно довольно интересное свойство — это text-shadow, которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:
- Первое значение пикселей задает горизонтальное смещение тени от текста — как далеко она движется поперек: отрицательное значение должно двигать ее влево.
- Второе значение пикселей задает вертикальное смещение тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить ее вверх.
- Третье значение пикселей задает радиус размытия тени — большее значение будет означать более размытую тень.
- Четвертое значение задает основной цвет тени.
И вновь попробуйте поэкспериментировать с различными значениями, чтобы посмотреть, что вы можете придумать.
Центрирование изображения
img {
display: block;
margin: 0 auto;
}В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать margin: 0 auto уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что еще. Элемент <body> является блочным, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются строчными элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью display: block;.
Примечание: Приведенные выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для <body> (600 пикселей). Если ваше изображение больше, тогда оно выйдет за границы <body> и займет пространство страницы. Чтобы исправить это, вы можете 1) уменьши ширину изображения используя графический редактор, или 2) изменить размер изображения используя CSS путем установки свойства width для <img> элемента меньшего значения (например 400 px;).
Примечание: Не стоит беспокоиться, если вы еще не понимаете display: block; и различия между блочным/строчным. Вы поймете, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве display.
Заключение
Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):
Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на Github.
Здесь мы узнали только самую поверхность CSS. Чтобы узнать больше, перейдите на нашу страницу изучения CSS.
В этом модуле
Начало работы с CSS — Изучение веб-разработки
В этой статье мы возьмем простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.
Начнём с HTML
Нашей отправной точкой является 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>
Примечание: Если Вы читаете это на устройстве или в среде, где Вы не можете легко создавать файлы, не беспокойтесь — ниже представлены редакторы кода, чтобы вы могли написать код прямо здесь, на странице.
Добавление CSS в наш документ
Самое первое, что нам нужно сделать, — это сообщить 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:
h2 {
color: red;
}Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдет, поздравляю — Вы успешно применили CSS к документу HTML. Если этого не произойдет, внимательно проверьте, правильно ли Вы ввели всё.
Вы можете продолжить работу в styles.css локально, или Вы можете использовать наш интерактивный редактор ниже, чтобы продолжить этот урок. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с документом HTML, как это было в нашем документе выше.
Стилизация HTML-элементов
Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путем нацеливания на элемент selector — это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, Вы должны использовать селектор p. Чтобы сделать все абзацы зелёными, Вы должны использовать:
p {
color: green;
}Вы можете выбрать несколько селекторов одновременно, разделив их запятыми. Если я хочу, чтобы все параграфы и все элементы списка были зелёными, моё правило выглядит так:
p, li {
color: green;
}Попробуйте это в интерактивном редакторе ниже (отредактируйте поля кода) или в своём локальном документе CSS.
Изменение поведения элементов по умолчанию
Когда мы смотрим на хорошо размеченный HTML-документ, даже такой простой, как наш пример, мы можем увидеть, как браузер делает HTML читаемым, добавив некоторые стили по умолчанию. Заголовки большие и жирные, в нашем списке есть маркеры. Это происходит потому, что в браузерах есть внутренние таблицы стилей, содержащие стили по умолчанию, которые по умолчанию применяются ко всем страницам; без них весь текст работал бы вместе, и мы должны были бы стилизовать всё с нуля. Все современные браузеры по умолчанию отображают HTML-контент практически одинаково.
Однако Вам часто захочется что-то другое, кроме выбора, сделанного браузером. Это можно сделать, просто выбрав элемент HTML, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является наш <ul> — неупорядоченный список. Он добавляет маркеры, и если я решу, что я не хочу эти маркеры, я могу удалить их вот так:
li {
list-style-type: none;
}Попробуйте добавить это в свой CSS сейчас.
Свойство list-style-type — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для list-style-type и Вы найдете интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.
Глядя на эту страницу, вы обнаружите, что помимо удаления маркеров списка Вы можете изменить их — попробуйте изменить их на квадратные маркеры, используя значение square.
Добавление класса
Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока Вы хотите, чтобы все элементы этого типа в Вашем документе выглядели одинаково. В большинстве случаев это не так, и Вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространенный способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.
В своем HTML-документе добавьте Атрибут class ко второму пункту списка. Ваш список теперь будет выглядеть так:
<ul> <li>Элемент один</li> <li class="special">Элемент два</li> <li>Элемент <em>три</em></li> </ul>
В Вашем CSS Вы можете выбрать класс special к любому элементу на странице, чтобы он выгядел так же, как и этот элемент списка. Добавьте следующее в ваш файл CSS:
.special {
color: orange;
font-weight: bold;
}Сохраните и обновите, чтобы увидеть результат.
Вы можете захотеть, чтобы <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-документ, как правило, доступен каждому — когда Вы начинаете оформлять этот документ, важно, чтобы Вы не сделали его менее доступным.
Сочетание селекторов и комбинаторов
Стоит отметить, что Вы можете комбинировать несколько селекторов и комбинаторов вместе. Вот пример:
/* выбирает любой <span> внутри <p>, который находится внутри <article> */
article p span { ... }
/* выбирает любой <p>, который идет сразу после <ul>, который идет сразу после <h2> */
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
- Как работает CSS
- Используя ваши новые знания
Основы работы с языком CSS
Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.
Как правило, CSS команды (стили) хранятся в отдельном файле, который подключается специальным тегом ко всем HTML страницам нашего сайта.
Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество, хоть тысяча. Если мы сделаем изменение в одном месте CSS файла, например, покрасим все абзацы в красный цвет, то эти изменения применятся на всей тысяче HTML страниц, к которым подключен наш CSS файл. Очень удобно и быстро.
Файл со стилями должен иметь расширение .css. Чтобы подключить такой файл к HTML странице, в теге head следует написать такую конструкцию:
<link rel=»stylesheet» href=»имяФайла.css»>
В следующем примере к нашему HTML файлу подключается CSS файл styles.css:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>
Это абзац с текстом.
</p>
</body>
</html>
Создайте и подключите ко всем вашим страницам файл styles.css.
Как работать с CSS
Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет.
После селектора следует ставить фигурные скобки {}, внутри которых следует писать CSS свойства.
Свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство — это цвет, а «красный» — это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.
Давайте, например, покрасим все абзацы в красный цвет:
p {
color: red;
}
В вашем файле styles.css разместите код, красящий абзацы в красный цвет. Откройте страницы вашего сайта в браузере и убедитесь в том, что все абзацы стали красными.
Другие значения для цвета
Помимо ключевого слова red, задающего красный, можно использовать и другие английские слова для цвета, например, green — зеленый, blue — голубой, yellow — желтый, orange — оранжевый, black — черный, white — белый.
Используя соответствующие селекторы покрасьте заголовки h2 в зеленый цвет, заголовки h3 в голубой, заголовки h4 — в красный, а абзацы — в оранжевый.
Как работает CSS — Веб-технологии для разработчиков
Перейти к предыдущему разделу:
Зачем нужен CSS? Это третья статья руководства по CSS для начинающих, объясняет, как работает CSS в вашем браузере, а также назначение Объектной Модели Документа (Document Object Model или DOM). Вы также узнаете, как сделать анализ документа.
Информация: Как работает CSS
Когда браузер отображает документ, он должен совместить содержимое документа с информацией о стилях для него. Браузер обрабатывает документ в два этапа:
- Браузер преобразует язык разметки и CSS в DOM (Document Object Model). DOM представляет собой документ в памяти компьютера. Он сочетает в себе содержание документа с его стилем.
- Браузер отображает содержимое DOM.
Язык разметки использует элементы для определения структуры документа. Элемент обозначается с использованием тегов, которые представляют собой строки, начинающиеся с символа ‘<‘ и заканчивающиеся ‘>’. Большинство элементов имеет парные теги: открывающий тег и закрывающий тег. Для открывающего тега, поместите имя элемента между ‘<‘ и ‘>’. Для закрывающего тега, поместите ‘/‘ между ‘<‘, и именем элемента.
В зависимости от языка разметки, некоторые элементы имеют только начальный тег, или тег, где ‘/’ располагается после имени элемента. Элемент так же может быть контейнером, включающим в себя другие элементы. В этом случае они располагаются между открывающим и закрывающим тегами. Не забывайте всегда закрывать теги внутри контейнера.
DOM имеет древовидную структуру. Каждый элемент, атрибут и запуск текста на языке разметки становится узлом в древовидной структуре. Узлы определяются их взаимодействием с другими узлами DOM. Некоторые элементы становятся родительскими по отношению к другим, дочерним узлам (или узлам-потомкам). В свою очередь, дочерние узлы имеют «братьев» (siblings).
Понимание DOM поможет вам при разработке, отладке и поддержке CSS, поскольку DOM это место, где встречаются CSS и содержимое документа.
Пример
В данном примере, тег
<p> и его закрывающий тег </p> создают контейнер:<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p>
Живой пример
В DOM соответствующий узел P является родительским. Его дочерние узлы — это теги STRONG и узлы текста. Теги STRONG, в свою очередь, являются родительскими по отношению к текстовым узлам, которые являются их дочерними узлами:
P ├─STRONG │ └─"C" ├─"ascading" ├─STRONG │ └─"S" ├─"tyle" ├─STRONG │ └─"S" └─"heets"
К действию: Анализ DOM
Использование DOM Inspector
Для анализа DOM, вам потребуется специальная программа. Вы можете использовать расширение DOM Inspector (DOMi) от Mozilla для анализа DOM. Вам просто нужно установить это расширение в браузере (подробнее см. ниже).
- Используйте браузер Mozilla, чтобы открыть свой HTML-документ.
- Из строки меню браузера выберите Инструменты > DOM инспектор, или Инструменты > Веб-разработка > Инспектор.
Подробнее
Если в вашем браузере Mozilla не установлен DOMi, вы можете установить его с сайта дополнений и перезапустить браузер. Затем возвращайтесь к этому руководству.
Если вы не хотите устанавливать DOMi (или вы используете браузер не от Mozilla), то можете воспользоваться Рентген-очками, как описано в секции ниже. Или вы можете пропустить эту секцию и перейти к прямо к следующей странице. Если вы пропустите данный раздел, это не помешает вам в дальнейшем освоении руководства.
- В DOMi разверните узлы вашего документа, нажав на их стрелки.
Замечание: Пустые места в вашем HTML файле DOMi может отображать как пустые текстовые узлы, которые можно игнорировать.
Часть результата может выглядеть следующим образом, в зависимости от того, какие узлы вы развернули:
│ ▼╴P │ │ │ ▼╴STRONG │ │ └#text │ ├╴#text │ ►╴STRONG │ │
При выборе любого узла, вы можете использовать правую панель DOMi’s для поиска информации об узле. Например, когда вы выбираете текстовый узел, DOMi показывает вам текст в соответствующей панели.
При выборе узла элемента, DOMi анализирует его и предоставляет огромное количество информации, которая содержится в правой панели. Информация о стилях — лишь часть информации, которую там можно просмотреть.
Задача
В DOMi, кликните на узле STRONG.
Используйте правую панель ДОМи, чтобы выяснить, где цвет для этого узла установлен на красный, и где его внешний вид сделан толще, чем обычный текст.
Possible solution
In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.
Использование Рентген-очков
Рентген-очки показывают меньше информации, чем DOM Инспектор, но проще в установке и использовании.
- Перейдите на домашнюю страницу X-Ray Goggles.
- Перетащите ссылку X-Ray Googles с этой страницы на панель закладок.
- Откройте HTML-документ.
- Запустите Рентген-очки, кликнув по появившейся закладке.
- Передвигайте курсор мыши по документу для просмотра элементов в документе.
Что дальше?
Перейти к следующему разделу:
Каскадность и наследованиеЕсли вы решили задачу, то увидели, что информация о стиле из более чем одного места взаимодействует для создания окончательного стиля для элемента. На следующей странице объясняется больше об этих взаимодействиях.
CSS Tutorial
CSS — это язык, который описывает стиль документа HTML.
CSS описывает, как должны отображаться элементы HTML.
Этот урок научит вас CSS от базового до продвинутого.
Начните изучать CSS сейчас »примеров в каждой главе
Этот учебник CSS содержит сотни примеров CSS.
С помощью нашего онлайн-редактора вы можете отредактировать CSS и нажать на кнопку, чтобы просмотреть результат.
CSS Пример
тело {цвет фона: голубой;
}
ч2
{
цвет белый;
выравнивание текста: по центру;
}
р
{
семья шрифтов: вердана;
размер шрифта: 20 пикселей;
}
Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает.
CSS Примеры
Учитесь на более чем 300 примерах! С нашим редактором вы можете редактировать CSS, и нажмите на Кнопка для просмотра результата.
Перейти к примерам CSS!
CSS-шаблоны
Мы создали несколько адаптивных шаблонов W3.CSS для вас.
Вы можете изменять, сохранять, делиться и использовать их во всех своих проектах.
Бесплатные шаблоны CSS!
CSS-упражнений и викторины
Проверьте свои навыки CSS в W3Schools!
Запускай CSS Упражнения!
Запустите CSS викторину!
CSS References
В W3Schools вы найдете полные CSS-ссылки на все свойства и селекторы с синтаксисом, примерами, поддержкой браузера и многим другим.
CSS Экзамен — Получи Диплом!
Онлайн-сертификация W3Schools
Идеальное решение для профессионалов, которым необходимо сбалансировать работу, семью и карьеру.
Уже выпущено более 25 000 сертификатов!
Получите сертификат »
Сертификат HTML подтверждает ваши знания HTML.
Сертификат CSS документирует ваше знание продвинутого CSS.
Сертификат JavaScript подтверждает ваши знания JavaScript и HTML DOM.
Сертификат Python подтверждает ваши знания Python.
Сертификат jQuery подтверждает ваши знания о jQuery.
Сертификат SQL подтверждает ваши знания SQL.
Сертификат PHP подтверждает ваши знания PHP и MySQL.
Сертификат XML документирует ваши знания XML, XML DOM и XSLT.
Сертификат Bootstrap документирует ваши знания о среде Bootstrap.
,
Как добавить CSS
Когда браузер читает таблицу стилей, он форматирует документ HTML в соответствии с информация в таблице стилей.
Три способа вставить CSS
Существует три способа вставки таблицы стилей:
- Внешний CSS
- Внутренний CSS
- Встроенный CSS
Внешний CSS
с внешнюю таблицу стилей, вы можете изменить внешний вид всего сайта, изменив только один файл!
Каждая HTML-страница должна содержать ссылку на файл внешней таблицы стилей внутри элемент внутри раздела head.
Пример
Внешние стили определены в элементе внутри раздела
HTML-страницы:Это абзац.
Внешняя таблица стилей может быть написана в любом текстовом редакторе и должна быть сохранена с расширением .css.
Внешний.Файл CSS не должен содержать тегов HTML.
Вот как выглядит файл «mystyle.css»:
«mystyle.css»
цвет кузова {: цвет фона: голубой;
}
h2 {
цвет: темно-синий;
поле слева: 20 пикселей;
}
Примечание: Не добавляйте пробел между значением свойства и единицей (например, , поле слева: 20 пикселей; ). Правильный путь: поле слева: 20 пикселей;
Внутренний CSS
Внутренняя таблица стилей может использоваться, если одна отдельная страница HTML имеет уникальный стиль.
Внутренний стиль определяется внутри элемента
Это абзац.