Praneškite apie mus:


CSS kalbos įvadas

0

HTML kalba atsako į klausimą Ką atvaizduoti?, tuo tarpu CSS - Kaip atvaizduoti?. Daugelis seniau naudojamų HTML žymių, kurios buvo skirtos stiliams nurodyti yra nebenaudojamos, nes jas pakeičia CSS stilių taisyklės.



  • CSS - kaskadiniai stiliaus lapai (angl. Cascading Style Sheets)
  • CSS nurodo kaip atvaizduoti HTML elementus
  • CSS taisyklės gali būti saugomos atskiruose failuose su plėtiniu *.css ir įtrauktos į html failą, parašytos tiesiai į html failą žymoje <style> arba į html žymos atributą style
  • CSS stiliaus aprašai pridėti naudoti nuo HTML 4.0 versijos
  • Visos dabartinės naršyklės palaiko CSS stilių failus ir CSS taisykles, tačiau kalbai atsinaujinant kai kurios naršyklės nespėja to padaryti ir kyla problemų su palaikymu, todėl patartina savo puslapius testuoti keliose skirtingose naršyklėse

Ką jau turėtumėte mokėti prieš pradedant mokytis CSS?

CSS taisyklių galimybės

Su CSS taisyklėmis galime nurodyti visą puslapio dizainą. Įvairius rėmelius, jų storius, spalvas. Tekstų šriftus, spalvingumą, išdėliojimą. Įvairius atstumus tarp html elementų ir kitą dizainui skirtą informaciją.

Kodėl darant puslapį reiktų naudoti CSS?

CSS atsiradimas buvo didžiulis žingsnis internetinio dizaino kūrime, nes ši technologija leidžia apibrėžti stilių bet kokiam HTML elementui ir jį priskirti prie tiek puslapių, kiek norima. Jei norit pakeisti viso puslapio struktūrą užtenka pakoreguoti stiliaus failą ir visa puslapio išvaizda atsinaujins. Tai sutaupo daug laiko, kodas tampa lengviau redaguojamas, lengviau padaryti puslapio dizaino pakeitimus.

Naudojant išorinius CSS aprašus nesusidarko HTML kodas, todėl kodas tampa lengviau skaitomas. Paieškos sistemoms patinka tekstas, bet nepatinka kai puslapio didžiąją dalį sudaro kodas, o ne žmogui skaitomas tekstas, todėl reikėtų stengtis į patį puslapį nerašyti css taisyklių, o jas įtraukti pasinaudojant <link> žyme.

CSS aprašų loginė struktūra

Stilių galima aprašyti:

  1. Atskiruose stiliaus failuose su plėtiniu *.css ir tada įtraukti stilių failą į puslapį
  2. Viduje html failo pasinaudojant <style> žyme
  3. Viduje html elemento per atributą style

Vienu metu gali būti naudojami visi būdai, taip pat galima naudoti kelis išorinius failus viename HTML dokumente.

Kuris stilius bus naudojamas, jei tam pačiam elementui bus aprašai skirtingose vietose?

Stiliai naršyklėje taikomi tokiais prioritetais:

  1. Pačios naršyklės stiliaus taisyklės pagal nutylėjimą (angl. by default)
  2. Išoriniuose stiliaus failuose esančios taisyklės
  3. Viduje html elemento <style> esančios taisyklės
  4. Viduje html žymos, atribute style, esančios taisyklės

Kitaip tariant, naršyklė kraudama puslapį pirmiausia pažiūri į naršyklės nustatymuose esančius stiliaus aprašymus, tada į išorinius failus, jei juose randa aprašus skirtus tam pačiam elementui, kaip kad buvo rasta pagal nutylėjimą, tai naudoja tuos, kuriuos rado išoriniuose failuose ir žiūri toliau, ar yra kokių nors HTML elemento <style> taisyklių, jei yra - naudoja juos. Galiausiai yra patikrinami kiekvieno elemento atributai, jie yra paskutiniai, kurie gali pakeisti prieš tai esančius aprašymus.

Praktinis herarchijos pavyzdys

Sukuriame paragrafą su html žyme <p>

html failo kodas:

1
2
3
<p>
paragrafo tekstas
</p>

Kaip matome kol kas nėra jokių stiliaus taisyklių, tik grynas html kodas. Tokiu būdu parašytą tekstą naršyklė atvaizduos pagal savo pačios parametrus. Tikėtina, kad tai bus Serif šrifto ir 16px dydžio tekstas.

