Lietuviškas vertimas "Starting with HTML + CSS"
Originali versija: http://www.w3.org/Style/Examples/011/firstcss
Aktuali - išversta - versija: http://www.css-styles.lt/Style/Examples/011/firstcss
Vertejas: Dennis Loob

Didžiai gerbiamas šio dokumento skaitytojau – prašau atkreipkite demesi i tai, kad cia pateikti puslapiai yra oficialiu W3C tekstu vertimas. Originalus tekstai yra apsaugoti autoriaus teisemis, todel atkreipkite demesi i nuorodas dokumento originale. Atsakomybe del vertimu prisiima vien tik vertejas. Mes neatsakome už galimas vertimo klaidas, nes tik W3C originalas anglu kalba yra vienintelis leistinas ir teisetas dokumentas. Aciu jums už parama t-shirt gestalten. Vertejo komentarai yra pažymeti ir yra apsaugoti vertejo autorine teise. Jie nera originalaus angliško dokumento sudetine dalis.


CSS vadovelis
darbo su HTML + CSS pradžia

Turinys

Šis trumpas vadovelis skirtas žmonems, kurie nori pradeti naudoti CSS, bet kurie anksciau niekada nekure CSS stiliaus lapo.

Apie CSS vadovelyje nera daug aiškinama. Jame tik aiškinama, kaip sukurti HTML faila, CSS faila ir kaip pasiekti, kad jie veiktu kartu. Po to, jei norite i HTML ir CSS failus prideti papildomai savybes, jus galite pasiskaityti bet kokius kitus vadovelius other tutorials. Arba jus galite nuspresti dirbti su išskirtuoju HTML arba CSS redaktoriumi HTML or CSS editor, su kuriuo jus galite sukurti sudetingas svetaines.

Vadovelio pabaigoje jus busite suformaves HTML faila, kuris atrodys panašiai:

[Nuoroda i galutini HTML puslapi]

Suformuotas HTML puslapis, su spalvomis ir išplanavimu, visas jis padarytas su CSS.

Atsiminkite, aš netvirtinu, kad jis nuostabus ?

Alert! Advanced: Taip atrodancios sekcijos yra nebutinos. Jose patalpinti kai kurie papildomi šiame pavyzdyje naudojamu HTML ir CSS kodu paaiškinimai. Pradžioje esantis “alert!” (“Demesio!”) ženklas rodo, kad tai sudetingesne medžiaga nei likusioji teksto dalis.

1 žingsnis: HTML formavimas

Šio vadovelio tikslais, aš siulyciau jums naudoti tik paprasciausius programinius irankius. Pavyzdžiui, puikiausiai tiks Notepad (Windows sistemoje), TextEdit (Mac sistemoje) arba KEdit (KDE aplinkai). Kai suprasite principus, jus gal panoresite dirbti su sudetingesniais programiniais irankiais ar net su komercinemis programomis, pavyzdžiui, su Style Master, Dreamweaver ar GoLive. Bet kuriant savo pirmaji CSS stiliaus lapa, pasistenkite, kad per didesnis skaicius išvystytu programines irangos savybiu neblaškytu jusu demesio.

Nedirbkite su tekstu procesoriaus, pavyzdžiui, Microsoft Word ar OpenOffice. Paprastai su jais sukuriami failai, kuriu Web naršykle neskaito. HTML ir CSS atveju mums reikia paprastu, grynojo teksto ('plain text') failu.

1 žingsnis - atidarote savo tekstu redaktoriu (Notepad, TextEdit, KEdit ar bet koki kita jusu megstama redaktoriu), pradedate nuo tušcio lango ir ivedate ši teksta:

<!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&hellip;

<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>

Iš tikruju, teksto vesti jums nebutina: jus galite ji nukopijuoti iš šio Web puslapio i redaktoriu.

(Jeigu dirbate su TextEdit Mac sistemoje, neužmirškite nurodyti TextEdit programai, kad tai iš tikruju grynasis tekstas - nueikite i Format meniu ir pasirinkite “Make plain text” (“Daryti grynaji teksta”).)

Alert! Advanced: Pirmojoje aukšciau esancio HTML failo eiluteje naršyklei nurodoma, kokio tipo yra šis HTML failas (DOCTYPE - reiškia "dokumento tipas"). Šiuo atveju tai HTML 4.01 versija.

