CSS savybė „position“
Naršant internete tikriausiai teko ne vieną kartą pamatyti unikalų dizainą su įdomiais išdėstytais grafikos elementais po visą tinklalapį arba paspaudus ant nuotraukos, ji atsidaro su efektais. Turbūt pasirodė, jog visa tai padaryti sudėtinga ir nesigilinote, kaip visa tai įgyvendinama. Nors gali pasirodyti, kad tai sunku, iš tikrųjų egzistuoja position savybė, kuri labai paprastai leidžia „stumdyti“ blokus po visą tinklalapį.
Daugumai bus girdėta ši savybė, tačiau su ja nedirbote, nes pasirodė, kad per daug painu ją naudoti. Šiek tiek pabandysime pažaisti su position savybe ir pasiaiškinkime jos galimybes.
2010-01-10 13:53:53
Gairės:
Technikos apvalintų kampų elementams kurti
Naršydami įvairiuose tinklalapiuose tikriausiai pastebėjote, kad vis dažniau yra naudojami užapvalinti kampai (angl. rounded corners): juos galima pamatyti tinklalapio komentarų blokuose, viršutinėse/apatinėse (header/footer), turinio (content) blokuose bei kitose struktūros dalyse.
Apvalintų kampų elementus sukurti galima ne vienu, o keletu būdų. Elementų kampams apvalinti kartais naudojama JavaScript kalba, tačiau rimčiausia priežastis, kodėl šis būdas nelabai populiarus, — išjungtas JavaScript palaikymas kai kurių lankytojų naršyklėje. Taip pat galime sukurti apvalintus elementus panaudoję pakopinių stilių (CSS) savybes ir paveikslėlius. Dar kitas būdas — kuris yra ateities sprendimas — CSS3. Tai nauja pakopinių stilių specifikacija, kuri dar nėra užbaigta, tačiau kai kurios naršyklės jau palaiko keletą naujosios specifikacijos savybių.
Taigi, panagrinėsime dažniausiai taikomus sprendimus elementų kampų apvalinimui: pavyzdžius, pliusus ir minusus; palyginsime aptariamus sprendimus.
Meniu kūrimas, naudojant vieną paveikslėlį
Paprastai meniu punktus stilizuojame pritaikydami tam tikras pakopinių stilių (angl. Cascading Style Sheets — CSS) savybes: pridedame rėmelį, nustatome atitraukimus (margin ir padding), keičiame teksto, fono spalvą. Kitais atvejais meniu punktų fonui priskiriame paveikslėlį, kuris kartojamas horizontaliai ar vertikaliai, arba kiekvienam meniu punktui naudojame atskirą paveiksliuką, norėdami dar labiau pagražinti tinklalapio dizainą.
Tačiau ar nustebtumėte sužinoję, kad galime į vieną paveikslėlį sudėti visus reikiamus, grafine programa paruoštus, meniu elementus ir pritaikyti reikiamą paveikslėlio dalį atitinkamai pagal meniu punktą? Taip? Tada skaityk toliau šį straipsnį ir sužinosi, kaip tai padaryti. Ne? Na, gerai, tačiau galbūt vis tiek sužinosi kažką naujo? Nesupranti, ką aš čia aukščiau parašiau? Atsakingai perskaityk straipsnį — užtikrinu, viskas paaiškės. ;)
Margin ir padding savybės — panašumai ir skirtumai
Neretai žmonėms, neseniai susipažinusiems su pakopiniais stiliais (Cascading Style Sheets — CSS), iškyla klausimas, kuo
skiriasi dvi CSS savybės: margin ir padding? Nors kai kuriais atvejais pritaikius vieną ar kitą savybę matomas rezultatas
atrodo taip pat, iš tikrųjų jų paskirtys yra skirtingos. Todėl neapsigauokite manydami, kad galite naudoti vieną ar kitą savybę
priklausomai nuo jūsų nuotaikos!
Formų stilizavimas
Pripažinkite — naršydami įvairiuose tinklalapiuose dažnai matote formas. Ir taip pat dažnai jas užpildote, siunčiate kažkokius duomenis į serverį. Jeigu patys kuriate tinklalapius, turbūt kartais galvoje pradeda suktis įvairios mintys ir mąstote, kaip sukurti tokius pat gražius formų laukelius, mygtukus, kuriuose pamatote tinklalapiuose.
Iš tikrųjų, formų stilizavimas su CSS nėra ypatingai sudėtingas, tačiau būtina atkreipti dėmesį į keletą niuansų. Straipsnyje stengsiuosi kuo plačiau apžvelgti įvairius stilizavimo būdus ir subtilybes bei, žinoma, pateiksiu pavyzdžių.
Ar darai šias 10 CSS kodavimo klaidų?
Darbas su CSS kartais gali būti lyg iššūkis. Naršyklės kartas nuo karto keičia kodo interpretavimą (na, na? Ar žinote kuri naršyklė tai mėgsta daryti? Na pagalvokite. Taip! Internet Explorer...), todėl neretai rašydami kodą atsitrenkiame į sieną — kodas parašytas lyg ir gerai, o rodo visiškai ne taip, kaip norima. Nors CSS yra nepaprastai naudinga ir galinga kalba, dažnai ji gali būti panaudota neteisingai, kas, beje, sukels jums košmarą...
Lentelių generavimas naudojant CSS
Pasirodžius IE 8-ai versijai galime pritaikyti CSS technologijos display: table savybę, kurios pagalba galėsime kurti lenteles naudojant tik CSS. Kaip žinia, šią funkciją palaiko ir Firefox 2, Firefox 3, Opera 9, tačiau tiek IE6, tiek IE7 nepalaiko display: table.
Hierarchija ir paveldimumas CSS kalboje
Nepaprastai svarbus dalykas CSS kalboje yra paveldimumas (angl. „inheritance“). Dauguma pradedančiųjų web dizainerių (CSS koduotojų), kurie bando įvaldyti CSS, šios sąvokos nesupranta ir nežino, kaip tai veikia.
Šiame straipsnyje išsiaiškinsime paveldimumo principą, elementų hierarchiją ir tarpusavio sąveiką ir paveldimumo reikšmę CSS kalboje.
Teksto formatavimas
Būna atvejų, kai reikia tekste paryškinti, pabraukti svarbesnę mintį, sukurti unikalią sąrašo išvaizdą, pakeisti teksto šriftą. Taip, jūs nesuklydote. Tokiu atveju į pagalbą ateina CSS.
CSS sintaksė iš arčiau
Pažintiniame straipsnyje susipažinote su pagrindinėmis CSS savybėmis, šiame straipsnyje plačiau apžvelgsime sintaksę: žodines reikšmes, matavimo vienetus, rašymo stilius, komentarus.
Pažintis su CSS
Kas yra tie pakopiniai stiliai? Trumpai tariant, CSS yra ne programavimo kalba, o aprašai, kuriais galima naršyklei nusakyti, kaip turi būti atvaizduojami elementai tinklalapyje. Šiame straipsnyje susipažinsite su pakopiniais stiliais, jų struktūra, veikimo principu ir panaudojimo būdais.
Gairės: