- HTML Стили
- Способы добавления CSS стилей
- Внешняя таблица стилей
- Пример: Внешняя таблица стилей
- Внутренняя таблица стилей
- Пример: Внутренняя таблица стилей
- Встроенный стиль
- Пример: Приоритетность стилей
- Задачи
- Выравнивание текста по центру
- Задача HTML:
- Цвет фона страницы
- Задача HTML:
- Тип шрифта для страницы
- Задача HTML:
- Внешняя таблица стилей
- Задача HTML:
- How to Use Operating System Styles in CSS
- System Fonts
- System Colors
- Share This Article
HTML Стили
CSS (Cascading Style Sheets), или каскадные таблицы стилей, используются для описания внешнего вида веб-документа, написанного языком разметки. CSS устанавливает стилевые правила, которые изменяют внешний вид элементов, размещенных на веб-страницах, выполняют тонкую настройку их деталей, таких как цвет, шрифт, размер, границы, фон и местоположение в документе.
Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).
Вот как это выглядит для элемента
:
Пример: применение стилей к элементу
Способы добавления CSS стилей
Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:
- Внешняя таблица стилей — определение правил таблицы стилей в отдельном файле .css, с последующим подключением этого файла в HTML-документ с помощью тега .
- Внутренняя таблица стилей — определение правил таблицы стилей с использованием тега , который обычно располагается в разделе HTML-документа .
- Встроенный стиль — это способ вставки языка таблицы стилей прямо в начальный тег HTML-элемента.
Давайте познакомимся со всеми тремя способами на конкретных примерах.
Внешняя таблица стилей
Давайте поместим эти три строки CSS в новый файл в любом текстовом редакторе (например Notepad++), а затем сохраним файл как style.css в папке styles. Чтобы применять CSS к нашему HTML-документу, вставьте следующую строку в шапку, то есть между тегами
и :Пример: Внешняя таблица стилей
Текст первый
Текст второй
Текст третий
Текст первый
Текст второй
Текст третий
Внутренняя таблица стилей
Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, стили разполагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента , который обычно находится в элементе , но фактически может быть помещен в любом месте документа. Этих тегов на странице может быть несколько.
Тег позволяет записывать внутри себя код в формате CSS:
Пример: Внутренняя таблица стилей
Заголовок
Текст первый
Текст второй
Текст третий
body < background-color:palegreen; >h1 < color: blue; font-family:verdana; >p Заголовок
Текст первый
Текст второй
Текст третий
В данном примере мы с помощью CSS установили цвет фона для элемента : background-color:palegreen, цвет и тип шрифта для заголовков : color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов
: font-size:20px; color:red; text-align:center.
Встроенный стиль
Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style. Например:
Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе .
В следующем примере к HTML-документу подключены все три рассмотренные стиля форматирования:
Пример: Приоритетность стилей
Заголовок
Текст первый
Текст второй
Текст третий
body < background-color:palegreen; >h1 < color: blue; font-family:verdana; >p Заголовок
Текст первый
Текст второй
Текст третий
Чем ближе описание стиля находится к элементу, тем более высокий приоритет имеет этот стиль при выборе браузером конечного правила оформления. |
Задачи
Выравнивание текста по центру
Задача HTML:
Это параграф.
Цвет фона страницы
Задача HTML:
body h1 p Заголовок
Параграф
Тип шрифта для страницы
Задача HTML:
body h1 p Заголовок
Параграф
Внешняя таблица стилей
В папке styles находится файл со стилями style.css. Подключите стилевой файл (внешняя таблица стилей) к HTML-документу.
Задача HTML:
Параграф первый
Параграф второй
Параграф третий
How to Use Operating System Styles in CSS
One of the lesser-known features of CSS2.1 is the ability to define fonts and colors that are in use by the underlying Operating System theme. This can be useful in situations when you require tighter OS integration, e.g. HTML help files, Adobe AIR or perhaps offline web applications.
Before we begin, there are a few caveats:
- Do not rely on these properties working in all OS/browser combinations. If your application must work in Opera on BeOS, then I’d recommend you test it first!
- The properties have been deprecated in CSS3 in favor of the appearance value type (although browser support is extremely limited at this time).
- There is nothing to prevent the user defining unusual, clashing, or ugly color schemes in their OS. Pages will reflect their choices — not your designer’s.
System Fonts
System fonts are assigned using the ‘font’ property. Note that the family, size, and style are all assigned as appropriate, e.g.
The following font values are available. The ‘Example’ column shows the current font set by your OS.
Property | Description | Example |
---|---|---|
caption | Controls font (buttons, drop-downs, etc.) | ABC abc 123 |
icon | Icon label font | ABC abc 123 |
menu | Menu font | ABC abc 123 |
message-box | Dialog box font | ABC abc 123 |
small-caption | Small control labels | ABC abc 123 |
status-bar | Status bar font | ABC abc 123 |
System Colors
System colors can be assigned to to any property that expects a color value, e.g.
The following color values are available. They are shown in CamelCase for legibility, but any casing is valid. The ‘Example’ column shows the color set by your OS.
Property | Description | Example |
---|---|---|
ActiveBorder | Active window border | |
ActiveCaption | Active window caption | |
AppWorkspace | Background color of multiple document interface | |
Background | Desktop background | |
ButtonFace | Face color for 3D display elements | |
ButtonHighlight | Dark shadow for 3D display elements (facing away from light) | |
ButtonShadow | Shadow color for 3D display elements | |
ButtonText | Text on push buttons | |
CaptionText | Text in caption, size box, and scrollbar arrow box | |
GrayText | Grayed (disabled) text (#000 if not supported by OS) | |
Highlight | Item(s) selected in a control | |
HighlightText | Text of item(s) selected in a control | |
InactiveBorder | Inactive window border | |
InactiveCaption | Inactive window caption | |
InactiveCaptionText | Color of text in an inactive caption | |
InfoBackground | Background color for tooltip controls | |
InfoText | Text color for tooltip controls | |
Menu | Menu background | |
MenuText | Text in menus | |
Scrollbar | Scroll bar gray area | |
ThreeDDarkShadow | Dark shadow for 3D display elements | |
ThreeDFace | Face color for 3D display elements | |
ThreeDHighlight | Highlight color for 3D display elements | |
ThreeDLightShadow | Light color for 3D display elements (facing the light) | |
ThreeDShadow | Dark shadow for 3D display elements | |
Window | Window background | |
WindowFrame | Window frame | |
WindowText | Text in windows |
Would these properties be useful in your next project?
Share This Article
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he’s been advocating standards, accessibility, and best-practice HTML5 techniques. He’s created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He’s written more than 1,000 articles for SitePoint and you can find him @craigbuckler.