CSS (Cascading Style Sheets) – kalba, skirta nusakyti kita struktūrine kalba aprašyto dokumento vaizdavimą. Dažniausiai CSS aprašomas html dokumentų pateikimas, tačiau ją galima taikyti ir įvairiems kitiems XML dokumentams (tame tarpe SVG ir XUL).
Daugiau teorijos rasite paspaude čia.
Susipažinę, lekiame prie rimtų dalykų. Dauguma tikriausiai galvojote, kad dizainą į html galima sukoduoti tik su <table></table>. Bet tai netiesa, iš esmės yra įvairiausių būdų, o vieną iš jų pasakoju jums. Tai yra CSS.
#Kaip koduojamas CSS?
Dažniausiai programeriai koduoja jį atskirame .css faile, jį užvadinti galima stilius.css, bet geriausiai style.css. Susikuria atskirą failą style.css nuo html indexo. Pradedame style.css failo kodavimą:
- Kodas: Pasirinkti visus
html {
margin: 0;
padding: 0;
}
Tai pradžia viso kodo. Įdomu ką aš darau čia? O gi apipavidalinu visą html stilių. Į html apipavidalinimą surašius CSS koduotės, kurias naršyklės nuskaito atitinkamai, kokios jos yra. Šiuo atveju aš įrašiau "margin: 0", tai reiškia, kad html (puslapis) iš išorės nebus patrauktas. "padding: 0", tai reiškia, kad html (puslapis) nebus iš vidaus nustumtas.
Toliau aprašome body.
- Kodas: Pasirinkti visus
body {
font-family: Tahoma;
font-size: 11px;
color: #000000;
background-color: #ffffff;
background-image: url('http://imagination.lt/01.png');
background-repeat: no-repeat;
}
Bodyje visada aprasome defult fontą, jo dydį (font-size: 11px;), rūšį (font-family: Tahoma;), spalvą (color: #000000;). Toliau būtinai aprašome backgroundą, kitaip jis pagal nutylėjima bus baltas. Jo spalvą (background-color: #ffffff;), galbūt bg darysit iš img (background-image: url('http://imagination.lt/01.png');), būtina nurodyti "background-repeat: no-repeat;", jei naudojate bg img.
Štai ir viskas, aprašėme style.css. Dabar beliko html dokumente nurodyti, kur yra style.css, su šiuo kodu:
- Kodas: Pasirinkti visus
<link rel="stylesheet" type="text/css" href="style.css">
Jį būtina įrašyti tarp <head></head>. Štai ir viskas. Html sujungtas su style.css ir dabar naršyklė žiūrės į style.css, kaip apibūdino html ir body.
#O būtinas tas style.css? Gal tiesiog galima būtų ji kur nors patalpinti html?
Žinoma, kad galima. Kodas atrodytų taip:
- Kodas: Pasirinkti visus
<style type="text/css">
html {
margin: 0;
padding: 0;
}
body {
font-family: Tahoma;
font-size: 11px;
color: #000000;
background-color: #ffffff;
background-image: url('http://imagination.lt/01.png');
background-repeat: no-repeat;
}
</style>
Jį reikia talpinti tarip <head></head>.
Kitoje pamokoje supažindinsiu su <div></div> tagais. Ir kaip jie apipavidalinami style.css faile. Ir žadu įmesti du paaiškinimus, ką daro vienas ir kitas css kodas.
P.S. Jei patiko ši pamoka, kitą paruošiu greičiau.
