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

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

Дескриптор STYLE
Содержится в элементе HEAD HTML-кода
Атрибут TYPE
Присваивается значение text/css (MIME тип – multipurpose internet mail extension

Курс лекций.

Курс лекций.

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; }

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

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

aqua – голубой, black – черный, blue – синий, fuchsia – розовый, gray – серый, green – зеленый, lime – светло-зеленый, maroon - коричневый,

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

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

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

body

h2

p

a

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

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

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

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

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

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

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

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

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

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

classes.html

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

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

classes.html.

pseudo-classes.html

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

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

div.html

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

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

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

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

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

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

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

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

selector1 > selector2 { styles }

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

• Он очень быстрый


• Он дает нужные результаты



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

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

В1

В2

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

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

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

Можно задавать ширину полей и заполнения отдельно по сторонам
{ margin-left: ...;
padding-bottom: ...;
padding-top: ...; }

Пример:

Заголовок

Указание ширины и высоты блоков

Width, min-width, max-width, height, min-height, max-height.

Размещение текста (или других строчных элементов) внутри блока задается иначе:
{ text-align: left; } (или center или right)

Заголовок

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

alignment.html

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

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

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

Задание «плавающего» блока:

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

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

selenicereus.html

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

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