CSS röviden

A MathWikiből
(Változatok közti eltérés)
(CSS külön állományban)
(CSS beágyazása HTML-be)
42. sor: 42. sor:
 
</blockquote>
 
</blockquote>
  
* További lehetőségünk, hogy '''import'''áljunk egy másik stílus állományt. Ez a követkzőképp történhet:
+
* További lehetőségünk, hogy '''import'''áljunk egy másik stílus állományt. Ez a következőképp történhet:
  
 
<blockquote>
 
<blockquote>

A lap 2006. december 9., 15:36-kori változata

Tartalomjegyzék

Mi a CSS?

CSS (Cascading Style Sheets), vagyis egymásba ágyazott stíluslapok. Segítségével egyszerűen befolyásolhatjuk HTML-oldalaink kinézetét, az egyes elemek elhelyezkedését. A HTML elsősorban a tartalommal foglalkozik, nem azzal, hogy a böngészőnek milyen módon kell azt megjelenítenie. A stíluslapokkal pontosan és egységesen írhatjuk le a megjelenítési előírásokat.

CSS (nagyon rövid) története

A HTML-dokumentumoknál alkalmazott első stíluslapszabványt, CSS1 névvel, 1996-ban fejlesztette ki a W3C. 1998 közepén jelent meg a második szabvány, a CSS2, amely jóval bővebb lődjénél. A CSS3 még kidolgozás alatt áll.

CSS beágyazása HTML-be

CSS beágyazása HTML-be többféleképpen történhet:

  • Ágyazhatjuk magába a forrásfájlba, ekkor a stílusleírásokat a <head></head>, azon belül a <style></style> tagok között kell elhelyezni.
<head>
  <style type="text/css"><!--
    h1 {font-size: 20px; color: #000000; }
    p {font-size: 12px; color: #CCFFCC; }-->
  </style>
</head>
  • Lehet külön fájlban tárolni a stílusleírásokat, így lehetővé tesszük, hogy több HTML állomány is érvényes legyen, és a szerkesztés is jóval egyszerűbbé válik, hiszen a változtatni kívánt stílustulajdonságot csak egy fájlban kell megkeresni és kijavítani.
<head>
  <link rel="stylesheet" href="style.css" type="text/css"></link>
</head>
  • Az egyes elemekhez külön is rendelhetünk stlíust:
<p style="font-size: 10px; color: #33CC33;">Példa</p>
  • További lehetőségünk, hogy importáljunk egy másik stílus állományt. Ez a következőképp történhet:
<style type="text/css">
 <!--
  @import url(http://www.valami.hu/style.css);
 -->
</style>

CSS külön állományban

A külön fájlban letárolt CSS stíluslapon belül is többféleképpen adhatjuk meg az egyes tulajdonságokat. A legegyszerűbb módszer talán a következő:

div.title
{
  font-family: "Verdana";
  font-size: 13px;
  font-weight: 400;
  background-color: #CCCCFF;
  text-align: justify;
}

Ebben a példában magát a div elemet formáztuk. A betűtípus Verdana lesz (bármi is az alapértelmezett), a betűméret 13 pixel, vastagsága normál (bold-nak a 900 felel meg). Beállítottuk még a háttérszínt, és a szöveg igazítását. Ezek a beállítások érvényesek lesznek minden olyan HTML-forrásfájlban, amiben erre a stílusfájlra hivatkozunk. Ilyen beállításokat elvégezhetünk szinte bármely HTML-elemre. A kinézet megjelenítéséhez azonban nem elég a külön állományra való hivatkozást beírni a forrásfájlba. Amely tagot szeretnénk formázni, annak tulajdonságai közé is be kell írni a style paraméterhez azt a nevet, amit megadtunk a CSS-állományban. Pl:

<div style="title">...</div>

Ha nem csak egyetlen tag tartalmára szeretnénk megadni stílustulajdonságokat, akkor a CSS-állományban elég, ha egy ponttal helyettesítjük a tag nevét. Pl:

.menu {tulajdonság-érték lista}

A stílustulajdonságok megadásánál (bármely beágyazási típusnál) figyeljünk a pontosvesszőkre! Ha nem tesszük ki az egyes sorok végén, akkor az utána következő tulajdonságok nem lesznek érvényben.

Linkek

Ha van kedved többet olvasgatni a CSS-ről, az alábbi oldalakat ajánlom figyelmedbe:

Gubeka

Személyes eszközök