<html>
<head>
.......
</head>
<body>
<h1>Синий заголовок на белом фоне</h1>
<p>А это абзац на сером фоне, размер символов – 14pt, цвет символов – по умолчанию
(чёрный)</p> </body> </html>
Приоритеты таблиц стилей, начиная с наивысшего: встроенная, внедрённая, импортированная, связанная, по умолчанию (настройки браузера).
Виды селекторов Селектор типа элемента – переопределяет атрибуты любого тэга:
h2 { color:blue }
p {font-size:16pt }
Применение:
<h2>Заголовок</h2> <p>Абзац</p>
Селектор класса – позволяет для одного и того же тэга определить несколько вариантов оформления:
h2.red {color:red } h2.green {color:green }
Применение:
<h2 class="red">Это красный заголовок</h2> <h2 class="green">А это зелёный заголовок</h2>
Также селектор класса позволяет создать стиль, который можно применить для различных тэгов:
.style1 {color:blue; font-size:22pt}
.style2 {color:lime; background-color:grey}
Применение:
<p class="style1">Большие синие буквы, фон – по умолчанию</p>
<p class="style2">Зелёные буквы, фон – серый, размер букв - по умолчанию</p> <h1 class="style1">Заголовок - большие синие буквы, фон – по умолчанию</h1>
<h1 class="style2">Заголовок - зелёные буквы, фон – серый, размер букв - по умолчанию</h1>
Имя класса чувствительно к регистру символов!
Определение правила состоит из одного или нескольких элементов, представляющих собой свойство (атрибут) и его значения, разделённых двоеточием (color:blue). При некорректном задании свойства или значения соответствующая пара игнорируется.
Величины, обозначающие размеры элементов, могут задаваться: в абсолютных единицах:
in – дюймы;
cm – сантиметры; mm – миллиметры;
pt – пункты (пойнты) 1 пункт = 1/72 дюйма, или 0,35 мм; pc – пики, 1 пика = 12 пунктам.
в относительных единицах:
em – высота элемента базового шрифта;
6
px – количество пикселей данного устройства; x – высота буквы x
% - процент по отношению к опорному значению.
font-family – виды шрифтов и их приоритеты, значения – "Arial", "Courier" (названия шрифтов), serif , cursive(группа шрифтов с засечками)
<body style="font-family:'Times New Roman',serif">
или
body {font-family: "Times New Roman", serif)
font-style – определяет начертание букв (normal – нормальное, italic - курсив, oblique – наклонное)
font-weight – определяет жирность шрифта, значения: 100, 200, ... 900.
font-size – размер шрифта, font-size:16pt – размер в пунктах, font-size:160% – размер в процентах, font-size:1.2em – размер в пропорции к базовому размеру шрифта в данном элементе
color – цвет символов, значения – названия цветов (red, grey) или 16-ричный код
(#00FF0D).
background-color – цвет фона, значения – названия цветов (red, grey) или 16-ричный код
(#00FF0D)
text-align – выравнивание текста, значения: left, right, center, justify (выравнивание по ширине).
text-decoration – оформление текста, значения: underline - подчёркивание, overline -
надчёркивание, line-through - зачёркивание, blink - мерцание
text-shadow – тень текста, при оформлении тени задаются четыре значения - отступ тени от текста по горизонтали, по вертикали, радиус размытия тени и цвет тени, например:
h2 {text-shadow: -3px -3px 5px grey}
text-indent – отступ первой строки элемента уровня блока, например, абзаца p {text-indent: 20pt)
background-image – фоновый рисунок – background-image:url(stars.gif)
background-repeat – повторяемость фонового рисунка, значения: repeat, repeat-x, repeat-y, no-repeat.
margin-top, margin-left, margin-bottom, margin-right - поля документа, задаются в пикселях,
процентах и т.д. Границы (обрамление):
border-color – цвет границы.
border-width – толщина границы (thin, medium, thick или числовое значение).
border-style – тип линии (none – нет линии, solid - сплошная, dotted - пунктир, dashed -
штриховая, double - двойная, groove - углублённая, ridge - выпуклая, inset - утопленная, outset - выпуклая)
7