Žodžiai tarp < ir > vadinami gairemis ('tags') ir, kaip matote, dokumentas yra talpinamas tarp <html> ir </html> gairiu. Tarp <head> ir </head> gairiu numatyta vieta ivairios rušies informacijai, kurios ekrane nesimato. Iki šio momento cia nurodytas dokumento pavadinimas, bet veliau mes cia taip pat pridesime CSS stiliaus lapa.

Gaire <body> nurodo vieta, kur bus talpinamas faktiškas dokumento tekstas. Iš principo, ekrane bus atvaizduojama visa šioje vietoje esanti informacija, išskyrus teksta tarp <!-- ir -->, kuris yra musu paciu komentaras. Naršykle ši teksta ignoruos.

Iš pavyzdyje naudojamu gairiu, <ul> nurodo nesurušiuoto sarašo (“Unordered List”), t.y., sarašo, kuriame elementai nera sunumeruoti, pradžia. Gaire <li> nurodo sarašo elemento (“List Item”) pradžia. Gaire <p> reiškia paragrafa (“Paragraph”). Gaire <a> reiškia inkara (“Anchor”), t.y. tai, kas sukuria hipersaita.

the HTML source shown inside KEdit

KEdit redaktorius rodo HTML išeitini teksta.

Alert! Advanced: Jei norite sužinoti, ka reiškia vardai tarp <…>, kaip tik tiktu pradeti nuo skyriaus "Darbo su HTML pradžia" (Getting started with HTML). Taciau cia pateikiame kelis žodžius apie musu pavyzdinio HTML puslapio struktura.

Verta pažymeti, kad aš neuždariau “li” ir “p” elementu. HTML atveju (bet ne XHTML) leidžiama praleisti </li> ir </p> gaires, ka aš ir padariau, nes tai leidžia šiek tiek lengviau skaityti teksta. Taciau, jei norite, šias gaires jus galite prideti.

Tarkime, kad tai bus vienas puslapis žiniatinklio svetaineje, kurioje bus keli panašus puslapiai. Kaip tai yra iprasta dabartiniams žiniatinklio puslapiams, šis puslapis turi meniu, kuris ji susieja su kitais hipotetines svetaines puslapiais, koki tai unikalu turini ir paraša.

Dabar iš File meniu pasirinkite “Save As…” (“Išsaugoti kaip…”), pereikite i kataloga/aplanka, kuriame jei norite patalpinti faila (galima pasirinkti ir "Desktop" - darbalaukis, t.y. monitoriaus ekrana) ir išsaugoti faila su vardu “mypage.html”. Redaktoriaus kol kas neuždarykite, mums jo dar reikes.

(Jeigu jus dirbate su TextEdit Mac OS X operacineje sistemoje su versija ankstesne už 10.4, "Save as" dialoge jus pamatysite pasirinkima "Don't append the .txt extension" ("Nepridekite .txt pletinio"). Pasirinkite šia opcija, nes failo varde “mypage.html” pletinys .html jau yra suformuotas. Naujesnese TextEdit redaktoriaus versijose .html pletinys bus nustatomas automatiškai.)

Dabar iš naršykles atidarykite faila. Tai galite atlikti tokiu budu: su savo failu tvarkymo programa (Windows Explorer, Finder ar Konqueror) suraskite faila ir spustelekite arba du kartus spustelekite ant “mypage.html” failo. Jis turetu atsidaryti jusu numatytojo žiniatinklio naršykleje. (Jeigu failas neatsidaro, atidarykite savo naršykle ir nutempkite faila i ja.)

Galite pastebeti, kad kol kas puslapis atrodo gana nuobodžiai...

2 žingsnis: Keliu spalvu pridejimas

Galbut jus matote koki nors juoda teksta baltame fone, bet tai priklauso nuo to, kaip yra sukonstruota naršykle. Taigi, kad puslapis taptu stilingesnis, i puslapi mes lengvai galime prideti kelias spalvas. (Palikite naršykle atvira, mes su ja veliau dar dirbsime.)

Mes pradesime nuo HTML faile iterpto stiliaus lapo. Veliau mes patalpinsime HTML ir CSS atskiruose failuose. Naudoti atskirus failus patartina, nes taip lengviau naudoti ta pati stiliaus lapa daugeliui HTML failu: jums tereikes suformuoti stiliaus lapa viena karta. Taciau šiame žingsnyje mes tiesiog išlaikysime visa informacija viename faile.

