2. Pakopiniai stiliai

Size: px

Start display at page:

Download "2. Pakopiniai stiliai"

Coleen Dorsey
6 years ago
Views:

1 1 2. Pakopiniai stiliai 2.1. Pakopiniai stiliai (CSS) Pakopinius stilius (Cascading Style Sheets; CSS) kaip ir HTML sukūrė bei kontroliuoja Pasaulinis hipertekstinės informacijos tinklo konsorciumas (World Wide Web Consorcium; W3C). Pakopiniai stiliai yra galinga tinklalapių formavimo priemonė. Beveik visas HTML dokumento vaizdas turėtų būti formuojamas naudojant pakopinius stilius. Kas yra pakopiniai stiliai CSS yra Cascading Style Sheets akronimas. Stiliai nurodo kaip atvaizduoti HTML elementus. Stiliai padėjo HTML 4.0 išspręsti problemą. Išoriniai pakopiniai stiliai gali sutaupyti daug jūsų laiko. Išoriniai pakopiniai stiliai saugomi CSS failuose. Stiliai išsprendžia didelę problemą HTML kalba iš pradžių neturėjo dokumento formatavimo gairių. HTML kalba aprašydavo tik dokumento turinį, pavyzdžiui: <h1>pagrindinė ANTRAŠTĖ</h1> <p>tekstas vienoje pastraipoje.</p> Kelios gairės, tokios kaip <font>, ir spalvų atributai įtraukti į HTML 3.2 specifikaciją tinklalapių kūrėjams sukėlė košmarą. Sukurti didelius tinklalapius, kuriuose šriftas ir spalvos buvo prirašomi kiekviename puslapyje, tapo ilgu ir sudėtingu procesu. Minėtai problemai išspręsti World Wide Web Consortium (W3C)

2 2 sukūrė pakopinius stilius (CSS). Pagal HTML 4.0, visas formatavimas gali būti perkeltas iš HTML dokumento į CSS failą. Šiandien visos naršyklės palaiko CSS. HTML ir CSS evoliucija Saityno technologijų laiko juosta: 1991 HTML 1994 HTML JavaScript 1996 CSS HTML CSS CSS 3

3 HTML XHTML AJAX 2006 XHTML HTML 5 Pakopinių stilių metodai Pakopinius stilius galima kurti trimis metodais: eilutės, įterptuoju, išoriniu. Visus juos galima naudoti kartu. Eilutės metodas <body style="background-color : gray; color : green; margin : 15px"> <div style="background: silver; border: dashed thick"> <h1 style="text-size : 140%; text-align : center"> <p style="margin : 20px; text-align : justify"> Įterptasis metodas HEAD dalyje apibrėžiami stiliai <style> body { background-color : gray; color : green; margin : 15px } div { background: silver; border-style: dashed; border-width: thick } h1 { text-size : 140%; text-align : center } p { margin : 20px; text-align : justify } </style>

4 4 Išorinis metodas Stilių sąrašas saugomas atskirame faile, pvz. stiliai.css : body { background-color : gray; color : green; margin : 15px } div { background: silver; border-style: dashed; border-width: thick } h1 { text-size : 140%; text-align : center } p { margin : 20px; text-align : justify } Tinklalapio HEAD dalyje įterpiamas kodas: <link rel="stylesheet" href="stiliai.css"> Sintaksė deklaracija deklaracija selektorius { savybė : reikšmė ; savybė : reikšmė ; } Pavyzdžiai: deklaracijų blokas body {color:black} p {text-align:center; color:red} p { text-align:center; color:black; font-family:arial; } Selektorių grupavimas Selektorius galima grupuoti, juos atskiriant kableliais: h1,h2,h3,h4,h5,h6 { color:green }

5 5 Originalios klasės Tos pačios ūšies HTML elementams galima suteikti skirtingus stilius. Tam naudojamas selektorius class : p.right {text-align:right} p.center {text-align:center} p.bold {font-weight:bold} ir <p class="right">ši pastraipa lygiuojama dešinėje.</p> <p class="center"> Ši pastraipa centruojama.</p> <p class="center bold">kelių klasių taikymas.</p> Klasė be kontekstinio selektoriaus.center {text-align:center} Nenurodant elemento rūšies, galima taikyti klasę įvairiems elementams: <h1 class="center"> Centruojama antraštė</h1> <p class="center"> Centruojama pastraipa.</p> Pseudoklasės Pseudoklasės skirtos toms gairėms, kurios nepatenka į vieną konkrečią kategoriją. Pavyzdžiui, tokia saito gairė, kuri turi keletą būsenų. Ją galima laikyti būsenų grupe, o ne gaire. Jos selektorius užrašomas naudojant dvitaškį, pavyzdžiui: a:link { color : blue } a:hover { color : lime } a:active { color : red } a:visited { color : pink } Pseudoelementai selector:pseudo-element {property:value} arba selector.class:pseudo-element {property:value}

