Stíluslapok css
Miért vannak stíluslapok
CSS (Cascading Style Sheets) - a weboldalak stílusának kezelésére szolgáló nyelv.
A CSS használatával jelentősen csökkenthető a HTML-dokumentumok mennyisége, különösen, ha sok olyan oldal van, amely ugyanolyan stílusban működik, ugyanakkor egyszerűsíti az új dokumentumok létrehozásának és hozzáadásának munkáját.
A különböző stílusok leírását külön fájlokba mentheti, egyszerűen kezelheti a stílusokat.
A CSS leírása
Ebben az esetben ezeket a stílusokat használhatja a WEB-oldalon található elemekhez. Vagyis az összes szövegelem a címkéken belül,
ésEzen az oldalon piros dőlt betű jelenik meg, szimbólummérete 32 képpont.
És az utolsó lehetőség - a stílus leírása közvetlenül az elem címkéjén belül található, amelyhez ezt a stílust alkalmazzák, például:
Ez a stílus csak erre a feliratra vonatkozik
Ez a lehetőség nem a legjobb, hiszen a növekedéséhez vezet a oldal szétválasztása és a veszteség a kód mérete az egyes stílusok és egy külön adatlap.
Most vegye figyelembe azt az esetet, amikor a stílusokat nem az összes ugyanazon elemhez kívánja hozzárendelni, csak néhányhoz - ehhez használja a CLASS = "class name" vagy ID = "element name" paramétert. amely az oldal bármely eleméhez rendelhető (bekezdés, táblázat stb.).
A CLASS paramétert akkor használjuk, ha ugyanazt a stílust szeretnénk létrehozni több, de nem minden, oldalelemhez (azonos vagy különböző).
Például adja meg a stílusleírásban:
Meggyőződhet arról, hogy csak a táblázatban szereplő cellák jelenjenek meg félkövér dőlt betűkkel. Ehhez hozzárendeljük a klasszikus bi stílus stílusát:
Figyelem! Az osztálynevek kis- és nagybetűkre érzékenyek.
Az azonosítóval rendelkező stílus akkor használható, ha az oldal egyetlen eleme megfelel ennek az azonosítónak. Ha több elemet kell hozzárendelni ehhez a stílushoz, akkor ez már egy osztály.
Pszeudo-osztályok és pszeudo-elemek:
A pszeudo-osztályok és pszeudo-elemek speciális osztályok és elemek, amelyek a CSS-ben rejlenek és automatikusan CSS által engedélyezett böngészők által definiáltak.
A pszeudo-osztályok megkülönböztetik az egyes elemek különböző típusait, és saját stílusokat hoznak létre mindegyikük számára.
A pszeudo-elemek más elemek részei, így ezek a részek különböző stílusokat alkotnak az egész elemtől.
szintaxis:
választó: ál-osztály <свойства>
selector.class: ál-osztály <свойства>
választó: pszeudo-elem <свойства>
selector.class: ál-elem <свойства>
Az ál-osztályok és pszeudo-elemek listája:
Ebben a példában minden link kék lesz. Amikor megnyomja (aktív állapotban), változtassa a színt pirosra. Az egérmutató mozgatásakor az aláhúzás eltűnik.
A CSS nyelv rövid leírása
Betűtípus-tulajdonságok • font-family Ez a tulajdonság határozza meg az elem által használt betűtípust. Ha megad egy URL-t, a betűtípus automatikusan telepítésre kerül a felhasználó számítógépén
PÉLDA: font-family: Arial Black URL ('arialblack.ttf') • betűtípus (normál, dőlt) Az elem stílusa. Dőlt vagy hétköznapi
PÉLDA: betűkészlet-stílus: dőlt betű • betűtípus-változat (normál-normál, kis-sapkák - kisbetűs kisbetűk helyettesítése) A betűtípus megjelenítési lehetőségei. A Netscape nem támogatja ezt a tulajdonságot
Példa: font-variant: small-caps • font-weight (normál-normál, félkövér zsíros, merészebb-nagyon zsíros, könnyebb vékony, 100-900-pontos telepítési) Isolation (zsír) sejt
PÉLDA: betűsúly: vastag betűméret (XX%, XXpt, XXpx) Betűméret
PÉLDA: betűméret: 30pt • betűtípus (család, stílus, változat, súly, méret) Az összes fenti tulajdonság kombinációja.
PÉLDA: betűtípus: italic bolder Arial 12pt Text tulajdonságai. • szövegdekoráció (nincs, aláhúzott, aláhúzott, átvonallal, vonal áthúzva, villogó villogással) Szövegstílus
PÉLDA: szöveg-dekoráció: átvezetés • levélközponthoz (XX-szám) A betűk közötti távolság
Példa: letter-spacing: 100 • függőleges-align (alapvonal, sub, szuper, top-szöveget, felső, középső, alsó, alsó-szöveg, százalékban) elrendezése elemek képest más elemek állva egy sorban.
PÉLDA: függőleges igazítás: felső szöveg • szövegátalakítás (Nagybetűk - minden szó nagybetűvel kezdődik, FELSZERELÉS - a szöveg minden betűje nagybetűs lesz, kisbetűs - a szöveg minden betűje kicsi lesz.
PÉLDA: szöveg-transzformáció: nagybetűs • text-align (balra, jobbra, középre, igazolható) Szövegbeállítás.
PÉLDA: szöveg-igazítás: jobb • szöveg-behúzás (egységhossz vagy százalék) Szövegbevezetés.
PÉLDA: szöveg-behúzás: 30 em • vonalmagasság (egységhossz vagy százalék)
PÉLDA: vonalmagasság: 100% szín tulajdonság. • szín (#RRGGBB) Az elem színe
PÉLDA: szín: # f00000 • backgroung-color (#RRGGBB) Az elem háttérszíne
PÉLDA: háttérszín: # f00000 • háttérkép (URL) Háttérkép
Példa: background-image: URL ( "img.gif") • background-repeat (ismétlés - megsokszorozza a háttérképet minden irányban, repeat-x - megsokszorozza a háttérképet vízszintesen, repeat-y - megsokszorozza a háttérképet függőlegesen, no-repeat - ne ismételje meg a képet) Ismételje meg a háttérképet
PÉLDA: háttér-ismétlés: nincs megismételve • háttér-csatolás (görgetés-gördítés a háttérben a dokumentummal, rögzített rögzítés a háttérben) A háttérkép görgetési módja.
PÉLDA: háttér-csatolás: rögzített • háttér pozíció (% szélesség + magasság%, felső, középső, alsó, bal, középső, jobb, távolság a bal széltől + távolság a felső éltől)
PÉLDA: háttérpozíció: 50% 0% • háttér (szín, kép, pozíció, csatolás, ismétlés) Az összes fenti tulajdonság kombinációja.
PÉLDA: háttér: nem ismétlődő fekete fix 50% 0% Határértékek. • margin-top (hossz, százalék, auto)
PÉLDA: margin-top: 100 • margin-right (hosszúság, százalék, auto) A behúzás helyes
PÉLDA: margó-jobb: 100% • margin-bottom (hossz, százalék, auto) Alsó margó
PÉLDA: margin-bottom: 100em • margin-left (hossz, százalék, auto) Bal oldali behúzás
PÉLDA: margin-left: 100pt • margin (felső, jobb, bal, alsó) Kombinálja az összes fenti tulajdonságot.
PÉLDA: háttér: 100pt • padding-top (hosszúság, százalék) A behúzás felső határa
PÉLDA: padding-top: 100pt • padding-right (hossz, százalék)
PÉLDA: padding-right: 100% • padding-bottom (hossz, százalék) Offset az alsó határból
Példa: párnázó alsó: 100em • párnázás-balra (hossz, százalék)
PÉLDA: padding-top: 100 • párnázottság (balra, jobbra, felülre, alulra) A fenti tulajdonságok összevonása. A különböző oldalakhoz egyszerre több értéket is megadhat (legfeljebb négy). Ha egy értéket állít be - egyetlen oldalt állít be minden oldalra, ha kettő - akkor a különböző oldalakhoz különböző behúzási pontok vannak beállítva, és ha mindegyik oldal négy, akkor behúzódik.
PÉLDA: párnázottság: 100px • felső határ szélessége (hossz, vékony, közepes, vastag) a felső határ vastagsága
PÉLDA: felső határ szélessége: 100pt • szélesség-jobb szélesség (hossz, vékony, közepes, vastag)
PÉLDA: jobb szélesség: vastag • szélesség-alsó szélesség (hosszúság, vékony, közepes, vastag) az alsó határ vastagsága
PÉLDA: szegély-alsó szélesség: 100em • határ-bal szélesség (hosszúság, vékony, közepes, vastag)
PÉLDA: bal oldali szélesség: közepes • szélességszélesség (felső szélesség, jobb szélesség, bal szélesség, alsó szélesség) Az összes fenti tulajdonság kombinációja. Több értéket is megadhat egyszerre (legfeljebb négy) a különböző border'ov számára. Ha egy érték van beállítva - minden oldalra egyenletes vastagság van beállítva, ha kettő - akkor a különböző oldalakhoz eltérő vastagság van beállítva, és négy - majd az egyes oldalak vastagságát
PÉLDA: határszélesség: 15pt • border-color (színes) A határ színe.
PÉLDA: határszín: zöld • szegélyezett stílus A border'ov stílusa. Több értéket is megadhat egyszerre (legfeljebb négy) a különböző border'ov számára. Ha egy érték be van állítva - egy egységes stílust állítanak be minden fél számára, ha kettő - akkor a különböző oldalakhoz különböző stílusok vannak beállítva, és négy - az egyes felek számára egyedi stílusok vannak beállítva
PÉLDA: szegéllyel: szaggatott horony • szegéllyel (szélesség, stílus, szín) Az összes fenti tulajdonság kombinációja a felső határhoz.
PÉLDA: felső határ: 100mv vörös horony • jobb oldali szélesség (szélesség, stílus, szín) A fenti tulajdonságok egyesítése a jobb oldali határhoz.
PÉLDA: határ-jobb: 5pt bíbor szilárd • bal oldali (szélesség, stílus, szín) A fenti tulajdonságok kombinációját a bal oldali szegélyhez.
PÉLDA: határ-balra: 15pc korallbetét • szegéllyel alul (szélesség, stílus, szín) A bal oldali határ mindegyikének kombinációi.
PÉLDA: határ-alsó: 30 narancssárga kezdet • szegély (szélesség, stílus, szín) Az összes fenti tulajdonság kombinációja.
PÉLDA: határ: thik fekete dupla • szélesség (hossz, százalék) Az elem szélessége
PÉLDA: szélesség: 10% • magasság (hossz, százalék) Elem magassága
PÉLDA: magasság: 100pt • lebeg (balra, jobbra) Elem helye
PÉLDA: úszás: jobb • világos (balra, jobbra, mindkettő) Más elemek elrendezése körül
PÉLDA: tiszta: mindkét osztályozás. • kijelző (none-nem jelenik meg, block-sortöréseket előtt és után az elem, inline-nem bontja a vonalat. List-item-húr sortöréseket előtt és után az elem + hozzáad egy marker a lista elemeit) határozza meg, hogy a megjelenített lista elem
Példa: display: none • white-space (normál - „összenyomja” több egymást követő réseket egy, előre - megjelenítésére képes neskolkolkih egymást követő réseket, nowrap - nem teszi lehetővé a vezeték nélküli átviteli tag
) Beállítja, hogy az elemek közötti terek megjelenjenek
Példa: white-space: nowrap • lista-style-type (lemez, kör, négyzet, decimális, rövid szénláncú-Roman, felső-Roman, rövid szénláncú-alfa vagy a felső-alfa) határozza meg a lista típusától elem marker.
PÉLDA: list-style-type: alsó alfa • list-style-image (URL) megadja a listaelem marker típusát képként
PÉLDA: list-style-image: URL (cool.gif) • lista-stílus-pozíció (belül, kívül) A marker helyét határozza meg a listaelemtől függően
PÉLDA: list-style-position: belül • list-style (type, position, image) Az összes fenti tulajdonság kombinálása.
PÉLDA: lista-stílus: belül
A kiegészítők
Hosszúságméretek (Szintaxis: "+" / "-" XX egység)
Példa. -566pt em - EMS magassága font elem felhasználható ex - x-magassága szélessége "X" betű használt font elem px pixelek coll mm milliméter cm cm pt pont (1pt = 1 / 72in) pc pica (1db = 12pt) méri érdeke
Példa. -566% - / +% XX Csökkenés / százalékos növekedés. Színek Szín Név PÉLDA. magenta • #rrggbb színes RGB, ahol rr, gg, bb - egy hexadecimális szám.
Példa. # 00cc00 • rgb (x, x, x) Szín RGB-ben, ahol az "x" egy decimális szám 0-tól 255-ig.
Példa. rgb (0,204,0) • #rgb Szín RGB-ben, ahol r, g, b hexadecimális szám.
Példa. # 0c0 • rgb (x%, x%, x%) Az RGB színes, ahol az "x%" 0,0 és 100,0 közötti szám.
Példa. rgb (0%, 80%, 0%)
Néhány trükk a stílusok kezelésében
Az abszolút betűméretek megadásával megfosztja az embereket az oldalak megtekintésétől, a betűméret növelésének vagy csökkentésének képességét a böngésző speciális gombjával a képernyőfelbontás és a látás szerint. A betűtípusok csak az oldal megírásakor megadott méreteket fogják megjeleníteni.
Ezért kívánatos a százalékértékek megjelölését használni e célok érdekében. Ebben az esetben a betűméret kisebb lesz (nagyobb) az Ön által megadott százalékkal, mint a szokásos HTML-címkével.
A következő kód létrehoz egy olyan címet, amely háromdimenziós képet mutat grafika nélkül.
Adja meg a stílus leírását
Most minden új bekezdés első sorai a "piros" sorból származnak.