HTML + CSS

Weblapok formázása CSS segítségével

forrás: https://nzs-prog.blogspot.com/2021/10/html-css-elmeletgyakrolat.html

A CSS (kaszkádolt stíluslap, Cascading Style Sheet) segítségével úgy formázhatunk egy weboldalt, hogy a formázási információk jól elkülöníthetők, általában egy külön állományban adhatók meg.

A CSS használatának előnyei:

  • letisztultabb HTML kód
  • rövidebb HTML kód
  • a “dizájn” egyszerűbben módosítható
  • ugyanaz az oldal több stílusban is megjeleníthető
  • a CSS több formázási lehetőséget ad, mint a HTML

Ugrás az oldal tetejére

Helló CSS példa

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="stilus.css" /> 
</head>
<body>
   <h1>CSS példa</h1>
   <p>
   Helló CSS!!!
   Ez egy minimális CSS példa.
   </p>
</body>
</html>

CSS

H1 {
  color:blue;
  border-bottom: solid 2px;
  font-size: 18pt;
}
P {
  font-size: 12pt;
  background-color: silver;
  margin: 20px;
  padding: 15px;
}

Böngészőben:

Ugrás az oldal tetejére

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}

Ugrás az oldal tetejére

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>

Piros címsor

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>

Megnézem! – kattints ide!

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

Ugrás az oldal tetejére

CSS parancsok csoportosítása

Ugrás az oldal tetejére

CSS parancsok hatásköre

Öröklődés

Ha egy tag be van ágyazva egy másikba (a HTML kódban), akkor általában örökli a külső tag stílusát. Például:

<H1 style="color:blue">A címsor <EM>minden</EM> eleme kék.</H1>

A címsor minden eleme kék.

Osztályok

Rendelhetünk egy adott tag egy osztályához (class) külön formátumot, vagy azt is megtehetjük, hogy különböző tag-ek egy csoportját formázzuk azonosan. A CSS állományban ez így néz ki:

H1.kiemelt { font-size: 36pt }
.fontos {color:red}

Ezeket a kódokat a HTML állományban így aktivizálhatjuk:

<h1 class="kiemelt">Nagyon fontos főcím</h1>
<h1>Egyszerű főcím</h1>
<p class="fontos">Lényeges információ...</p>

Megnézem! – kattints ide!

Egyedi azonosítók

Lehetőségünk van arra is, hogy egy oldal egyetlen konkrét eleméhez rendeljünk stílust:

CSS:
DIV#fejlec {margin:12px}
HTML:
<div id="fejlec">...</div>

Pszeudo-osztályok

a:link {}
a:visited {}
a:active {}
a:hover {}

Az oldalon található hivatkozások különböző állapotait formázhatjuk így. A sorrend fontos! A hover azt adja meg, hogyan változzon a link kinézete, ha az egér fölé kerül. Például:

a:link {text-decoration:none}
a:hover {text-decoration: underline}

Ugrás az oldal tetejére

Formázás

Doboz modell

A CSS kétféle tartalmat különböztet meg elrendezés szempontjából:


  • blokk-szintű elemek

  • sorközi (inline) elemek

A blokk-szintű elemek mindig téglalap alakúak, a téglalap 4 rétegből tevődik össze. Belülről kifelé: tartalom (content), kitöltés/ bélés (padding), szegély (border), margó (margin). A külső három réteg méreteit külön-külön szabályozhatjuk: felül (top), jobbra (right), alul (bottom), balra (left).

DIV {
   margin: 20px;
   border-bottom: solid 2px;
   padding-left: 10px;
   padding-right: 10px;
}

Középre zárás CSS-sel

#centeredBox {
   margin-left: auto;
   margin-right: auto;
}

Ezt a módszert akkor használjuk, ha a középre igazítandó elemnek (például DIV) fix szélessége van. Ellenkező esetben ugyanis az az alapértelmezett viselkedés, hogy az elem (például H1) kitölti a rendelkezésre álló helyet, ezért nem lenne látható hatása a fenti kódnak.

Szöveget így igazíthatunk középre a teljes szélességet kitöltő “dobozokban”:

H1.kozepre {
    text-align: center;
}

Részletesebben: http://www.w3.org/Style/Examples/007/center

Pozicionálás

Háttérképek

DIV.szep {
   background: no-repeat left;
   background-image: url(hatter.gif);
   height: 200px;
}
<div>Szöveg</div>
<div class="szep"> </div>
<div>Ez is szöveg.</div>

Karakterek formázása

Szöveg

Szövegek beállítási lehetőségei:

  • text-align
  • text-decoration
  • text-transform
  • text-indent
  • text-shadow
  • letter-spacing
  • word-spacing
  • line-height
  • direction

Listák

A felsorolások szimbólumának megadása:

ul {list-style-type: square;}
ol {list-style-type: lower-alpha;}

További beállítások: http://www.w3schools.com/cssref/pr_list-style-type.asp

Ugrás az oldal tetejére

Weblap elrendezések CSS-sel

Menü és tartalom

HTML:

<div id="wrapper">
<div id="content">
  ...
</div>
<div id="mainNav">
  ...
</div>
<div id="footer">
  ...
</div>
</div>

CSS:

#wrapper {
  width: 640px;
}
#content {
  width: 520px;
  float: right;
}
#mainNav {
  width: 180px;
  float: left;
}
#footer {
  clear: both;
}

Tartalom két hasábban

Ugrás az oldal tetejére