6 6 Ypatingų požymių elementams input[type="text"] {background-color:yellow} sukuria stilių formos elementams, kurių tipas tekstinis, pavyzdžiui: <input type="text" /> id selektorius HTML elementams galima sukurti stilių naudojant id selektorių. Jis apibrėžiamas naudojant # (groteles). bus green : Žemiau sukurtas stilius bus taikomas elementui, kurio atributo id reikšmė #green { color : green } Pastraipai, kurios id yra para1 bus pritaikytas šis stilius: p#para1 { text-align : center; color : red } Pastaba. id pavadinimo nepradėkite skaitmeniu! Mozilla Firefox jo nesupras. CSS komentarai Komentaras pradedamas /* ir užbaigiamas */ : /* Tai yra CSS komentaras */ p { text-align:center; /* Čia dar vienas komentaras */ color:black; font-family:arial }

7 Reliatyvūs dydžiai Vienetas Pavadinimas Kas tai yra Pavyzdys em Em Santykis su naudojamo šrifto aukščiu 3em ex x-aukštis Santykis su naudojamo šrifto mažųjų 5ex raidžių aukščiu px taškelis Atitinka

7 7 Reliatyvūs dydžiai Vienetas Pavadinimas Kas tai yra Pavyzdys em Em Santykis su naudojamo šrifto aukščiu 3em ex x-aukštis Santykis su naudojamo šrifto mažųjų 5ex raidžių aukščiu px taškelis Atitinka monitoriaus ekrano taškus 125px Absoliutūs dydžiai Vienetas Pavadinimas Kas tai yra Pavyzdys pt punktas 72pt = 1 colis 12pt pc pika 1pc = 12pt 3pc mm milimetras 1mm = 0,24pc 25mm cm centimetras 1cm = 10mm 5.1cm in colis 1in = 2,54cm 8.25in Pakopinių stilių tikrinimas

8 Tinklalapio spalvos Spalvų galia RGB Spalva yra svarbi dizaino dalis. Parinkę tinkamą spalvų schemą savo svetainei, galite padaryti didelį poveikį nuotaikai, išvaizdai, pojūčiui. Pažvelkite į savo mėgstamas svetaines ir pagalvokite apie spalvų poveikį Jūsų įspūdžiui. Šviesios spalvos perteikia lengvesnius ir laimingesnius jausmus nei tamsios. Ir tamsias spalvas galima pritaikyti pagal svetainės paskirtį. Siekiant veiksmingai naudoti spalvas, turite suprasti, kaip jos veikia. Vaizduokliai sukuria spalvas derindami raudoną, žalią ir mėlyną šviesą, todėl dar vadinami RGB įrenginiais. Kiekviena spalva išreiškiama skaičiais nuo 0 iki 255. rgb(128, 0, 128) reiškia purpurinę spalvą sudarytą iš raudonos (128) ir mėlynos (128) spalvos. Šešioliktainiai skaičiai Šešioliktainė skaičiavimo sistema naudoja 16 skaitmenų, o ne 10, prie kurių mes įpratę. Papildomi 6 skaitmenys užrašomi raidėmis A, B, C, D, E, F. Dviem šešioliktainiais skaičiais galima užrašyti dešimtainius skaičius nuo 0 iki 255. Purpurinės spalvos šešioliktainis kodas yra # Spalvų vardai Oficialioje specifikacijoje įvardinta 16 saityno spalvų.

9 Šiuolaikinės interneto naršyklės atpažįsta 140 spalvų pagal jų pavadinimus. Saugių spalvų paletė Seniau, kai tik atsirado saitynas, dauguma vaizduoklių sugebėjo pateikti tik 256 spalvas, iš kurių tik 216 sutapo tarp Microsoft ir Macintosh sistemų. Šios 216 spalvų ir sudarė saugių spalvų paletę, skirtą tinklalapiams. Šiandien nėra jokios priežasties apriboti save šia palete, nes visi šiuolaikiniai monitoriai gali apdoroti milijonus spalvų. Spalvų kontrastai Apie 5% žmonių neskiria spalvų. Daltonikai nesugeba atskirti atspalvių tarp panašių spalvų. Parinkite savo tinklalapiams kontrastingas spalvas ypač fonui ir tekstui. 9 Alpha kanalas CSS3 leidžia naudoti alpha kanalą spalvos skaidrumui nustatyti. RGBA funkcijos pavyzdys: rgba(128, 0, 128, 0.5) Ši funkcija praskaidrina spalvą 50%. Ne visos naršyklės palaiko CSS3. Kuler io spalvų schemos Adobe Kuler yra nemokamas interneto išteklius, kuris leidžia dizaineriams pasiekti sukurtas spalvų schemas, kurių yra tūkstančiai. Šia paslauga galite pasinaudoti bet kuriuo metu, prisijungę prie interneto. Radę tinkamą spalvų derinį, matysite spalvų kodus, kuriuos panaudosite savo tinklalapiui. Nesunkiai pasikeisite norimą spalva bet kurioje spalvų schemoje.

