Опубликован: 31.10.2006 | Доступ: свободный | Студентов: 12243 / 4805 | Оценка: 4.35 / 4.14 | Длительность: 08:43:00
Лекция 1:

Общая информация

Лекция 1: 12 || Лекция 2 >
Аннотация: Дается общая информация о каскадных таблицах стилей, рассматривается их предназначение и область применения.

Технология CSS: общий взгляд

Название "Каскадные таблицы стилей" происходит от английского Cascading Style Sheets, аббревиатурой которого является CSS. Впервые стили появляются в HTML 4.0 для определения представления элементов HTML и решения проблем представления документов. Стили обычно хранятся в таблицах стилей: могут быть определены как внутри HTML-документа, так и в специальном файле с расширением css. Используя отдельные файлы для хранения таблиц стилей, можно существенно сократить объем работы. Также можно определить несколько стилей, которые, подчиняясь существующим правилам, будут каскадно задавать один определенный стиль.

Пример использования CSS

С помощью CSS документы HTML можно выводить, используя различные стили вывода.

Пример. Возьмем несколько таблиц стилей:

Style1

p
{
color: blue; font-style: italic;
margin-left: 20pt;
}

ol,ul,li
{
list-style: circle;
font-family: arial; 
}

a:link    {color:black}
a:visited {color:black}

body
{
background-image: url("http://www.intuit.ru/departament/picture.gif")
}

Style2

h1,h3,h6
{
margin: 20pt;
}

h1,h2,h3,h4,h5,h6,p,ol,li
{
font-family: arial, "sans serif";
}

p,table,td,ol,ul
{
font-style: oblique;
}

:link {COLOR: blue;}
:visited {COLOR: blue;}
a:active {COLOR: black;}
a:hover {COLOR: black;}

a.myln:link {COLOR: olive;}
a.myln:visited {COLOR: olive;}
a.myln:active {COLOR: teal;}
a.myln:hover {COLOR: teal;}

Style3

p,ol,ul
{
font-style: italic;
margin-right: 20pt;
}

p,h1,h6  
{
font-family: "comic sans ms", arial, "sans serif"; 
}

p,th
{
font-size: 20%
}

table {background-color: blue}

body {background-color:#FFF000}

p,ol,ul 
{
color:green; 
}

:link    {color:blue}
:visited {color:blue}
:active  {color:green}
:hover   {color:green}

Style4

:link     { color:red }
:visited  { color:red }
:active   { color:yellow }
:hover    { color:yellow }

body
{
background-color: #FAD123;
}

h1,h2,h6
{
margin-left: 20pt;
color: blue;
}

h3,h4,h5
{
margin-left: 10pt;
color: green;
}

p,h1,h3
{
font-size: 150%;
}

p,h1,h2,h3,h4,h5,h6,table
{
font-family: arial;
}

p
{
margin-left: 30pt;
}

Style5

p,h1,h2,h3
{
font-size: 75%;
}

table,h4,h5,h6,li
{
font-family: arial, "sans serif";
margin-left: 20pt;
}

body
{
background-color: #F2FF2F;
}

ol,ul {color: 12a45d;}

:link    {color:brown}
:visited {color:brown}
:active  {color:blue}
:hover   {color:blue}

При последовательном применении этих стилей к одному и тому же документу можно менять его представление.

Лекция 1: 12 || Лекция 2 >
Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?