Css alapok/stílusok

A css-t lehet megadni az index fájlodban is, de jobb, ha külön style.css fájlt hozol létre, és abban csinálod! Én most így fogom elmagyarázni.

Először is, hogy az oldaladon megjelenjenek azok a kódok, amiket a stílusban adsz meg, az index-ed <head> tagjába be kell ezt tenned:

<link rel=”StyleSheet” type=”text/css” href=”style.css”>

És most nyissunk egy új lapot jegyzettömben. Elmenti style.css néven kelle majd a végén. A stílusban, aminek stílust akarsz adni, aztúgy lehet megcsinálni, hogy írsz egy nevet, majd egy { jelet, ezután beírod a stíliusokat, majd lezárod egy } jellel.

Kezdjük a legegyszerűbbel, maga az egész oldal stílusával:

body, table, td, tr {
font-family: arial;
color: #E6E6E6;
font-size: 10px;
font-weight: bold;
text-align: justify;
cursor: default;}

Az egész oldal stílusa azt jelenti, hogy amit a body részbe írsz sima szöveget, vagyis nem linket, nem félkövér/dőlt/aláhúzott szöveget, csak sima szöveget, annak határozhatod meg a betűméretét, betűtípusát, betűszínét.

Nézzük részenként:

font-family: arial; –> Oldalon a szöveg betűtípusa, előnyös olyat megadni, ami miden gépen alapjáraton megvan, mint a times new, roman, arial, arial black, verdana, georgia.

color: #e6e6e6; –> Oldalon a szöveg betűszíne, ide egy színkód kell, ezt találsz az oldalamon is, vagy képszerkesztő programokban is keverhetsz színt, mint photoshop, vagy photofiltreben.

font-size: 10px; –> Oldalon a szöveg betűmérete.

font-wegiht: bold; –>Itt adhatod meg hogy az oldalon a betű félkövér legyen, dőlt, vagy aláhúzott, vagy sima. A félkövér: bold, dőlt: italic, aláhúzott: underline, sima: normal.

text-align: justify: –>Szöveg elrendezése, a justify sorkizártat jelent.

cursor: default; –> kurzor, itt az általános nyíl van beállítva, de írhatsz ide crosshair, vagy ne-resize, stb… Én ezt a hármat szoktam használni de sok fajta van még, de azoknak a nevét nem tudom kívűlről xD

Most jöjjön az egyszerű link:

A:link { color:#273242; font-family: arial; font-weight:normal; text-decoration:none; }
A:visited { color:#273242; font-family: arial; font-weight:normal; ;text-decoration:none; }
A:active { color:#273242; font-family: arial; font-weight:normal; text-decoration:none; }
A:hover { color:#E19CAC; font-family: arial; font-weight:normal; text-decoration:none; }

Az egyszerű link alatt azt a linket értem, amit csak simán így kódolsz:
<a href=”http://valami.hu”>Valami.hu</a>

Ezt azért fontos elmondani, mert majd lesz később egy másik fajta linkelés is, amiről majd írni fogok.

Most nézzük az egyeszerű linkelést: a “link/visited/active” ez a három jelenti voltaképpen a linket alaphelyzetben, a hover pedig mikor ráviszed az egeret a linkre.

A color-nál értelemszerűen a linkek színét tudod beállítani, a font-family a betűtípust, a font-weight hogy félkövér legyen, dőlt, aláhúzott vagy sima, a text-decoration pedig, hogy legyen-e “dekorálva” valamivel, én itt eddig mé egyet használtam az underline-t xD.
Persze még itt is betudsz tenni mást is, nem csak ezeket amiket írtam, ha nem szeretnéd hogy olyan legyen a betűmérete, mint az oldalon a szövegnek akkor be tudod tenni azt is, csak beírod még oda a végére, persze még a } jel elé, hogy font-size: 12px.

Az oldalon be tudod állítani a stílus segítségével, hogy a félkövér, dőlt, illetve aláhúzott szövegnek milyen legyen a színe, háttérszíne, betűmérete, stb..

A következőképpen:

b { color:#1F1724; bakcground-color:#000000; font-size: 9px; }i { color:#1F1724; border-bottom: 2px solid #121212; font-size: 9px }

u { color:#1F1724; font-size: 9px }

 

Kezdjük is: color: szín, background-color: háttérszín, font-size: betűméret.
És egy kicsit kitérnék erre a keretre is, mert itt aztán nagyon lehet variálni 🙂

border: 1px solid #44FFF4; —>

Szöveg

border-bottom: 2px solid #7FFFA3; —>

Szöveg

border-bottom: 1px dotted #FB3FAE; —>

Szöveg

border-bottom: 2px dotted #FFFE96; border-top:1px solid #00FE48; —>

Szöveg

border-left: 10px solid #EB67FF; —>

Szöveg

border-left: 10px solid #EB67FF; border-bottom:2px solid #EB67FF; —>

Szöveg