Honlapkészítés Egyeteme/4.rész – Elemek, osztályok, azonosítók, dobozolás

A Wikikönyvekből, a szabad elektronikus könyvtárból.
li.fontos {
    font-family: Veranda, Helvetica, sans-serif
    font-size: 12 pt;
    line-height: 1.5;
    color: #0000ff;
}

Részekre bontva, a kódban találjuk az elemeket, az osztályokat, az azonoítókat. Osztály például a font-family: Veranda, Helvetica, sans-serif sor. A jelölő elem az li. Az osztály vagy class nevét a következőképpen adhatjuk meg, így a fenti kódsor határozza meg a lenti sorban írt szöveget.

<ul>
   <li>beírható szöveg</li>
   <li class="''fontos''">beírható szöveg</li>
   <li>beírható szöveg</li>
   <li class="''fontos''">beírható szöveg</li>
   <li>beírható szöveg</li>
   <li class="''fontos''">beírható szöveg</li>
</ul>

Az egyedi azonosítóval szintén a formázandó szövegre hivatkozhatunk.

14 <li id="fontos">beírható szöveg</li> 
12 #fontos {
13     font-weight: bold; 
14 }

A dobozolás módszerével áttekintheünk egy általános kód szerkezetét, melyek a következők: a (külső) margó (margin), a keret (border), a helykitöltés (padding). Egy keret megjelenését a következő tulajdonságok befolyásolják: a vastagsága (border-width), a stílusa (border-style), a színe (border-color). [1]

A padding-nak köszönhetően nem lóg rá a begépelt szöveg a keretre (border). A padding az a helykitöltés, a tartalom és a keret közötti távolság.

padding-top: 10px;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;

A border-nél többek között a double (dupla vonalas), a dotted (pontozott) vagy thick dotted (nagyobb pontozás), a solid (sima vonal) tulajonságokat adhatjuk meg. A border-bottom-width: 40px; kóddal a border alsó vonalát a width-del vastagítjuk. A legsűrűbben használt kódok:

border-color: red;
border-stlye: solid;
border-width: 20px; 
border-top-color: green;
border-left-style: double;
border-right-width: 5px; 
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

A margin (margókat) [2] 4 külöbnöző tulajdonság írja le:

margin-top: 20px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 50px;

Egy doboz formázása a következőképpen indul:

p {
 width: auto;
 height: auto;
}

A float használata kiváló képeket pozícionálására.

Azonosítók[szerkesztés]

A CSS szerkesztés során sűrűn kell használni a <div> tagokat, class-okként definiálhatjuk a hozzájuk tartozó tulajdonságokat, amiket egy külön CSS fileba menthetünk, a megfelelő hivatkozásokkal érjük el azokat.

<div class="float"
<div id="cont_jccm">

A class és az id egy sorban így néz ki:

<div class="float" id="cont_jccm">

Betűkészletek[szerkesztés]

A betű fajtáját a következőképpen adhatjuk meg: p{font-family:"Times New Roman", Times, serif;}

<html>
<head>
<style type="text/css">
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>[3]

A normal, italic, oblique paraméterekkel a betű stílusát változtathatjuk meg.

<style type="text/css">
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
<html>
<head>
<style>
h3 {font-size:20px;}
h4 {font-size:30px;}
p {font-size:14px;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in px allows Firefox, Chrome, and Safari to resize the text,  but not Internet Explorer.</p>
</body>
</html> [4]

Linkek[szerkesztés]

<html>
<head>
<style type="text/css">
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS 
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order 
 <nowiki>to be effective.</p>
</body>
</html>

Lista, Felsorolás[szerkesztés]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head> <title>this is the title of the web page</title>

<style type="text/css">

ul.disc {list-style-type: disc;}

ul.circle {list-style-type: circle;}

ul.square {list-style-type: square;}

ul.none {list-style-type: none;}


</style>

</head> <body> <ul class="disc">

<li>CSS</li>

<li>HTML</li>

<li>tutorial</li>

</ul>


<ul class="circle">

<li>CSS</li>

<li>HTML</li>

<li>tutorial</li>

</ul>


<ul class="square">

<li>CSS</li>

<li>HTML</li>

<li>tutorial</li> <nowiki></ul>


<ul class="none">

<li>CSS</li>

<li>HTML</li>

<li>tutorial</li>

</ul>

</body>

</html> [5]

Referenciák[szerkesztés]

Források[szerkesztés]