10 Teksto spalva CSS savybė color skirta bet kurio elemento priekinio plano spalvai nustatyti. Praktiškai tik tekstas yra priekiniame plane, todėl ši savybė dažniausiai naudojama teksto spalvai nustatyti. Teksto spalva yra dalis dizaino, be to, užtikrinkite kontrastą tarp teksto ir fono spalvų. Jūs galite pritaikyti spalvą teksto blokams arba atskiriems žodžiams ar net simboliams. Fono spalva 10 Jūs galite pakeisti tinklalapio ar jo elementų fono spalvą naudodami CSS savybę background-color. Fono spalva turi sudaryti kontrastą teksto spalvai. Neparinkę savybei background-color reikšmės turėsite skaidrius elementus. Beveik kiekviena naršyklė nustato, kad esminė tinklalapio dalis būtų baltame fone. Jei norite naudoti baltą foną, galite nustatyti šią spalvą ir apsisaugoti nuo naršyklių, kurios gali turėti kitokius nustatymus.

11 2.3. Stačiakampio modelis Stačiakampio modelis traktuoja visus elementus puslapyje taip, tarsi aplink juos būtų nematomas stačiakampis.

11 Stačiakampio modelis Stačiakampio modelis traktuoja visus elementus puslapyje taip, tarsi aplink juos būtų nematomas stačiakampis. Komponentai, sudarantys stačiakampį: Turinys Vidinės paraštės Rėmeliai Išorinės paraštės Išorinės paraštės Išorinės paraštės nematomos (permatomos) Jos naudojamos tinklalapio elementų centravimui, tarpams tarp jų nustatyti Galima nustatyti kiekvieną paraštę atskirai ir skirtingų dydžių, pavyzdžiui: o margin-top:20px;

12 12 o margin-right:50px; o margin-bottom:10px; o margin-left:30px; arba dar paprasčiau: o margin: 20px 50px 10px 30px; Rėmeliai Rėmeliai sudaryti iš 4 kraštinių: viršutinės, dešiniosios, apatinės, kairiosios. Visos kraštinės gali būti skirtingos Rėmelio kraštines nusako trys savybės: o spalva o stilius o storis Rėmelio spalva Rėmelio spalva nurodoma CSS savybe border-color Skirtingas spalvas galima nurodyti savybėmis: o border-top-color o border-right-color o border-bottom-color o border-left-color Rėmelių stiliai Rėmelio stilių nurodo savybės border-style reikšmė Galimi 9 rėmelių stiliai

13 13 Rėmelio storis Rėmelio storį nurodo savybės border-width reikšmė, pavyzdžiui, borderwidth:5px; Skirtingi kraštinių storiai: border-top-width:2px; border-right-width:4px; border-bottom-width:8px; border-left-width:3px; sutrumpintai border-width: 2px 4px 8px 3px; Sutrumpintos rėmelio savybės Rėmelio savybes galima nurodyti sutrumpintai, pavyzdžiui: border: 3px solid blue; Šiuo atveju visos kraštinės bus to paties storio, to paties stiliaus ir spalvos. Galite nustatyti kiekvienos kraštinės savybes atskirai, pavyzdžiui: border-top: double 4px gray; border-bottom: green dashed 2px; CSS3 rėmeliai Naudodami CSS3 savybes galite sukurti efektingus rėmelius: o suapvalintais kampais o su šešėliu o pagal paveikslėlį Tam naudojamos CSS3 savybės: o border-radius o box-shadow o border-image

14 14 Suapvalinti kampai Greta rėmelio savybių galite panaudoti kampų suapvalinimo savybę borderradius Pavyzdys: border-radius:20px; border:2px solid; Stačiakampis su šešėliu Stačiakampiui šešėlį sukuria CSS3 savybė box-shadow Pavyzdys: div { width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888; } Rėmelis iš paveikslėlio Turėdami tinkamą paveikslą, galite panaudoti jį rėmeliui. Tam reikia CSS3 savybės border-image ir paveikslo, pavyzdžiui, Vidinės paraštės Vidinės paraštės sudaro tarpą tarp HTML elemento ir rėmelio ir užpildomos elemento spalva. Vienodo pločio vidinės paraštės sukuriamos savybei padding priskyrus pavyzdžiui, skaitinę reikšmę su mato vienetais, pavyzdžiui, padding:15px; Kaip ir išorinės paraštės, taip ir vidinės gali būti skirtingų dydžių, padding: 10px 15px 20px; /* viršuje, šonuose, apačioje */

