лекция 6.1

1. Основы CSS. Оформление дизайна сайта по технологии веб-программирования CSS

ПМ.02. Конфигурирование и администрирование АИС
МДК.02.04. Системы управления сайтами
LOGO

2. Содержание

Понятие о стилях CSS
Причины применения CSS к HTML
Создание стилей CSS
Разновидности стилей CSS
Таблицы стилей
Комментарии CSS
LOGO

3. Понятие о стилях CSS

Для создания представления Web-страниц предназначена
технология каскадных таблиц стилей (Cascading Style Sheets, CSS).
CSS содержит набор правил (стилей), описывающих оформление
web-страницы и отдельных её фрагментов. Эти правила определяют
цвет текста и выравнивание абзаца, отступы между графическим
изображением и обтекающим его текстом, наличие и параметры
рамки таблицы, цвет фона web-страницы и многое другое.
Стандарт, описывающий первую версию этого языка (CSS 1),
появился в 1996 году. В настоящее время широко поддерживается и
применяется на практике стандарт CSS 2 и ведется разработка
стандарта CSS 3, ограниченное подмножество которого уже
поддерживают многие web-обозреватели.
LOGO

4. Причины применения CSS к HTML

1
2
3
4
раздельного хранения
представления страницы
и документа:
определение параметров
какого-либо тега языка
HTML:
1. облегчает чтение
создателем сайта htmlкода при его разборе и
отыскании ошибок.
2. уменьшает размер
документа,
что
позволяет
ускорить
загрузку Web-страницы
на
локальный
компьютер
при встрече в htmlкоде в разных местах
данного
тега,
установленные
для
него параметры будут к
нему применяться
язык
CSS
позволяет
управлять как одним
документом,
так
и
многими:
плавные переходы между
страницами
и,
соответственно, быструю
загрузку страницы:
описание стилей может
осуществляться как в
самом html-коде или же
внутри тега так и
выносится в отдельный
css-файл
CSS-документы
способны к загрузке в
память браузера всего
один
раз.
Таким
образом,
во
время
переходов по ссылкам
сайта, браузеру уже не
нужно
повторно
интерпретировать стили
дизайна сайта
LOGO

5. Создание стилей CSS

Обычный формат определения стиля CSS:
<селектор >
{
< атрибут стиля 1>: <значение 1>;
< атрибут стиля 2>: <значение 2>;
…
< атрибут стиля n>: <значение n>;
}
LOGO

6. Основные правила создания стиля:

▪
▪
▪
▪
▪
▪
▪
▪
Селектор используется для привязки стиля к элементу web-страницы, на которую он
должен распространять своё действие. Фактически селектор однозначно
идентифицирует данный стиль.
За селектором, через пробел, указывают список атрибутов стиля и их значений,
заключенных в фигурные скобки.
Атрибут стиля представляет один из параметров элемента web-страницы: цвет
шрифта, величину отступа, толщину рамки и др.
Значение атрибута стиля указывают после него через символ :. В некоторых случаях
значение атрибута стиля заключают в кавычки.
Пары <атрибут стиля>: <значение> отделяют друг от друга символом ;
Между последней парой < атрибут стиля>: <значение> и закрывающейся фигурной
скобкой символ ; не ставят, иначе некоторые web-обозреватели могут неправильно
обработать определение стиля.
Определения различных стилей разделяют пробелами или переводами строк.
Внутри селекторов и имен стилей не должны присутствовать пробелы и переводы
строки. Пробелы и переводы строк, поставленные в других местах определения стиля web-обозреватель их игнорирует.
LOGO

7. Разновидности стилей CSS

Стилевой класс
Именованные
стили
2
Стили
переопределения
тега
3
Стили
1
4
Встроенные
стили
Комбинированные
стили
5
LOGO

8. Стили переопределения тега

