Каскадные таблицы стилей (CSS). Основы. Шрифт

Атрибут

Импорт

Виды носителей

                  

...

Команда @media позволяет указать тип
носителя для глобальных
или связанных стилей:

@media

              BODY {width: 320px; /* Ширина страницы */ }            

Lorem ipsum dolor sit amet, consectetuer. 

Определение стиля элемента

Правило – это объявление стиля для одного элемента.
Селектор –

Синтаксис определения стилей

Комментарий – располагается между парами символов /* и */
Правила

Синтаксис определения стилей

Расширенная форма записи

td { background: olive; } td { color: white; } td { border: 1px solid black; }

Компактная форма записи

td {
  background: olive;
  color: white;
  border:

Если несколько элементов должны иметь одинаковые свойства, то при создании правила

Разные значения у одного свойства

p { color: green; }
p { color:

Виды селекторов

по имени (по элементу)
по классу
по уникальному идентификатору

Селектор по имени

Пример:
H1 {color: #FC4FF3; background: #0F0600; font-family: Arial; letter-spacing: 10px}
A

Универсальный селектор

* {
text-align: justify;
color: #263646;
background: #DFDFCA;
font-family: Verdana;
}

Универсальный селектор

Чаще используется:
* {
margin: 0 ;
padding: 0 ;
/* удалить все отступы

Селектор по классу

Может использоваться неоднократно.
Название чувствительно к регистру.
Имеет более низкий приоритет,

Селектор по классу

….

Согласно ГОСТ 12.1.003-83 ССБТ "Шум. Общие требования безопасности", шумовой характеристикой рабочих мест при постоянном шуме являются уровни звуковых давлений в децибелах в октавных полосах. Совокупность таких уровней называется предельным спектром, номер которого численно равен уровню звукового давления в октавной полосе со среднегеометрической частотой 1000 Гц.

Селектор по классу определенного тега

P.cite {color: navy; /* Цвет текста */

Селектор по уникальному идентификатору

Может использоваться один раз.
Название чувствительно к регистру.
Имеет более

Контекстный селектор

Позволяет назначить свойства только для элементов, имеющих заданную структуру вложения.
Пример:
P

Контекстный селектор

…

Соседние селекторы

Элементы веб-страницы, когда они следуют непосредственно друг за другом в

Соседние селекторы

Для управления стилем соседних элементов используется символ плюса (+), который

Дочерние селекторы

Дочерним селектором считается такой, который в дереве элементов находится прямо

Дочерние селекторы

Удобнее всего применять дочерние селекторы для элементов, которые обладают иерархической

Обобщенные селекторы одного уровня

Выбирает элемент, имеющий общий с ним родительский элемент

1. приоритет id > class
2. Для идентификатора и класса можно использовать

INHERIT

Cвойства CSS включают INHERIT в свой список зарезервированных значений. Значение INHERIT

Единицы измерения элементов

px – пиксел
em – высота используемого элементом шрифта
ex –

Единицы измерения элементов

0.6% = .6%
1pc = 12pt
1.5em = 150%
1pc=12 pt
1pc=12
tr {color:

Шрифт в CSS

Шрифты

С засечками
Без засечек (рубленые)
Моноширинные
Декоративные

Шрифты

С засечками (serifs)

Без засечек
(sans serifs)

Times New Roman
Garamond
гарнитура Лазурского
гарнитура Бодони

Arial
Verdana
Futura
Гельветика

Шрифты с засечками

Шрифты без засечек (рубленые)

Шрифты

Моноширинные

Не моноширинные

Шрифты

Строгие

Декоративные

Декоративные шрифты

Начертание шрифта

Под начертанием (style) понимают вариацию рисунка символов текста за счет

Гарнитура шрифта

Гарнитурой (семейством, Font Family) принято называть набор начертаний одного шрифта,

Гарнитура шрифта

Семейства шрифтов

FONT-FAMILY
Пример:
body { font-family: Arial; }
var { font-family: Courier, monospace; }
p

Безопасные стеки шрифтов с поддержкой кириллицы

Arial Black
Arial
Comic Sans MS
Courier New
Georgia
Impact
Lucida Console
Lucida

Размер шрифта

FONT-SIZE
Принимаемые значения: значение длины \ проценты:
| xx-small | x-small

Насыщенность шрифта

FONT-WEIGHT
Принимаемые значения: normal | bold | bolder | lighter |

Начертание шрифта

FONT-STYLE
Принимаемые значения: normal | italic | oblique | inherit
Значение по

Капитель

FONT-VARIANT
Принимаемые значения: normal | small-caps | inherit
Значение по умолчанию: normal
В большинстве

FONT
line-height - устанавливает высоту строки текста между базовыми линиями.
Значение указывается сразу

Сокращенная запись свойства шрифта

FONT
Принимаемые значения: font-style | font-weight | font-variant |

Изменение цвета шрифта

COLOR
Принимаемые значения: значение цвета (имя или число) | inherit
Значение

Тень текста

TEXT-SHADOW
Принимаемые значения: “смещение по горизонтали“ “смещение по вертикали“ “радиус размытия“

Подчеркивания и другие декоративные эффекты текста

TEXT-DECORATION
Принимаемые значения: none | underline (подчеркивание) |

Изменение регистра

TEXT-TRANSFORM
Принимаемые значения: none | capitalize (делает первую букву заглавной) |

letter-spacing - расстояние между буквами
word-spacing - расстояние между словами
text-align - выравнивание

Работа со шрифтами в CSS

Все имена шрифтов, за исключением семейств типовых

Цвета в CSS

A {color: purple; }
A {color: #FC0000; }
A

matrosov2.html

Ч т о т а к о е W e b

Э т а п ы р а з р а б

Сделать две страницы. Стили:

Заголовок первого уровня – шрифт Verdana 20pt, цвет