I HTML faila mums reikia prideti <style> elementa. Stiliaus lapas bus patalpintas šiame elemente. Taigi, grižkite i redaktoriaus langa ir priekineje HTML failo dalyje pridekite žemiau nurodytas penkias eilutes. Eilutes, kurias reikia prideti, yra raudonos (5-9 eilutes).

<!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>
[etc.]

Pirmoje eiluteje nurodyta, kad tai yra stiliaus lapas ir kad jis irašytas CSS (“text/css”). Antroje eiluteje nurodyta, kad mes pridedame stiliu prie “body” elemento. Trecioje eiluteje tekstui nustatoma violetine spalva, o kitoje eiluteje fonui nustatoma žalsvai geltona spalva.

Alert! Advanced: Stiliu lapai CSS yra sudaromi iš taisykliu. Kiekviena taisykle sudaro trys dalys:

  1. selektorius ("selector") (šiame pavyzdyje: “kunas” (“body”)), kuris nurodo naršyklei, kokiai dokumento daliai galioja taisykle;
  2. savybe ("property") (šiame pavyzdyje savybemis yra 'spalva' ('color') ir 'fono spalva' ('background-color')), kuri nurodo, koks išplanavimo aspektas yra nustatomas;
  3. ir value ("value") ('violetine' ('purple') ir '#d8da3d'), kuri nustato stiliaus savybes verte.

Šiame pavyzdyje pademonstruota, kad taisykles galima apjungti. Mes nustateme dvi savybes, todel mums butu galeje prireikti dvieju atskiru taisykliu:

body { color: purple }
body { background-color: #d8da3d }

taciau, kadangi abi taisykles veikia "kuna" (body), mes rašome “body” tik viena karta ir apjungiame kartu savybes ir vertes. Daugiau informacijos apie selektorius galima rasti knygos Lie & Bos 2 skyriuje chapter 2.

Kuno elemento fonas taip pat bus viso dokumento fonas. Ne vienam iš kitu elementu (p, li, address…) mes aiškia forma nenurodeme jokio fono, todel pagal nutylejima šie elementai fono netures (arba: bus permatomi). Spalvos savybe 'color' nustato teksto spalva kuno elementui, taciau visiems kitiems kuno elementams bus priskirta ta spalva, jeigu tik ji nebuvo aiškia forma pakeista. (Mes pridesime kelias kitas spalvas veliau.)

Dabar išsaugokite ši faila (“Save” funkcija iš File meniu) ir grižkite i naršykles langa. Jeigu jus paspausite “Reload” (“Perkrauti”) mygtuka, ekrane vietoje “nuobodaus” puslapio pasirodys spalvotas (bet vis dar gana nuobodus) puslapis. Išskyrus saitu saraša ekrano viršuje, dabar turetumeme matyti violetini teksta žalsvai geltonos spalvos fone.

Screenshot of the colored page in Konqueror

Kaip naršykle parodys puslapi dabar, kai buvo pridetos kai kurios spalvos.

Alert! Advanced: Spalvas CSS galima nustatyti keliais budais. Šiame pavyzdyje pademonstruojami du tokie budai: pagal varda (“purple”) ir pagal šešioliktaini koda (“#d8da3d”). Egzistuoja maždaug 140 spalvu vardu, o šešioliktainiai kodai leidžia užkoduoti virš 16 milijonu spalvu. Stiliaus atspalvio pridejimas daugiau paaiškina apie šiuos kodus.

3 žingsnis: Šriftu pridejimas

Kitas lengvai atliekamas dalykas yra ivairiems puslapio elementams priskirti šiek tiek skirtingus šriftus. Taigi, tekstui nustatykime “Georgia” šrifta, išskyrus h1 antraštes teksta, kuriam priskirsime “Helvetica” šrifta.

Žiniatinklyje jus niekada negalite buti tikras, kokius šriftus jusu skaitytojai turi instaliave savo kompiuteriuose, todel mes numatome ir kai kurias alternatyvas: jeigu Georgia šrifto nera, vietoje jo taip pat tiks Times New Roman arba Times šriftas, o jeigu nebus ne vieno iš šiu šriftu, naršykle gali naudoti bet koki kita šrifta su serifs. Jeigu nera Helvetica šrifto, labai panašus savo forma yra Geneva, Arial ir SunSans-Regular šriftai, o jeigu nebus ne vieno iš šiu šriftu, naršykle gali pasirinkti bet koki kita šrifta be "serif" atributo.

Tekstu redaktoriuje lange pridekite žemiau nurodytas eilutes (7-8 ir 11-13 eilutes):

<!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>
[etc.]

Jeigu jus vel išsaugosite faila ir naršykleje paspausite “Reload” (“Perkrauti”) mygtuka, ekrane pamatysite, kad antraštes ir kito teksto šriftai yra skirtingi.

Screenshot with fonts added

Dabar pagrindinio teksto šriftas skiriasi nuo antraštes teksto šrifto.

6 žingsnis: Horizontalios eilutes pridejimas

Paskutinis pridejimas prie stiliaus lapo yra horizontali liniuote, skirianti teksta nuo parašo puslapio apacioje. Jeigu reikia prideti punktyrine linija virš <address> elemento (34-37 eilutes), mes naudosime atributa 'remelis-viršus' ('border-top'):

<!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>
[etc.]

Dabar musu stiliaus lapas yra užbaigtas. Toliau pažiurekime, kaip mes galime patalpinti stiliaus lapa atskirame faile, kad kiti puslapiai galetu bendrai naudoti ta pati stiliu.

7 žingsnis: Stiliaus lapo talpinimas atskirame faile

Dabar mes turime HTML faila su iterptiniu stiliaus lapu. Taciau, jeigu musu svetaine pleciasi, mes galbut noresime, kad ta pati stiliu naudotu daug puslapiu. Egzistuoja geresnis metodas, negu kopijuoti stiliaus lapa i kiekviena puslapi: jeigu mes patalpiname stiliaus lapa atskirame faile, ji naudoti gali visi puslapiai.

Norint sukurti stiliaus lapo faila, reikia sukurti kita tušcia teksto faila. Jei norite sukurti tušcia langa, redaktoriaus lange iš File meniu jus galite pasirinkti “New” (“Naujas”). (Jeigu jus dirbate su TextEdit redaktoriumi, neužmirškite iš Format meniu dar karta patvirtinti, kad tai yra grynojo teksto failas.)

Dabar iš HTML failo i naujaji langa perkelkite visa informacija, kuri yra <style> elemente. Paciu <style> ir </style> gairiu nekopijuokite. Jos priklauso ne CSS, bet HTML. Naujajame redaktoriaus lange jus dabar turesite pilna stiliaus lapa:

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 }

Iš File meniu pasirinkite “Save As…”, isitikinkite, kad jus esate tame paciame kataloge/aplanke kaip ir mypage.html failas, ir išsaugokite stiliaus lapa su “mystyle.css” vardu.

Dabar grižkite i langa su HTML kodu. Pašalinkite viska nuo <style> gaires iki ir iskaitant </style> gaire, ir pakeiskite ji <link> elementu, kaip tai parodyta žemiau (5 eilute):

<!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.]

Tokiu budu naršyklei bus nurodyta, kad stiliaus lapas yra faile su vardu “mystyle.css”, ir kadangi nera nurodyta jokio katalogo, stiliaus lapo naršykle ieškos tame paciame kataloge, kuriame ji surado HTML faila.

Jeigu jus išsaugosite HTML faila ir ji perkrausite naršykleje, jus neturetumete pamatyti jokiu pokyciu: puslapis vis dar stilizuotas tokiu paciu budu, bet dabar stilius nuskaitomas iš išorinio failo.

Final result of styling

Galutinis rezultatas

Sekanciu žingsniu dabar butu abieju failu, mypage.html ir mystyle.css, patalpinimas jusu žiniatinklio svetaineje. (Na, gal jus iš pradžiu noresite juose ivesti šiokiu tokiu pakeitimu…) Taciau kaip jus tai atliksite, priklauso nuo jusu interneto paslaugu tiekejo.

Papildomai skaitykite

Ižangine informacija apie CSS galima rasti knygos Lie & Bos 2 skyriuje chapter 2 arba knygoje Dave Raggett's intro to CSS.

Kita informacija, tame skaiciuje daugiau vadoveliu, galima rasti "Mokomes CSS" Learning CSS tinklalapyje.

CSS Valid
CSS!Valid HTML 4.0!

Bert Bos, CSS kontaktas
Created 5 Apr 2004. Atnaujinta $Date: 2009/07/22 13:22:14 $ GMT

IMPRESSUM Mes rekomenduojame šį įvykį puslapį, kuris buvo sukurtas CSS ir atitiktis W3org

Geras pavyzdys, CSS programavimo Flash - gerai atitinka CSS ir W3org puslapyje..menininkas