Pridėkime išorinį stiliaus failą stiliai.css:

1
2
3
4
5
6
7
p {
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
font-style:italic;
font-weight:bold;
color:#F00;
}

html failo vidus su įtrauktu stiliaus failu:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<link rel="stylesheet" type="text/css" href="stiliai.css" />
</head>
<body>

<p>
Pargrafo tekstas
</p>

</body>
</html>

Dabar naršyklė atvaizduos tą patį paragrafą, tačiau jame esančio tekstas bus Verdana šrifto, jei vartotojo kompiuteryje nebus Verdana šrifto, tada jam rodys Geneva šriftu, jei ir jo neturės - tada sans-serif. Tekstas - 14 pikselių dydžio, pasviręs, pajuodintas ir raudonos spalvos.

Dabar html faile įterpsim <style> žymę ir padubliuosime keletą taisyklių:

Paliksime tą patį stilių failą stiliai.css:

1
2
3
4
5
6
7
p {
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
font-style:italic;
font-weight:bold;
color:#F00;
}

html failo vidų pakeisime įtraukiant <style> žymę:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<link rel="stylesheet" type="text/css" href="stiliai.css" />
<style type="text/css">
p {
font-size:12px;
font-style:normal;
font-weight:normal;
}
</style>
</head>
<body>

<p>
Pargrafo tekstas
</p>

</body>
</html>

Dabar naršyklė atvaizduos paragrafą su tekstu, kurio tekstas bus Verdana šrifto, jei vartotojo kompiuteryje nebus Verdana šrifto, tada jam rodys Geneva šriftu, jei ir jo neturės - tada sans-serif. Tekstas jau bus 12 pikselių dydžio, nepasviręs, nepajuodintas ir raudonos spalvos. Kaip matote iš pradžių buvo pritaikytos išorinio failo taisyklės, paskui <style> žymoje esančios.

Pabaigai dar įterpsime style parametrą į žymę <p>

Stilių failas išlieka toks pats:

1
2
3
4
5
6
7
p {
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
font-style:italic;
font-weight:bold;
color:#F00;
}

html failą papildome atributu style:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<link rel="stylesheet" type="text/css" href="stiliai.css" />
<style type="text/css">
p {
font-size:12px;
font-style:normal;
font-weight:normal;
}
</style>
</head>
<body>

<p style="color:#0F0; font-style:italic;">
Pargrafo tekstas
</p>

</body>
</html>

Dabar naršyklė atvaizduos paragrafą su tekstu, kurio tekstas bus Verdana šrifto, jei vartotojo kompiuteryje nebus Verdana šrifto, tada jam rodys Geneva šriftu, jei ir jo neturės - tada sans-serif. Tekstas bus 12 pikselių dydžio, pasviręs, nepajuodintas ir žalios spalvos.

Iš šių pavyzdžių sekos suprantame, kad iš pradžių tekstas buvo nepasviręs, kol nepridėjome css taisyklių, pridėjus jas išoriniame faile tekstas tapo pasviręs, jas antrą kartą aprašius <style> žymoje gavome vėl nepasvirusį, o galiausiai trečią kartą užrašius tą pačią taisyklę jau viduje <p> žymos gavome pasvirusį tekstą.

Taigi, kai jau supratote css kalbos pagrindines galimybes ir logiką, linkiu sėkmės mokantis toliau, jei kils klausimų galite rašyti konkrečios pamokos komentaruose arba paieškoti savo klausimo atsakymo forume atitinkamoje skitlyje.

Perskaityta: 6006 kartų

Lukas
Autorius: Lukas
El. paštas.: Šis el. pašto adresas yra apsaugotas nuo spam botų. Jum reikalingas įjungtas Javasctipt kad jį matytumėte
Manualai.lt tinklo autorius ir administratorius. VDU Energetikos Fizikos ir Verslo Informatikos studentas. LinkedIn
Raktažodžiai
pagrindai    css    įvadas   
Patinka straipsnis?
dalintis Facebook
dalintis MySpace
dalintis Twitter
Digg it
Komentarai

Komentarų nėra. Norėdami komentuoti turite prisijungti
CSS meniu
Naudingos nuorodos
Informacija ir viskas kas yra pateikta manualai.lt puslapiuose yra nemokama, tačiau, galite mus paremti per PayPal: