Pažintis su CSS
Jeigu jums kažkada yra tekę domėtis internetinių puslapių kūrimu, greičiausiai buvote susidūrę su sąvoka CSS.
Kas yra tie pakopiniai stiliai (CSS)? Trumpai tariant, CSS yra ne programavimo kalba, o aprašai, kuriais galima naršyklei nusakyti, kaip turi būti atvaizduojami elementai tinklalapyje.
Šiame straipsnyje supažindinsiu jus su CSS, parodysiu, kaip įterpti CSS kodą į HTML, kurti elementų stilistikos aprašus.
CSS kodo įterpimas
Įterpti CSS kodą galima keletu būdų.
Vidinis įterpimas
Šiuo atveju jums reikia įterpti kodą tarp žymių kiekviename (x)HTML faile, kuriame norėsite naudoti stilistiką.
<html>
<head>
<title>Puslapio pavadinimas</title>
<style type="text/css">
Čia talpinamas CSS kodas.
</style>
</head>
<body>
... puslapio turinys ...
</body>
</html>
Būtina prisiminti, kad naudojant šį metodą reikia įterpti <style type="text/css"></style> žymes
.Išorinis įterpimas
Šis metodas yra patogiausias ir populiariausias. Pirma pateiksiu pavyzdį, o vėliau paaiškinsiu priežastį.
<html>
<head>
<title>Puslapio pavadinimas<title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
... puslapio turinys ...
</body>
</html>
arba
<html>
<head>
<title>Puslapio pavadinimas<title>
<style type="text/css"> @import url('style.css') </style>
</head>
<body>
... puslapio turinys ...
</body>
</html>
Kaip matote, šiuo atveju CSS kodas yra įkeliamas iš kito failo (čia: style.css). Įkelti CSS failą galima dvejopai.
<link rel="stylesheet" type="text/css" href="style.css" />
arba
<style type="text/css"> @import url('style.css') </style>
Dabar pamąstykite, kodėl šis būdas yra patogiausias ir populiariausias? Įsivaizduokite, kad turite 3 skirtingus html failus. Visuose failuose reikalingas toks pat CSS kodas. Jeigu naudosite šį CSS kodo įterpimo metodą ir sumanysite pakeisti esamą kodą style.css faile, problemų nebus, kadangi visi 3 html failai naudos tą patį style.css CSS kodo failą. O jeigu jūs naudojote vidinį css kodo įterpimą? Pavyzdžiui, nusprendėte pakeisti teksto spalvą. Tada jums teks pakeisti css kodą visuose triejuose html failuose! Sakysite: „didelio čia daikto...”, o jeigu tokių html failų bus 20? 30? Manau, kad esmę supratote.
CSS kodo įterpimas HTML žymėse
Šis būdas yra pats paprasčiausias, tačiau gali sukelti didžiausius galvos skausmus. Panagrinėkime pavyzdį.
<html>
<head>
<title>Puslapio pavadinimas</title>
</head>
<body>
<h1 style="color: #666; font-size: 14px; border-bottom: 1px solid #666;">Antraštė</h1>
<br />
<h1>Antroji antraštė</h1>
</body>
</html>
Iš pavyzdžio matome, kad pirmajam h1 elementui yra individualiai priskiriamas CSS kodas. Tačiau atkreipkite dėmesį: antrajam h1 elementui CSS stilistika nebus priskirta. Visi galvos skausmai prasideda tada, kai prisireikia keisti CSS kodą kiekvienam elementui...
Pagrindinė CSS sintaksė
CSS kalbos sintaksė yra ganėtinai paprasta. Apačioje pateiktas standartinis aprašo trafaretas.
identifikatorius { savybė: reikšmė; }
Iš čia: identifikatorius - objektas, kuriam bus priskirta stilistika, savybė - jūsų norima CSS savybė, kurią priskirsite identifikatoriui, reikšmė - atitinkamos savybės reikšmė.
Žinoma, savybių gali būti ir daugiau, tačiau aprašymo idėja išlieka ta pati.
identifikatorius { sabybė1: reikšmė1; savybė2: reikšmė2; savybė3: reikšmė3; }
Dabar pagal šį trafaretą pabandykime sukurti tikrą CSS aprašą.
h1 { color: #FF0000; }
Matome, kad identifikatorius šiuo atveju yra HTML žymė <h1></h1>, o tai reiškia, kad CSS ieškos visų h1 elementų ir jiems pritaikys aprašytą stilistiką. Šiame pavyzdyje yra tik viena savybė — color, o jos reikšmė — #FF0000.
Color savybė nurodo teksto spalvą; #FF0000 yra HEX kodas, kuris nurodo spalvą, FF0000 atitinka raudoną spalvą.
Beje, spalvą galima nurodyti ne tik HEX kodine reiškme, tačiau ir žodžiais.
h1 { color: red; }
Tiek pirmame, tiek antrame pavyzdyje teksto spalva bus identiška.
Atributai class ir id
CSS aprašo identifikatorius gali būti ne tik HTML žymė, tačiau ir žymės atributų class ir id pavadinimai. Class identifikatorius atpažįstamas taip:
.identifikatorius { savybė: reiškmė; }
o id identifikatorius taip:
#identifikatorius { savybė: reikšmė; }
Manau, kad jums iškilo klausimas, kam reikalingi tokie identifikatoriai? Pateiksiu pavyzdį ir paaiškinsiu.
<... html kodas ...> <h1>Įprasta antraštė</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vulputate orci eu risus. Vivamus auctor. Sed vel metus nec massa tristique iaculis. Pellentesque mollis turpis pharetra metus. Vestibulum quis lorem. Vestibulum volutpat magna non lectus. Donec massa. Curabitur id urna.<p> <br /> <h1>Dar viena antraštė</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vulputate orci eu risus. Vivamus auctor. Sed vel metus nec massa tristique iaculis. Pellentesque mollis turpis pharetra metus. Vestibulum quis lorem. Vestibulum volutpat magna non lectus. Donec massa. Curabitur id urna.<p> <br /> <h1 class="juodas">Ypatinga antraštė</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vulputate orci eu risus. Vivamus auctor. Sed vel metus nec massa tristique iaculis. Pellentesque mollis turpis pharetra metus. Vestibulum quis lorem. Vestibulum volutpat magna non lectus. Donec massa. Curabitur id urna.<p> <... html kodas ...>
h1 { color: red; }
.juodas { color: black; }
Iš CSS kodo matome, kad visoms <h1></h1> žymėms yra nustatoma raudona teksto spalva, tačiau žymėje, kurios atributas class yra pavadintas „juodas”, taikoma .juodas identifikatoriaus aprašas. Šis aprašas nurodo, kad teksto spalva bus juoda. Taigi eilės tvarka pirmoji ir antroji antraštės bus raudonos, o trečioji — juoda.
Analogiškai veikia ir id atributo idendifikatorius:
<... html kodas ...> <h1 id="juodas">Antraštė</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vulputate orci eu risus.<p> <... html kodas ...>
#juodas { color: black; }
Iš šito išplaukia dar vienas klausimas — kuo skiariasi class nuo id? Pagrindinis skirtumas yra tas, kad class atributas tokiu pat pavadinimu HTML dokumente gali būti panaudotas daugybę kartų, o ID — tik vieną. Tai reiškia, kad ID atributai yra unikalūs ir dažniausiai naudojami dideliems blokams stilizuoti. Class atributas dažniau naudojamas tam tikrų teksto fragmentų, nuorodų, paveiksliukų, antraščių stilizavimui. Apačioje pateiktas pavyzdys.
<html>
<head>
<title>Puslapio pavadinimas</title>
</head>
<body>
<div id="meniu">
<ul>
<li><a href="#1">Pradinis</a></li>
<li><a href="#2">Straipsniai</a></li>
<li><a href="#3" class="paryskinta">Naujienos</a></li>
</ul>
</div>
<div id="tekstas">
<h1>Pirmojo teksto antraštė</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vulputate orci eu risus.<p>
</hr>
<h1 class="paryskinta">Antrojo teksto antraštė</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vulputate orci eu risus.<p>
</hr>
</div>
</body>
</html>
Įsivaizduokime, kad šiame HTML dokumente buvo įterptas CSS failas, kuriame yra toks kodas:
#meniu {
width: 450px;
height: 200px;
}
#tekstas {
width: 450px;
height: auto;
}
.paryskinta { font-weight: bold; }
Identifikatoriai #meniu ir #tekstas, žinoma, yra id atributai, o .paryskinta — klasė (angl. class). HTML kode matėte, kad class="paryskinta" buvo panaudota dviejuose skirtinguose elementuose <a></a> ir <h1></h1>.
Tų pačių CSS aprašų priskyrimas skirtingiems identifikatoriams
Pirmiausia peržvelkime tokį pavyzdį.
h1 {
color: white;
background-color: black;
padding-left: 3px;
padding-right: 3px;
padding-top: 2px;
padding-bottom: 2px;
margin: 4px;
}
h2 {
color: black;
background-color: white;
padding-left: 3px;
padding-right: 3px;
padding-top: 2px;
padding-bottom: 2px;
margin: 4px;
}
h3 {
color: blue;
background-color: black;
padding-left: 3px;
padding-right: 3px;
padding-top: 2px;
padding-bottom: 2px;
margin: 4px;
}
h4 {
color: white;
background-color: blue;
padding-left: 3px;
padding-right: 3px;
padding-top: 2px;
padding-bottom: 2px;
margin: 4px;
}
Kaip matote, visi identifikatoriai turi vienodas savybių padding-left, padding-right, padding-top, padding-bottom ir margin reikšmes. Argi tokio kodo rašymas neatrodo griozdiškai? Laimei, to galima išvengti.
h1, h2, h3, h4 {
padding-left: 3px;
padding-right: 3px;
padding-top: 2px;
padding-bottom: 2px;
margin: 4px;
}
h1 { color: white; background-color: black; }
h2 { color: black; background-color: white; }
h1 { color: blue; background-color: black; }
h1 { color: white; background-color: blue; }
Tas pats identifikatorius gali būti aprašomas daug kartų, tačiau plačiau apie tai neužsiminsiu (atminkite — tai pažintinis straipsnis!). Tai taip pat galioja class ir ID identifikatoriams.
Apibendrinimas
Jau pats pavadinimas byloja, kad šis straipsnis yra pažintinis. Iš tikrųjų viskam aprašyti vieno straipsnio neužtenka, todėl ateityje turėsite galimybę plačiau sužinoti apie tekstų, formų, nuorodų, antraščių, paveiksliukų, skirtukų, blokų stilizavimą, matavimo vienetus, aprašų paveldimumą, hierarchiją. Taip pat apžvelgsiu tinkamus ir netinkamus CSS kodo rašymo metodus.
Jeigu turite pasiūlymų ar klausimų, susisiekite su manimi. Iki kito karto!
2008-09-20 13:07:44
Gairės:
Šaunu!
Martyna
