Css - mit akar a stíluslapot
Beszélje Cascading Style Sheets. Az alkalmazás lehetővé teszi, hogy menjen a következő szintre, hogy hozzon létre honlapok, és elérni a kívánt hatást tervezzen egyszerűbb és logikusabb módon.
Mik stíluslapok?
Cascading Style Sheets, vagy a CSS (angol Cascading Style Sheets) egy következménye a további fejlesztése a HTML és megadja nekünk a lehetőséget, hogy menjen a következő szintre a teljesítmény adatokat. Stíluslapok teszi, hogy ossza szemantikai tartalmát az oldal és a design.
Ahogy emlékszem, az első változat a HTML szabvány nem azt jelenti, hogy ellenőrizzék a megjelenése a tájékoztatás nem volt biztosított. Az általános fogalma hipertext már rendezte a rendelkezésre álló információt minden olyan eszköz, amely képes a szaporodásra szöveget. Ez ajánlott jelölés csak használatra logikai címkéket, amelyek meghatározzák fejezetek, alfejezetek, listák, bekezdések, idézetek, stb - vagyis ezek az elemek alkotják a szerkezet a dokumentumot. Értelmezése az azonos megjelenésű maradt teljesen a lelkiismerete terminál terminál.
Azóta azonban sok minden megváltozott, és a szabványos HTML elvesztette kezdeti harmónia. Kezdetben Netscape egészítette „javított” címkék, ami lehetővé tette szélesebb körben, hogy ellenőrizzék a megjelenése az információkat. Az innováció fogott, és az összes kiterjesztés Netscape szabvánnyá vált de facto. Ezután ugyanúgy kaptam a Microsoft. Amikor felébredt, a HTML képviselt szörnyű keverék logikus és dekoráció címkék inkompatibilis kiterjesztések és teljesen lefagyott eredeti koncepció - közöljenek információkat bármilyen eszközt, függetlenül annak jellemzőit a következtetést információkat.
Mivel nagy kiterjedésű szabványosítási végeztek. Ennek eredményeként a fény jelent meg a szabványos HTML 3.2. Nem volt forradalmi, de csak fel azokon a helyeken minden újítás, és dolgozzon ki közös iránymutatásokat gyártói böngészők. Forradalmi változások történtek az új szabvány - a HTML 4.0, vagy ahogy akkor nevezték, Dynamic HTML. A kezelési csoportok vezették, stíluslapok és egyetemes objektum modell böngészőt.
Hogyan, akkor a probléma a képviselete a megjelenése az információ már megoldódott? Ez a forradalmian új megközelítés. Minden regisztráció ajánlott, hogy egy külső stílus fájlt. De a fő oldalon csak azokat az információkat és linkeket a szükséges stílusokat.
Stíluslapszerkesztő meg kell írni csak egyszer, amikor létrehozza a helyszínen az egyes eszközöket, amelyeken az információ megjelenítésére tervezik. Ezen túlmenően, a stíluslap lehet egységes az egész webhelyen. És ezért nem kell megismételni ugyanazt a leírást stílusok minden oldalon.
Elhelyezése az egész stílus információt egy külső fájlt nyit nekünk, és egyéb hasznos elemeket - változó tartalmának csak egy típust fájlt, akkor másodpercek alatt változtatni az egész design a helyén (!). Sőt, más változás nem szükséges. Természetesen ez csak akkor igaz, ha az eredeti helyén volt a célja, helyesen.
Miután foglalkozott kevés az elmélet, menjünk tovább a gyakorlat, és kezdjük a kérdést, hogy csatlakoztassa a stíluslapot a HTML-fájl.
Csatlakozó stíluslapok
Ahhoz, hogy ezt a feladatot, fel tudjuk használni az egyik a 3 javasolt módszerek:
- külső fájlt
- A leírás a fejlécben
- inline-leírás
Kezdjük a legegyszerűbb, az úgynevezett inline-leírás vagy leírását, a beépített tag:
Az opcionális style attribútum tudjuk meg a szükséges paramétereket bármilyen stílusban tag. Ez a legegyszerűbb módja, és belül működik egy tag. De elképzelhető, hogy mennyi megnöveli a fájl méretét, és hogyan kényelmetlen lenne helyes, ha mi adja a stílus minden tag. Ez a módszer nem sokban különbözik, például úgy, hogy a közvetlen leírás megjelenése a címke .
Sokkal könnyebb előre meghatározni a szükséges stílust, majd egyszerűen alkalmazza őket, hogy a megfelelő címkéket. Ez a második módszer - a leírása a fejlécben. Ez vonatkozik az egész oldalt. Definíció stílusok végzi osztályok képviselnek listák meghatározása az összes szükséges paramétert.
Amikor ezt a módszert a leírás stílusok kell elhelyezni a fejlécben:
Most ezek a stílusok bárhol lehet használni a html-kódot. Ehhez használja az alábbi szerkezetet:
Mint látható, ez nem túl nehéz. A lényeg, hogy megértsük az alapvető elveket. Meghatározása mellett új osztályok, mi is képesek, hogy felülbírálja a szabványos jeleket. Például a tag
:
Most az összes szöveget a címkék fog kinézni, ahogyan azt a stílust adatokat. Nagyon kényelmes, és könnyen alkalmazkodik a meglévő oldal használható stílusokat. Ezen túlmenően, ez valamelyest csökkenti a fájl hiánya miatt a tartalék attribútum osztály.
Végül a harmadik út - leírni kivetését stílusok egy külső fájlt. A tartomány az ő befolyása kiterjed az összes fájl, amelyek szerepelnek a leírásban. Ez az út leginkább összhangban a koncepció HTML 4.0. Ha meg kell változtatni a megjelenését az oldalon, akkor ahhoz, hogy korrigálja csak egy fájl. Hasonlítsa össze a korábbi eljárások. Az egyik közülük meg kell változtatni a leírását minden oldalon, és egy másik, még inkább - az egyes tag, ami persze, nem inspiráló.
Hogyan, akkor bevezetését tette egy külső fájl? Kezdeni, hozzon létre egy stílust fájlt egy leírást az összes osztály van szükségünk (mystyle.css):
Ez a legkényelmesebb módja, és a fő stíluslap ajánlott használni.
Miért van a „fő” Azt mondta, hogy? A tény az, hogy a gyakorlatban meg kell használni mind a három módszer, és itt jön a képbe „lépcsőzetes” stílusban. De majd beszélünk már a következő alkalommal.
Továbbra is beszélni használatát stíluslapok. Először is nézzük foglalkozik a Cascading Style Sheets, majd folytassa, hogy fontolja meg a szintaxist és a felülvizsgálat a leggyakrabban használt paraméterek az építéshez használt stílusokat.
Cascading Style Sheets
Tehát, először is meg fogjuk érteni, miért a stílus az úgynevezett lépcsőzetes. Elnézést, kedves olvasó, én még egyszer erről bevezetését jelenti stílusok egy oldalon:
- egy külön stílus fájlt, és illessze a címke
- leírása a stílus a dokumentum fejlécében
- olyan stílust alkalmazni, mint a paraméter a tag.
A Cascade hogy stílusok lehet bírálni. A fenti listát módon bevezetésének stílusok megfelel a sorrendben felülbírálja. A downstream folyamat felülbírálhatja az upstream.
Például, már definiált külső stílus fájlt, hogy a szöveg a címke
Meg kell írni a betűméret 10. De ha a címlapon, mi továbbá arra, hogy ugyanazt a szöveget a címke
kell írni a betűtípus 12 pont, a szöveg jelenik meg egy ilyen méretű - azaz, stílus címlap újra stílus egy külső fájlt.
Mit csinál? Ó, ez egy nagyon hasznos dolog. És most én fogom megmutatni, hogy egy-egy konkrét példát. Tegyük fel, hogy az összes hivatkozást a fejlécben honlapunkon azonosította a következő stílus:
És ezért olyan szöveget, amely egy hivatkozásra, akkor automatikusan a vörös és megszűnik kell emelni. Ezért úgy döntöttünk, a végén, hogy jelezze a szerzői oldalon, de ez nem nagyon észrevehető, hogy ne összpontosítson ezt. De mégis, azt akarjuk, hogy szerzői is hivatkozni. Ehhez meg kell csak egy oldal oldalon, és elhatározta, erre az újabb osztályt megfelelő. Ebben az esetben, akkor jön a támogatás lépcsőzetes stíluslapok. Elég, ha a helyi felülírja a színe a link:
Tettük ezt azáltal stílus, és ő, mint emlékszel, rendszerint csak a tag, hogy sikerült azonosítani. Amire szükségünk van.
Valószínűleg észrevette, hogy a fenti példában azt megalkotta új tag . Ez kifejezetten az ilyen esetekre. Minden, amit csinál - ez határozza meg egy adott területen, amelyre tudjuk alkalmazni a stílust. Ez nagyon kényelmes, mert tag Ez nem ragad előtt vagy után maga felesleges csákány (azaz üres függőleges tér), csakúgy, mint a címke
.
Mindenesetre címkék jobb meghatározása stílusok segítségével egy osztály? Leggyakrabban erre a célra, az alábbi szerkezetek:
címke
). De a stílus a szöveg szerezte, aki a fő tartalma az oldalt, akkor a legjobb, hogy egy újrafogalmazása tag
, ahelyett, hogy meghatározná külön osztályban.
Miután foglalkozott egy lépcsőzetes, beszéljünk szintaxis.
szintaxis CSS
A leírás az egyes osztály által a szerkezete, mint ez:
Először is, ez adja meg az osztály nevét - ez lehet önkényes, de kívánatos, hogy még mindig ad egy értelmes nevet. Továbbá, a fogszabályozó <> felsorolja az összes szükséges paraméterek ebben az osztályban. A paramétereket pontosvesszővel elválasztva. Itt egy másik példa, amely egy hosszú leírás:
Megjegyezzük, hogy a két típusnál elkezdtem az osztály nevét egy ideig, és így határozza meg az egyetemes osztály, azaz az egyik, hogy lehet alkalmazni, hogy minden tag. És ez történik a következő szintaxis használatával:
Mivel univerzális osztályok, hogy esetleg van még más is? Rendben, még mindig vannak úgynevezett címkézett osztályokat:
Az osztály, az így meghatározott, csak akkor működik a címkét, amelyre azt szánták, és az összes többi figyelmen kívül hagyja:
Nem tudjuk meghatározni a paramétereket egyetlen tag, hanem több. Ebből a célból, a meghatározó stílusát elég nekik, vesszővel elválasztva:
Ez az úgynevezett csoport, és ebben az esetben már meghatározott és
, és
Ha felülírja a meglévő címkéket a leírása a stílus nem adhatja meg az összes paramétert, de csak az is, hogy meg akarjuk változtatni. Az összes többi paraméter azonban az alapértelmezett értékek eltérőek a különböző címkéket.
ál
A CSS-ben van olyan dolog, mint egy ál-osztály. Ellentétben a hagyományos osztály, pszeudo akció nem vonatkozik az összes szöveget, amelyre a stílus vonatkozik, hanem csak egy részét, és csak akkor lehetséges egy adott állapotban. Annak érdekében, hogy tisztább, nézzük meg a hatást, amely kiemeli a linkeket csak ha lebeg felettük. Hatása elég gyakori, és jól látható, többek között ezen az oldalon. Itt van egy töredéke a táblázatstílusokat amely el tudja érni a fenti hatások:
A felső sor - felülírás szabvány címke , amely megtiltja hivatkozás a stressz, de az alacsonyabb - a stílus meghatározása a pszeudo lebeg, amely leírja a stílus kapcsolatok, amikor a kurzor felette.
És itt egy másik példa az ál - meghatározása betűk az elején a bekezdés:
Megjegyzendő, hogy az a tény, és a másik esetben, a hatás a stílus kiterjed bármely állam (a felhasználó fog egy linkre kattintva), vagy a szöveg egy részét (a változó csak az első bekezdés a levél). Ez az értelme a pszeudo-osztályok.
A főbb paraméterei CSS
Ez a stílus beállításai határozzák meg, hogy mi fog kinézni a darab szövegét, és a fő közülük kívánatos fejből tudja, és a többiek, hogy hasznos referencia.
Minden paraméter meghatározására használt stílus, lehet osztani több nagy csoportra:
- kezeléséért font (fülhallgató, méret, szín, dőlésszög, zsírtartalom).
- kontroll bekezdés formázás (igazítás, sorköz, távolság a szavak között, rovátkolt piros vonal).
- Vezérlő egység tulajdonságai (behúzás bal-jobb-felső-alsó helyen az oldalon blokk, a blokk láthatóság.)
- mások, akik nem illenek a fent felsorolt csoportok (szín referencia oldalak, a változó a kurzor típusát.)
Nézzük a paraméterek, hogy ellenőrizzék a szöveg megjelenését és bekezdés formázás - mint a leggyakrabban használt.
Fő betűtípus beállítások
A fő paraméterei a bekezdés
Egységek a CSS
A kívánt tulajdonság, hogy a méretet, akkor több módszerrel is meg őket:
- Relatív százalékos (%)
- relatív méretét verbális leírás (nagyobb, kisebb, xx-small, x-kicsi, kicsi, közepes, nagy, X-Large, xx-nagy)
- az abszolút nagysága a nyomtatási egységeket - a méret megadható pontban (pt), a csúcsok (pc), pixel (képpont), átlagos szélessége a „m” betű (em), az átlagos szélessége „X” betű (EX)
- abszolút nagysága es standard egységekben hossza - a méret megadható centiméterben (cm), milliméterben (mm), inch (in)
- abszolút pixel (px)
Beállítás színek CSS
Színes azok tulajdonságait, amennyiben szükséges, meg tudja határozni a következő három módon:
- a neveket a színek: sárga, piros, zöld, szürke.
- hexadecimális szín specifikáció #rrggbb formátum: # FF0000, # 883490, #ffffff.
- tizedes meghatározva színösszetevőinek formátumban RGB (vörös, zöld, kék): rgb (255,0,0), RGB (100,23,78).
- És a végén ezt a cikket több példák a stíluslap: