Асновы вэб-­ канструявання

табліцы стыляў, якія дазваляюць кіраваць знешнім выглядам сайта (колер фона,

памер і колер тэкста, афармлення спасылак, пазіцыя блокаў на сайце і інш.

ID

В HTML:
блок
В CSS:
#footer {width: 200px;})

з дапамогай HTML? Калі афармляць дакумент толькі з дапамогай HTML, то ў

выпадку якіх-небудзь змяненняў, напрыклад, замена колера загалоўка ў артыкуле, вам прыйдзецца выдаткаваць шмат часу, так як ўсе змяненні трэба будзе рабіць для кожнага элемента паасобку. У CSS усё даволі проста.  Дастаткова ўказаць у адным css-файле колер заголоўкам, і ўсе загалоўкі на старонке (-ах) зменяцца аўтаматычна.

CSS-файл мае тып «*.css» і звычайна файлу даюць імя «style.css» (но гэта не абавязкова). Файл CSS працуе толькі разам з HTML.

CSS стыляў достаткова прапісаць паміж тэгамі  тэг .



Узор табліцы CSS

H2
{
font-size: 150px;

/* Размер шрифта */
color: #cc0000 /* Цвет текста */
}

Заголовок H2

адным файле, тып якога «.css». Калі звязаць усе HTML файлы вэб-старонак

з такім CSS-файлам, то то пры змяненні стылі старонак (колер, фон, памер шрыфта і г.д.) будуць змяняцца ва ўсіх HTML-документах, звязаных з CSS-файлам.

Каб звязать HTML-дакументзCSS-файлом, трэба паставіць паміж тегамі спецыяльны тэг .



href – прапісваем шлях да css-файла. На ўзоры файл «style.css» знаходзіцца разам з астатнімі HTML-файлами ў адной дырэкторыі.

заўсёды будзе мець такі колер і такія памеры на старонцы

атрыбутам мы выраўноўваем па првааму і леваму краю, па шырыні

і па цэнтру. Так вось, у CSS есть штосьці падобнае, гэта ўласцівасць «text-align».
Значэнні:
left - выраўнованне па леваму краю (значэнне па змаўчанні);
right - выраўнованне па праваму краю;
center - выраўнованне па цэнтру;
justify - выраўнованне па шырыні (па праваму і леваму краям адначасова).

h1{ text-align:center; /* выраўнованне па цэнтру */}
h2 {text-align:left; /* выраўнованне па леваму краю */}
h3 {text-align:right; /* выраўнованне па праваму краю */}
p {text-align:justify; /* выраўнованне па шырыні */}

/* Колер тэкста жоўты */
}
-па 16-рычнаму значэнню:
p {
color: #FFFF00; /*

Колер тэкста жоўты */
}

код«border-color».
p
{
border-color: #cc0000; /* Колер мяжы*/
border-style: solid; /* Стыль мяжы*/
}

«color» для селектара «a»
Сінтаксіс:

a:имя_псевдокласса { /* стиль */}

Уласцівасць (імена псеўдакласаў):

link

– спасылка, якую яшчэ не наведвалі
visited – спасылка, якую наведаў карыстальнік
hover – становшча спасылкі, на якую навялі курсор мыші
active – актыўная спасылка, на якую націснулі

a {color:#006400;/* колер спасылкі*/}
a:hover {color:#FF0000;/* спасылка пры навядзенні на яе мышкі */}
a:active {color:#cccccc; /* націснутая спасылка*/}

margin-left: auto;
margin-right: auto }

тэкст у каталозе «Исходники»
Рэкамендацыя: Стварыў вэб-старонку index1.htm і захаваў яе

каталог «Урок5», захавайце яе яшчэ раз пад імём index2.htm, адрэдакціруйце яе па ўзору