P { color: #FF0000 }
P – селектор, представляет собой имя тега Р
Color – атрибут стиля, задает цвет текста
#FF0000 – значение атрибута стиля color, код красного цвета.
Данный стиль автоматически применится ко всем абзацам web-страницы (тегам Р).
Пример1:
EM { color: #00FF00;
Font-weight: bold; }
любой текст, помещенный в тег <EM> будет зеленым полужирным шрифтом. Атрибут
стиля Font-weight – степень жирности шрифта, а bold – полужирный.
Пример2:
BODY { background-color:#000000;
Color: #FFFFFF; }
задает для всей странице белый цвет текста #FFFFFF и
цвет фона – черный #000000.
LOGO

9. Стилевой класс

Он может быть привязан к любому тегу. В качестве селектора здесь указывается имя
стилевого класса, которое его однозначно идентифицирует. Имя стилевого класса
должно состоять из букв латинского алфавита, цифр и дефисов, причем начинаться с
буквы. В определении стилевого класса его имя обязательно предваряется символом
точки – это признак того, что определяется именно стилевой класс.
Стилевой класс требует явной привязки к тегу. Для этого служит атрибут CLASS
поддерживаемый практически всеми тегами. В качестве значения этого атрибута
указывают имя нужного стилевого класса без символа точки:
<P class=”redtext”>Внимание! </P> - здесь привязан только что созданный стилевой
класс redtext к абзацу Внимание!, абзац будет отображен красным цветом.
Листинг:
.attention { color: #FF0000;
Font-style: italic }
…
<P><STRONG CLASS=” attention”>Стилевой класс требует явной привязки
атрибутом тега CLASS!</STRONG></P>
LOGO

10.

Создан стилевой класс attention, который задает красный цвет и курсивное
начертание шрифта. Затем его привязали к тегу <STRONG>. В результате содержимое
тега будет полужирным курсивным шрифтом красного цвета. Тег <STRONG> дает
полужирность, а стилевой класс attention – курсив и красный цвет.
В качестве значения атрибута CLASS можно указать сразу несколько имен
стилевых классов, разделив их пробелами. Их действия складываются.
.attention { color: #FF0000;
Font-style: italic }
.bigtext { font-size: large }
…
<P><STRONG CLASS=” attention bigtext”>Стилевой класс требует явной привязки
атрибутом тега CLASS!</STRONG></P>
LOGO

11. Именованные стили

Селектором этого стиля также является имя, которое его однозначно идентифицирует, и
привязывается он к тегу тоже явно.
Отличия:
В определении именованного стиля перед его именем ставится #.
Привязку именованного стиля к тегу реализуется через атрибут ID, поддерживаемый
всеми тегами.
Значение атрибута тега ID должно быть уникально в пределах web-страницы.
#bigtext { font-size: large }
…
<P ID=”bigtext”>Это большой текст</P> - абзац набран крупным шрифтом.
LOGO

12. Комбинированные стили

Можно создавать стили несколькими селекторами. Такие стили служат для привязки к
тегам, удовлетворяющим сразу нескольким условиям. Комбинированный стиль должен
быть привязан к тегу, вложенному в другой тег, или к тегу, для которого указан
определенный стилевой класс.
Правила для создания селекторов в комбинированном стиле:
▪Селекторами могут быть имена тегов, имена стилевых классов и имена именованных
стилей.
▪Селекторы перечисляются слева на право и обозначают уровень вложенности
соответствующих тегов, который увеличивается при движении слева на право: теги,
указанные правее, должны быть вложены в теги, что стоят левее.
▪Если имя тега скомбинировано с именем стилевого класса или именованного стиля,
значит, для данного тега должно быть указано это имя стилевого класса или
именованного стиля.
▪Селекторы разделяются пробелами.
▪Стили привязывают к тегу, обозначенному самым правым селектором.
LOGO

13.

Пример 1 комбинированного стиля:
P EM { color: #0000FF } – в качестве селекторов использованы имена тегов, сначала тег
Р, а затем ЕМ, значит тег ЕМ должен быть вложен в тег Р.
Стиль будет привязан к тегу ЕМ.
<P><EM>этот текст</EM> станет синим</P>
<P>этот не станет</P>
<P><STRONG>этот</STRONG> - тоже</P>
Слова «Этот текст» - синим цветом.
Пример 2:
P.mini { color: #0000FF;
Font-size: smaller }
имя тега Р скомбинировано с именем стилевого класса mini, значит, данный стиль
будет применен к любому тегу Р, для которого указано имя стилевого класса mini.
LOGO

14. Встроенные стили

Они не имеют селектора, т.к. ставятся напрямую в нужный тег.
В них отсутствуют фигурные скобки, поскольку нет нужды отделять список атрибутов
стиля от селектора, которого нет.
Встроенный стиль может быть привязан только к одному тегу – тому, в котором он
находится.
<P STYLE=”font-size: smaller; font-style: italic”> маленький курсив </P>
LOGO

15. Основные правила создания стиля:

▪
▪
▪
▪
▪
▪
▪
▪
Селектор используется для привязки стиля к элементу web-страницы, на которую он
должен распространять своё действие. Фактически селектор однозначно
идентифицирует данный стиль.
За селектором, через пробел, указывают список атрибутов стиля и их значений,
заключенных в фигурные скобки.
Атрибут стиля представляет один из параметров элемента web-страницы: цвет
шрифта, величину отступа, толщину рамки и др.
Значение атрибута стиля указывают после него через символ :. В некоторых случаях
значение атрибута стиля заключают в кавычки.
Пары <атрибут стиля>: <значение> отделяют друг от друга символом ;
Между последней парой < атрибут стиля>: <значение> и закрывающейся фигурной
скобкой символ ; не ставят, иначе некоторые web-обозреватели могут неправильно
обработать определение стиля.
Определения различных стилей разделяют проделами или переводами строк.
Внутри селекторов и имен стилей не должны присутствовать пробелы и переводы
строки. Пробелы и переводы строк, поставленные в других местах определения стиля
web-обозреватель их игнорирует. Поэтому мы можем формировать CSS-код для
удобства его чтения, как проделывали это с кодом HTML.
LOGO

16. Таблицы стилей

Таблицы
стилей
Внешние
Внутренние
• встроенные стили
•стилевые классы,
• стили переопределения тега,
• именованные,
• комбинированные стили.
LOGO

17.

Внешние таблицы стилей хранятся отдельно от web-страниц, в файлах с
расширением CSS. Они содержат CSS-код определений стилей.
Пример внешней таблицы:
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM { color: #00FF00;
Font-weight: bold }
Р EM { color: #0000 FF }
Здесь определены четыре стиля. Если внешняя таблица стилей храниться
отдельно, то её нужно привязать к web-странице. Для этого предназначен
одинарный метатег <LINK>, который помещается в секцию заголовка
соответствующей web-страницы:
<LINK REL=”stylesheet” HREF=”<интернет-адрес файла таблицы стилей>”
TYPE=”text/css”>
LOGO

18.

Пример привязки внешней таблицы стилей, хранящейся в файле
main.css, к текущей web-странице.
<HEAD>
…
<LINK REL=”stylesheet” HREF=”main.css” TYPE=”text/css”>
…
</HEAD>
Преимущество внешних таблиц стилей в том, что их можно привязать
сразу к нескольким web-страницам. Недостаток – потерять файл.
LOGO

19.

Внутренняя таблица стилей записывается прямо в HTML-код web-страницы. Её
заключают в парный тег <STYLE> и помещают в секцию заголовка. В остальном она
не отличается от внешней.
<HEAD>
<STYLE>
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM { color: #00FF00;
Font-weight: bold }
Р EM { color: #0000 FF }
</STYLE>
</HEAD>
Преимущество – она является неотъемлемой частью web-страницы, т.е. не теряется.
Недостатки: стили, определенные во внутренней таблице стилей, применяются
только к той web-странице, в которой эта таблица стилей находится.
LOGO

20.

В одной и той же web-странице могут присутствовать сразу несколько таблиц
стилей нескольких внешних и внутренняя.
<HEAD>
<LINK REL=”stylesheet” HREF=”<styles1.css >” TYPE=”text/css”>
<LINK REL=”stylesheet” HREF=”< styles2.css >” TYPE=”text/css”>
<STYLE>
…
</STYLE>
</HEAD>
Действие всех этих таблиц стилей складывается.
LOGO

21. Комментарии CSS

Язык CSS позволяет формировать комментарии двух видов:
▪ комментарий, состоящий из одной строки, с помощью / в начале строки
/ Это комментарий
P { color: #0000FF }
▪ комментарий, состоящий из произвольного числа строк, создаются с помощью
символов <!-- и -->
<!-Это комментарий,
состоящий из
нескольких строк.
-->
LOGO

22. Параметры CSS

Параметры шрифта и фона
A
Параметры абзацев, списков и изображений
B
Отступы, рамки и выделение
Параметры таблиц
C
D
LOGO

23. Параметры шрифта

Атрибут стиля Font-family: (задает имя шрифта)
Font-family: <список имен шрифтов, разделенных запятыми> | inherit
Пример:
P { font-family: Arial }
H1 { font-family: “Times New Roman” }
<P Style= “font-family: ‘Times New Roman’”>
P { font-family: Verdana, Arial } ищет первый, если не находит, то второй и
т.д.
H2 { font-family: Verdana, Arial, sans-serif } задает семейство шрифтов: serif
(шрифты с засечками), sans-serif (шрифты без засечек), cursive (шрифты,
имитирующие рукописный текст), fantasy (декоративные шрифты),
monospase (моноширинные шрифты).
Inherit – указывает, что текст данного элемента должен быть тем
же, что и текст родительского.
LOGO

24.

Атрибут стиля Font-size: (определяет размер шрифта)
Font-size: <размер> | xx-small | x-small | small | medium | large | x-large
|xx-large | larger | smaller | inherit
Задает размер от самого маленького до самого большого.
Larger и smaller задает следующий размер установленного шрифта.
Inherit – тот же размер, что и родительский.
LOGO

25.

Единицы измерения размера:
P { font-size: 10pt }
STRONG { font-size: 1cm }
EM { font-size: 150% }
LOGO

26.

Атрибут стиля Color (задает цвет текста)
Color: <цвет>| inherit
Пример:
P { font-size: #CCCCCC }
H1 { font-size: red }
Атрибут стиля Opacity (указывает степень полупрозрачности:
значение от 0 до 1)
Opacity: <числовое значение>| inherit
0 – полная прозрачность, 1 – полная непрозрачность.
Пример:
P { font- Opacity: 0.5 }
Атрибут стиля Font-weight: (устанавливает «жирность» шрифта)
Font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|…|900|
inherit
400 – нормальность (normal), 700 – полужирный (bold).
LOGO

27.

Атрибут стиля Font-style: (задает начертание шрифта)
Font-style: normal|italic|oblique| inherit
Normal – обычный шрифт
Italic - курсив
Oblique – особое декоративное начертание, похожее на курсив
Атрибут стиля Text-decoration (задает «украшение»)
Text-decoration: none|underline|overline|line-through|blink| inherit
None – убирает все «украшения» заданные родителем
Underline – подчеркивает текст
Overline – «надчеркивает», проводит линию над текстом
line-through – зачеркивает текст
blink – мерцающий шрифт
LOGO

28.

Атрибут стиля Line-height (задает высоту строки текста)
Line-height: normal|<расстояние> | inherit
Пример:
P { Line-height: 2 } увеличивает высоту строки вдвое по сравнению с обычной
Атрибут стиля Letter-spacing (расстояние между символами текста)
letter-spacing: normal|<расстояние>
расстояние добавлено к изначальному, установленным web-обозревателем
Атрибут стиля Font: (задает одновременно несколько параметров
шрифта)
Font: [<начертание>] [<вид строчных букв>] [<” жирность“>] [<размер>
[|<высота строки текста> ]] <имя шрифта>
имя шрифта – обязательно, остальное – нет
P { font: 10pt “Times new roman” } - шрифт Times new roman 10пт
H6 {font: italic 12pt Verdana } – заголовок 6 уровня шрифт
Verdana 12пт курсив
LOGO

29. Параметры, управляющие разрывом строк

Атрибут стиля White-space (задает правила вывода текста)
White-space: normal|pre|nowrap|pre-wrap|pre-line| inherit
Атрибут стиля Word-wrap (указывает места разрыва)
Word-wrap: normal|break-word| inherit
Normal – разрыв текста на строки только по пробелам
break-word – разрыв текста на строки внутри слов
Пример:
P { Word-wrap: break-word } выполняется разрыв текста
на строки внутри слов в абзацах
LOGO

30. Параметры тени у текста

Атрибут стиля Text-shadow (создает тень у текста)
Text-shadow: none | <цвет> <горизонтальное смещение> <вертикальное
смещение> [<радиус размытия>]
None – убирает тень у текста
горизонтальное смещение – если значение >0, то тень расположена правее
текста, если <0, то левее, если =0, то тень под текстом
вертикальное смещение - если значение >0, то тень расположена ниже
текста, если <0, то выше, если =0, то тень под текстом
радиус размытия – если не указан, приравнивается к 0, не будет размытия.
Пример:
Н1 { Text-shadow: black 1mn 1mn 1px } для заголовка 1 уровня тень
расположена правее и ниже теста на 1 мм и имеет радиус размытия
1 пиксель
LOGO

31. Параметры фона

Фон у отдельных элементов, отличный от фона страницы надо задавать в
крайних случаях.
Атрибут стиля Background-color (задает цвет фона)
Background-color: transparent | <цвет> | inherit
Цвет – задается в виде кода или имени
Transparent – убирает фон совсем, тогда элемент Web-станицы получит
«прозрачный» фон.
Пример:
BODY { color: white; Background-color: black } – для всей страницы черный фон
и белый текст
LOGO

32.

Атрибут стиля Background-image (задает в качестве фона графическое
изображение)
Background-image: none | url <интернет-адрес файла изображения>
None – убирает фон
Графический фон выводится поверх обычного фона, заданного с помощью
атрибута стиля Background-color. И, если фоновое изображение содержит
«прозрачные» фрагменты (такую возможность поддерживают форматы GIF и
PNG), этот фон будет «просвечивать» сквозь них.
Пример:
TABLE.yellow { Background-color: yellow; Background-image: url
(“/yellow_Background.png”) }
для таблицы задается обычный и графический фон.
Если фоновое изображение меньше страницы, то фоновое изображение
«замостит» страницу.
LOGO

33.

Атрибут стиля Background -repeat (задает параметры повторения
фонового изображения)
Background –repeat: no- repeat | repeat | repeat-x | repeat-y | inherit
no- repeat – фон. изобр. не будет повторяться
repeat - фон. изобр. будет повторяться
repeat-x - фон. изобр. будет повторяться по горизонтали
repeat-y - фон. изобр. будет повторяться по вертикали
Атрибут стиля Background -position (задает параметры повторения фон.
изобр.)
Background – position: <гориз. позиция> [<верт. позиция>] | inherit
Горизонтальная позиция задается в формате:
<Числовое значение> | left |centre | right
Вертикальная позиция задается в формате:
<Числовое значение> | top | centre | bottom
LOGO

34.

Пример:
TABLE.brg { Background- position: 1cm top } – фон. изобр. на расстоянии 1 см от
левого края и прижато к нижнему краю.
TABLE.brg { Background- position: right } – фон. изобр. прижато к правому краю
в центре.
LOGO

35.

Атрибут стиля Background -attachment (фиксация фон. изобр., запрет
прокрутки граф.фона)
Background – attachment: scroll | fixed;
scroll - прокручивает фон вместе с содержимым web-страницы:
fixed – фиксирует фон на месте
LOGO

36. Контейнеры. Встроенные контейнеры

Контейнер – элемент web-страницы, предназначенный только для выделения
какого-либо её фрагмента. Таким фрагментом может быть часть блочного
элемента (абзаца, заголовка, цитата, текста фиксированного форматирования
и др.), блочный элемент или сразу несколько блочных элементов. Webобозреватель никак не выделяет контейнер на web-странице.
Встроенный контейнер создается с помощью парного тега <SPAN>.
Фрагмент блочного элемента, который нужно превратить в содержимое
встроенного контейнера, помещают в этот тег:
<P><SPAN>Представление</SPAN>создается с помощью стилей CSS.</P> поместили во встроенный контейнер фрагмент абзаца.
.bolded { font-weight: bold }
…
<P><SPAN CLASS=”bolded”>Представление</SPAN> создается с
помощью стилей CSS.</P> - слово «Представление» будет
полужирным шрифтом.
LOGO

37. Параметры абзацев, списков и изображений Параметры вывода текста

Атрибуты стиля, управляющие выводом текста в структурирующих текст
блочных элементах (они применимы только к блочным элементам).
Атрибут стиля Text-align (задает горизонтальное выравнивание)
TEXT-ALIGN: left | right | centre | justify | inherit
Left – выравнивание по левому краю
Right – выравнивание по правому краю
Centre – выравнивание по центру
Justify – выравнивание по ширине
P { text-align: justify }
H1 { text-align: centre }
Атрибут стиля Text-indent (задает отступ для красной строки)
TEXT-INDENT: <отступ “красной строки”>
P { text-indent: 5mm }
LOGO

38. Параметры списков

Атрибут стиля list-style-type (задает вид маркеров или нумерацию у
пунктов списка)
LIST-STYLE-TYPE: disc | circle | square | decimal | decimal-leading-zero | lowerroman | upper-roman | lower-greek | lower-alpha| lower-latin| upper-alpha | upperlatin | armenian| georgian | none | inherit
Disc – маркер в виде черного кружка (обычный)
Circle – маркер в виде светлого кружка
Square – маркер в виде квадратика
Decimal – нумерация арабскими цифрами
decimal-leading-zero – нумерация арабскими цифрами от 01 до 99 с
начальным нулем
lower-roman – нумерация маленькими римскими цифрами
upper-roman - нумерация большими римскими цифрами
lower-greek - нумерация маленькими греческими буквами
lower-alpha и lower-latin - нумерация маленькими латинскими
буквами
LOGO

39.

upper-alpha и upper-latin - нумерация большими латинскими буквами
Armenian – нумерация традиционными армянскими цифрами
georgian– нумерация традиционными грузинскими цифрами
none – маркер и нумерация отсутствуют
Пример
UL { list-style-type: square }- задает маркированный список в виде квадратика
Пример
.squared { list-style-type: square }
…
<UL>
<LI>первый пункт </LI>
<LI CLAS=”squared”> второй пункт (с другим маркером)</LI>
<LI> третий пункт </LI>
</UL>
LOGO

40.

Атрибут стиля list-style-IMAGE (задает графическое изображение в виде
маркеров)
LIST-STYLE-IMAGE: none | <интернет-адрес файла изображения> | inherit
None – убирает графический маркер и возвращает простой, неграфический
Пример
UL { list-style-image: url (/markers/dot.gif) }
LOGO

41. Параметры отображения

Атрибут стиля visibility (указывает, будет ли элемент отображаться на
web-странице)
VISIBILITY: visible | hidden | collapse | inherit
Visible – элемент отображается на web-странице
Hidden - элемент не отображается на web-странице
Collapse – применим только к строкам, секциям, столбцам и группам столбцов
таблицы
Атрибут стиля display (задает вид элемента web-страницы: будет он
блочным, встроенным или вообще пунктом списка)
DISPLAY: none | inline | block | inline-block | list-item | run-in | table | inline-table |
table-caption | table-column |table-column-group | table-header-group | table-rowgroup | table-footer-group | table-row | table-cell | inherit
None – элемент не будет отображаться на web-странице
Inline – встроенный элемент
Block – блочный элемент
LOGO

42.

inline-block – блочный элемент, который будет «обтекаться» содержимым
соседних блочных элементов
list-item – пункт списка
run-in – встраивающийся элемент. Если за таким элементом следует блочный
элемент, он становится частью данного блочного элемента (фактически –
встроенным в него элементом), в противном случае он сам становиться
блочным элементом
table- таблица
inline-table – таблица, отформатированная как встроенный элемент (можно
поместить таблицу в абзац)
table-caption – заголовок таблицы
table-column – столбец таблицы
table-column-group – группа столбцов таблицы
table-header-group – секция заголовка таблицы
table-row-group – секция тела таблицы
table-footer-group – секция завершения таблицы
LOGO

43.

table-row – строка таблицы
table-cell – ячейка таблицы
Пример комбинированного стиля
IMG.block { display: block } -позволяет определенным графическим
изображениям отображаться как блочные элементы
LI { display: inline } после применения стиля, пункты списков станут
встроенными элементами и будут выводиться в одну строку
.hidden { display: none } – делает элемент невидимым
LOGO

44. Отступы, рамки и выделение

Стандарт CSS предлагает средства для создания отступов двух видов.
▪внутренний отступ – между воображаемой границей элемента webстраницы и его содержимым.
▪внешний отступ – между воображаемой границей данного элемента webстраницы и воображаемыми границами соседних элементов web-страницы.
Рассмотрим ячейку таблицы, ячейка наполнена текстом. И имеет
воображаемую границу, и окружена другими ячейками:
▪внутренний отступ – это отступ между границей ячейки и содержащимся в
ней текстом;
▪внешний отступ – это отступ между границами отдельных ячеек таблицы.
LOGO

45.

Атрибуты стиля padding:
padding-left <отступ> – величина внутренних отступов слева
Padding-top <отступ> – величина внутренних отступов сверху
Padding-right <отступ> – величина внутренних отступов справа
Padding-bottom <отступ> - величина внутренних отступов снизу
Пример внутреннего отступа, равным 2 пикселям со всех сторон
TD, TH { padding-left: 2px
padding-top: 2px
padding-right: 2px
padding-bottom: 2px }
Пример внутреннего отступа, равным 2 см слева и справа
.indented { padding-left: 2cm
padding-right: 2cm
LOGO

46.

Атрибуты стиля padding:
Padding: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4> ]]]– величина
внутренних отступов:
если указано одно значение, оно задает величину отступа со всех сторон;
если указаны два значения, первое установит величину отступа сверху и
снизу, а второе – слева и справа;
если указаны три значения, первое установит величину отступа сверху,
второе – слева и справа, а третье - снизу;
если указаны четыре значения, первое задаст величину отступа сверху,
второе – справа, третье – снизу, а четвертое – слева.
Пример внутреннего отступа, равным 2 см слева и справа
TD, TH { padding: 2px
.indented { padding: 0cm 2cm 0cm 2cm }
LOGO

47.

Атрибуты стиля margin (задает величины внешних отступов):
margin-left | margin-top | margin-right | margin-bottom: <>| auto | inherit
слева, сверху, справа и снизу
Пример у всех заголовков первого уровня отступ сверху 5 мм
Н1 { margin-top: 5mm }
Пример отрицательный отступ позволяет убрать отступы, созданные по
умолчанию
UL { margin-left: -20px }
Атрибуты стиля margin (задает величины внешних отступов):
Margin: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4> ]]]– величина внешних
отступов:
Пример у всех заголовков первого уровня отступ сверху и снизу 5 мм,
слева и справа – нет отступа
Н1 { margin: 5mm 0mm}
LOGO

48.

Атрибуты стиля border-spacing (задает величины отступов между
ячейками таблицы):
border-spacing: <отступ 1> [<отступ 2>]
если указано одно значение, оно задает величину отступа со всех сторон
ячейки таблицы;
если указаны два значения, первое задает величину отступа слева и справа, а
второе – сверху и снизу.
Атрибут стиля применяется только к таблицам (тегу <table>)
TABLE {border -spacing: 1px } – отступы между ячейками таблицы равны
одному пикселю.
LOGO

49. Параметры рамки

Толщина рамки:
LOGO

50.

Атрибуты стиля border (задает толщину сторон рамки):
Border-left-width| border-top-width| border-right-width| border-bottom-width|: thin|
medium | thick | <толщина> | inherit
Thin - тонкая
Medium - средняя
Thick толстая
Пример толщина рамки у ячеек таблицы равна одному пикселю
TD, TH { border-left-width: thin;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin }
Пример у всех заголовков первого уровня рамку из нижней стороны
толщиной 5 пикселей
H1 { border-bottom-width: 5px }
LOGO

51.

Атрибуты стиля border-width (задает толщину сторон всех сторон рамки):
Border-width: <толщина1> [<толщина2> [<толщина3> [<толщина4>]]]
▪ если указано одно значение, оно задает толщину всех сторон рамки;
▪ если указаны два значения, первое установит толщину рамки сверху и снизу,
а второе – толщину левой и правой сторон рамки;
▪ если указаны три значения, первое установит толщину верхней, второе –
левой и правой, а третье – нижней сторон рамки;
▪ если указаны четыре значения, первое задаст толщину верхней, второе –
правой, третье – нижней, а четвертое – левой сторон рамки.
Пример толщина рамки у ячеек таблицы равна одному пикселю
TD, TH { Border-width: thin }
LOGO

52.

Атрибуты стиля border (задает цвет сторон рамки):
Border-left-color| Border-top-color| Border-right-color| Border-bottom-color:
transparent <цвет> | inherit
Transparent – задает «прозрачный» цвет, сквозь который будет
«просвечивать» фон родительского элемента.
Пример у всех заголовков первого уровня красную рамку из нижней стороны
толщиной 5 пикселей
H1 { border-bottom-width: 5px
border-bottom-color: red }
Атрибуты стиля border-color (задает цвет всех сторон рамки):
Border-color: <цвет1> [<цвет2> [<цвет3> [<цвет4>]]]
Пример толщина рамки у ячеек таблицы равна одному пикселю
TD, TH { Border-width: thin
Border-color: black }
LOGO

53.

Атрибуты стиля border-..-style (задает стиль линий сторон рамки):
Border-left- style | Border-top- style | Border-right- style | Border-bottom- style: none
| hidden | dotted| dashed | solid | double | groove | ridge | inset | outset | inherit
LOGO

54.

Пример у всех заголовков первого уровня красную рамку двойной
линией из нижней стороны толщиной 5 пикселей
H1 { border-bottom-width: 5px
border-bottom-color: red
border-bottom-style: double }
LOGO

55.

Атрибуты стиля border-style (задает стиль всех сторон рамки):
Border- style: <стиль 1> [<стиль 2> [<стиль 3> [<стиль 4>]]]
Пример
TD, TH { Border-width: thin
Border-color: black
Border-style: dotted }
Атрибуты стиля border (задает стиль сторон рамки)
Border-left | Border-top | Border-right | Border-bottom: <толщина> <стиль> <цвет>
| inherit
Пример
H1 { border-bottom: 5px double red }
Глобальный Атрибуты стиля border (задает параметры для всех сторон
рамки)
Border: <толщина> <стиль> <цвет> | inherit
Пример TD, TH { Border: thin dotted black }
LOGO

56. Параметры таблиц Параметры выравнивания

Атрибуты стиля text-align (выравнивает содержимое ячеек таблицы по
горизонтали)
TD, TH { text-align: centre } – по центру
CAPTION { text-align: left } – заголовок таблицы по левому краю
Атрибуты стиля vertical-align (выравнивает содержимое ячеек таблицы
по вертикали)
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom |
<промежуток между базовыми линиями> | inherit
sub – выравнивает базовую линию фрагмента текста по базовой линии нижнего индекса
родительского элемента
super – выравнивает базовую линию фрагмента текста по базовой линии верхнего
индекса родительского элемента
top– выравнивает содержимое ячейки по её верхнему краю
text-top – выравнивает верхний край фрагмента текста по верхнему краю текста
родительского элемента
middle - выравнивает содержимое ячейки по центру
bottom - выравнивает содержимое ячейки по её нижнему краю
text-bottom – выравнивает нижний край фрагмента текста по
нижнему краю текста родительского элемента
LOGO

57. Параметры отступов и рамок

Для задания внутренних отступов между содержимым ячейки и её границей
- атрибутами стиля Padding-left, Padding-top, Padding-right, Padding-bottom и
Padding.
Для задания внешних отступов между границами соседних ячеек –
атрибутом стиля – Border-spacing
Пример для таблицы задается сплошная черная рамка и отступ между
ячейками, равный 1 пикселю, а для ячеек этой таблицы – тонкую точечную
черную рамку и отступ между границей ячейки и её содержимым, равным
двум пикселям
Table { align: centre;
Border: medium solid black;
Border-spacing: 1px }
TD, TH { Border: thin dotted black
Padding: 2px }
LOGO

58.

Атрибут стиля border-collapse (указывает, как будут рисоваться рамки ячеек в
таблице)
border-collapse: collapse | separate | inherit
collapse – каждая ячейка таблицы заключается в отдельную рамку (обычное
поведение - пример выше)
separate – рисуются рамки, разделяющие ячейки таблицы (пример ниже)
LOGO

59. Параметры размеров

Атрибут стиля WIDTH и HEIGHT (задает ширину и высоту таблицы и ячеек)
Пример для таблицы:
TABLE { width: 100%; height: 300px }
Пример для задания ширины столбца:
<TABLE>
<TR>
< TD > Первый столбец </TD>
<TD STYLE=”width: 40px”> Второй столбец шириной в 40 пикселей</TD>
< TD > Третий столбец </TD>
</TR>
…
</TABLE>
Пример для задания высоты строки:
<TABLE>
…
<TR>
<TD STYLE=”height: 30px”> Строка высотой в 30 пикселей</TD>
…
</TR>
…
</TABLE>
LOGO

60.

Атрибут стиля CAPTION-SIDE (указывает местоположение заголовка
таблицы относительно самой таблицы)
CAPTION-SIDE: top | bottom | inherit
Top – заголовок распологается над таблицей
Bottom - заголовок распологается под таблицей
Пример для таблицы:
TABLE { caption-side: bottom }
Атрибут стиля EMPTY-CELLS (указывает, как выводить пустые ячейки)
EMPTY-CELLS: show | hide | inherit
Show – пустые ячейки будут выводиться на экран. Если для них был задан
другой фон, на экран будет выведен фон, а если заданы рамки, то будут
выведены рамки.
Hide – пустые ячейки не будут выводиться на экран.
Пример для таблицы:
TABLE { empty-cells: hide }
LOGO

61. Скруглённые уголки

Задача. Кроссбраузерно установить скруглённые уголки у фотографий,
размер которых известен и задан.
Решение
Если на сайте применяется группа фотографий одинаковой ширины и
высоты, то для них достаточно просто можно установить скругленные уголки.
Принцип состоит в том, что поверх каждой фотографии накладывается
рисунок, который прячет под собой часть фотографии, образуя тем самым
желаемые уголки.
Вначале следует подготовить изображение с уголками. В графическом
редакторе создаем прозрачную основу и заливаем уголки цветом,
совпадающим с цветом фона веб-страницы. На рисунке показано
изображение размером 120х120 пикселей, назовем его round.png.
Шахматное поле обозначает прозрачность, а уголки
отмечены темным цветом.
LOGO

62.

Далее создаем слой, в который добавляем два изображения фотографию и картинку с уголками.
Для управления положением уголков тегу <img> следует добавить
уникальный класс или поместить его внутрь контейнера <div>.
Позиционирование основного блока должно быть задано относительным
(position: relative), а внутреннего с уголками — абсолютным (position:
absolute).
LOGO

63.

<html>
<head>
<title>Скругленные уголки</title>
<style>
.roundcorner { position: relative; /* Относительное позиционирование */
float: left; /* Выравнивание по левому краю с обтеканием */
margin-right: 20px; /* Отступ справа */ }
.roundcorner div { position: absolute; /* Абсолютное позиционирование */
top: 0; left: 0; /* Нулевые координаты */ }
</style> </head>
<body> <div class="roundcorner">
<img src="images/thumb1.jpg" alt="Фотография 1" width="120" height="120">
<div>
<img src="images/round.png" alt="" width="120" height="120"></div>
</div>
<div class="roundcorner">
<img src="images/thumb2.jpg" alt="Фотография 2" width="120" height="120">
<div>
<img src="images/round.png" alt="" width="120" height="120"></div>
</div>
</body>
</html>
LOGO

64.

<html>
<head>
<title>Скругленные уголки</title>
<style>
.roundcorner { position: relative; /* Относительное позиционирование */
float: left; /* Выравнивание по левому краю с обтеканием */
margin-right: 20px; /* Отступ справа */ }
.roundcorner
div { position: absolute; /* Абсолютное позиционирование */
top: 0; left: 0; /* Нулевые координаты */ }
</style>
</head>
<body> <div class="roundcorner">
<img src="images/thumb1.jpg" alt="Фотография 1" width="120" height="120">
<div><img src="images/round.png" alt="" width="120" height="120"></div> </div>
<div class="roundcorner">
<img src="images/thumb2.jpg" alt="Фотография 2" width="120" height="120">
<div><img src="images/round.png" alt="" width="120" height="120"></div>
</div>
</body>
</html>
LOGO

65.

Результат данного примера показан на рисунке. Для белого фона веб-страницы был
подготовлен рисунок с белыми уголками.
Поскольку <div> относится к блочным элементам, то изображение внутри него всегда
будет начинаться с новой строки. Для расположения нескольких изображений в один
ряд в примере применяется стилевое свойство float со значением left. Здесь надо
учесть, что стоит добавить после фотографий текст, как он тоже будет занимать место
справа от изображений, а не начинаться с новой строки. Поэтому для отмены действия float следует добавить <div style="clear: left"></div> после последнего
блока с фотографией.
LOGO

66.

Второй способ имитации скругленных уголков связан с наложением
фонового рисунка поверх фотографии. Для этого несколько модифицируем
пример 1, оставив пустой <div> вместо картинки с уголками (пример 2). В
стилях слоя следует указать путь к фоновому рисунку через свойство
background, а также задать абсолютное позиционирование (position:
absolute). Это сделано, чтобы задать точное положение уголков
относительно родителя (слоя с именем roundcorner), с этой целью
добавляются свойства left и top с нулевыми значениями. Также необходимо
задать ширину и высоту блока как 100%.
LOGO

67. Использование фонового рисунка

<html>
<head>
<title>Скругленные уголки</title>
<style>
.roundcorner { position: relative; /* Относительное позиционирование */
float: left; /* Выравнивание по левому краю с обтеканием */
margin-right: 20px; /* Отступ справа */ }
.roundcorner div { background: url(images/round.png); /* Рисунок с уголками */
position: absolute; /* Абсолютное позиционирование */
left: 0; top: 0; /* Положение от левого верхнего угла */
width: 100%; height: 100%; /* Размеры совпадают с фотографией */ }
</style>
</head>
<body>
<div class="roundcorner">
<img src="images/thumb1.jpg" alt="Фотография 1" width="120" height="120">
</div>
<div class="roundcorner">
<img src="images/thumb2.jpg" alt="Фотография 2" width="120" height="120">
</div>
</body></html>
LOGO

68. Использование фонового рисунка

<html>
<head>
<title>Скругленные уголки</title>
<style>
.roundcorner { position: relative; /* Относительное позиционирование */
float: left; /* Выравнивание по левому краю с обтеканием */
margin-right: 20px; /* Отступ справа */ }
.roundcorner div { background: url(images/round.png); /* Рисунок с уголками */
position: absolute; /* Абсолютное позиционирование */
left: 0; top: 0; /* Положение от левого верхнего угла */
width: 100%; height: 100%; /* Размеры совпадают с фотографией */ }
</style>
</head>
<body>
<div class="roundcorner">
<img src="images/thumb1.jpg" alt="Фотография 1" width="120" height="120"> </div>
<div class="roundcorner">
<img src="images/thumb2.jpg" alt="Фотография 2" width="120" height="120">
</div>
</body>
</html>
LOGO

69.

Будь профессионалом!
LOGO