Susikurkite tinklalapį!

Susikurkite modernų, funkcionalų, dinamišką, gražų, lengvai redaguojamą ir plečiamą tinklalapį

 

Populiarinkite ir reklamuokite!

Reklamos priemonės, galinčios padidinti tinklalapio pastebimumą ir jo lankomumą

 

Optimizuokite paieškos sistemoms!

Kelis kartus efektyvesnis ir pigesnis būdas pritraukti lankytojus, nei reklamos priemonės

 

Uždirbkite iš tinklapio!

Reklamos tinklai ir kiti uždarbio būdai iš interneto svetainės, nuolatinės pajamos

Pradžia

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 >
darbasinternete.lt forumas

Diskutuojame tinklalapio kūrimo klausimais, nuo idėjos iki patalpinimo serveryje. Aiškinamės tiesas apie reklamos tinklus ir kitus uždarbio būdus iš interneto svetainės, siekdami nuolatinių pajamų.

Gairės:

Pagal poreikį

Pradedantiesiems
Sample image

Pradėti visada nelengva, todėl tiesiame Jums pagalbos ranką.

Kompanijoms
Sample image

Apgalvotas paslaugų tiekėjų pasirinkimas yra svarbiausias žingsnis.

Profesionalams
Sample image

Svarbiausia ir naujausia informacija interneto profesionalams

Straipsniai

Prisijungimas






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

Partneriai

Apsikeitimai.lt
Song Lyrics

Prenumeruok