___pacajdesign* - G-Portál

css kódok

Íme pár alapszínű css-kód, és hozzá segítség, hogy is alakíthato át saját magad a kedvenc színeidre.

Szótár:

- ahol # jel van, és utánna hat karakter, az egy szín kódja.
- background-color: ez a háttér színét jelenti, ha azt írod, hogy transparent, akkor átlátszó lesz
- font-family: betűtípus, fontos hogy helyesen írd be a nevét, és olyat keress, ami olvasható, és általában minden számítógépen van
- font-size: ez a betű mérete, pixelbe kell megadni, ennek a rövidítése a px
- font-style: a betű stílusa, tehát félkövér (bold), dőlt (italic), vagy aláhúzott (underlined)
- border-bottom(-left, -right, -top): ez a vonalakat jelenti, a 3px a vastagságot, a #808080 a színt, a solid az egyenes vonalat jelenti (solid - egyenes, dotted - pöttyözött, dashed - szaggatott vonal)
- cursor: ez a kurzor típusa, lehet normál (normal) vagy esetleg egy kijelölő-kereszt (crosshair)

Figyelj rá:

- a dőlt betűket mindenképp töröld ki!
- mielőtt css-t raksz fel, mindenképp csinálj egy külön modult is, és abba tedd
- ha beraktad a css-t, akkor a szövegszerkesztő ablak alatt van két kocka, amikben pipák vannak, ezeket vedd ki, hogy átlátszó legyen a modul,és senki se lássa
- a kódot a Forráskódba illeszd, ezt a gombot megtalálod ott, ahol a betűtípust, vagy a félkövér betűt lehet beállítani
- ha a css-t felraktad, jobb, ha minden KÖZÉPSŐ modulnál ki van pipálva mindkét kocka

Modulfejléc megjelenítve

Modulkeret és -háttér megjelenítve

Itt egy alap css, lássuk, hogy mi mit jelent:
Fontos, hogy minden dőlt betűs részt törölj ki belőle!
Kép róla:

input { -ez az egész a bejelentkezés és a számláló része, ezt hagyhatod.
background-color: #ffffff;
font-family: "trebuchet ms";
font-size: 10px; color: #a3a3a3;
border-left: c0c0c0 1px solid;
border-right: c0c0c0 1px solid;
border-top: c0c0c0 1px solid;
border-bottom: c0c0c0 1px solid;
}

td.modtitle { - ez a modulfejléc kódja, tehát ami a modul felett van felirat, ez ugye csak akkor látszik, ha a szövegszerkesztő alatt ki van pipálva mindkét kocka! ezt már alakíthatod.
background-color: #ffffff; - mf. háttérszín
font-family: trebuchet ms; - betűtípus
text-transform: uppercase; - ez azt jelenti, hogy nagybetűs lesz a modulfelirat
color: #000000; - a betű színe
font-style: bold; - a betű stílusa, tehát félkövér, dőlt, vagy aláhúzott
font-size: 10px; - a betű mérete
letter-spacing: 0px; - betű térköz
text-align: left; - a szöveg igazítása, jobbra, balra, vagy középre
border-bottom: 3px solid #C3C0C0; - a modul tartalmát és a modulfejlécet elválasztó vonal mérete, stílusa és színe
}

td.modbody { - ez a modul kódja
background-color: #ffffff; - a modul háttere
font-family: "trebuchet ms"; - a modulban a betűk betűtípusa, amennyiben általánosra állítottad
color: #838383; - a betűk színe
font-size: 10px; - a betűk mérete
padding: 4px;
}

a:active { - a link kódja, ha normál
font-family: "trebuchet ms"; - betűtípus
color: #c0c0c0; - szín
text-decoration: none; - díszítés
cursor: normal; - kurzor típusa
}

a:link { - a link kódja, ha ráviszed az egeret
font-family: "trebuchet ms"; - betűtípus
color: #838383; - szín
line-weight: 1px;
text-decoration: none;
cursor: normal;
}

a:visited { - a link kódja, ha már kattintottál rá korábban is
font-family: "trebuchet ms"; - betűtípus
color: #838383; - szín
text-decoration: none;
cursor: normal;
}

a:hover { - a link kódja, ha kattintasz
font-family: "trebuchet ms"; - betűtípus
color: #c0c0c0; - szín
text-decoration: none;
cursor: normal;
}

