A CSS utasítások szerkezete
A CSS utasítások egy szelektorból és egy deklarációs blokkból állnak.
H1 {color:blue}
CSS csatolása a HTML kódhoz
Inline
Fejlesztésnél nem javasolt, de tanuláshoz hasznos lehetőség. Lényegében az összes HTML tag-nek van egy "style" attribútuma, amivel ahhoz a konkrét elemhez rendelhetünk információkat. A grafikus szerkesztők sokáig ezt az attribútumot használták formázásra, de így pont a CSS lényege vész el: a tartalom és a forma szétválasztása.
<H1 align="center" style="color:red">Piros címsor</H1>
Fejlécben
A HTML dokumentum fejlécében ("HEAD") egy külön tag ("STYLE") használható a CSS utasítások felsorolására. Ez már egy picit jobb, mint az inline megoldás, de még mindig baj, hogy a CSS-információ nem különül el a HTML állománytól, így egy mások oldalon nem használható.
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Fejléc</h1>
<p>A bekezdés.</p>
</body>
</html>
Importált fájlban
A fejléc "STYLE" tag-jének tartalmát külső fájlból is importálhatjuk.
<head>
<style type="text/css">
@import url("stilus.css");
</style>
</head>
Hivatkozott CSS állományban
Szintén a fejlécben használható a "LINK" tag a stíluslapok csatolására.
<link rel="stylesheet" type="text/css" href="stilus.css" />
CSS parancsok csoportosítása
Eredeti Csoportosított
H1 {color:blue}
H2 {color:blue}
H3 {color:blue}
H1, H2, H3 {color:blue}
P {color:red}
P {font-size: 12pt}
P {
color: red;
font-size: 12pt;
}
H2 {font-size: 12pt}
H2 {font-weight: bold}
H2 {font-family: verdana}
H2 {font: 12pt bold verdana}
http://info.berzsenyi.hu/halozatok
A CSS utasítások egy szelektorból és egy deklarációs blokkból állnak.
H1 {color:blue}
CSS csatolása a HTML kódhoz
Inline
Fejlesztésnél nem javasolt, de tanuláshoz hasznos lehetőség. Lényegében az összes HTML tag-nek van egy "style" attribútuma, amivel ahhoz a konkrét elemhez rendelhetünk információkat. A grafikus szerkesztők sokáig ezt az attribútumot használták formázásra, de így pont a CSS lényege vész el: a tartalom és a forma szétválasztása.
<H1 align="center" style="color:red">Piros címsor</H1>
Fejlécben
A HTML dokumentum fejlécében ("HEAD") egy külön tag ("STYLE") használható a CSS utasítások felsorolására. Ez már egy picit jobb, mint az inline megoldás, de még mindig baj, hogy a CSS-információ nem különül el a HTML állománytól, így egy mások oldalon nem használható.
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Fejléc</h1>
<p>A bekezdés.</p>
</body>
</html>
Importált fájlban
A fejléc "STYLE" tag-jének tartalmát külső fájlból is importálhatjuk.
<head>
<style type="text/css">
@import url("stilus.css");
</style>
</head>
Hivatkozott CSS állományban
Szintén a fejlécben használható a "LINK" tag a stíluslapok csatolására.
<link rel="stylesheet" type="text/css" href="stilus.css" />
CSS parancsok csoportosítása
Eredeti Csoportosított
H1 {color:blue}
H2 {color:blue}
H3 {color:blue}
H1, H2, H3 {color:blue}
P {color:red}
P {font-size: 12pt}
P {
color: red;
font-size: 12pt;
}
H2 {font-size: 12pt}
H2 {font-weight: bold}
H2 {font-family: verdana}
H2 {font: 12pt bold verdana}
http://info.berzsenyi.hu/halozatok
Nincsenek megjegyzések:
Megjegyzés küldése