CSS (Cascading Style Sheets - egymásba ágyazott stíluslapok)
- Leírónyelv, amely csak egy másik leírónyelvhez kapcsolva jelenik meg. (HTML,XML)
- A jelenlegi trend azt várja el, hogy minden formázást CSS-ben adjunk meg egy dokumentumnak, és a HTML csak a tartalmat jelenítse meg.
-> Ezt mutatja a HTML 5 is, amelyben minden olyan tag meg lett szűntetve, amely a html formázását hivatott szolgálni.
A folyamat:
A kész (illetve folyamatban lévő) HTML dokumentumhoz hozzá rendelünk CSS utasításokat, amelyek segítségével formázni fogjuk. A CSS utasítások hozzárendelése több módon történhet:
1., A <head> szekcióba ágyazva, <style> </style> között. Ez az adott HTML dokumentumot formázza, amelyben elhelyezkedik.
2., Külön valami.css file-ban soroljuk fel a CSS utasításokat, és a <head> szekcióból hivatkozunk a CSS file-ra.
3., Egy adott taghez rendelünk egy stlye attribútumot, és az attribútum értékeként megadjuk egymás melett felsorolva az adott tag-et formázó CSS utasításokat.
1. példa:
<head>
<style type="text/css">
p {text-align:justify;}
</style>
</head>
2., <head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
style.css tartalma
p {text-align:justify;}
3., <p style="text-align:justify;">Szöveg</p>
Általános leírás
--------------------
- A CSS-re úgy kell tekintenünk, mint tulajdonság csoportok felsorolására. Ezeket a tulajdonság csoportokat a html objektumokhoz tudjuk rendelni.
Példa:
első csoport : kék a háttér és fekete a keret.
második csoport: arial, 17px, lila a betű
A HTML-en belül ha olyan elemet akrunk megjeleníteni, aminek kék a háttere és a kerete fekete, akkor nem kell mást tennünk, mint besoroljuk az adott CSS csoportba.
!!! A css formázás felsőbbrendű a html formázásnál! !!!
Példa:
Ha html-ben azt mondom a táblázatnak, hogy a kerete kék, de közben besoroltam egy olyan CSS csoportba, ahol az utasítás szerint a keret sárga, akkor a böngészőben a táblázat sárga kerettel jelenik meg.
CSS verziók: CSS1, CSS2, CSS2.1, CSS3
Jelenpillanatban a CSS 2.1 verzió az, amit minden böngésző értelmezni tud. A CSS3 utasításkészletéből nem mindent tudnak értelmezni a böngészők. A CSS3 kiegészítése a HTML5-nek. A html5 megalkotója a Google és az Apple, amíg a CSS3 megalkotója a W3C. Sajnos a legkevesebb CSS3 utasítást az IE tudja.
Szintaktika:
csoportnév {
utasítás: érték;
utasítás1: érték;
utasítás2: értkék;
}
A HTML objektumok megcímzése, csoportokba osztása
-----------------------------------------------------------------------
Módszerek:
1., Osztályba sorolás
- Jellemzője, hogy minden taghez és objektumhoz hozzárendelhető, akár egyszerre is.
CSS:
.elso {
background-color: red;
color: white;
}
HTML:
<table border="2" class="elso">
.
.
.
<p class="elso">
</p>
2., Tag-hez rendelés
- Minden olyan tag-re érvényesül, amit megneveztünk a CSS-ben.
CSS:
p {
letter-spacing:10px;
}
3., Egyedi azonosítás
- Csak és kizárólag 1 db html objektum kaphatja meg, mégpedig az, akinek az azonosítója megfelel a CSS-ben meghatározottnak.
CSS:
#lista {
list-style-type: katakana;
}
HTML:
<li id="lista">Elem</li>
Csoportos címzés
----------------------
!!! Fontos !!! nincs szóköz a vesszők között!
CSS:
p,td,th,li {
text-align:right;
}
Feltételes címzés
---------------------
- Egyfajta elérési útját fogalmazzuk meg a html objektumnak, amelyet csak akkor formáz meg a css, ha az elérési útban felsorolt elemek sorrendben egyeznek.
Példa: Csak azokat a listaelemeket akarom megfosztani a listajeltől, akik táblázaton belül vannak.
CSS:
table ul li {
list-style-type: none;
}
HTML:
<table>
<tr>
<td>
<ul>
<li>
Az alábbi li-re nem érvényesül:
<p>
<ul>
<li>
#tartalom img {
max-width: 800px;
}
img a {
border: none;
}
strong,b {
font-weight: normal;
}
em,i {
font-style: normal;
}
#tartalom table {
display: none;
}
CSS ellentmondások:
p {text-align:right;}
.elso {text-align:justify;}
HTML:
<p align="left" class="elso"></p>
Dinamikus virtuális kiválasztás
----------------------------------------
- Attól függ az objektum megjelenése, illetve formázása, hogy éppen milyen esemény történik vele.
Nincsenek megjegyzések:
Megjegyzés küldése