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

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