Wikikönyvek

Honlapkészítés Egyeteme/3.rész - Stíluslapok

< Honlapkészítés Egyeteme

Ha megvan egy weboldal szerkezete, például függőlegesen három részre osztottuk (fejléc, közép, lábléc), a főbb részek kidolgozása következik.

A főoldalon levő menüpontokat az <a> taggel hivatkozássá alakítjuk. A href attribútumainak értékeként # jelet írunk. 

<a href="#">Regisztráció></a>

A menürész után megszerkesztjük a fő szöveget tartalmazó jobboldali részt.<div id="jobb_oldal">...</div>, majd a láblécet <div id="jobb_oldal">...</div>. 

<!-- LÁBLÉC -->
   <div id="lablec">
        <p>Copyright</p>
   </div>

Egy bevezető részt elhelyezhetünk a jobb oldalon. A <div> tagbe belerakunk egy <p> taget, bevezető azonosítóval. <em>...</em> címkékkel kiemelhetjük szövegünk egy részét. Nem kell feltétlenül beágyazni a <div>-be a bekezdésszöveget, de ha ez szükséges ezt később megtehetjük. 

<!-- tartalom -->
    <div id="jobb panel">
        <p id="bevezeto">A tanároknak nem oktattak és nem is akartak megtanulni <em>programozni</em>. <a href="if">Tudjon meg többet az XHTML-ről.</a></p>

<h3> kiemelést használunk a továbbiakban, mert a h1, a h2 már a fejlécben szerepelt. A <p> tagekkel a bekezdést formázzuk. A http://validator.w3.org oldalon leellenőrizhetjük munkánkat, hogy helyes-e a HTML, XHTML kódolás.

A <div> id azonosítókra és a class osztályjelölőkre nagyon könnyen lehet hivatkozni a stíluslapokon.

CSS

szerkesztés

A stílusréteg számít az XHTML után egy weboldal második rétegének. A tartalmi és szerkezeti elemek megjelenéséért felelős. A <font> alkalmazását jelentősen lecsökkenti a CSS stíluslapok használata. Erre azért van szükség, mert ha oldalanként akarjuk átszerkeszteni például a betűtípust, rengeteg időbe telik. Egy stíluslappal pár percbe telik kicserélni az Arialt Veranda fontra. Nézzük meg elemenként egy stíluslap elejét a stílusdefiníciót. 

p {
    font-family: Veranda, Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #88ccff;
}

Az első sorban a p-t jelölőnek nevezzük. A color, a line-height (sortáv), a font-size, a font-family a tulajdonság. A tulajdonság mögötti adatok az érték. A stílusdefiníció vagy CSS-szabály 2 fő részből tevődik össze. A jelölő (selector) az egyik, a másik a definíciós vagy deklarációs blokk. A jelölő megmondja, melyik részre vonatkozik a stílus. A definíciós résznek a { kapcsos } zárójel közé eső szakaszt nevezzük. A deklarációs blokk a fent említett tulajdonságokból és az értékekből tevődik össze.

A http://arth2o.hu/css oldalon letölthető stíluslapok némelyike a style.css fájlon kívül tartalmaz circle.xcf fájlt és az ahhoz tartozó .png-t is.

A háttér színét többféleképpen adhatjuk meg. 

{padding:0;margin:0px;font-family:arial, verdana;font-size:14px;}
body {background:#fff;min-width:1000px;text-align:center;}
#wrapper{width:990px;margin:0 auto;background:#fff;text-align:left;}
#header {width:96%; background:#00C6FF; padding:10px 2% 10px 2%; height: 100px;}
#header_menu{height:20px;background:#ff5400;text-align:center;padding:10px 2% 10px 2%;margin:5px 0px 0px 0px;}
#content {float:right;width:69%; background:#00C6FF; padding:10px 2% 10px 2%; margin:5px 0px 5px 0px;min-height:350px;height: auto !important;}/*del min-height ->dinamic content*/
#sidebar{float:left;width:22%;min-height:350px;height: auto
!important;background:#FF4200;padding:10px 2% 10px 2%; margin:5px 0px 5px 0px;}
#footer_menu{clear:both;height:20px;background:#ff5400;text-align:center;padding:10px 2% 10px 2%;margin:0px 0px 5px 0px;}
#footer {clear:both;width:96%; background:#00C6FF; padding:10px 2% 10px
2%;background:#00C6FF;height: 100px;}
.top_corner_end{height:20px;background:#00C6FF;}
.topleft_corner{float:left;background:#fff url(circle.png);width:20px;height:20px
background-position:0px 0px;}
.topright_corner{float:right;background:#fff url(circle.png);width:20px;height:20px; background-position:20px 0px;}
.bottomleft_corner{float:left;background:#fff url(circle.png);width:20px;height:20px; background-position:0px 20px;}
.bottomright_corner{float:right;background:#fff url(circle.png);width:20px;height:20px; background-position:20px 20px;}
.bottom_corner_end{height:20px;background:#00C6FF;}
.clear{clear:both;}

Példatár

szerkesztés

Források

szerkesztés
A lap eredeti címe: „https://hu.wikibooks.org/w/index.php?title=Honlapkészítés_Egyeteme/3.rész_-_Stíluslapok&oldid=413187”