Honlapkészítés Egyeteme/4.rész – Elemek, osztályok, azonosítók, dobozolás
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]