Sveikučiai! Jau senai berašiau čia, tad neišsigąskite, stengsiuosi pamokas rašyti kasdien arba kas antrą dieną. Ilgai nerašiau, nes prieš atostogas buvo mokykloje ką veikti (renginių organizavimas, kontroliniai ir pan.), taip pat buvau su šeima išvykęs į Daniją, tada buvo pora gimtadienių, tad kaip matot - buvau tikrai užsiėmęs O dabar pradėkime pamoką!
---
Šiandien mes mokysimės CSS ir rašysime pirmąjį stiliaus kodo lapą! Pamokai naudosime praeitos pamokos kodą (Pamoka apie nuorodas). Kodas:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Nuorodos</title> </head> <body> </body> </html>
CSS mes galime įterpti ir HTML faile naudodami žymę style. Šią žymę mes naudojame tarp <a> ir </a>. Eilutė su nuoroda ir style žyme turėtų atrodyti maždaug taip:
<p>Aplankykite mane <a href = 'http://www.delfi.lt' style = " ">mano svetainėje</a>.</p>
Ir šiuo atveju, jei norime padaryti nuorodos tekstą geltoną, mes turime tarp style žymės kabučių rašyti
style = "color: yellow;"
O štai čia pateikiu simbolius išaiškinantį paveikslėlį:
Taigi, dabar su patobulinta nuorodos versija išsaugome failą ir atveriame jį naršyklėje. Ar gražu? Man nelabai. Tai siaubinga spalva. Siaubinga ta prasme, kad tokiame fone ji be galo raižo akis.Nenaudokite jos. Geriau vietoj geltonos (yellow) pakeiskime į juodą (black) spalvą. Naa, išsaugome ir žiūrim. Žymiai gražiau . Tačiau spalva galima nusakyti ne vien taip. Yra dar vienas būdas: RGB. Red (raudona) Green (žalia) ir Blue (mėlyna). Čia sudedame tris skaičius, kiek kokios spalvos uždėti ir gauname įvairius mix'us. Pvz. pabandykite vietoj color: black; įdėti:
style = "color: rgb(100,200,50);"
Man asmeniškai - graži spalva. Galite eksperimentuoti be galo daug! Tačiau yra dar vienas būdas nusakyti spalvas.. Tai HEX. Tai yra šešių simbolių seka, kuri nusako spalvą. SVARBU! PRIEŠ HEX SPALVOS KODĄ VISADA DĖKITE HASHTAG (# GROTAŽYMĖS) ŽENKLĄ! Pvz. galite pamėginti šią spalvą: #e3e3e3. Tačiau dabar dar dirbkime su paprastais spalvų pavadinimais. Užsidėkime raudoną spalvą. Dabar kaip ir matome - mūsų nuorodos tekstas yra pabrauktas. O kas, jei mes to nenorime? Tam naudojame žymę text-decoration. Su ja turime parašyti ir teksto dekoravimo tipą. Jei norime pašalinti pabraukimą - rašome none. Pvz. :
style = "color: rgb(100,200,50); text-decoration: none;"
Jei tekstą kaip tik norime padaryti pabrauktą - rašome text-decoration: underline;. Tam, kad nesusimaišyti su stiliaus kodais, kad kodai būtų trumpesni, lengviau suprantami ir pan, naudojame CSS dizaino lapą. Taigi, sukurkime naują failą pavadinimu style.css Pavadinimą galite keisti, tačiau aš naudosiu tokį. Būtinai nurodykite, kad tai yra CSS failas. Dabar į CSS failą nukopijuokite ir įdėkite visą turinį esantį tarp style žymės kabučių, o pačią style žymę ištrinkite. Dabar išsaugokite abu failus ir atverkite HTML failą naršyklėje. Na, kaip? Kad to nebūtų, mums reikia nurodyti kur gyvena mūsų CSS failas. Tai galime padaryti su žyme link kurią turime įdėti tarp <head> žymių. Kai parašėte :
<head> ... <link </head>
Po link turite nurodyti, kokie santykiai sieja šį failą ir CSS failą. turite rašyti rel="stylesheet" tada po šios žymelės rašome vietą, kur yra mūsų failiukas. Naviguoti tarp failų galite naudodamiesi ankstesnės pamokos instrukcijomis, o kadangi pas mane CSS failas stovi toje pačioje direktorijoje kaip ir HTML, aš tiesiog parašau href="style.css" ir viskas. Taip pat šios žymės pabaiga yra šiek tiek ypatinga. Mes ją užbaigiame kaip ir kiekvieną, tradiciškai - > ženklu, tačiau </link> nerašome. Taigi, gale gauname štai tokią žymę:
<link rel="stylesheet" href="style.css">
Naršyklėje matome tokį vaizdą, nes tas CSS failas kaip ir yra, bet jis yra be teisingo turinio. Kitaip sakant, naršyklė jo nesupranta, Tam, kad suprastų - reikia nurodyti, kokį elementą modifikuojame. Tai padaryti galime pridėję a ženklą ir taip nurodydami, kad tai yra būtent šiam elementui. Kodas turėtų atrodyti maždaug šitaip:
a { color: red; text-decoration: none; }
Štai! Pagaliau! Pagaliau mes susiejome CSS failą su HTML ir CSS failą padarėme pilnai funkcionuojantį! O dabar virš paragrafo žymės su nuoroda pridėkime pirmo lygio antraštės (heading) žymę su užrašu "Mano nuorodos". Dabar einame į CSS failą ir jame rašome h1 { tam, kad nurodytume jog reikia surasti visiškai visas h1 žymes, ir jų turinį modifikuoti pagal nustatymus esančius tarp laužtinių skliaustų. Dabar mes pakeisime teksto šriftą. Tam padaryti naudosime CSS žymę font-family. Yra begalė šriftų pasirinkimų, tačiau tikrai negalima rinktis bet ko, nes gali nutikti taip, kad tą šriftą susiinstaliavę turi ne visi. Yra HTML-saugūs šriftai, kurie veikia ant 99,99% įrenginių. Dabar aš naudosiu HELVETICA šriftą, o antriniu šriftu padarysiu ARIAL. Tai reiškia, kad jei įrenginyje nėra HELVETICA šrifto, bus naudojamas ARIAL. Taigi, sveikinu. Jūs pramokote dirbti su CSS! Su CSS ateityje tikrai galėsite pridaryti begales šaunių dalykų! Pamokos pabaigos HTML kodas:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Nuorodos</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Mano nuorodos</h1> <p>Aplankykite mane <a href = 'http://www.delfi.lt'>mano svetainėje</a>.</p> </body> </html>
CSS kodas:
a { color: red; text-decoration: none; } h1 { font-family: helvetica, Arial, sans-serif; }
Šiandien išmokome
- dirbti su CSS.
---
Jei kyla klausimų, neaiškumų - susisiekite su manimi šioje temoje arba skype: living.indream1
Tikiuosi, kad Jums patiko ir laukiate kitos dienos pamokos!