Darbas internete

• CSS - kaskadiniai stiliaus lapai (angl. Cascading Style Sheets)
• CSS - pagalbą keičiame HTML atvaizdavimą naršyklėje
• CSS  - yra saugomas su plėtiniu *.css
• CSS - stiliaus aprašai buvo pridėti prie HTML 4.0 versijos
• Visos dabartinės naršyklės palaiko CSS stilių failus

CSS 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 viskas kitkas atsinaujins automatiškai, aišku tai sutaupo nemažai laiko.

Naudojant CSS aprašus nesusidarko HTML kodas. Būna lengviau perskaityti tiek patį HTML, tiek redaguoti stilius.

Sintaksė

CSS sintaksę sudaro trys dalys: selektorius, ypatybė/savybė ir jos reikšmė:

selektorius {savybė: reikšmė;}

Selektorius dažniausiai yra koks nors HTML elementas, kurį norime pakeisti, savybė tai yra atributas, kurį norime pakeisti tame HTML elemente ir reikšmė tai tokia reikšmė, kurią norime priskirti tam atributui. Savybė ir reikšmė yra atskiriami dvitaškiu ir apgaubti iš abejų pusių riestiniais skliaustais. Po reikšmės yra rašomas kabliataškis. Pvz.:

body {background-color: #C30;}

Pastaba: Jei reikšmę sudaro keli žodžiai, juos rašome tarp kabučių:

p {font-family: Georgia, "Times New Roman", Times, serif;}

Pastaba: Jei norime aprašyti kelias elemento savybes vienu metu, tai galima padaryti atskiriant keikvieną savybę kabliataškiu. Pavyzdys žemiau parodome, kaip galima paragrafo tekstą išlygiuoti per vidurį ir kartu teksto spalvą pakeisti į raudoną.

p {
   text-align: center;
   color: #FF0000;
}

Grupiavimas

Aprašant CSS stilius galima grupuoti selektorius, kad nereiktų aprašinėti kiekvienam elementui stilių atskirai. Pavyzdžiui mes norime, kad visi <h1>, <h2>, <h3>, <h4>, <h5> ir <h6> elementai būtų žalios spalvos:

h1,h2,h3,h4,h5,h6 {
   color: #00FF00;
}

Klasės selektorius

Su klasės selektoriumi galime aprašyti vieną bendrą stilių ir jį pritaikyti keletai HTML elementų. Klasės pavadinime neturi būti jokių tarpų ir geriau vengti spec. simbolių. Jei pavadinime naudojami keli žodžiai juos galima atskirti su brūkšneliu. pvz.: "klases_pavadinimas", "klases-pavadinimas", arba tiesiog kiekvieną naują žodį pradėti didžiąja raide: "KlasesPavadinimas". Taip pat galima naudoti skaičius, tačiau geriau pradėti pavadinima raide, pvz.: "klases_pavadinimas_1", "klase2" ir panašiai. Neteisinga: "1_klase". Teisinga: "klase_1". Taip pat nepatartina naudoti lietuviškų raidžių.

Pastaba: Pavadinimus, kaip visada geriau parinkti logiškus, kad vėliau būtų lengviau atsirinkti kieno stilius aprašytas, pvz.: "pagrindinis_div_konteineris". Aš pats dažniausiai naudoju visiems konteineriniams elementams prierašą "_c", pvz.: "div_main_c", kas reikštų, kad šis stilius yra skirtas div elementui, kuris yra pagrindinis konteineris kitiems elementams.

Taigi, tarkime, kad norime turėti dvi skirtingo stiliaus klases skirtas paragrafams. Vieną, kuri nurodytų raudoną tekstą ir lygiuotą iš kairės, o kitą su žaliu tekstu palygiuotu dešiniau.

p.desinej_zalias {text-align: right; color: #00FF00;}

p.kairej_raudonas {text-align: left; color: #FF0000;}

Tada HTML dokumente nurodome paragrafo elemento kalsės atributo reikšmę tokią, koks yra klasės pavadinimas:

<p class="desinej_zalias">
Šitas paragrafas bus lygiuojamas dešinėje ir jo teksto spalva bus žalia.
</p>
<p class="kairej_raudonas">
Šitas paragrafas bus lygiuojamas kairėje ir jo teksto spalva bus raudona.
</p>

Pastaba: Jeigu tam pačiam elementui norime priskirti kelias klases, naudojame tokią sintaksę:

<p class="centruotas paryskintas">
Paragrafo tekstas.
</p>

Šitas paragrafas bus paveiktas stilių, kurie aprašyti klasėse "centruotas" ir "paryskintas. Pirmiausia bus pridėti klasės "centruotas" stiliai, poto klasės "paryskintas". Jeigu klasėse bus aprašyti tie patys stiliai, tik su skirtingomis reikšmėmis, dauguma naršyklių naudos stilius, kurie aprašyti paskutinėje klasėje. Šiuo atveju klasės "paryskintas" stilius.

Viršuje aprašyta klasė prasidėjo su HTML elemento pavadinimu:  p.desinej_zalias,  p.kairej_raudonas. Jei norime sukurti bendrą klasę visiems elementams, kad ją galėtume naudoti su betkokiu norimu elementu, tada praleidžiame elemento pavadinimą ir rašome tik pačios klasės pavadinimą: "raudonas_1px_raudonas_remelis". Taip pat nepamirštame padėti taško prieš klasės pavadinimą. Taškas nurodo, kad tai yra klasė. Vėliau susipažinsime su simboliu "#".

.raudonas_1px_remelis {border: solid 1px #FF0000;}

Žemiau esančiame kode suteikiame klasėje "raudonas_1px_raudonas_remelis" aprašytus stilius keliems elementams:

<h1 class="raudonas_1px_remelis">
Antraštė su 1px storio, solid stiliaus raudonu rėmeliu.
</h1>

<p class="raudonas_1px_remelis">
Paragrafas su 1px storio, solid stiliaus raudonu rėmeliu.
</p>

<div class="raudonas_1px_remelis">
div konteineris su 1px storio, solid stiliaus raudonu rėmeliu.
</div>

Stilių pridėjimas elementams su tam tikrais atributais

Taip pat galima pridėti stilių prie HTML elemento, kuris turi tam tikrus konkrečius atributus.

Ši CSS taisyklė bus pritaikyta visiems input elementams, kurie turi atributą type su reikšme "text":

input[type="text"] {background-color: blue;}

ID selektorius

Galima apibrėžti stilius HTML elementui su id selektoriumi. ID selektorius žymimas ženklu #.

Stiliaus taisyklė esanti žemiau bus pritaikyta elementui, kurio atributo id reikšmė yra "zalia":

#zalia {color: green;}  

Ši stiliaus taisyklė bus pritaikyta elementui p, kuris turi atributą id su reikšme "paragrafas1":

p#paragrafas1 {
    text-align: center;
    color: red;
}

Pastaba: ID vardams galioja tos pačios taisyklės kaip ir klasių vardams! Nepradėkite pavadinimo skaičiumi, nenaudokite spec. simbolių.

 Šaltinis: Manualai.lt

Komentarai

Pridėti naują Ieškoti

Gintaras  - Kaip uzsidirbti internete     |2011-04-01 21:42:47 Aciu Atsakyti 0   0

replica-watches-top  - http://www.replica-watches-top.com     |2011-09-23 08:13:27 link:http://www.replica-watches-top.com/replica-t issot-classic-t006424110 5300-men-watch-p-3135.html productions,according to the designers of Tissot watches design style.Our replica link:http://www.replica-watches-top.com/replica-t issot-classic-t006424110 5300-men-watch-p-3135.html  watches are not only instrument to check the  clock time, but also are an significant part to decorate your possess, meantime, link:http://www.replica-watches-top.com/replica-t issot-classic-t006424110 5300-men-watch-p-3135.html can draw you turn fashion and increase your individual taste.We are the professional link:http://www.replica-watches-top.com/replica-t issot-classic-t006424110 5300-men-watch-p-3135.html  provider.the cost is far lower than the genuine  link:http://www.replica-watches-top.com/replica-t issot-classic-t006424110 5300-men-watch-p-3135.html for wom... Atsakyti 0   0

replica-watches-mark  - http://www.replica-watches-mark.com     |2011-09-23 08:14:14 Lastly, the rest of the replica watch is constructed only from the finest materials, as close to the real thing as possible. Our replica link:http://www.replica-watches-mark.com/iwc-watc hes-iwc-da-vinci-watches -c-116_121.html have genuine sapphire crystals (exactly like the real thing). Our replica link:http://www.replica-watches-mark.com/iwc-watc hes-iwc-da-vinci-watches -c-116_121.html are even hand-fitted with custom, stainless steel, shock-resistant movement holders to prevent movement damage in automobile accidents or other minor shocks. link:http://www.replica-watches-mark.com/iwc-watc hes-iwc-da-vinci-watches -c-116_121.html look, feel, and weigh exactly like the real thing, at a fraction of the cost.Welcome to scan our website link:http://www.replica-watches-mark.com.to/ buy it. Atsakyti 0   0

watches-replica-market  - http://www.watches-replica-market.com     |2011-09-23 08:15:15 Ebel Brasilia watchesThere is no secret that? link:http://www.watches-replica-market.com/replic a-ebel-brasilia-mini-121 5603-watch-p-1383.html?zen id=17565a00a3e2c2db801a264b87ce5752 are among the honey watches all over the world.We own all kinds of link:http://www.watches-replica-market.com/replic a-ebel-brasilia-mini-121 5603-watch-p-1383.html?zen id=17565a00a3e2c2db801a264b87ce5752on our net store.Our link:http://www.watches-replica-market.com/replic a-ebel-brasilia-mini-121 5603-watch-p-1383.html?zen id=17565a00a3e2c2db801a264b87ce5752 are the greatest quality and most long-lasting replica available - nearly indistinguishable from the real thing.Choose one of elegant and classic models, and enjoy every moment in life with our astonishing? timekeeper of superior quality at reasonable price.Welcome to go through our website www.watches-replica-mark... Atsakyti 0   0

Jane  - To buy replica handbags     |2011-09-23 08:15:54 In recent years,the design style of link:http://www.buy-handbags-replica.com/miu-miu- metalasse-leather-bag-01 52-creamn195-p-263.html mainly enjoy show leisure and easy, this design is adapt to people who are advocating the leisure lifestyle. link:http://www.buy-handbags-replica.com/miu-miu- metalasse-leather-bag-01 52-creamn195-p-263.html  always combines their own design with fashion people hobby to attract more people, which is destined to link:http://www.buy-handbags-replica.com/miu-miu- metalasse-leather-bag-01 52-creamn195-p-263.html in fashion peak.Welcome to visit our website link:http://www.buy-handbags-replica.com. Atsakyti 0   0

ugg boots canada sale  - ugg boots canada sale     |2011-11-14 03:32:39 The past several weeks Kingwood and Humble ugg boots canada sale area schools have been treated to performances bailey button uggs by Team Impact. Members of the team, which is comprised of professional ugg bailey button triplet atheletes, perform feats of strength designed ugg boots canada store to both amaze and entertain. However, it's not uggs canada all about the show. These strong men also have a strong message. Their chestnut ugg classic tall mission in the schools is to promote an antibullying ugg classic tall message and to encourage Chocolate UGG Classic Tall students to take ugg classic tall a stand, make good ugg bailey button triplet choices, and that kids ugg bailey button boots physical strength is not as important as strength of character. The group can also be found at evening performances at local churches throughout the Houston area. Second Baptist is one of the host churches ugg classic short and ... Atsakyti 0   0

Rašyti komentarą
Vardas:
E-paštas:	nepranešti apie naujus komentaruspranešti apie naujus komentarus
Tinklapis:
Antraštė:
	Prašom įvesti apsaugos kodą, kurį matote paveikslėlyje.

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."