Honlapkészítés Egyeteme/3.rész - Stíluslapok
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ésA 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- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye throughout 1.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye conjuction 2.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye detachable 3.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye improved 4.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye marked 5.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye component 6.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye ignition 7.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye morningdew 8.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye offlimits 9.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye abundant 10.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye Beautiful Smile 11.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye Greenfield 12.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye everydayseries 13.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye tropics 14.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye alpine skiing 15.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye Golden Xmas 16.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye Autumn leaves 17.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye Hotel !!! 18.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye Fashion look 19.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye Study 20.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye Ethno Orange 21.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye Palm Beach 22.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye Phone mania 23.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye Photo Store 24.
- Honlapkészítés Egyeteme 3.rész - Stíluslapok/CSS stlye Red Wall 25.
Források
szerkesztés- TRY IT YOURSELF - CSS Examples
- TRY IT YOURSELF - Gallery www.w3schools.com
- Joomla Templates http://www.siteground.com
- http://www.joomla.org.hu Joomla download
- Weboldalkészítő suli #2 - (X)HTML-alapok és -struktúra Pcworld, 10-03-27
- Stíluslapok HTML suli
- <div> pozícionálás
- Building a Simple CSS Framework www.devarticles.com
- CSS 100% Height DIV's tutorial www.webmasterworld.com
- CSS Background-color Property www.1keydata.com
- Egyforma magas DIV-ek CSS-el rendhagyó módon