Pradžia arrow Straipsniai arrow CSS pagrindai 2 dalis

CSS pagrindai 2 dalis Spausdinti El. paštas
2009 07 09

Stilių įterpimas

Kai naršyklė krauna stiliaus aprašus, ji pakeičia dokumentą pagal tai, kas būna aprašyta stiliuose. Yra trys stiliaus lapų įterpimo būdai

Išoriniai stiliaus  aprašai

Išoriniai aprašai yra geriausias būdas, kai stiliai yra taikomi visam puslapiui. Su vienu išoriniu failu galime pakeisti visą puslapio išvaizdą. Kiekvienas HTML dokumentas, kurio stilių aprašome, turi būti susietas su CSS stiliaus failu. Tai galime padaryti su <link> tag'u. <link> tag'as yra rašomas <head></head> tag'o viduje:

<head>
<link rel="stylesheet" type="text/css" href="/stiliai.css" />
</head>

Naršyklė kraudama puslapį stiliaus aprašus paims iš stilių failo stiliai.css ir pagal jame esančius aprašus suformatuos dokumentą.

Išorinio stiliaus dokumentą galima sukurti paprastu teksto redaktoriumi. Dokumente neturėtų būti kokių nors HTML tag'ų, tik CSS aprašai. Stiliaus failai saugomi su *.css plėtiniu. Pavyzdinis stiliaus failas:

body{
color:#000000;
background-color:#ffffff;
margin:4px;
margin-top:0px;
}

#list{
	color:#333;	
}

.maintable
{
width:100%;
background-color:#E5EAEF;
border:solid gray 1px;
margin-left:0px; 
}

Pastaba: Nepalikite tarpų tarp savybės reikšmės ir vienetų! Jeigu naudosite "margin: 4 px;" vietoj "margin: 4px;" tai suveiks tik IE6 naršyklėje, daugumoje kitų - ne.

Vidiniai stiliaus aprašai

Vidiniai stiliaus aprašai turėtų būti naudojami, kai vienas kuris nors dokumentas turi unikalų stilių, tada CSS aprašus galima įterpti į <head> dalį naudojant HTML tag'ą <style>:

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url('/images/back40.gif')}
</style>
</head>

Pastaba: Naršyklės ignoruoja nežinomus joms tag'us, todėl senesnės naršyklės stilių nepalaiko. Vietoj to, kad pritaikytų stilius, jos atvaizduos juos į vartotojo langą, kaip paprastą tekstą. Ši problema turi labai paprastą sprendimą, reikia tiesiog uždėti HTML komentaro simboliką aplink stilių aprašus:

< 
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url('/images/back40.gif')}
-->
</style>
</head>

Stiliai viduje HMTL  tag'o

Šis stiliaus rašymo būdas panaikina pagrindinį CSS failų gėrį :( Taip aprašynėti stilius patarčiau kuo rečiau, nes HTML kodas tampa sunkiai skaitomas, jei reikia kanors pakeisti reikia žiūrėti kiekvieną elementą atskirai, jei kas sugenda, vėlgi sudėtinga būna atrasti savo paliktą klaidą.

Čia pavyzdys, kaip galima įterpti CSS stilius tiesiai į HTML tag'o vidų pasinaudojant atributu "style". Jame gali būti bile kokie CSS aprašai.

<p style="color: #ccc; margin-left: 20px">
Naujas paragrafas
</p>

Keli stilių aprašai vienu metu

Jeigu tam pačiam selektoriui buvo nurodyti skirtingi stiliai skirtingose aprašuose, reikšmės bus paveldimos iš ypatingesnių aprašų. Pavyzdžiui tag'ui h3 turime aprašus tiek išoriniam faile:

h3 
{
color: red;
text-align: left;
font-size: 8pt
}

Tiek, tam pačiam h3, yra aprašų vidiniuose stiliuose:

h3 
{
text-align: right; 
font-size: 20pt
}

Taigi galiausiai stiliai, kurie bus pritaikyti elementui h3 bus tokie:

color: red; 
text-align: right; 
font-size: 20pt

spalva bus paveldėta raudona iš išorinio failo, tuo tarpu teksto lygiavimo ir dydžio reikšmės iš pradžių paimtos iš išorinio failo, tačiau vėliau pakeistos tomis reikšmėmis, kurios yra vidiniuose aprašuose.

Fonas

Su CSS galima labai lengvai manipuliuoti su bet kokio elemento fonu. CSS background atributas leidžia pakeisti fono spalvą, uždėti kokį nors paveikslėlį, jį kartoti vertikaliai ar horizontaliai, taip pat, jei naudojame fone paveikslėlį - keisti jo poziciją.

Naršyklių palaikymas: IE: Internet Explorer, F: Firefox, N: Netscape.

CSS: CSS1 arba CSS2 (versija).

Atributas ApibrėžimasReikšmėIE F N CSS
background Sutrumpintas atributas, tam kad galėtume aprašyti visus fono stilius tik su vienu atributu. background-color
background-image
background-repeat background-attachment background-position		 4 1 6 1
background-attachment Nurodo, ar fone esantis paveikslėlis bus nejudinamas, ar slinksis kartu su puslapiu.
 scroll
fixed		 4 1 6 1
background-color Nurodo elemento fono spalvą.
 color-rgb
color-hex
color-name
transparent 		4 1 4 1
background-image Nurodo fono paveikslėlį.
 url('/URL')
none		 4 1 4 1
background-position Nurodo fono paveikslėlio poziciją.
 top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos 		4 1 6 1
background-repeat Nurod, kaip bus kartojamas fone esantis paveikslėlis. repeat
repeat-x
repeat-y
no-repeat		 4 1 4 1

 Šaltinis: Manualai.lt

Gairės: Pradedantiesiems,
Komentarai
Pridėti naują Ieškoti
darbas internete     |2010-11-19 22:12:30
Aciu, pravers
Atsakyti
0 0
GENNADIJRodionov20  - ???????????     |2011-01-06 00:56:20
Элитный дизайн проект квартир
Atsakyti
0 0
Affiliate marketingas  - Aciu     |2011-04-01 11:08:59
Naudinga info
Atsakyti
0 0
replica-watches-top  - http://www.replica-watches-top.com     |2011-09-23 08:11:04
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:11:40
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
royalsmk   |2011-10-20 22:11:48
naudinga informacija, ačiū
Atsakyti
0 0
Rašyti komentarą
Vardas:
E-paštas:
 
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."
Paskutinį kartą atnaujinta ( 2009 07 09 )
 
Kitas >

Prisijungimas






Pamiršote slaptažodį?
Dar neužsiregistravote? Užsiregistruokite!