Praneškite apie mus:


HTML Stiliai

0

Išoriniai stiliaus failai

Išoriniai stiliaus failai 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 žyme <link>. <link> žymė yra rašoma <head>head> žymės viduje:



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

Paaiškinimas: Naršyklė kraudama puslapį stiliaus taisykles paims iš stilių failo stiliai.css ir pagal jame esančias taisykles pakeis dokumento išvaizdą.

Išorinio stiliaus dokumentą galima sukurti su bet kokiu paprastu teksto redaktoriumi arba specialiai šiai užduočiai pritaikyta programine įranga, tokia kaip Adobe Dreamweaver ar nemokama NetBeans. Stilius taisyklių faile negali būti kokių nors HTML žymių, tik CSS taisyklių aprašai. Stiliaus failai saugomi su *.css plėtiniu. Stiliaus failo vidaus pavyzdys:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@charset "utf-8"; 
body{
color:#000000;
background-color:#ffffff;
margin:4px;
margin-top:0px;
}

#sarasas{
color:#333;
}

.pagrindas {
width:100%;
background-color:#E5EAEF;
border:solid #ccc 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 senoje IE6 naršyklėje, daugumoje kitų - ne.

Vidinės stilių taisyklės

Vidinės stiliaus taisyklės turi būti naudojamos, kai vienas kuris nors dokumentas turi unikalų stilių, tada CSS aprašus galima įterpti į <head> dalį naudojant HTML žymę <style>:

1
2
3
4
5
6
7
<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 joms nežinomas html žymes, todėl tikrai senos naršyklės stilių nepalaiko. Vietoje to, kad pritaikytų stilius, jos atvaizduos taisykles į vartotojo langą, kaip paprastą tekstą. Ši problema turi labai paprastą sprendimą, reikia tiesiog uždėti HTML komentaro simboliką aplink stilių aprašus:

1
2
3
4
5
6
7
8
9
10
11
12
13
<head> 

<!--

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

-->

</head>

CSS stiliai viduje HMTL žymės

Šis stiliaus rašymo būdas panaikina pagrindinį CSS failų pliusą. Taip aprašynėti stilius patariama 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ą, taip pat kai norime sukurti keletą skirtingų puslapio temų, tai tampa nebeįmanoma.

Čia pavyzdys, kaip galima įterpti CSS stilius tiesiai į HTML žymės vidų pasinaudojant atributu style. Jame gali būti bet kokie CSS aprašai.

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

Keli stilių aprašai vienu metu, paveldimumas ir hierarchija

Jeigu tam pačiam html elementui buvo nurodyti skirtingi stiliai skirtingose aprašuose, reikšmės bus paveldimos iš svarbesnių aprašų. Pavyzdžiui žymei <h3> turime aprašus tiek išoriniam faile:

1
2
3
4
5
h3 { 
color: red;
text-align: left;
font-size: 8pt
}

Taip pat, tam pačiam html elementui h3, yra stiliau aprašų viduje html dokumento per žymę <style>:

1
2
3
4
5
6
<style type="text/css"> 
h3 {
color: black;
     font-size: 10pt;
}
</style>

Ir galiausiai dar viena taisyklė viduje h3 elemeto per atributą style:

1
<h3 style="text-align:right; font-size: 11pt;">Tekstas</h3>

Galiausiai <h3> elementui bus priskirtos tokios taisyklės:

Pirmiausia priskirs taisykles iš išorinio failo:

teksto spalva - raudona, teksto lygiavimas - iš kairės ir šrifto dydis - 8pt.

Sekančios eina taisyklės iš <style> elemento:

teksto spalva pakeičiama iš raudonos į juodą, šrifto dydis jau nebe 8pt dydžio, bet 10pt. Tekstas kolkas lygiuojamas iš kairės.

Paskutinės yra perskaitomos vidinės elemento stiliaus taisyklės iš atributo style:

teksto spalva lieka juoda, teksto rikiavimas pakeičiamas iš kairės į dešinę ir šrifto dydis iš 10pt dydžio į 11pt.

Perskaityta: 3967 kartų

Lukas
Autorius: Lukas
El. paštas.: Šis el. pašto adresas yra apsaugotas nuo spam botų. Jum reikalingas įjungtas Javasctipt kad jį matytumėte
Manualai.lt tinklo autorius ir administratorius. VDU Energetikos Fizikos ir Verslo Informatikos studentas. LinkedIn
Raktažodžiai
html    stiliai    pazengusiems   
Patinka straipsnis?
dalintis Facebook
dalintis MySpace
dalintis Twitter
Digg it
Komentarai

Komentarų nėra. Norėdami komentuoti turite prisijungti
HTML meniu
Naudingos nuorodos
Informacija ir viskas kas yra pateikta manualai.lt puslapiuose yra nemokama, tačiau, galite mus paremti per PayPal: