Jūs esate sename manualai.lt puslapyje.
Naujasis puslapis yra v2.manualai.lt

forumas.manualai.lt

kodai.manualai.lt

dizainas.manualai.lt

idomu.manualai.lt

top

Sekite mus Facebook'e

Sekite mus Facebook'e

Vartotojo meniu

Forumo naujausi


Stilių įterpimas PDF Spausdinti
Autorius: Primatas   

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."
 

bottom
top

Reklamos

joomla, css, html, web dizaino, photoshop, pascal forumai
  • Topai.eu - Svetainių katalogas
  • Top.Biciuliai.Net
  • Top.Ob.Lt
  • Hey.lt - Nemokamas lankytojų skaitliukas

Naujausi

Skaitomiausi


bottom

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

t http://manualai.lt/index.php?option=com_content&view;=frontpage&Itemid;=287