Most egy rövid CSS alap bemutatót írtam össze nektek, ami segítségével jobban megérthetitek a stílusalap formázását. Ha megértitek, rájöttök, hogy egyáltalán nem nehéz! :)

 

Legelőször be is mutatok nektek egy általános CSS kód kinézetet, egyenlőre nem magyarázok semmit, csak ismerkedjetek meg vele. (Egyébként ez modulstílusokat jelöl.)

.header1{
background: url();
text-align: center;
width: 350px;
height: 150px;
font-size: 18px;
font-weight: bold;
color: #ffffff;
}

.middle1{
background: url(images/sidebar_mid.png);
width: 330px;
padding-right: 15px;
padding: 50px 10px;
padding-top: 0px;
margin-bottom: -30px;
text-align: justify;
color: #ffffff;
}

Majd, a CSS beillesztését szeretném bemutatni nektek, hogy hogyan is lehetséges ezeket a kódokat berakni a HTML alapodba. 2 féle módszer van:

1. beillesztés HTML-be

Ezzel a módszerrel akkor illesztheted be a CSS-t, ha oldaladon nincs külön CSS fájl (pl. G-Portálon) így egyszerűen a HTML kódodba tudod becsatolni. A nyitó és záró tag közé kell illesztened a CSS-t. Ha HTML felületbe illeszted a kódot, ezt sose felejtsd el, különben nem fog működni. Mindig figyelj a lezárásra is!

<style type="text/css">
...CSS kód...
</style>

2. CSS fájl beillesztése HTML-be

Hogyha van külön CSS fájlod (HTML alapú oldalaknál, pl wordpress, PHP) akkor így tudod beilleszteni oldaladra a CSS kódodat, ami egy style.css nevezetű fájlban helyezkedik el.

<link rel="stylesheet" href="CSSkódotURLje" type="text/css" media="screen" />

 

Most, hogy már ezt is tudjuk, a CSS kódok általános kinézetét, valamint a kódolás menetét mutatnám be. Itt is van nyitó, és záró tag, csak úgy, mint  a HTML-ben, csupán itt kapcsos zárójelekről van szó. Itt egy példa:

.header{
....stíluskészlet...
}

Ne hogy elfelejtsem megemlíteni, hogy a CSS-ben az egyes utasítások végéről sose hagyd le a pontosvesszőt, mivel azzal zárod le az egyes sorokat:

.header{
background-color: red;
}

Az egyes stílusokat mindig így választjuk el a többitől, nyitjuk, zárjuk le. Valamint, ha meg akarjuk jeleníteni a HTML-ben az egyes elemeknél, akkor ügyelni kell az egyes kódok elnevezésére. Kétféle megjelölés létezik:

#header - kettőskereszt
.header - pont

Ezeket különböző módon jelenítjük meg a HTML-ben.

Kettőskereszt:

Ez mindig az ID-t jelöli, egy-egy nagyobb részleget jelenítünk meg így (pl egy egész modulsor)

<div id="header">
...tartalom...
</div>

Ezáltal a <div> tagek közt lévő terület veszi majd át az adott stílust, amit a CSS-ben megadunk. Például a fejlécet is így formájuk meg.

Pont:

A ponttal legjobban cellastílusokat szoktunk kódolni, de <div> tagek közé is beilleszthetjük. Ilyenkor mindig class taggel adjuk meg az adott stílust.

<table><tr><td class="header">cellatartalom</td></tr></table>

vagy

<div class="header">
...tartalom...
</div>

A ponttal deklarált stíluskészleteket képek, de linkek, szövegrészek esetén is megjeleníthetjük.

<img src="http://url" class="linkes">

vagy

<a href="http://url" class="linkes">

Így az adott stílust szinte bárhol megjeleníthetjük. Lehet, hogy egyenlőre kicsit kacifántosnak tűnik a CSS kódok alkalmazása, de ha rájössz, igen egyszerű az átalakításuk, létrehozásuk is. A következőkben erről jobban be fogok számolni nektek.

 


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *