A CSS a megjelenítést (pl. szövegszín, keret), egyes esetekben az elemek viselkedését (pl. animálás, megjelenés, eltűnés, oldal layout, reszponzibilitás) szabályozza.
A CSS leírások egy-egy html elemhez kapcsolódnak, amit megadhatunk ...
közvetlenül az elem HTML címkéjének a részeként a style="…"
tulajdonsággal, ez az inline CSS
<p style="color: blue;">Ez egy kék bekezdés.</p>
a HEAD részben a <style>…</style>
címkék között.
külön stílusleíró fájlban (általában
A következő példában a
p.kek {color: blue;}
Ha a
<head><link rel="stylesheet" href="styles.css"> </head> <body><p class="kek">Ez egy kék bekezdés.</p> </body>
Minden CSS utasítás így néz ki: selector {tulajdonság: érték;}
, ahol
p
esetén a dokumentum összes bekezdésére;p {color: #ff0000;}
CSS bejegyzés az írja le, hogy minden bekezdés legyen piros színű.selector | értelmezés | példa | hatása |
---|---|---|---|
egy html tag | minden elemre érvényes | minden bekezdés kék színű lesz | |
egy osztály | minden elemre érvényes, ahol megadják a | minden éritett elem háttere adott színű lesz | |
egy adott elem | arra az elemre érvényes, ahol megadják a | az elem kerete adott vastagságú, stílusú és színű lesz | |
egérmutató fölé húzása | minden elemre érvényes, ahol megadják a | az egérmutatót fölé húzva megváltozik az elem mérete |
Példák:
<head><style> p {color: blue;} </style> </head>
<head><style> p.kek {color: blue;} </style> </head> <body><p>Ez sima bekezdés.</p> <p class="kek">Ez egy kék bekezdés.</p> </body>
Van még több lehetőség, ld (angolul): https://www.w3schools.com/html/html_css.asp
(https://www.w3schools.com/html/html_colors.asp)
rgb()
függvénnyel:
<p style="background-color: rgb(255, 0, 0);">Ez egy piros hátterű bekezdés.</p>
Ehhez még az átlátszóságot (alfa) is hozzá lehet venni, ami 0 és 1 közé esik (tizedes pont!):
<p style="background-color: rgba(255, 0, 0, 0.2);">Ez egy átlátszó, piros hátterű bekezdés.</p>
<p style="background-color: #ff0000;">Ez egy piros hátterű bekezdés.</p>
Ha a bekezdésen belül csak bizonyos részt akarunk másra formázni (pl. piros színűre), akkor a <span>…</span>
címkét használjuk (nemcsak színt lehet így megváltoztatni, pl. hátteret is):
<p style="color: blue;"><span style="color: red;">Piroska</span> és a farkas nem voltak jóban.</p>
Piroska és a farkas nem voltak jóban.
Kombináljuk a dolgokat! Legyen Piroska félkövérrel is szedve! Ezt elérheted a már korábban ismert <b>…</b>
címkékkel, de CSS-sel is:
<p style="color: blue;"><span style="color: red;"><b>Piroska</b></span> és a farkas nem voltak jóban.</p>
Piroska és a farkas nem voltak jóban.
<p style="color: blue;"><span style="color: red; font-weight: bold">Piroska</span> és a farkas nem voltak jóban.</p>
Piroska és a farkas nem voltak jóban.
Az egyes elemek (pl. táblázatcellák, blokkok) hátterének beállítása ugyanolyan lehetőségeket tartalmaz, mint az egész dokumentum hátterének beállítása. A weboldalon van lehetőség területeket meghatározni a <div>…</div>
címkékkel, a responsive weboldalak is ilyenekkel dolgoznak. A méreteket ilyenkor %-os mértékben adják meg, így az oldal szélességétől függően változik a területek (blokkok) mérete is.
Ha weblap hátterének képet adunk meg, akkor figyelni kell arra, hogy a kép melyik mappában van. Egyszerű weblapoknál a weblap HTML fájljával egy mappába rakjuk, és sima fájlnévvel hivatkozunk rá.
Ha egy weboldal sok képet használ, azokat külön (pl. img) mappába szokás rakni – ilyenkor a fájlnévvel együtt megadjuk a képeket tartalmazó mappa elérési útját is:
A teljes weboldal háttérszínét vagy háttérképét a <body>
tagnál adjuk meg, de csak CSS-sel. Példák:
<body style="background-image: url(hatter.jpg);">
<body style="background-color: yellow;">
<head><style>body {background-color: #55AA00;}</style></head>
Az igazsághoz hozzá tartozik az is, hogy régebben HTML attribútumként (jellemzőként), CSS nélkül is megadható volt a háttérkép és a háttérszín, de a szabványok fejlődése abban az irányban halad, hogy ahol lehet, inkább CSS-t használjunk. A HTML 5 nem támogatja, de itt megtalálod a részleteket: http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/tags/tag_body.asp.html#gsc.tab=0.
Az egyes blokkok háttérszínének, háttérképének beállításai:
background-image: url("fájlnév");
https://www.w3schools.com/cssref/pr_background-image.phpbackground-repeat: …
https://www.w3schools.com/cssref/pr_background-repeat.phpbackground-attachment: scroll;
https://www.w3schools.com/cssref/pr_background-attachment.phpbackground-clip: …
https://www.w3schools.com/cssref/css3_pr_background-clip.phpbackground-position:…
https://www.w3schools.com/cssref/pr_background-position.phpbackground-size: …
https://www.w3schools.com/cssref/css3_pr_background-size.phpbackground-color: rgb(255, 99, 71);
vagy background-color: #ff6347;
vagy background-color: rgba(255, 99, 71, 0.5);
https://www.w3schools.com/cssref/pr_background-color.phplinear-gradient: …
https://www.w3schools.com/css/css3_gradients.aspbackground: …
https://www.w3schools.com/cssref/css3_pr_background.php
Eddig volt:
img.nagykep {width: 600px; height: 450px;}
img.kiskep {width: 15%;}
img.kep2 {width: 15em;}
margin
h1 {margin: 0 0 50px 0;}Mind a négy margó külön megadható felső jobb alsó bal sorrendben.
p {margin-top: 0px; margin-right: 50px; margin-bottom: 50; margin-left: 0;}Ua., mint az előző.
.img1 {margin: 25px 50px;}Az alsó és a felső margó 25px, a másik kettő 50px.
.img2 {margin: 15px;}Minden margó 15px.
#kozep {margin: 0 auto;}Középre igazítja a tartalmat vízszintesen.
Bővebben: https://developer.mozilla.org/en-US/docs/Web/CSS/margin
padding
.alul-sok-hely {padding: 0 0 50px 0;}mind a négy helyköz külön megadható felső jobb alsó bal sorrendben
p {padding-top: 0px; padding-right: 50px; padding-bottom: 50; padding-left: 0;}
.img1 {padding: 10% 0;}
.img2 {padding: 15px;}
Bővebben: https://webiskola.hu/css-ismeretek/css-padding-magyarul/
.box {text-align: left|right|center|justify|initial|inherit;}Az | karakter azt jelöli, hogy valamelyik ezekből választható.
A sorkiegyenlítés HTML-ből nem is érhető el, csak ezzel a CSS beállítással - bár kérdéses, hogy egy weboldalon szükség van-e rá.
<div style="text-align: center;">Na itt tuti, hogy minden középre kerül.</div>
body {font-family: "Oxigen", sans-serif; font-size: 16px; font-weight: 400; line-height: 25px; color: #616161;}
font-family
: Betűtípus beállítása; tudod, a képernyőn a nem talpas font típusok érvénesülnek.
font-size
: Betűméret; ha relatív betűméretet szeretnél, a mértékegység em
legyen.
font-weight
: Betűvastagság, 0 és 700 közötti szám lehet.
line-height
: Megadható a sortávolság, az olvashatóság érdekében fontos.
color
: Nem árt a betűszínt megadni (alapértelmezés szerint fekete). Vigyázz, hogy nem legyen túl világos szürke - ha nem olvasható, a célcsoportod egy részét elveszíted.
h1 {background-color: #fcb900; padding-left: 10px; font-size: 22px; text-transform: uppercase; letter-spacing: 5px;}
background-color
: A szöveg eltérő háttérszíne a kiemelés egyik eszköze.
padding-left
: Néha beljebb kezdjük a szöveget.
text-transform
: Jelen esetben mindent nagybetűvel fog kiírni.
letter-spacing
: Ritkítja a betűket.
border
.img4 {border: 1px solid red;}
.img4 {border-width: 1px; border-style: solid; border-color: red;}
És mindezek külön-külön is beállíthatók az oldalakra:
<p style=" border-bottom-color:#009900; border-top-color:#FF0000; border-left-color:#330000; border-right-color:#0000CC; border-top-style:solid; border-bottom-style:dashed; border-left-style:groove; border-right-style:double; border-bottom-width:4px; border-top-width:10px; border-left-width: 2px; border-right-width:15px;">Őrült bekezdés!</p>
Őrült bekezdés!
Beállítható pl. az is, hogy az egér föléhúzása során legyen kerete a bekezdésnek. Ehhez kell egy ki javascript tudás is, ha inline css-ben akarod megvalósítani. Enélkül külön stílusleírásra van szükség (hover).
<p id="keretes" onmouseover="document.getElementById('keretes').style.border = '2px solid red'"> Beállítható pl. az is, hogy az egér föléhúzása során legyen kerete a bekezdésnek. Ehhez kell egy ki javascript tudás is, ha inline css-ben akarod megvalósítani. Enélkül külön stílusleírásra van szükség (hover).</p>
!important
.gomb1, .gomb2 {background-color: #FFDAB9 !important; color: #191970; width: 200px;}
Előfordulhat, hogy egy elem valamilyen tulajdonságát (pl. betűszín) több CSS leírás is tartalmazza. Ilyenkor a legjobb, ha a !important
szöveget hozzáadod (mint fent a háttérszín esetében), hogy biztosan érvényesüljön, amit szeretnél. Különösen fontos ez a CMS rendszerekben megadott egyedi CSS beállításokban.
És ismétlésként: mindezt megadhatod
style="background-color: …"
),<style>…</style>
címke), vagy<link rel="stylesheet" href="styles.css";>
)