i, em { - ha dőlt a betű, akkor ....
font-style: italic;
font-family: georgia; - betűtípus
color: #E19756;- szín
}

b, strong { - ha félkövér a betű, akkor ....
font-style: bold;
font-family: "trebuchet ms"; - betűtípus
color: #2B7BAD; - szín
font-size: 10px;
}

u, underlined { - ha aláhúzott a betű, akkor ....
font-style: underlined;
color: #8FAFD8;- szín
font-size: 10px;
font-family: "trebuchet ms"; - betűtípus
}

p {
line-height: 10px;
}

body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
}</p></style></p>

Egy világoskék, szaggatott vonalas, átlátszó hátterű kód:
Kép róla:

input {
background-color: #F8F8F6;
font-family: "trebuchet ms";
font-size: 9px;
color: #a3a3a3;
border-left: a3a3a3 1px solid;
border-right: a3a3a3 1px solid;
border-top: a3a3a3 1px solid;
border-bottom: a3a3a3 1px solid;
}

td.modtitle {
background-color: transparent;
font-family: "trebuchet ms";
font-size: 14px;
color: #6381ba;
border-bottom: 2px dashed #bebebe;
}

BODY {
scrollbar-face-color: #f8f8f6;
scrollbar-highlight-color: #a3a3a3;
scrollbar-3dlight-color: #30b3ad;
scrollbar-darkshadow-color: #30b3ad;
scrollbar-shadow-color: #282219;
scrollbar-arrow-color: #a3a3a3;
scrollbar-track-color: #F8F8F6;
}

td.modbody {
background-color: transparent;
font-family: "trebuchet ms";
color: #a3a3a3;
font-size: 9px;
}

a:active {
color: #6381ba;
line-weight: 1px;
text-decoration: none;
cursor: normal;
}

a:link {
color: #808080;
line-weight: 1px;
text-decoration: none;
cursor: normal;
}

a:visited {
color: #808080;
line-weight: 1px;
text-decoration: none;
cursor: crosshair;
}

a:hover {
color: #6381ba;
line-weight: 1px;
text-decoration: none;
cursor: crosshair;
}

i, em {
font-style: italic;
color: #bebebe;
}

b, strong {
font-style: bold;
color: #6381ba;
}

p {
line-height: 12px;
}</style></p>
<p><style type="text/css">

</style></p>

Egy narancssárga, szaggatott vonalas, átlátszó hátterű kód:
Kép róla:

td.modtitle {
background-color: transparent;
font-family: "trebuchet ms";
font-size: 14px;
color: #f4bf59;
border-bottom: 2px dashed #bebebe;
}

BODY {
scrollbar-face-color: #f4bf59;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #ffffff;
}

td.modbody {
background-color: transparent;
font-family: "trebuchet ms";
color: #a3a3a3;
font-size: 9px;
}

a:active {
color: #f4bf59;
line-weight: 1px;
text-decoration: none;
cursor: normal;
}

a:link {
color: #808080;
line-weight: 1px;
text-decoration: none;
cursor: normal;
}

a:visited {
color: #808080;
line-weight: 1px;
text-decoration: none;
cursor: crosshair;
}

a:hover {
color: #f4bf59;
line-weight: 1px;
text-decoration: none;
cursor: crosshair;
}

i, em {
font-style: italic;
color: #bebebe;
}

b, strong {
font-style: bold;
color: #f4bf59;
}

p {
line-height: 12px;
}</style></p>
<p><style type="text/css">

</style></p>

Egy nagyon kék színű, átlátszó hátterű css:
Kép róla:

input {
background-color: transparent;
font-family: "trebuchet ms";
font-size: 10px;
color: #0077FF;
border-left: 808080 1px solid;
border-right: 808080 1px solid;
border-top: 808080 1px solid;
border-bottom: 808080 1px solid;
}

td.modtitle {
background-color: transparent;
font-family: "trebuchet ms";
text-align: center;
text-transform: uppercase;
font-size: 10px;
color: #0077FF;
font-style: bold;
border-left: 6px solid #0077FF;
}

BODY {
scrollbar-face-color: #0077FF;
scrollbar-highlight-color: #0077FF;
scrollbar-3dlight-color: #0077FF;
scrollbar-darkshadow-color: #0077FF; scrollbar-shadow-color: #0077FF;
scrollbar-arrow-color: #0077FF;
scrollbar-track-color: #0077FF;
}

