A css alapjai
A CSS fő koncepciója a stílus - vagyis a formázás és a formázás szabályainak egy csoportja, amely az oldal különböző elemeire alkalmazható. A szabványos HTML rendelni bármely elemét különleges tulajdonságai (például szín, méret, elhelyezkedés az oldalon, és így tovább. P.) Minden alkalommal, amikor leírja ezeket a tulajdonságokat, akkor is, ha az egyik oldalon kell elhelyezni, 10 vagy 110 ilyen elemeket, egyáltalán nem különböznek egymástól. A lap tetején tízszer ugyanazt a HTML kódot kellett beillesztened, növelve a fájlméretet és a letöltési időt a megtekintő számítógépére.
A CSS más, kényelmesebb és gazdaságosabb módon működik. Hogy hozzá néhány elemét egyes jellemzőinek meg kell egyszer le ezt az elemet, és határozza meg, mint egy leírást a stílus, és a jövőben csak azt jelzi, hogy az elem kívánt kiadni esetben meg kell tenniük a stílus tulajdonságait, hogy már le. Kényelmes, nem igaz?
Ezenkívül a stílus leírását nem az oldal szövegében mentheti el, hanem egy különálló fájlban - ez lehetővé teszi, hogy a stílus leírását bármilyen weboldalon használhassa. Rendkívül kényelmes! És még egy ehhez kapcsolódó előnye, hogy képes bármilyen oldalszám megtervezésére, csak a stílus leírását egy (különálló) fájlban.
Ezenkívül a CSS lehetővé teszi, hogy az oldalak betűméretét sokkal magasabb szinten kezeljük, mint a hagyományos HTML-kódot, elkerülve az oldalak grafikus felesleges súlyozását.
Nézzük meg, hogyan tudunk ilyen csodálatos lehetőségeket megvalósítani az életben.
A CSS gyakorlati elsajátítása
Mint már tudjuk, a stílusokkal kapcsolatos információk elhelyezhetők akár külön fájlban, akár közvetlenül egy weboldal kódjában. A stílusok leírásának helye egy különálló fájlban van értelme, ha ezeket a stílusokat egynél többre, az oldalak számára kívánja alkalmazni. Ehhez létre kell hoznia egy egyszerű szöveges fájlt, meg kell adnia a szükséges stílusokat a CSS nyelv használatával, helyezi a fájlt egy webkiszolgálóra és azon weblapok kódját, amelyek a stílust használják ebből a fájlból, hivatkozni kell erre. Ez a címke használatával történik , a címke belsejében található
az oldalad:A címke első két paramétere a fenntartott nevek, amelyekkel a böngésző tájékoztatni fogja, hogy ez az oldal a CSS-t használja. A harmadik paraméter - HREF = - egy stílus leírást tartalmazó fájlra mutat. Ennek a paraméternek tartalmaznia kell a fájl viszonylagos elérési útját - ha ugyanazon a kiszolgálón van, mint a dokumentum, ahonnan elérte - vagy a teljes URL-t (), ha a stíluslap egy másik kiszolgálón található.
A második lehetőség, amelyben a stílus leírása megtalálható a weboldal kódjában, a címkén belül
, a címkén . Ebben az esetben ezeket a stílusokat az oldalon belüli elemekhez használhatja. A paraméter type = "text / css" kötelező, és utasítja a böngészőt a CSS használatára.És a harmadik lehetőség, amikor a stílusleírás közvetlenül az elemcímke belsejében található, amelyet leír. Ezt a STYLE paraméter segítségével kell végrehajtani, amikor a CSS-t a legtöbb szabványos HTML címkével alkalmazza. Ez a módszer nem kívánatos, és érthető, miért: a CSS egyik fő előnyének elvesztéséhez vezet - az információ megkülönböztetésének képessége az információterv leírásától. Azonban, ha csak egy elemre van szükség, akkor a stílus leírásának helyszínének ez a változata is alkalmazható.
Nézzük meg azt a mechanizmust, amelyhez a stílusokat hozzárendelik a weblapok elemeihez. A legegyszerűbb esetben egy bizonyos stílus hozzárendelése egy elemhez így néz ki:
Amennyiben NAZVANIE_ELEMENTA - HTML-névtáblát (H1, P, TD, A, stb ...), és a paraméterek zárójelek - a lista elemeket és a hozzájuk rendelt értékekkel. A CSS nyelv részleteit később tárgyaljuk.
Ebben a példában a H1 címkével formázott oldalon lévő összes címke 30 pontos betűmérettel és kék színnel van ellátva.
A CSS használatával létrehozott oldalelemek is használják az öröklési mechanizmust: azaz ha van egy kép a címkén belül
.
, a behelyezéssel úgy, hogy a bekezdés az oldal szélességének csak egy bizonyos részét foglalja el, a kép örökli a bekezdésben megadott behúzási értékeket is.A CSS végrehajtja azt a képességet, hogy a stílusokat nem az összes ugyanazon elemhez rendelik, hanem szelektíven - a CLASS = "class name" vagy az ID =<имя элемента>, az oldal bármely eleméhez rendelve. Nézzük ezeket a lehetőségeket részletesebben.
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ő).
A b-c osztály összes eleme félkövérrel jelenik meg középre igazított (vagy asztalcellával).
Bekezdés szövege
- A bekezdés a b-c osztály stílusát kapja.A cellában található szöveg az osztályleírás szerint jelenik meg.
Így a leírt stílust bármilyen szöveges oldalelemhez rendelheti. Ne feledje, hogy az osztálynév megírásakor követnie kell a karakterek esetét, ahogyan az osztályt a stílus leírásban hívta!
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.
A CSS által kezelt elemek tulajdonságai
Így folytassuk a biztonságos CSS elemek tanulmányozását. Az elemek tulajdonságainak leírása a CSS-ben a tulajdon nevét és annak egy bizonyos értékhez való hozzárendelését tartalmazza. Az ingatlan nevét és értékét kettőspont választja el.
Mutatva az abszolút, hanem relatív betűméret, akkor megfosztják az embereket az oldalak megtekintésekor a lehetőségét, hogy növelje vagy csökkentse betűméret speciális gombokon a böngésző szerint a felbontás a kijelző és a látást. A betűtípusok csak az oldal megírásakor megadott méreteket fogják megjeleníteni.
Ezért ha az abszolút betűméretek használata nem a művészi szándék vagy a kegyetlen szándék miatt történik, azt javaslom, hogy a százalékokat használja erre a célra. 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.
Egy másik érdekes lehetőség a CSS használatára egy látszólag egyszerű lehetőség mögé rejtőzik: az objektumok környékén lévő behúzások értékeit negatív értékként adhatja meg! Ez lehetővé teszi, hogy egy réteg szöveget másoljon át, és nagyon érdekes és vonzó eredményeket érjen el.
Az ilyen hatás elérése nem túl nehéz, próbáljunk meg egy olyan oldalt létrehozni, amelynek címe háromdimenziós, de nem használ grafika.
Hozzon létre egy új html fájlt, és írja össze a három objektum stílusainak leírását:
Ebben a leírásban kijelöltünk
(de szinte bármilyen más címke lehet) méret, betű és stílus - ebben a stílusban megjelenik az oldal összes eleme. Ez csak az oldalfájl méretének csökkentése érdekében történt, ehelyett kétszer is leírhatta ezeket a paramétereket: mindegyik z-osztály esetében. Ezután két olyan stílust ismertetünk, amelyek színük és a körülötte lévő behúzások mérete alapján különböznek egymástól: az alsó réteget a z1-es stílus írja le, a felső rét pedig a z2 által íródik le. A behúzások negatív értékeinek és a kívánt érték kiválasztásával elérjük, hogy a felső réteg, ahogy az előbbre mozog.P font család: Times New Roman, serif;
szín: # 000000;
margin-left: 15%;
margin-right: 15%;
margin-top: 1pt;
margin-bottom: 1pt;
szöveg-behúzás: 1 cm;
text-align: justify;
>
A stílus leírása a formázás kényelméért tetszőleges számú szóközt és sortörést használhat - a stílus olvasásakor a böngésző egyszerűen elhagyja az esetleges további tereket.
Ebben a stílusban megkaptuk a bekezdéseket
minden olyan oldalon, amely ezt a leírást használja, megjelenik a Times New Roman betűtípusban, vagy abban az esetben, ha a betűtípus a gépen nincs telepítve, egy másik betűtípuson belül, de ettől a családtól (serif). A betűszín fekete színűre állítva, az igazítás teljes (mindkét oldalon).
Hozzunk létre egy stílust a cikkcímekhez:
H2 betűtípus: Verdana, Arial Cyr, Arial;
font-weight: bold;
betűméret: 14pt;
szín: fekete;
margin-left: 20%;
margin-top: 1cm;
text-align: left;
>
Az oldalaink összes címe, címkével díszítve
, a Verdana-ban, vagy ha ez a betűtípus nincs telepítve, az Arial betűtípusban jelenik meg. A fejléc méretét 14-re állítjuk, a szín fekete, a bal margó az oldal szélességének 20% -a, a felső margó pedig 1 cm, a cím pedig az oldal bal szélén áll.
Annak érdekében, hogy <привязать> Az általunk létrehozott stílusok az oldalainkhoz, a szakasz minden HTML-fájljához
meg kell adnunk egy vonalat a stíluslapra mutató hivatkozással, és meg kell adnunk a CSS használatát:Mivel a stíluslap ugyanabban a kiszolgálói könyvtárban lesz, mint a többi oldal, a HREF = "URL" paraméter a mi esetünkben egyszerűen a stílusfájl neve (styles.css).