для содержимого, описанного в HTML-страницах;
определяет внешний вид текста

В прежнем стандарте HTML допускалось использование описания внешнего представления с помощью атрибутов и отдельных элементов.

Добро пожаловать в университет ИТМО. Вы
получите самое полное, лучшее, ЛУЧШЕЕ образование в России с МИНИМАЛЬНЫМ начальным багажом знаний!

Добро пожаловать в университет ИТМО. Вы получите самое полное, лучшее, ЛУЧШЕЕ образование в России с МИНИМАЛЬНЫМ начальным багажом знаний!

Однако, подобный способ описания представления НЕ ПОДДЕРЖИВАЕТСЯ в «строгом» XHTML!

значение;
и погружаются либо в атрибут style непосредственно в элементе

Курс лекций.

Курс лекций.

h2.red-class { color: red; text-align: center; }

Практические занятия.

качественное образование в России с минимальным начальным багажом знаний!

В ИТМО вы получите самое полное, лучшее, качественное
образование в России с
минимальным начальным багажом знаний!

Ссылка может быть как на «локальную» страницу стилей, созданную специально для этого документа, так и на «глобальную», хранящуюся в сети Интернет.

example1.html

p { color: white; background-color: black; } mystyles.css
h1 { font-size: large; font-weight: bold; }
h2 { font-weight: 500; color: blue; }

new", sans-serif; font-size: small; font-size: larger; font-size: 10px; font-size: 80%; font-weight: bold; font-weight:

Атрибуты шрифта (font) и текста (text).

text-align: center; text-align: right; text-transform: uppercase; text-indent: 2cm; text-decoration: underline; text-decoration: blink;

Допустимые словесные названия цветов:
aqua – голубой, black –

navy – темно-синий, olive – оливковый (желто-зеленый), purple – фиолетовый, red – красный, silver – серебряный (светло-серый), teal – «морской волны», white – белый, yellow – желтый.

Вот как выглядят эти цвета: colors.html

type="text/css"> body { color: blue; font-family: sans-serif;

Италия издавна была одной из самых романтичных и посещаемых стран мира. С годами она ничуть не утратила своей притягательной силы, так как в этой солнечной стране царит атмосфера, располагающая к веселью, общению и отдыху на любой вкус. Не только красивые и разнообразные ландшафты, семейные пляжи, но и многочисленные памятники истории и культуры очаровывают путешественников, прибывающих в Италию со всех концов земли.

{ color: red; background-color: aqua; }
a { text-decoration: overline

Это заголовок

А это абзац со ссылкой внутри

body

h2

p

a

Это заголовок

А это абзац со ссылкой внутри

yellow; font-weight: bold; }
.standout { color: red; font-family: cursive;

Это заголовок класса standout

Это просто абзац

Это абзац класса special

Это абзац классов special и standout

Это заголовок класса standout

Это абзац класса special

Это просто абзац

Это абзац классов special и standout

classes.html

/* Еще не посещенная гиперссылка */
:visited { color: #00FF00

Проверяем, как работают разные псевдо-классы

Ссылка на страницу

classes.html.

pseudo-classes.html

} div.style2 { font-family: Times; color: blue; } .bold { font-weight:

Это заголовок класса style1

Это абзац класса style1

div.html

Это заголовок класса style2

Это абзац класса style2

blue; }
Это мой заголовок
Это мой заголовок

отдельной CSS-странице, привязанной к HTML-документу элементом в заголовке:

Стилем, указанным в заголовке HTML-документа с помощью элемента

Стилем, указанным в самом элементе с помощью атрибута style:

Отступ в полдюйма от края

Чем «ближе» определение стиля к элементу, тем приоритетнее он будет в случае конфликта параметров стиля.

Стилем, определенным браузером «по умолчанию»

элементам, определенным селектором selector2, только если этот элемент находится внутри

selector1 > selector2 { styles }

Стиль применяется к элементам, определенным селектором selector2, только если этот элемент находится непосредственно внутри элемента, определенного селектором selector1.

}
Почему люди пользуются поиском Google?
Он очень быстрый
Он дает нужные

Почему люди пользуются поиском Google?
Он очень быстрый
Он дает нужные результаты

содержание заданной ширины и высоты (width, height);

По умолчанию блоки располагаются
вертикально, при этом поля соседних блоков перекрываются (общее поле двух
соседних блоков равно по высоте
максимальному из двух полей элементов).

В1

В2

font-size: 16pt;
border:

Первый параграф

Второй параграф

Третий параграф

Четвертый параграф

Пятый параграф

blocks.html

– ширина – 10px; 25%; 0.5in; thin; thick; medium;
style

Можно задавать отдельные характеристики границы
{ border-width: ...;
border-style: ...;
border-color: ...; }

Можно задавать характеристики границы по сторонам блока
{ border-top: ...;
border-bottom: ...;
border-left: ...;
border-right: ...; }

или и то и другое вместе
{ border-bottom-width: ...;
border-left-style: ...;
border-top-color: ...; }

– ширина – 10px; 5%; 0.5in;
Можно задавать ширину полей

Пример:

Заголовок

margin-right: auto; }
Заданный таким образом, как показано выше, стиль

Размещение текста (или других строчных элементов) внутри блока задается иначе:

{ text-align: left; } (или center или right)

Заголовок

Еще один заголовок

alignment.html

Замечание: IE6 может не распознавать правильно указания margin: auto;

}
Вместо указания точной ширины/высоты блока можно задавать максимальные или
минимальные

В случае, если содержимое блока превышает минимальный размер –
он автоматически увеличивается;

В случае, если содержимое блока превышает максимальный размер –
содержимое автоматически обрезается;

образом, что не происходит наложения содержимого. Чтобы дополнительно визуально отделить

Блоки можно позиционировать, убирая их из «автоматического» размещения по
вертикали и указывая свой вариант размещения. Это можно сделать двумя
способами, один из которых – указание блока как «плавающего».

alt=“Selenicereus"/>
На фотографии справа цветок совсем не ослепительно белый,

Фото слева: Вид на этот замечательный цветок сбоку, размер –
28 см (29 июня 2003 года, 2 часа ночи). Его аромат, как я
обнаружил, исходит из желтой зоны между коричневыми
чашелистиками и белыми лепестками.

selenicereus.html

img.to-right { float: right; width: 200px; }
img.to-left { float: left; width: 200px; }

Чтобы указать, что следующий блок не должен содержать «обтекающий» текст, можно явно указать это с помощью атрибута clear с возможными значениями right, left, both, например:

p.wide-paragraph { clear: both; }

алгоритма размещения блоков – явное
позиционирование на странице относительно

#relative { position: relative; right: 10%; width: 200px; }

#fixed { position: fixed; top: 300px; left: 5em; width: 15cm; }

#absolute { position: absolute; top: 200px; width: 200px; }

Задание позиции relative означает, что блок смещается относительно своего «естественного» положения.

Задание позиции fixed означает, что блок располагается на фиксированном месте страницы.

Задание позиции absolute означает, что положение блока указано относительно охватывающего его блока.

---