CSS használata

Mielőtt számonkérnénk a weblapon, hogy miért nem formázza a stilus.css szerint, győződjünk meg róla, hogy csatoltuk-e azt. 
(<link rel=”stylesheet” type=”text/css” href=”stilus.css” />)

Igazítások

Szöveg

A szöveg típusú jelölők (bekezdés, címsorok, …) igazítása a text-align tulajdonság megadásával történhet. Ha több helyen is előfordul, akkor érdemes készíteni rá egy stílust:  (a példában középre igazítunk)
.kozep {
text-align: center;
}

középre igazítás Sharepoint Designerrel

Kép

A képekkel kapcsolatban két tipikus eset fordul elő:

igazítása a lapon

Ahhoz, hogy egy képet a megfelelő helyre tudjuk elhelyezni, két dolog kell:

  1. egy “dobozba” kell helyezni
  2. a doboznak a margókhoz való viszonyát kell megadni.

Konkrétan:

A feladat az, hogy egy képet helyezzük el egy cella jobb oldalára.
Akkor tehát a két dolog:
1.) dobozba rakjuk:
display: block;

majd 2.) megadjuk, hogy balról automatikus legyen a margótól való távolsága:
margin-left: auto;

szövegben elhelyezés (körbefuttatás)

Ha azt szeretnénk, hogy a képet körülfolyja a szövegünk, a float tulajdonságot kell megadnunk. Például a
float: right;
tulajdonságú elem jobbra “lebegteti” a képet, így a szöveg balról folyja körbe.

Táblázatok

Nézzük milyen tulajdonságúnak kell lennie egy tipikus érettségi feladatban a táblázatoknak (2010. tavaszi, környezetbarát feladat):

  1. A weblap szerkezete egy egysoros, kétoszlopos, középre igazított, 1000 képpont széles, szegély nélküli táblázattal készüljön!
  2. A táblázat háttérszíne PaleGreen (#98FB98 kódú világoszöld) legyen! A cellaközt és cellamargót állítsa 3-ra! Az első oszlop szélessége 150 képpont legyen!
  3. A táblázat bal oldali cellájába szúrja be a palack.png képet egymás alá négy példányban! A cella tartalma vízszintesen középre és függőlegesen felülre igazított legyen!

Itt aztán tobbzódunk a formázásban. Vegyük külön, mi az ami a táblázatra, s mi az, ami a cellákra vonatkozik. Ami nehézséget okozhat, az a cellaköz és cellamargó. A cellamargó az egyszerűbb, azt a cellaformázásnál adjuk meg, de a cellák közötti távolság (cellaköz) megadása viszont már nem a cellák magánügye, hanem a táblázathoz tartozik.

A Táblázat
Középre igazított, 1000 pont széles, szegély nélküli, háttérszíne PaleGreen. A cellaköz 3 px.

A Cella
A cellamargó 3px.

A baloldali cella
150 képpont széles, vízszintesen középre és függőlegesen felülre igazított.

Akkor nézzük konkrétabban:

Középre igazított: A táblázat egy “doboz”, tehát az igazítás a margóktól való távolsággal adható meg (Doboz kategória – SpD2007). A szélessége a width: tulajdonság (Elhelyezés kategória – SpD2007), szegély az egyértelmű (Szegély kategória – SpD2007) ( ha lenne szegélye, a sima vonal a “solid”), a háttérszíne a background-color (Háttér kategória – SpD2007). A cellaköz a border-spacing (Táblázat kategória – SpD2007)

#tablazatunk {
  margin-right: auto;
  margin-left: auto;
  width: 1000px;
  background-color: PaleGreen;
  border-spacing: 3px;
}

A cella : (Doboz kategória – SpD2007)
td {
   padding: 3px;
}

A balcella (Blokk kategória – SpD2007) igazítás, és szélesség (Elhelyezés kategória – SpD2007)

.balcella {
   width: 150px;
   vertical-align: top;
   text-align: center;
}