Csak a bonyolult vagy megtanulható CSS3 számára. 2. rész. A CSS szelektorok típusai

Üdvözlet, kedves olvasók az remontcompa.ru webhelyről! A nevem Roman Nahvat, és bemutatom neked a CSS stílus nyelvéről szóló cikksorozat második részét. Az első részben három módszert vizsgáltunk a stílusok hozzáadására egy weboldalra, nevezetesen megvizsgáltuk a belső stílusokat, amelyek egy HTML dokumentum egyetlen címkéjének kiterjesztését jelentik, a globális stílusokat, amikor a stílustulajdonságok címkék között vannak írva, valamint a kapcsolódó stílusok, amelyek külön .css fájlban vannak meghatározva a HTML dokumentumtól. A CSS egyik nagyon fontos fogalma a választó. A választó meghatározza, hogy a HTML dokumentum mely elemére (vagy elemére) alkalmazza a stílust. A CSS-ben többféle választófajta létezik, amelyeket ebben a cikkben tárgyalunk..

Csak a bonyolult vagy megtanulható CSS3 számára. 2. rész. A CSS szelektorok típusai


Hozza létre a HTML dokumentum következő szerkezetét, amelyhez a selector_type.css () stíluslap már csatlakozik

Mentse el ezt a dokumentumot selecror.html néven egy flash meghajtón a CSS mappába

Ugyanígy hozza létre és mentse a selector_type.css fájlt a flash meghajtóra a CSS mappába

Adja hozzá a selecror.html weboldalhoz a "CSS választók" címsort és a "A választó ..." bekezdést.

Táblázatot is hozzáadunk a selecror.html weboldalhoz, ehhez fel fogjuk írni a címkéket és

Összehangoljuk a létrehozott táblát a weboldal közepén (az igazítási attribútumot az értékközponttal), és beállítjuk a táblázat szélének vastagságát 1 pixelre (border = "1")

A címkék között jelölje meg a táblázat nevét (CSS-választók típusai)

Címkék között és
címkék írása és , ez létrehozza a táblázat egy sorát

Címkék között és írjon címkéket kétszer ... , ez a művelet két oszlopot hoz létre a táblázatban. Az oszlopneveket "Kiválasztó" és "Példa a felhasználásra" jelöljük.

Hasonlóképpen, adjon hozzá még hét sort a táblázathoz (címkék és ), és minden sorban két oszlopot fogunk létrehozni (címkék és )

Ennek eredményeként a selector.html weblap a következő formában jelenik meg

A létrehozott táblázatból látható, hogy a következő CSS szelektorok léteznek: Típusválasztó Azonosítóválasztó Osztályválasztó Univerzális szelektor Leszármazási szelektor Testválasztó szelektor Általános kapcsolódó elemek kiválasztója Nézzük meg az egyes szelektortípusokat a selector.html weboldal segítségével, mint példa. A típusválasztó bármely elem nevének felel meg. HTML dokumentum. Például a selector.html weboldalon található egy „CSS Selectors” címsor, amely címkével rendelkezik

...

. Igazítsa a cím szövegét a weboldal közepére, és állítsa pirosra

A selector_type.css stílusfájlban a fejléc címkét adjuk meg típusválasztóként

, további zárójelekkel jelöljük meg a stílus tulajdonságát és annak értékét, amelyet a fejléchez szeretnénk alkalmazni a "Selectors in CSS" szöveggel.

Mint láthatja, a címszöveg a weboldal közepén található és piros színű

A testvérelem választó testvérelemnek felel meg egy másik elemhez viszonyítva. Például egy címke

(a "A választó ...." bekezdést) a címke testvérpárja jellemzi

(„Kiválasztók CSS-ben” cím).

Változtassa meg a szöveg színét a („A választó ...”) pontot követő bekezdésben („A választók CSS-ben”) kékeszöld színűre a testvér-választóval. A a selector_type.css stílusfájlban adja hozzá a h1 + p color: blueviolet sort.

Mint láthatja, a bekezdés szövegének színe kékszínűre változott

Adjon hozzá még két azonos bekezdést a weboldalhoz a "CSS választók" rovat után

A következőt kapjuk: az első bekezdés szövege kék színű, a fennmaradó két bekezdés szöveges színe alapértelmezés szerint megmarad.

