top

Vartotojo meniu

Forumo naujausi pranešimai

Balsavimas

Kokios muzikos klausotės?
 

Šiuo metu prisijungę

    Niekas neprisijungęs.

Stilių įterpimas PDF Spausdinti
Autorius: Primatas   
Data: Sekmadienis, Sausio 25, 2009

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 su bile kokiu paprastu teksto redaktoriumi, arba specialiai šiai užduočiai pritaikyta programine įranga, tokia kaip Adobe Dreamweaver. Tame dokumente neturėtų būti kokių nors HTML tag'ų, tik CSS aprašai. Stiliaus failai saugomi su *.css plėtiniu. Pavyzdinis stiliaus failas:

@charset "utf-8";
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.

Komentarai
Paieška
Tik registruoti vartotojai gali rašyti komentarus!

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

 

Prisijungę šių reklamų nematysite. prisijungti

bottom
top

Reklama

Plakatas
Plakatas
Plakatas

Naujausi

Skaitomiausi

Statistika

hey.lt stats.lt

bottom

Dizainą sukūrė: Neshas ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- Privertė veikti: Primatas
parašyti administracijai
Manualai.lt 2008-2009