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