2011. szeptember 12., hétfő

Alap CSS minden oldalhoz

Az alap CSS kód aminek mindenhol ajánlott ott lennie, de az sem mind1 hogyan van megírva, arra is oda kell figyelni hogy mindenkinél szépen jelenjen meg.
Minden oldal alapja a HTML és a forráskód első részleten a html tag és ezen belül van a body tag, ez olyan mint egy hatalmas doboz amibe az egész oldal van, tehát erre is érdemes CSS-t írni:


html body {
cursor: default;
font-family: Courier New !important;
background: #FFFFFF url(Ide tedd a háttér linkjét) no-repeat fixed top left/* CSS by srmark */;
color: #000000 !important;
}


Az első sorban van a szelektor, a második azt eredményezi hogy a kurzor az alap kurzor lesz, tehát amikor a szövegekre ráviszed az egeret akkor nem a szövegkijelölő kurzor jelenik meg hanem nem változik meg, a következő sorban a betűtípus, aztán a háttér. A háttérképet lehet hogy felesleges még1szer magadni, ártani nem árthat, a háttérszínt viszont ajánlott mert alapból fehérre van beállítva és ha a háttér kisebb mint a képernyő akkor ahol hely maradna ott a háttérszín jelenik meg. A no-repeat azért kell hogy ne ismétlődjön a háttér, a fixed azért hogy scrollozáskor ne mozogjon a háttér, a top left azért hogy a háttér jobb oldalt fenn legyen, ha középre lenne igazítva nagy felbontáson amit én használok csúnyán jelenne meg. A color: #000000 pedig a szöveg színe.
A következő elemek a linkek, ennek a szelektora olyan 1szerű hogy csak 1 a betű az egész:

a {
text-decoration:none !important;
color:#000000 !important/* CSS by srmark */;
cursor: pointer !important;
}
a:hover, active {
text-decoration:none !important;
color:#666666 !important/* CSS by srmark */;
cursor: pointer !important;
}


A text-decoration:none eredményezi hogy a linkek ne legyenek aláhúzva, a következő sorban a link színe, az utolsóban pedig hogy a kurzor ne az alap legyen hanem a kéz ami a linkeknél, hivatkozásoknál jelenik meg. A kód második fele pedig a már ismert hover-t használja tehát egérrávitelre alkalmazott tulajdonságokat.
A hotdogon is sok helyen vannak olyan linkek melyek félkövérek, ezeknél sajnos nem CSS kóddal van meghatározva a félkövérség hanem a <b> html tag-el, ezért az előbbi linkekre vonatkozó CSS kód nem mindig működik, ezért egészítsük ki ezzel a kóddal is:

a b {
text-decoration:none !important;
color:#000000 !important/* CSS by srmark */;
cursor: pointer !important;
}
a b:hover, active {
text-decoration:none !important;
color:#666666 !important/* CSS by srmark */;
cursor: pointer !important;
}


Ennek a tartalma ugyanaz legyen mint az alap linkesnél.
A fenti kódok beillesztő kóddal együtt egészben így néznek ki:


<style type="text/css" rel="stylesheet">

html body {
cursor: default;
font-family: Courier New !important;
background: #FFFFFF url() no-repeat fixed top left/* CSS by srmark */;
color: #000000 !important;
font-weight: normal !important;
}

a {
text-decoration:none !important;
color:#000000 !important/* CSS by srmark */;
cursor: pointer !important;
}
a:hover, active {
text-decoration:none !important;
color:#666666 !important/* CSS by srmark */;
cursor: pointer !important;
}

a b {
text-decoration:none !important;
color:#000000 !important/* CSS by srmark */;
cursor: pointer !important;
}
a b:hover, active {
text-decoration:none !important;
color:#666666 !important/* CSS by srmark */;
cursor: pointer !important;
}

</style>

Nincsenek megjegyzések:

Megjegyzés küldése