Web kódolás - tehát mi az?
Webkódolás: CSS:
Tehát mi ez - CSS?
Tehát mi ez - CSS? A Cascading Style Sheets (Cascading Style Sheets) olyan nyelvet tartalmaz, amely tulajdonságokat tartalmaz bármely HTML dokumentum megjelenésének leírásához. Ezzel a tervező teljes mértékben szabályozza a weboldal minden elemének stílusát és elrendezését, ami egyszerűbb és sokkal funkcionálisabb, mint a szokásos HTML címkék használata. Példát adok: Szükség van egy merész, vörös aláhúzott szöveg létrehozására.
Szerkezet és szabályok
Bármely HTML elem egy lehetséges CSS-választó. A választó tulajdonságai meghatározzák annak az elemnek a stílusát, amelyre meghatározásra került.
példa:
H1
Minden elem a dokumentum H1 piros szín, a méret a 20 pontban (pt pontja).
Osztályválasztók:
A CLASS egy olyan elem attribútuma, amely meghatározza annak osztályát a HTML-ben. A CSS-ben leírhatod saját stílusaidat az azonos elemek különböző osztályai számára.
A H1 összes eleme a CLASS = "blue" attribútummal kékre változik.
Az osztályokat le lehet írni anélkül, hogy kifejezetten köteleznék őket bizonyos elemekre.
Ebben az esetben a CLASS = "zöld" attribútummal rendelkező elemek zöld színűek lesznek.
ID választók:
Az ID egy egyénileg megnevezett stílus. Ezzel stílusos kivételeket hozhat létre egy osztály elemei között.
A mutatókat főként az egyéni tulajdonságok egy osztályának egy vagy több elemének adására használják. Tegyük fel, hogy létrehozott egy osztály kék - kék dőlt. De szüksége volt egy vastag aláhúzott szövegre, kék dőlt betűkkel. Természetesen új osztályt hozhat létre, de miért? Könnyebb leírni az azonosítót. Például: "boldunderline". És minden eleme egy osztály kék értékkel ID „boldunderline” lesznek húzva félkövér kék dőlt. Lesz egy szintetikus tulajdonság az osztály kék és az azonosító boldunderline.
<
Hello, ez az én kezdőlapom.
Még fejlesztés alatt áll.
. De hamarosan megnyílik
Mint látható a példában egy ID attribútum használható megadása nélkül osztály (példa utolsó bekezdését követően bekezdés csak olyan tulajdonságokkal ID „boldunderline” (ebben a példában -. Merész, aláhúzott szöveg).
Kontextus szerinti választók:
A kontúrválasztók több rendes szelektor kombinációi. A stílus csak az adott szekvenciában lévő elemekre vonatkozik, a kaszkádrendtől függően.
Ebben a példában a P elemeken belüli összes EM elemnek megvan a megadott stílusa.
Több elem megadása ugyanazokkal a tulajdonságokkal:
Tegyük fel, hogy ugyanazokat a tulajdonságokat kell megadnod a weboldal számos elemének. Ebben az esetben a szelektorok meghatározásakor az elem blokkolása vesszővel elválasztva történik.
h1, h2, h3, p, erős
Minden elem h1, h2, h3, p és erős zöld lesz.
Pszeudo-osztályok és pszeudo-elemek.
szintaxis:
választó: ál-osztály <свойства>
selector.class: ál-osztály <свойства>
választó: pszeudo-elem <свойства>
selector.class: ál-elem <свойства>
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, és ezeknek az elemeknek az egésztől eltérő stílusa van.
Az ál-osztályok és pszeudo-elemek listája.
Első sor Pszeudo-elem - első vonal. Ez az ál-elem használható blokkszintű elemekkel (p, h1, stb.). Ez megváltoztatja az elemek első sorának stílusát.
Első levél Pszeudo-elem - első betű. Hasonlóan az első sorban, de nem befolyásolja az egész sort, de csak az első karaktert.
Ebben a példában az összes Anchor elem (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.
Megjegyzés. A következőkben néhány olyan tulajdonságainak választó, a választó kontextus osztály, egyedileg megnevezett stílus vagy csoport omnibusz kiválasz elválasztani „”.
Belső stíluslapok
Mint már említettük, a belső stílusok használata nem különbözik a hagyományos HTML címkék használatától. A stílust csak a dokumentum egy elemére állítják be a HTML tag STYLE attribútumának használatával.
Tovább a jövő felé
PÉLDA INLINE STYLE LAP:
Tovább a jövő felé
Amint láthatja, az Inline stíluslap több, mint HTML. Ezért az ISS-t csak akkor szabad használni, ha a CSS osztályozásában létező egyedi stílus egy bizonyos elemét kívánja megadni, és nem implementálódik a HTML-ben. Vagy ha szükséges, feltétlenül pozícionálja ezt az elemet.
Globális stíluslapok