Добавление CSS | htmlbook.ru
Таблицы стилей могут быть добавлены на веб-страницу тремя разными способами, которые различаются по своим возможностям.
Таблицы связанных стилей
Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег <link> в заголовке страницы (пример 1).
Пример 1. Подключение таблицы связанных стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Стили</title>
<link rel="stylesheet" type="text/css" href="mysite.css">
<link rel="stylesheet" type="text/css" href="http://www.mysite.ru/main.css">
</head>
<body>
<h2>Hello, world!</h2>
</body>
</html>Путь к файлу со стилями может быть как относительным, так и абсолютным, как показано в данном примере.
Достоинства данного способа
- Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.
- Можно изменять таблицу стилей без модификации веб-страниц.
- При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
- Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.
Таблицы глобальных стилей
Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом <style> (пример 2).
Пример 2. Использование таблицы глобальных стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Стили</title> <style type="text/css"> h2 { font-size: 120%; /* Размер шрифта */ font-family: Verdana, Arial, Helvetica, sans-serif; /* Семейство шрифта */ color: #336; /* Цвет текста */ } </style> </head> <body> <h2>Hello, world!</h2> </body> </html>
В данном примере показано изменение стиля заголовка <h2>. На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.
Внутренние стили
Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется атрибут style, а его значения указываются с помощью языка таблицы стилей (пример 3)..
Пример 3. Использование внутренних стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Стили</title>
</head>
<body>
<h2>
Hello, world!</h2>
</body>
</html>Рекомендуется использовать внутренний стиль для одиночных тегов или отказаться от его использования вообще, поскольку изменение ряда элементов становится проблематичным. Внутренние стили не соответствуют идеологии структурного документа, когда содержимое и его оформление разделены.
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере 4 используются сразу два метода добавления таблиц стилей в документ.
Пример 4. Сочетание разных методов подключения стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Стили</title> <style type="text/css"> h2 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; } </style> </head> <body> <h2>Hello, world!</h2> <h2>Hello, world!</h2> </body> </html>
В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.
Введение в 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 уроки для начинающих академия
Манипулировать текстом
Цвета, Коробки
Стилизация HTML с CSS
CSS означает каскадные таблицы стилей.
CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителях.
CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.
CSS можно добавлять к элементам HTML тремя способами:
- Встроенный — с помощью атрибута Style в элементах HTML
- Internal -с помощью
<style>элемента в<head>разделе - Внешний — с помощью внешнего CSS-файла
Наиболее распространенным способом добавления CSS является сохранение стилей в отдельных CSS-файлах. Однако, здесь мы будем использовать встроенный и внутренний стиль, потому что это легче продемонстрировать, и проще для вас, чтобы попробовать его самостоятельно.
Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.
Встроенный CSS
Встроенный CSS используется для применения уникального стиля к одному элементу HTML.
Встроенный CSS использует атрибут style элемента HTML.
В этом примере устанавливается цвет текста элемента <h2> синим цветом:
Пример
<h2>This is a Blue Heading</h2>
Внутренняя CSS
Внутренний CSS используется для определения стиля для одной HTML-страницы.
Внутренняя таблица CSS определена в разделе <head> HTML-страницы в элементе <style> :
Пример
body {background-color: powderblue;}
h2 {color: blue;}
p {color: red;}
<h2>This is a
heading</h2>
<p>This is a paragraph.</p>
</body>
</html>
Внешние CSS
Внешняя таблица стилей используется для определения стиля для многих HTML-страниц.
С помощью внешней таблицы стилей можно изменить внешний вид всего веб-узла, изменив один файл!
Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе <head> страницы HTML:
Пример
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
</body>
</html>
Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением. CSS.
Вот как выглядит «styles.css»:
body {
background-color: powderblue;
}
h2 {
color: blue;
}
p {
color: red;
}
Шрифты CSS
Свойство CSS color определяет используемый цвет текста.
Свойство CSS font-family определяет используемый шрифт.
Свойство CSS font-size определяет размер текста, который будет использоваться.
Пример
h2 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
</body>
</html>
Граница CSS
Свойство CSS border определяет границу вокруг элемента HTML:
Пример
p {
border: 1px
solid powderblue;
}
CSS заполнение
Свойство CSS padding определяет отступ (пробел) между текстом и границей:
Пример
p {
border: 1px
solid powderblue;
padding: 30px;
}
CSS маржа
Свойство CSS margin определяет поле (пробел) за пределами границы:
Пример
p {
border: 1px
solid powderblue;
margin: 50px;
}
Атрибут ID
Чтобы определить конкретный стиль для одного специального элемента, добавьте атрибут id к элементу:
<p>I am different</p>
then define a style for the element with the specific id:
Пример
#p01 {
color: blue;
}
Примечание: Идентификатор элемента должен быть уникальным в пределах страницы, поэтому селектор ID используется для выбора одного уникального элемента!
Атрибут class
Чтобы определить стиль для специального типа элементов, добавьте атрибут class к элементу:
<p>I am different</p>
Затем определите стиль для элементов с определенным классом:
Пример
p.error {
color: red;
}
Внешние ссылки
Внешние таблицы стилей можно ссылаться с полным URL-адресом или с помощью пути относительно текущей веб-страницы.
В этом примере используется полный URL-адрес для связывания с таблицей стилей:
Пример
<link rel=»stylesheet» href=»https://html5css.ru/html/styles.css»>
Этот пример связывается с таблицей стилей, расположенной в папке HTML на текущем веб-узле:
Пример
<link rel=»stylesheet» href=»/html/styles.css»>
Этот пример связывается с таблицей стилей, расположенной в той же папке, что и текущая страница:
Примере
<link rel=»stylesheet» href=»styles.css»>
Дополнительные сведения о путях к файлам можно прочитать в разделе пути к файлам HTML.
Справка
- Использование атрибута HTML
styleдля встроенного стиля - Используйте элемент HTML
<style>для определения внутреннего CSS - Используйте элемент HTML
<link>для ссылки на внешний файл CSS - Используйте элемент HTML
<head>для хранения <Style> и <Link> элементов - Используйте свойство CSS
colorдля текстовых цветов - Используйте свойство CSS
font-familyдля текстовых шрифтов - Используйте свойство CSS
font-sizeдля размеров текста - Использовать свойство CSS
borderдля границ - Используйте свойство CSS
paddingдля пространства внутри границы - Использование свойства CSS
marginдля пространства за пределами границы
Теги стиля HTML
| Тег | Описание |
|---|---|
| <style> | Определяет сведения о стиле для документа HTML |
| <link> | Определяет связь между документом и внешним ресурсом |
Как подключить CSS файл к HTML странице?
Пока стили CSS не подключить к HTML странице, никакого эффекта от их использования не будет. Существует несколько способов, как это можно сделать.
Для тех, кто любит смотреть в формате видео.
Для тех, кто любит читать, инструкция ниже.
Для того, чтобы продемонстрировать, как работает каждый из этих способов, возьмем, для примера, html-файл со следующим содержимым.
Задача стилей CSS, которые будут подключаться, сделать элемент абзаца <p> красным цветом.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> </head> <body> <p>Абзац</p> </body> </html>
Во всех примерах, результат на веб-странице будет один и тот же. Вы увидите вот такой красный абзац текста.
1 вариант. Внутри открывающего тега с помощью атрибута style.
Элементам на странице, которые располагаются внутри элемента body, можно добавить атрибут style. Значением этого атрибута могут быть свойства и значения CSS, которые должны будут применены к этому элементу.
Давайте посмотрим, как это работает на конкретном примере. Атрибут style добавлен для элемента <p>.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> </head> <body> <p>Абзац</p> </body> </html>
Обратите внимание, что в этом случае не нужно использовать селектор, т.к. элемент, к которому добавлены стили уже определен.
2 вариант. Внутри элемента style.
Еще один способ подключения стилей CSS, это воспользоваться элементом <style> с атрибутом type=»text/css». Указание этого атрибута обязательно.
Давайте посмотрим, как это выглядит на конкретном примере.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {color:red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
</head>
<body>
<p>Абзац</p>
</body>
</html>3 вариант. Подключение внешнего файла стилей.
И последний вариант подключения стилей CSS является использование элемента link, который позволяет подключать к HTML странице внешние файлы.
Обратите внимание на атрибуты, которые указываются у этого элемента.
<link rel="stylesheet" href="style.css" type="text/css"/>
Они тоже являются обязательными. В атрибуте href указывается путь к css файлу, который нужно подключить.
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="style.css" type="text/css"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Документ без названия</title> </head> <body> <p>Абзац</p> </body> </html>
Файл style.css содержит следующих код:
p {color:red;}Эти 3 способа подключения стилей CSS очень часто используются на практике. Советую вам поэкспериментировать с этими примерами на своем компьютере. В будущем, это вам очень сильно пригодиться.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Основы CSS — Изучение веб-разработки
CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. Основы 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;
}Выбор нескольких элементов
Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделённых запятыми. Например:
Разные типы селекторов
Существует множество различных типов селектора. Выше мы рассматривали только селектор элементов, который выбирает все элементы определённого типа в 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>, но только тогда, когда указатель мыши наведён на ссылку. |
Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем Руководстве селекторов (en-US).
Теперь, когда мы изучили некоторые основы CSS, давайте добавим ещё несколько правил и информацию в наш файл style.css, чтобы наш пример хорошо выглядел. Прежде всего, давайте сделаем, чтобы наши шрифты и текст выглядели немного лучше.
- Прежде всего, вернитесь и найдите вывод из Google Fonts, который вы уже где-то сохранили. Добавьте элемент
<link>где-нибудь внутри шапки вашегоindex.html(снова, в любом месте между тегами<head>и</head>). Это будет выглядеть примерно так:
Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет вам применять их к вашим HTML элементам используя свою собственную таблицу стилей.<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> - Затем, удалите существующее правило в вашем
style.cssфайле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит. - Добавьте следующие строки в нужное место, заменив строку
placeholderактуальнойfont-familyстрокой, которую вы получили из Google Fonts. (font-familyпросто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку<html>является родительским элементом для всей страницы, и все элементы внутри него наследуют такой жеfont-sizeиfont-family):html { font-size: 10px; font-family: placeholder: здесь должно быть имя шрифта из Google fonts }Примечание: Все в CSS документе между
/*и*/является CSS комментарием, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете. - Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела (<h2> (en-US),
<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 на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.
Изменение цвета страницы
Разбираемся с телом
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> (en-US) (по сравнению с другими), даже если вы не применяли какой-либо 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.
HTML Стили
CSS (Cascading Style Sheets), или каскадные таблицы стилей, используются для описания внешнего вида веб-документа, написанного языком разметки. CSS устанавливает стилевые правила, которые изменяют внешний вид элементов, размещенных на веб-страницах, выполняют тонкую настройку их деталей, таких как цвет, шрифт, размер, границы, фон и местоположение в документе.
Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).
Вот как это выглядит для элемента </p>:
Пример: применение стилей к элементу <p>
Текст с атрибутом style
<p>
Текст с атрибутом style</p>Способы добавления CSS стилей
Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:
- Внешняя таблица стилей — определение правил таблицы стилей в отдельном файле .css, с последующим подключением этого файла в HTML-документ с помощью тега <link>.
- Внутренняя таблица стилей — определение правил таблицы стилей с использованием тега <style>, который обычно располагается в разделе <head> HTML-документа .
- Встроенный стиль — это способ вставки языка таблицы стилей прямо в начальный тег HTML-элемента.
Давайте познакомимся со всеми тремя способами на конкретных примерах.
Внешняя таблица стилей
Внешняя таблица стилей хранится в отдельном файле с расширением CSS. Это самый эффективный способ, т. к. он полностью отделяет правила форматирования от ваших HTML-страниц. Он также позволяет легко применять одни и те же правила ко многим страницам. Отдельный файл с таблицей стилей прикрепляется к HTML-документу с помощью тега <link>. Это одинарный тег, который располагается внутри элемента <head>. Элемент должен использовать три следующих атрибута. В атрибуте href указывается абсолютный или относительный URL-адрес файла CSS. Атрибут rel определяет отношение между НТМL-страницей и связанным файлом. При создании ссылки на файл CSS он должен иметь значение stylesheet, показывающее, что присоединяемый таким образом документ содержит таблицу стилей. Атрибут type определяет тип документа, на который указывает ссылка. В нем должно быть указано значение text/css.
CSS, как и HTML, не является языком программирования. Это язык каскадных таблиц стилей, то есть он позволяет выборочно применять нужные стили к элементам в HTML-документах. Например, чтобы выбрать все элементы <p>, т.е. параграфы на HTML-странице и окрасить их текст в красный цвет, вы должны написать на CSS следующее:
p {
color: red;
}
Давайте поместим эти три строки CSS в новый файл в любом текстовом редакторе (например Notepad++), а затем сохраним файл как style.css в папке styles.
Чтобы применять CSS к нашему HTML-документу, вставьте следующую строку в шапку, то есть между тегами <head> и </head>:
<link href="styles/style.css" rel="stylesheet" type="text/css">
Пример: Внешняя таблица стилей
Текст первый
Текст второй
Текст третий
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Внешняя таблица стилей</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Текст первый</p>
<p>Текст второй</p>
<p>Текст третий</p>
</body>
</html>
Внутренняя таблица стилей
Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, стили разполагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента <style>, который обычно находится в элементе <head>, но фактически может быть помещен в любом месте документа. Этих тегов на странице может быть несколько.
Тег <style> позволяет записывать внутри себя код в формате CSS:
<style type="text/css">
body {
background-color:palegreen;
}
h2{
color: blue;
font-family:verdana;
}
p{
font-size:20px;
color:red;
}
</style>
Пример: Внутренняя таблица стилей
Текст первый
Текст второй
Текст третий
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Внутренняя таблица стилей</title>
<style type="text/css">
body {
background-color:palegreen;
}
h2{
color: blue;
font-family:verdana;
}
p{
font-size:20px;
color:red;
text-align:center;
}
</style>
</head>
<body>
<h2>Заголовок</h2>
<p>Текст первый</p>
<p>Текст второй</p>
<p>Текст третий</p>
</body>
</html>
В данном примере мы с помощью CSS установили цвет фона для элемента <body>: background-color:palegreen, цвет и тип шрифта для заголовков <h2>: color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов <p>: font-size:20px; color:red; text-align:center.
Встроенный стиль
Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style. Например:
<p>Параграф</p>Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе <style>.
В следующем примере к HTML-документу подключены все три рассмотренные стиля форматирования:
Пример: Приоритетность стилей
Текст первый
Текст второй
Текст третий
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Встроенный стиль</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color:palegreen;
}
h2{
color: blue;
font-family:verdana;
}
p{
font-size:20px;
color:coral;
}
</style>
</head>
<body>
<h2>Заголовок</h2>
<p>Текст первый</p>
<p>Текст второй</p>
<p>Текст третий</p>
</body>
</html>
| Чем ближе описание стиля находится к элементу, тем более высокий приоритет имеет этот стиль при выборе браузером конечного правила оформления. |
Задачи
Выравнивание текста по центру
Используя встроенный стиль к параграфу выровняйте текст по центру.
Задача HTML: Реши сам »<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Выравнивание текста по центру</title> </head> <body> <p>Это параграф.</p> </body> </html>
Цвет фона страницы
Измените цвет фона всей HTML-страницы на «khaki».
Задача HTML: Реши сам »<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Цвет фона страницы</title> <style> body {background-color:palegreen;} h2{color: blue;} p{color:coral;} </style> </head> <body> <h2>Заголовок</h2> <p>Параграф</p> </body> </html>
Тип шрифта для страницы
Установите тип шрифта для всех элементов HTML-страницы «verdana».
Задача HTML: Реши сам »<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Тип шрифта для страницы</title> <style> body {background-color:khaki;} h2{color: blue;} p{color:coral;} </style> </head> <body> <h2>Заголовок</h2> <p>Параграф</p> </body> </html>
Внешняя таблица стилей
В папке styles находится файл со стилями style.css. Подключите стилевой файл (внешняя таблица стилей) к HTML-документу.
Задача HTML: Реши сам »<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Внешняя таблица стилей</title> </head> <body> <p>Параграф первый</p> <p>Параграф второй</p> <p>Параграф третий</p> </body> </html>
Как подключить CSS к HTML
Существует три способа подключения CSS к HTML:
-
Внешние таблицы стилей.
-
Внутренние таблицы стилей.
-
Встроенные таблицы стилей.
Рассмотрим каждый из них на примерах.
Внешние таблицы стилей
Внешние таблицы стилей подключаются при помощи отдельного файла с расширением .css и тега <link>, “встроенного” в HTML-документ. Например:
<html>
<head>
<title>Страница</title>
<link rel=»stylesheet» type=»text/css» href=»style.css»>
</head>
<body>
Текст.
</body>
</html>
Внутренние таблицы стилей
Внутренние таблицы стилей “включаются” в HTML-документ, а используется для этого атрибута style. Например:
<html>
<head>
<title>Страница</title>
</head>
<body>
<h2>Текст<h2>
</body>
</html>
Встроенные таблицы стилей
Встроенные таблицы стилей “прописываются” в заголовке HTML-документа. Например:
<html>
<head>
<title>Моя страница</title>
<style type=»text/css»>
h2 {
«color:red
}
</style>
</head>
<body>
hello! <h2>
</body>
</html>
HTML-стилей CSS
CSS — это каскадные таблицы стилей.
CSS экономит много работы. Он может управлять макетом нескольких веб-страницы сразу.
Управление текстом
цветов, Ящики
Что такое CSS?
Каскадные таблицы стилей (CSS) используются для форматирования макета веб-страницы.
С помощью CSS вы можете управлять цветом, шрифтом, размером текста, интервалом. между элементами, как элементы расположены и расположены, какой фон должны использоваться изображения или цвета фона, разные дисплеи для разных устройств и размеры экрана, и многое другое!
Совет: Слово каскадно означает, что стиль примененный к родительскому элементу, будет также применяться ко всем дочерним элементам в пределах родитель.Итак, если вы установите цвет основного текста на «синий», все заголовки, абзацы и другие текстовые элементы в теле также получат тот же цвет (если вы не укажете что-то другое)!
Использование CSS
CSS можно добавить в HTML-документы 3 способами:
- Встроенный — с использованием атрибута стиля внутри HTML-элементов
- Внутренний — с использованием элемента
Заголовок теста
Внутренний путь CSSИтак, это второй подход для добавления CSS в наш HTML-файл, но он все еще не идеально, потому что нам нравится хранить HTML и CSS в отдельных файлах, что приводит нас к третьему пути.
Разделение CSS и HTML - это передовой опыт . В реальном программировании нам нужно хранить HTML, CSS и JavaScript в отдельных файлах, а затем при необходимости импортировать их. Такой способ улучшает читаемость и упрощает обслуживание кода.
Чтобы использовать этот способ, нам нужно создать отдельные файлы CSS с расширением
.css, а затем связать их с HTML.Например, мы можем создать такой файл CSS:
index.css.Внутриindex.cssмы пишем наши правила CSS:h2 {
color: red;
}Затем мы можем импортировать
index.cssв HTML с тегом , как показано ниже:
Заголовок теста
И правила снова успешно применяются:
Внешний путь CSSИспользование внешнего Файлы CSS и связывание / импорт их в HTML является обычно предпочтительным способом.
Как применить стили CSS к HTML с каскадом и специфичностью
Автор выбрал Diversity in Tech Fund, чтобы получить пожертвование в рамках программы Write for DOnations.
Введение
Каскадные таблицы стилей , более известный как CSS, - это язык для визуального стиля и дизайна в Интернете. CSS имеет долгую историю в сети, начиная с 1994 года, когда возникла первоначальная идея. С тех пор CSS стал многофункциональным языком, способным создавать веб-страницы, создавать сложные анимации и многое другое.
Поскольку CSS - это язык веб-стилей, понимание того, как он работает и как его использовать, имеет фундаментальное значение для веб-разработки. Это особенно важно для эффективной работы с языком гипертекстовой разметки (HTML) и JavaScript. В этом руководстве основное внимание уделяется применению CSS к HTML, каскаду и специфичности , которые являются основополагающими аспектами CSS и подготовят вас к эффективному использованию CSS в ваших веб-проектах.
CSS не является обычным языком программирования.Хотя в нем есть некоторые функции, которые есть в других языках программирования, такие как переменные и математика, работа CSS полностью зависит от HTML. Целью CSS является предоставление визуальных модификаций HTML. Язык CSS больше похож на список дел для браузера: вы говорите браузеру, что это список вещей, которые я хочу, чтобы вы нашли. Как только браузер находит эти вещи, CSS дает ему команду просмотреть список подмножеств и внести в них изменения.
Браузер безоговорочно следует этому списку инструкций сверху вниз, и CSS необходимо писать с учетом этого.Каскад каскадных таблиц стилей говорит о том, как браузеры читают список. Поскольку браузер беспристрастен, он меняет стиль по мере их появления. Если CSS говорит сделать некоторые элементы HTML красными, а затем в CSS он говорит сделать эти элементы синими, результат будет синим.
Применение стилей к элементу становится немного сложнее, поскольку есть много способов указать браузеру найти элемент в HTML. Каждый элемент в HTML имеет набор из атрибутов , которые можно использовать для поиска определенного элемента.Из-за каскада, когда браузер беспристрастно читает инструкции сверху вниз, предоставленные инструкции должны быть конкретными. Это известно как специфика , где разработчик должен написать точные критерии для браузера, чтобы найти точный элемент, к которому он хочет применить стили.
В этом руководстве вы проработаете несколько практических примеров, чтобы понять различные способы применения стилей к элементам HTML и то, как каскад и специфичность влияют на то, как стили написаны.
Предварительные требования
Использование атрибута стиля HTML
На этом первом шаге вы примените стили к элементу HTML напрямую с атрибутом
style. Этот метод, также известный как встроенный стиль , использует атрибут элемента HTML, чтобы принять свойство CSS в качестве значения, а затем применяет его непосредственно к элементу.Чтобы познакомиться с некоторыми концепциями CSS, начните с открытия файла
index.htmlв текстовом редакторе.В этом файле настройте базовую HTML-структуру теговindex.html
Сэмми Шарк Сэмми - величайшая акула в океане.Далее откройте индекс
.htmlв вашем браузере. Вы увидите свой текст вв верхней левой части окна браузера. Визуально текст должен выглядеть как на следующем изображении с черным текстом на белом фоне с использованием шрифта с засечками , например Times New Roman:Чтобы начать стилизацию, добавьте атрибут с пустым значением к открывающему тегу
:index.html
...Сэмми - величайшая акула в океане....Атрибут стиля
В этом случае измените цвет вашего предложения на
. Индекстемно-синий, используя свойствоцвет. Формат свойства и значений CSS начинается с имени свойства, за которым следует символ двоеточия:, затем значение свойства и, наконец, символ точки с запятой;после значения, чтобы сообщить браузеру, что все для значения:.html
...Сэмми - величайшая акула в океане....Сохраните
index.html, вернитесь в браузер и обновите. Цвет текста изменился с черного цвета по умолчанию браузера на темно-синий, как показано на следующем изображении:Есть много свойств CSS, которые вы можете попробовать в атрибуте стиля
, напримерbackground-colorилиfont-family. Как правило, в браузере по умолчанию используется шрифт с засечками, например Times New Roman.Чтобы изменить шрифт на шрифт без засечек , например Arial или Helvetica, добавьте пробел после точки с запятой для свойстваcolor, затем введите свойствоfont-family, а затем двоеточие сsans-serif.как значение:index.html
...Сэмми - величайшая акула в океане....Сохраните файл и обновите страницу в браузере, чтобы увидеть, как изменился шрифт вашего предложения. Теперь вместо шрифта по умолчанию используется шрифт без засечек браузера , например Helvetica или Arial.На следующем изображении показано, как свойство
font-familyосновано на изменении цвета на темно-синий.Теперь, когда вы написали несколько свойств CSS, оберните слово в своем предложении элементом
index.html
...Сэмми - величайшая акула в океане....В вашем браузере слово в теге
Слово с элементом
colorиfont-familyHTML-элемента, внутри которого оно находится, также известного как его родительский элемент . Это пример наследования, где дочерний элемент , элемент HTML внутри другого элемента, наследует стили, размещенные в родительском элементе. Элементfont-weight: bold;, сделав текст жирным.Кроме того, элемент, чтобы придать этому элементу индивидуальный вид:index.html
...Сэмми - величайшая акула в океане....Сохраните файл и обновите страницу в браузере, чтобы увидеть разницу, так как слово в элементе
В этом разделе вы использовали атрибуты стиля HTML
для применения стилей к элементамиИспользование тега
Сэмми - самая величайшая акула в океане.Им нравится плавать с друзьями.Внутри элемента
Сэмми - величайшая акула в океане.Им нравится плавать с друзьями.Затем возьмите свойства из атрибута
стиляи поместите их в фигурные скобки блока селектора.Чтобы облегчить чтение, полезно поместить каждое свойство в отдельную строку:index.html
Сэмми Шарк <стиль> div { цвет: темно-синий; семейство шрифтов: без засечек; }Сэмми - величайшая акула в океане.Им нравится плавать с друзьями.После сохранения файла вернитесь в браузер и обновите его. Теперь к обоим предложениям применены одинаковые стили, все из одного селектора в элементе
Сэмми - величайшая акула в океане.Им нравится плавать со своими друзьями .