Часткі пазначаныя дадзеным знакам неабавязковыя.
Яны ўтрымоўваюць дадатковыя тлумачэнні HTML і CSS кода ў прыведзеных прыкладах.
Знак
“увага!” напачатку абзаца пазначае больш пашыраную інфармацыю чым астатні тэкст.
Дадзены дакумент з'яўляецца перакладам
і можа ўтрымоўваць памылкі перакладу.
Арыгінальная версія дадзенага дакумента на ангельскай мове з'яўляецца адзінай нарматыўнай версіяй
Аўтар перакладу: Шарылау Аляксандр пры падтрымке - Law Theory
Гэта кароткае кіраўніцтва прызначана для людзей, пачаткоўцаў сваё вывучэнне CSS у першы раз.
Яно не дае глыбокіх ведаў о CSS. Кіраўніцтва проста тлумачыць як стварыць HTML файл, CSS файл і як прымусіць іх працаваць разам. Пасля чытання дадзенага артыкула, Вы можаце працягнуць далейшае вывучэнне для атрымання інфармацыі пра значнейшыя асаблівасці HTML і CSS. Ці ж перайсці да вывучэння матэрыялу ў інтэрактыўных якія дапамогуць Вам пры стварэнні сайтаў.
У канцы дадзенага артыкула Вы створыце HTML файл які будзе выглядаць як гэты:
Атрыманая HTML старонка з кветкамі і разметкай зробленай пры дапамозе CSS.
Заўважце, што я не прэтэндую на тое, што гэта вельмі хораша O
Часткі пазначаныя дадзеным знакам неабавязковыя.
Яны ўтрымоўваюць дадатковыя тлумачэнні HTML і CSS кода ў прыведзеных прыкладах.
Знак
“увага!” напачатку абзаца пазначае больш пашыраную інфармацыю чым астатні тэкст.
Для гэтага артыкула я прапаную выкарыстоўваць найпростыя ўтыліты, напрыклад Нататнік ад Windows, TextEdit на Mac ці KEdit пад KDE цалкам падыдуць пад задачу. Як толькі Вы зразумееце асноўныя прынцыпы, вы можаце пераключыцца на выкарыстанне больш прасунутых прылад распрацоўкі, напрыклад на такія камерцыйныя праграмы як Style Master ці DreamWeaver. Але для стварэння першага CSS файла не варта адцягвацца на мноства пашыраных магчымасцяў.
Не выкарыстоўвайце тэкставы рэдактар накшталт Microsoft Word ці OpenOffice. Гэтыя праграмы звычайна ствараюць файлы, якія не могуць быць прачытаны браўзарамі. Для HTML і CSS файлаў нам патрэбныя звычайныя тэкставыя файлы без якога-небудзь фармату.
Першы крок складаецца ў адкрыцці пустога акна тэкставага рэдактара (Notepad, TextEdit, KEdit ці любога Вашага каханага) і наборы ў ім наступнага тэксту:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title> </head> <body> <!-- Site navigation menu --> <ul class="navbar"> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a> </ul> <!-- Main content --> <h1>My first styled page</h1> <p>Welcome to my styled page! <p>It lacks images, but at least it has style. And it has links, even if they don't go anywhere… <p>There should be more here, but I don't know what yet. <!-- Sign and date the page, it's only polite! --> <address>Made 5 April 2004<br> by myself.</address> </body> </html>
Вам не абавязкова гэта перанабіраць- вы можаце проста скапіяваць і ўставіць тэкст з гэтай старонкі ў рэдактар.
(Калі вы выкарыстоўваеце TextEdit на Макінтошы, не забудзьцеся паказаць TextEdit'у, што гэта сапраўды просты тэкставы файл, адкрыўшы меню Format і абраўшы опцыю “Make plain text”.)
Першы радок нашага HTML файла кажа браўзару пра тып дакумента
(DOCTYPE пазначае DOCument TYPE). У нашым выпадку - гэта HTML
версіі 4.01.
Словы паміж < і > завуцца тэгамі і як вы можаце бачыць, дакумент утрымоўваецца паміж <html> і </html> тэгамі. Паміж <head> and </head> знаходзіцца розная інфармацыя, якая не адлюстроўваецца ў самым дакуменце. Напрыклад там утрымоўваецца загаловак дакумента. Пазней мы дадамо туды і сувязь з CSS файлам.
Тэг <body> гэта месца змесціва дакумента. У прынцыпе, усё што знаходзіцца ўсярэдзіне гэтага тэга за выключэннем тэксту паміж <!-- і -->, які з'яўляецца каментарамі, будзе выведзена на экран. Каментар браўзарам ігнаруецца.
Тэг <ul> у нашым прыкладзе задае адлюстраванне “неўпарадкаванага спісу” (Unordered List), г.зн. спісу, элементы якога непранумараваны. Тэгі <li> пачынаюць “элементы спісу” (List Item). Тэг <p> з'яўляецца “параграфам”. А тэг <a> - “якар” (Anchor), з дапамогай якога ствараюцца гіперспасылкі.
Код HTML у рэдактар KEdit.
Калі вы жадаеце пазнаць якія бываюць тэгі ў дужках <…>, тыя вы можаце вывучыць
Але спачатку пары слоў пра структуру нашай HTML старонкі.
Адзначце, што я не зачыніў “li” і “p” элементы. У HTML (але не ў XHTML), можна апускаць якія зачыняюць тэгі </li> і </p>, што я і зрабіў у дадзеным выпадку, для таго каб было прасцей тэкст. Але вы можаце дадаць іх, калі лічыце неабходным.
Давайце выкажам здагадку, што дадзеная старонка будзе адной са старонак Вэб сайта, які складаецца з некалькіх падобных старонак. Як мы і дамовіліся, гэта старонка будзе ўтрымоўваць спасылкі на іншыя старонкі нашага гіпатэтычнага сайта, унікальнае змесціва і подпіс.
Абярыце “Захаваць як…” ці “Save As…” з выпадальнага меню Файл ці File, пакажыце каталог для захавання файла (напрыклад Працоўны Стол) і захаваеце дадзены файл як “mypage.html”. Не зачыняйце рэдактар, ён нам яшчэ запатрабуецца.
(Калі вы выкарыстоўваеце TextEdit для Mac OS X версіі менш чым 10.4, вы ўбачыце опцыю "Don't append the .txt extension" у дыялогавым акне "Save as". Абярыце гэту опцыю, таму што імя файла “mypage.html” ужо складаецца з пашырэнне. Навейшыя версіі TextEdit заўважаць .html пашырэнне аўтаматычна.)
Далей, адкрыйце файл у браўзары. Вы можаце зрабіць гэта наступным чынам: знайдзіце файл вашым файлавым мэнэджарам (Правадыр, Windows Explorer, Finder or Konqueror) і пстрыкніце (аднойчы ці двойчы) на ім. Калі вы рабілі ўсё як апісана тое імя файла будзе “mypage.html”. У вас павінен адкрыцца файл у браўзары, усталяваным па змаўчанні. (Калі няма, то адкрыйце браўзар і перацягнеце файл у яго акно.)
Як Вы бачыце, старонка выглядае досыць сумна…
Магчыма, вы бачыце некаторы чорны тэкст на белым фоне, але гэта залежыць ад канфігурацыі браўзара. Для таго каб старонка выглядала больш стыльна, мы можам зрабіць вельмі лёгка адну простую рэч - дадаць колеры. (Пакіньце акно браўзара адкрытым - мы да яго яшчэ вернемся)
Мы пачнём са стыляў, убудаваных у HTML файл. Пазней, мы пакладзём CSS стылі і HTML разметку ў розныя файлы. Паасобнае захоўванне добра тым, што лягчэй выкарыстоўваць тыя ж самыя стылі для мноства HTML файлаў: Вам трэба напісаць CSS стылі толькі адзін раз. Але на гэтым кроку мы пакінем усё ў адным файле.
Нам трэба дадаць элемент <style> да HTML файлу. Вызначэнні стыляў будуць усярэдзіне гэтага тэга. Вяртаемся да рэдактара і дадаем наступныя пяць радкоў у загаловак HTML кода паміж тэгамі <head> і </head>. Радкі, якія трэба дадаць вылучаны чырвоным (з 5-й па 9-ю).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
<body>
[і г.д.]
Першы радок кажа браўзару пра тое, што гэта табліца стыляў і што яна напісана на CSS (“text/css”). Другі радок кажа, што мы ўжываем стыль да элемента “body”. Трэцяя ўсталёўвае колер тэксту ў пурпурны, а наступная ўсталёўвае колер фону ў жоўта-зялёнае адценне.
Табліцы стыляў CSS ствараюцца паводле правілам. Кожнае правіла складаецца з трох частак:
Наш прыклад паказвае што правілы могуць быць скамбінаваны. Мы ўсталявалі дзве ўласцівасці, гэтак жа мы маглі задаць іх паасобна:
body { color: purple }
body { background-color: #d8da3d }
але паколькі абое правілы ставяцца да body мы запісалі “body” адзін раз і змясцілі ўласцівасці і значэнні разам. Для атрымання большай інфармацыі пра селектары гледзіце з Lie & Bos.
Фон элемента body гэтак жа з'яўляецца фонам цэлага дакумента. Мы відавочна не прызначылі іншым элементам (p, li, address…) фону, так што па змаўчанні ў іх яго няма (ці ён празрысты). Уласцівасць 'color' усталёўвае колер тэксту элемента body, але ўсе астатнія элементы ўсярэдзіне body успадкоўваюць гэты колер, пакуль для іх не зададзены іншы ў выглядзе іншага правіла. (Мы дадамо іншыя колеры пазней.)
Зараз захаваеце гэты файл (выкарыстоўвайце каманду “Захаваць” ці “Save” з файлавага меню) і пераключыцеся зваротна ў браўзар. Калі вы націснеце кнопку “абнавіць” , той малюнак зменіцца з “сумнай” старонкі на размалёваную (але ўсё яшчэ аднастайную) старонку. Акрамя спасылак зверху, увесь тэкст павінен быць пурпурны на жоўта-зялёным фоне.
Зараз браўзар паказвае старонку да якой мы дадалі колер.
У CSS можна задаваць колеры некалькімі спосабамі. Наш прыклад паказвае два з іх: па імі
(“purple”) і па шаснаццатковым кодзе
(“#d8da3d”). Існуе парадку 140 імёнаў кветак і 16 шаснаццатковых значэнняў. тлумачыць дэталі адносна гэтых кодаў.
Яшчэ адна рэч якую можна зрабіць - шрыфтавая разнастайнасць розных элементаў на старонцы. Давайце напішам шрыфтам “Georgia” увесь тэкст, выключаючы загалоўкі, якія мы напішам “Helvetica.”
Паколькі ў Web ніколі нельга быць цалкам упэўненым у тым, якія шрыфты ўсталяваны на кампутарах наведвальнікаў, мы дадамо альтэрнатыўныя спосабы адлюстравання: калі Georgia не знойдзена, то мы будзем выкарыстоўваць Times New Roman ці Times, а калі і ён не знойдзены, то браўзар можа ўзяць любы шрыфт Калі адсутнічае Helvetica, то мы можам паспрабаваць выкарыстоўваць Geneva, Arial ці SunSans-Regular паколькі яны вельмі падобныя па напісанні, ну а калі ў карыстача няма такіх шрыфтоў, то браўзар можа абраць любы іншы шрыфт без засечак.
У тэкставым рэдактары дадайце наступныя радкі (радкі 7-8 і 11-13):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[і г.д.]
Калі вы захаваеце файл ізноў і націснеце “абнавіць” у браўзары, то ў вас павінны быць розныя шрыфты ў загалоўках і ў тэксце.
Цяпер шрыфт загалоўкаў і асноўнага тэксту адрозніваецца.
Спіс наверсе HTML старонкі ўяўляе з сябе навігацыю па сайце. Мноства сайтаў маюць навігацыйнае меню ўгары старонкі ці па баках ад змесціва. Наша старонка таксама не будзе выключэннем. Мы змесцім меню злева, таму што гэта некалькі прывабней, чым наверсе.
Навігацыя ўжо на старонцы. Гэта спіс <ul> угары. Спасылкі ў ім не працуюць, таму што наш “сайт” пакуль што складаецца толькі з адной старонкі, але гэта ўсё роўна ў дадзены момант. Вядома ж, на сапраўдным сайце не павінна быць непрацуючых спасылак.
Нам трэба перамясціць спіс налева і ссунуць астатняе змесціва трохі направа, каб стварыць прастору для яго. Уласцівасці CSS якія мы будзем выкарыстоўваць для гэтага - 'padding-left' (для зруху тэксту) і 'position', 'left' і 'top' (для зруху меню).
Ёсць і іншыя шляхі. Калі вы пашукаеце тэрміны “слупок” ці “вёрстка” на старонцы , вы знойдзеце некалькі гатовых да выкарыстання шаблонаў. Але для нашых мэт спатрэбіцца і такі.
У акне рэдактара дадайце наступныя радкі да HTML файлу (радкі 7 і 12-16):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[і г.д.]
Калі вы зноў захаваеце файл і абновіце яго ў браўзары то спіс спасылак атрымаецца ў вас злева ад асноўнага тэксту. Гэта ўжо глядзіцца цікавей, ці не так?
У адрозненні ад папярэдняга файла, у гэтым галоўны тэкст перамясціўся направа а навігацыя налева
Уласцівасць 'position:
absolute' кажа што элемент ul размешчаны незалежна ад любога тэксту які папярэднічаў ці будзе наступным за гэтым элементам, а
ўласцівасці 'left' і 'top' пазначаюць гэта размяшчэнне. У нашым выпадку гэта 2em
зверху і 1em ад левага краю акна.
'2em' пазначае 2 разу па адлегласці, роўнаму памеру бягучага шрыфта. Г.зн., калі меню адлюстроўваецца шрыфтам у 12 пунктаў, то 2em будзе ўраўноўвацца 24 пунктам. `em` вельмі карысная адзінка вымярэння ў CSS, паколькі можа адаптоўвацца аўтаматычна да шрыфта, выкарыстоўванаму браўзарам. Большасць браўзараў маюць магчымасць змяняць памеры шрыфта: вы можаце паспрабаваць павялічыць ці паменшыць памер і ўбачыць, што меню будзе змяняцца ў залежнасці ад памеру шрыфта, чаго б не здарылася, калі б мы паказалі водступ у пікселях
Навігацыоннае меню ўсё яшчэ па-ранейшаму выглядае як спіс, замест меню. Давайце які стылізуецца яго. Мы прыбяром маркеры спісаў і перамесцім элементы налева, дзе былі маркеры. Гэтак жа мы намалюем кожны элемент спісу на белым фоне ў сваім чорным квадраце (навошта? проста так, таму што можам).
Мы гэтак жа не сказалі якімі павінны быць колеры спасылак, так што давайце дадамо і гэта ўласцівасць: сінімі будуць спасылкі якія карыстач яшчэ не глядзеў, пурпурнымі - тыя якія ён ужо наведваў. (радкі 13-15 і 23-33):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>
<body>
[etc.]
Звычайна браўзары вылучаюць гіперспасылкі колерам і падкрэсленнем. Звычайна, колеры
падобныя на тыя, што мы паказалі: сінія для спасылак якія карыстач яшчэ не адкрываў (ці адкрываў доўгі час назад), пурпурныя для старонак, якія ён ужо бачыў.
У HTML гіперспасылкі ствараюцца тэгамі <a> таму для ўказання колеру нам трэба стварыць правіла ў CSS для “a”. Для таго, каб адрозніваць наведаныя і ненаведаныя спасылкі,
CSS падае два “псеўда-класа” (:link і :visited). Яны завуцца
“псеўда-класамі” для адрознення ад
HTML атрыбутаў, якія паказваюцца ў HTML напроста, г.зн. у нашым выпадку
class="navbar".
Апошнім даданнем да нашай табліцы стыляў стане гарызантальная паласа для падзелу тэксту і подпісы знізу. Мы выкарыстоўваем уласцівасць 'border-top' для таго каб дадаць перарывістую лінію над элементам <address> (радкі 34-37):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>
<body>
[і г.д.]
Зараз наша афармленне скончана. Давайце вынесем табліцу стыляў у асобны файл, каб астатнія файлы маглі выкарыстоўваць тую ж самую табліцу стыляў, што і першы файл.
Цяпер у нас ёсць HTML файл з убудаванай табліцай стыляў. Але калі наш сайт будзе разрастацца, магчыма, нам запатрабуецца мноства старонак, якія выкарыстоўваюць адзін і той жа стыль афармлення. Ёсць метад лепей, чым устаўка табліцы ў кожную старонку - мы можам вынесці стылі ў асобны файл, на які будуць паказваць усе старонкі. Для стварэння асобнага файла табліцы стыляў нам патрэбен іншы пусты тэкставы дакумент. Вы можаце абраць пункт “Новы” з меню "Файл" у рэдактары , для стварэння пустога файла. (Калі вы выкарыстоўваеце TextEdit, не забудзьцеся зрабіць яго тэкставым ізноў, выкарыстоўваючы меню Format.)
Затым выражце і ўстаўце ўсё змесціва ўсярэдзіне <style> з HTML у гэта новае акно. Не капіюйце элементы разметкі <style> і </style>. Яны прыналежаць HTML коду, а не CSS. У новым акне ў вас зараз павінен быць поўная табліца стыляў:
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
Абярыце “Захаваць як…” з меню "Файл", пераканаецеся што вы ў той жа дырэкторыі/тэчцы што і файл mypage.html, і захаваеце табліцу стыляў пад імем “mystyle.css”.
Зараз вярніцеся да HTML коду. Прыбярыце ўсё змесціва ад <style> да </style> улучна і заменіце прыбранае элементам <link> як паказана (радок 5):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> [etc.]
Такая канструкцыя скажа браўзару пра тое, што табліца стылі размяшчаецца ў файле пад назвай “mystyle.css”, і паколькі дырэкторыя не згадана, браўзар будзе шукаць гэты файл там жа, дзе ляжыць HTML файл.
Калі вы захаваеце файл і абновіце яго ў браўзары, тое не павінна адбыцца ніякіх змен: старонка па ранейшым выкарыстоўвае тое ж афармленне што і ў мінулы раз, але гэтым разам афармленне захоўваецца ў вонкавым файле.
Канчатковы рэзультат
Наступны крок - пакласці абодва файла mypage.html і mystyle.css на ваш сайт. (Вядома, вы можаце захацець злёгку змяніць іх перш…) Як пакласці файлы на сайт залежыць ад вашага інтэрнэт правайдара.
Для ўводзін у CSS, гледзіце Lie & Bos ці .
Іншая інфармацыя, уключаючы большая колькасць урокаў можа быць знойдзена ў частцы .