td.modbody {
background-color: transparent;
font-family: "trebuchet ms";
color: #0077FF;
font-size: 10px;
}

a:active {
font-family: "trebuchet ms";
color: #0077FF;
line-weight: 1px;
text-decoration: none;
cursor: normal;
border-bottom: 2px solid c0c0c0;
background-color: e2e2e2;
}

a:link {
font-family: "trebuchet ms";
color: #0077FF;
line-weight: 1px;
text-decoration: none;
cursor: normal;
}

a:visited {
font-family: "trebuchet ms";
color: #0077FF;
line-weight: 1px;
text-decoration: none;
cursor: normal;
}

a:hover {
font-family: "trebuchet ms";
color: #0077FF;
line-weight: 1px;
text-decoration: none;
cursor: normal;
border-bottom: 2px solid c0c0c0;
background-color: e2e2e2;
}

i, em {
font-style: italic;
font-family: georgia;
color: #0077FF;
}

b, strong {
font-style: bold;
font-family: verdana;
color: #0077FF;
text-transform: uppercase;
font-size: 7px;
letter-spacing: 1,5px;
}

p {
line-height: 10px;
}</style></p>

Nyakunkon a Karácsony, ajándékozz születési horoszkópot barátaidnak, ismerõseidnek.Nagyon szép ajándék! Várlak, kattints ***** Dryvit, hõszigetelés! Vállaljuk családi házak, nyaralók és egyéb épületek homlokzati szigetelését! 0630/583-3168 Hívjon! ***** A legfrissebb hírek a Super Mario világából és a legteljesebb adatbázis a Mario játékokról.Folyamatosan bõvülõ tartalom. ***** Gigágá! Márton napján is gyertek a Mesetárba! Nemcsak libát, de kacsát is kaptok! Játsszatok velünk! ***** A Nintendo a Nintendo Music-kal megint valami kiváló dolgot hozott létre! Alaposan nagyító alá vettem, az eredmény itt. ***** Leanderek, Parfümök, Olajok, és Szépségápolási termékek! Használd a LEVI10 kupont és kapj 10% kedvezményt!Megnyitottunk ***** Megjelent a Nintendo saját gyártású órája, a Nintendo Sound Clock Alarmo! Ha kíváncsi vagy, mit tud, itt olvashatsz róla ***** Megnyílt a webáruházunk! Parfümök, Szépségápolási termékek, Olajok mind egy helyen! Nyitási akciók, siess mert limitált! ***** Az általam legjobbnak vélt sportanimék listája itt olvasható. Top 10 Sportanime az Anime Odyssey-n! ***** Pont ITT Pont MOST! Pont NEKED! Már fejlesztés alatt is szebbnél szebb képek! Ha gondolod gyere less be! ***** Megnyílt a webáruházunk! NYITÁSI AKCIÓK! Tusfürdõ+Fogkrém+Sampon+Izzadásgátló+multifunkcionális balzsam most csak 4.490! ***** Új mese a Mesetárban! Téged is vár, gyere bátran! ***** Veterán anime rajongók egyik kedvence a Vadmacska kommandó. Retrospektív cikket olvashatsz róla az Anime Odyssey blogban ***** Parfümök, Olajok, Párologtatók mind egy weboldalon! Siess mert nyitási AKCIÓNK nem sokáig tart! Nagy kedvezmények várnak ***** Dryvit, hõszigetelés! Vállaljuk családi házak, nyaralók és egyéb épületek homlokzati szigetelését! 0630/583-3168 Hívjon! ***** Aki érdeklõdik a horoszkópja után, az nem kíváncsi, hanem intelligens. Rendeld meg most és én segítek az értelmezésben! ***** A Múzsa, egy gruppi élményei a színfalak mögött + napi agymenések és bölcseletek ***** KARATE OKTATÁS *** kicsiknek és nagyoknak *** Budapest I. II. XII.kerületekben +36 70 779-55-77 ***** Augusztus 26-án Kutyák Világnapja! Gyertek a Mesetárba, és ünnepeljétek kutyás színezõkkel! Vau-vau! ***** A horoszkóp elemzésed utáni érdeklõdés, nem kíváncsiság hanem intelligencia. Rendeld meg és nem fogod megbánni. Katt!!!