15 15 HTML elemento (turinio) dydis Turinio dydį nurodo dvi savybės aukštis ir plotis: o height o width Pavyzdys: div { height: 5em; width: 400px; }

16 Pakopinių stilių išdėstymas Pakopinių stilių išdėstymas buvo pagrindinis antrojo lygio kalbos praplėtimas. Jo dėka dizaineriai gali tiksliai kontroliuoti dokumento elementų vietą, jis gali būti dažnai naudojamas visam išdėstymai kai kuriuose interneto tinklalapiuose. Stačiakampio modelis (1) Stačiakampio modelis traktuoja visus elementus puslapyje taip, tarsi aplink juos būtų nematomas stačiakampis. Komponentai, sudarantys stačiakampį: turinys, užpildymas, rėmeliai, paraštės. Stačiakampio modelis (2) #content { width: 400 px; background-color: #CCCCCC; } #content p { padding: 20px; } Paraščių naudojimas centravimui Vienas populiariausių puslapio išdėstymo metodų turinio centravimas. Tinkamas būdas centruoti turinį puslapyje naudojant pakopinius stilius: margin-left: auto; margin-right: auto; Šis metodas kelia problemų Internet Explorer programai. Paraštės problemos sprendimas Sukurti taisyklę: body { margin-left: 50%; } Įterpti kairiosios paraštės taisyklę turiniui, kai kairioji paraštė užima pusę pločio, pavyzdžiui: #content {

17 17 } width: 700px; margin-left: -350px; Elementų išdėstymas Elementų išdėstymui naudojamos savybės: float clear position Savybė float Float savybė naudojama jau seniai, ji buvo ir HTML kalboje kartu su atvaizdų gairės lygiavimo požymiu. Šios savybės dėka turinys seka laisvą elementą iš natūralios puslapio tėkmės, bet vis dar veikia formavimo savybes. Numatytoji nuostata yra ta, kad laisvi (float) elementai negali persidengti (nebent nurodyta neigiama paraštė arba vienas iš dviejų elementų nėra laisvas). Float savybės pavyzdys (1) <html> <head> <title>floating Elements</title> <style type="text/css"> div { width: 150px; height: 150px; text-align: center; line-height: 150px; font-size: 55px; border: 1px solid black; }.grey { background: #CCCCCC; } </style>

18 18 </head> <body> <div style="float: left">1.</div> <div class="grey" style="float: left">2.</div> <div style="float: left">3.</div> <div class="grey" style="float: left">4.</div> </body> </html> Float savybės pavyzdys (2) Jeigu reikšmę left pakeisime į right visi elementai bus lygiuojami dešinėje, tik atvirkščia tvarka. Jeigu nenaudosime savybės float antrajame <div> gausime persidengimą. Reikia naudoti visus laisvus elementus arba savybę clear. Clear savybė Savybė clear naudojama neleidžiant elementams slinkti aplink pažymėtąjį objektą. Clear turi keturias reikšmes: o left; o right; o both; o none. Pavyzdyje prie antrojo <div> įrašykime style="clear:left" arba style="clear:both"

19 19 Naršyklės lango dydis Reikia atkreipti dėmesį, kad laisvi elementai reaguoja į naršyklės lango plotį. Rezultatai gali būti netikėti. Pavyzdžiui: To išvengti padės <div> konteineris aplink visus laisvus elementus. Jo plotis turi būti pakankamas, kad jame tilptų visi elementai. Pavyzdžiui: <div style="width:608px"> Paveikslų išdėstymas CSS kodas: img.floatleft { float: left; margin: 4px; } img.floatright { float: right; margin: 4px; } HTML kodas: <body> <img src="sunset.gif" class="floatleft"> <p>the images are contained with...</p> <img src="sunset.gif" class="floatright"> <p>this second paragraph has an...</p> </body>

Paprastų lentelių kūrimas

Paprastų lentelių kūrimas HTML lentelės Lentelės Informacijos pateikimas HTML-dokumentuose lentelių pagalba yra vienas iš dažniausiai naudojamų. HTML kalboje lentelės yra naudojamos ne tik tradiciškai, kaip duomenų pateikimo metodas,