Cascading Style Sheets (CSS)

HTML tiszta formájában nem ad egy nagyon gazdag lehetőséget regisztrációs oldalon. A probléma megoldására az úgynevezett CSS stílusokat. Szinte minden eleme (HTML-tag), van egy style attribútum. Értéke egy leírást a CSS stílus tag. elem módok meghatározása szerint a következő minta:

CSS stílusok vannak felsorolva, elválasztva, mindegyik egy pár „neve a stílus: stílus érték”, kettősponttal elválasztva. Stílus általában ismerteti a paramétereket a megjelenése a tétel egészére vagy annak bármely al-elem. Vegyük ezt a példát:

A tartály span kötött a „Helló, világ.”. span - ez a címke pár, ami önmagában nem látható változások azok tartalmát nem termel, de lehetővé teszi, hogy olyan egyedi CSS stílusokat az ott meghatározott. Leggyakrabban ez ezekre a célokra. Ebben címke határozza meg a két CSS stílus: stílus font-family értékkel és a stílus a Verdana font-size értékű 10px. Stílus font-family meghatározza a betűtípust a szöveg és stílusa font-size - annak méretét. Így a „Helló, világ.” Állít Verdana betűméret 10 pixel.

Mivel ez a helyzet a HTML siker kulcsa a tudás a leghasznosabb és a közös CSS stílusokat. És ideális esetben - minden. Sok közülük néhány közös minden típusú elemek, néhány specifikus egy bizonyos típusú. Íme néhány nagyon gyakori stílusok mellett a font-family és font-size: background-color - háttérszín az elem, például az érték piros vagy # FF0000 megfelel a piros szín (a második rögzítési lehetőség - egy hexadecimális színkód érték a HTML, akkor előállítható a HTML táblázat színű, vagy speciális számológép), szin -. a szöveg színét, text-align - vízszintbeállításán a szöveget (bal - bal szélén, középen - a középső, jobb - a jobb indokolja - szélességben). Megismerkedhetnek a meglévő stílus lesz a házi feladatot :).

Most nézzük meg egy példát: Van egy menü megvalósítható egy asztal, ahol minden egyes cella - menü:

Minden cellában megadott CSS stílusokat alkotnak általános nézet a menü:

A tételek kiválasztásának a HTML nyelv, két speciális tulajdonságai - class és id. Ezek a tulajdonságok szöveges értékek és be lehet állítani, hogy minden elemet a HTML-oldal. Különbség köztük az, hogy az oldal tartalmazhat több eleme azonos az attribútum értékét osztályon, míg egy bizonyos eleme id attribútum értéke lehet, hogy csak az egyik oldalon. például:

Pont a választó azt jelenti, hogy ez a blokk a CSS stílusokkal minden eleme, hogy az osztály attribútum értékét a neve a választó. A „hash” # a választó azt jelenti, hogy a hatalom a CSS stílusokkal rendelkező elem id attribútum értéke a neve a választó. Azaz, egy blokk a választó .link alkalmazott összes elemet azonos osztályú linket egy blokk, amely a választó # text1 vonatkoznak majd az elemet, amelynek id text1.

Ezzel a módszerrel, megadhatja stílusok kompakt leírni a menü:

#menu td választó kiválasztja az összes sejt belsejében az elem id menüt. Ezt fel lehet használni, hanem az id és az osztály, de az id kiemeli egyediségét mi elem (egy menü az oldalon).

Egy másik pont. Ha az egyik elem kap egy választás több szelektor, a CSS stílusokat alkalmazni minden egyes blokk ilyen szelektor, az ismétlődő stílusok egymás helyébe útja során az elsőtől az utolsó blokk. Vessünk egy pillantást egy példa:

Mind a négy elem tartozik a span az első blokk választó stílus, a harmadik elem alá tartományban mindkét szelektor. Mindkét blokk tartalmaz színes stílus, a végső értéke a stílus harmadik elem megkapja a második blokk (azaz kék), mivel ez a készülék alatt található.

amely általában a fej egység. Az egyik oldalon meg több fájl CSS stílusokat (a link tag minden fájl).

Lessons guinea menü stílusok egy külön fájlban:

Mindent style.css fájlban:

tartalmát az index.html fájlt:

Találkozzon a meglévő stílusok itt. Practice;)

Kapcsolódó cikkek