CSS к HTML-документу.
Метод 1: Инлайн/In-line (атрибут style)
Можно применять

This is a red page

- HTML-тэг . Например:


Example

This is a red page

стилей это просто текстовый файл с расширением .css. Вы

Весь фокус состоит в том, чтобы создать ссылку из HTML-документа на таблицу стилей (style.css).
Это можно сделать одной строчкой HTML-кода:

HTML, то есть между тэгами и .

Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.

набора правил(1). Каждое правило состоит из одного или несколькихселекторов(3) и блока определения(2),

стилей.
В CSS комментарии начинаются с "/*", и заканчиваются "*/",

оформления по названию тэга.
p
{
color:green;
}
h2
{
color:red;
}

выборку и используется, когда необходимо выбрать только один определенный

текст

не единственный элемент, а группу элементов.
С помощью атрибута class

текст

class="test1" */
.test1
{
color:green;
font-family:verdana;
font-size:1.2em;
}

Если вы, например, хотите изменить цвет фона web-сайта из

color описывает цвет переднего плана элемента.
Например, можно сделать текст

Цвета можно указывать как шестнадцатеричные значения, как в примере (#ff0000), либо вы можете использовать названия цветов ("red") или rgb-значения (rgb(255,0,0)).

размещается всё содержимое HTML-документа. Таким образом, для изменения

body {
background-color: #FFCC66;

opacity:0.5;
width:100%;
height:100%;
background-image: url(“1234.gif");
}

указаны четыре значения background-repeat.

в левом верхнем углу экрана. Свойство background-position позволяет изменять

#009999);

В простейшем случае для задания радиального градиента понадобится всего

элемента, для этого вначале указывается её позиция.

этого необходимо перечислить путь к ним через запятую в

несколько свойств и записывать ваши стили в сокращённом виде,

background-color: #FFCC66;
background-image: url(“1234.gif");
background-repeat: no-repeat;
background-position: right bottom;

Используя background, того же результата можно достичь одной строкой кода:

background: #FFCC66 url(“1234.gif") no-repeat right bottom;

события при определении свойств HTM-тэга.
Рассмотрим пример. Как вы

которые пользователь ещё не посещал.
В примере кода непосещённые ссылки

которые пользователь посетил. В примере кода посещённые ссылки -

активные ссылки имеют жёлтый фон.

a:active {
background-color: #FFFF00;
}

находится указатель мыши.

Это можно использовать для создания интересных эффектов.

такой блок имеет зону content, в которой располагается содержимое элемента

margin-left:250px;
margin-right:70px;
padding:15px;
}

блок, увеличивает его ширину и высоту.

родителя, а не от его высоты

блока.
Значения
content-box Свойства width и height задают ширину и высоту контента и не включают

нарисованы сплошной линией;
dashed границы будут нарисованы пунктирной линией;
dotted границы будут нарисованы

ранее свойства могут также применяться к отдельным сторонам границы
border-left-style:solid;

границ в одном свойстве border.

Порядок следования свойств:
border-width
border-style
border-color
можно пропускать неиспользуемые свойства.

border:2px

углы элементов сглаженными
border-radius:15px;
border-top-left-radius делает сглаженным только верхний левый угол элемента;
border-top-right-radius делает

в качестве границы элемента.

border-image:путь(1) отступ(2) ширина(3) повторение(4);

border-image:url("images.jpg") 30 30

других объектов на веб-странице.

position: absolute | fixed | relative

сантиметры (cm), миллиметры (mm) и дюймы (in).

дюймы (in)
сантиметры (cm)
миллиметры

который определяется высотой заглавной буквы и размеры выносных элементов

правил, а только у некоторых и нужно понимать от

показан в документе

h1 и т.д.
на строку, на которой расположился блок, уже

и т.д. 
элементы следуют друг за другом.
width и height игнорируются.

По отношению к внешним элементам ведёт себя как inline,

блок 2
блок 3

их положение слева или справа задаётся соответственно свойством left или right. Резиновая

.layout { position: relative; width: 80%; height: 20%;}
div { position: absolute; height: 40px;}
#col1 { background: #00FF00; left: 0; right: 300px; }
#col2 { background: #0000FF; width: 200px; right: 100px; }
#col3 { background: #FF0000; width:100px; right: 0; }

#00FF00; width: 33%; }
#col2 { background: #0000FF; left: 33%;

0; right: 200px; margin-right: 50%; }
#col2 { background: #0000FF;

используемых для отображения данного элемента или web-страницы. Если первый

начинаете с предпочтительного шрифта, а затем перечисляете альтернативные. Рекомендуем

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

Обратите внимание, что имя шрифта "Times New Roman" содержит пробелы, поэтому указано в двойных кавычках.

oblique. В примере все заголовки будут показаны курсивом

вариантами normal и small-caps. Шрифт small-caps использует малые заглавные

Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра.

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

"тяжёлым", должен отображаться шрифт. Шрифт может быть normal или

единицы измерения (например, пикселы и проценты) для описания размера

и 'pt' дают абсолютное значение размера шрифта, а '%'

все свойства шрифта в одном стилевом правиле.
Например, вот четыре

:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Используя сокращённую запись, код можно упростить:

p {
font: italic bold 30px arial, sans-serif;
}

Порядок свойств font таков:

font-style | font-variant | font-weight | font-size | font-family

для любого web-дизайнера

Отступы [text-indent]

Свойство text-indent позволяет выделить параграф с

:
p {
text-indent: 30px;
}

старых версиях HTML. Текст может быть выровнен left, right,

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

подчёркнуты,

- имеют черту над текстом, а

- перечёркнуты.


h1 {
text-decoration: underline;
}

h2 {
text-decoration: overline;
}

h3 {
text-decoration: line-through;
}

специфицировать свойством letter-spacing. Значение - нужная величина. Например, если

и 6px - в заголовках

, то используется такой код:

h1 {
letter-spacing: 6px;
}

p {
letter-spacing: 3px;
}

выбрать capitalize, uppercase или lowercase, в зависимости от того,