Változtassa meg a „CSS választók” címsort követő mindhárom bekezdés szöveges színét képpontosra, az általános kapcsolódó elemek választójával. Az általánosított elemek kiválasztója egy elemnek felel meg, amely testvérpár egy másik elemhez. Például több címke

(a "Választó ..." három bekezdés) a címke testvére

("Kiválasztók CSS-ben" cím). A selector_type.css fájlba írja be a következő sort h1 ~ p color: blueviolet

Az általánosított elemek választójának használata eredményeként a „Szelektorok a CSS-ben” cím után mindhárom bekezdés szöveges színe kékszínűre vált

Vegyünk egy másik típusú CSS-választót, például az azonosító-választót. Az azonosító-választó az elemnek felel meg, amelynek id attribútuma megegyezik az # szimbólummal jelölt értékkel. Növelje a betűméretet, és változtassa meg a tábla nevében (címkék ...) a szöveg színét az azonosító-választóval. Írja be a címke belsejébe egy azonosítót, amelynek neve "capt", az alább látható módon ()

A selector_type.css fájlhoz adja hozzá a következő #capt sort: color: red; betűméret: 20px, ahol a "capt" azonosító a # szimbólum után van feltüntetve

Mint látható, a betűméret és a szöveg színe a táblázatban megváltozott, a stílus tulajdonságának megfelelően, amelyet a selector_type.css fájlban előírtak

Számos azonosítót létrehozhat egy HTML dokumentumban, de csak azzal a feltétellel, hogy nevét soha ne ismételjék meg. Írjunk egy másik azonosítót a "tr1" névvel a címke belsejébe , az alábbiak szerint)

A "tr1" azonosítóval igazítottuk a szöveget a középső táblázati oszlopok neveiben, zöldre állítottuk, zöldre állítottuk, és az oszlopok betűkészletét félkövér betűvel állíthatjuk be. A selector_type.css fájlban írjunk # tr1 text-align: centre; betűsúly: félkövér; szín: zöld

A következőket kapjuk

A következő választótípus, amelyet megvizsgálunk, az osztályválasztó. Az osztályválasztó olyan elemnek felel meg, amelynek osztályattribútumának értéke megegyezik a pont után megadott értékkel. Az osztályválasztóval változtassa meg a selector.html weboldal tábla szegélyének színét kékre. Erre a címkén belül Írja be az osztály nevét az alábbiak szerint: tábla, ahol az 1. osztály az osztály neve

A selector_type.css stílusfájlba adja hozzá a következő sort .class1 border-color: blue

Mint láthatja, az asztalkeret színe kékre változott

Változtassa meg a táblázat szövegének színét zöldre. A selector_type.css fájlba írja be a .class1 szín: zöld sort.

Látjuk, hogy a táblázat szövegének színe zöldre vált

Adjon hozzá néhány háttérképet a weboldalhoz az univerzális választóval. A CSS mappában található flash meghajtón van egy képfájl a névvel és a .jpg kiterjesztéssel

A selector_type.css stílusfájlban adja hozzá a * background-image: url (image.jpg) sort.

Ennek eredményeként a weboldal a következő formában fog megjelenni

Fontolja meg az utóbbi típusú választót, például egy leszármazó választót. A gyermekválasztó megegyezik egy elemmel, amely egy másik elem leszármazottja. Például mind a három bekezdésben (címkék

és

) csatolja a "HTML dokumentum" és a "CSS szabály" kifejezést a címkék közé ... , az alábbiak szerint. Ebben az esetben a címke lesz a címke leszármazottja

. címke változtassa meg a "HTML dokumentum" és a "CSS szabály" kifejezések betűtípusát dőlt betűvel

A "HTML dokumentum" és a "CSS szabályok" kombinációi dőlt betűvel

Cserélje a "HTML dokumentum" és a "CSS szabály" kifejezések piros színét pirosra a leszármazási választóval. Ehhez adja hozzá a p I sort color: red a selector_type.css stílusfájlhoz.

Ennek eredményeként a weboldal a következő formában fog megjelenni

Folytatás a cikkben: Csak a bonyolultról vagy a CSS3-ról. 3. rész. A színek beállításának módjai a CSS-ben. Állítsa az átlátszóságot egy elemre egy HTML dokumentumban

Kategória