Ez a cikk érdekes és fontos témát hoz létre Válogatók, és ezt egy gyakorlati bemutatóval követik. A következő hivatkozásokkal foglalkozunk ebben a cikkben,
- HTML elemek stílusa
- CSS-választók
- CSS azonosító választó
- CSS Osztályválasztó
- CSS univerzális választó
- CSS csoportválasztók
Tehát kezdjük el akkor,
HTML elemek stílusa
Tisztázzuk, mi is a CSS, mielőtt eljutnánk a CSS-választókhoz. Ha a HTML-t csontváznak kell tekinteni, akkor a CSS (Cascading Style Sheets) olyan, mint az izmok és a bőr. Az agy JavaScript. Tehát egy weboldal esetében a CSS stílusok lényegében az elrendezés és a kialakítás. A képek és a szöveg elhelyezésétől kezdve a betűméretig és a háttérszínig a CSS szabályozza, hogy a HTML elemek hogyan nézzenek ki a böngészőben.
Jobban megértheti a CSS-t, ha jól átlátja, hogy mik a CSS-választók. Ezek a választók lehetővé teszik bizonyos HTML elemek megcélzását, hogy megfelelő stílust alkalmazhasson rájuk.
Értsük meg, hogyan választhatjuk ki a HTML elemeket,
Hogyan válasszuk ki az elemeket?
Tegyük fel, hogy azt szeretné, hogy egy bizonyos fejléc stílusa eltérjen a weboldal többi tartalmától. Most CSS-szelektorok segítségével megcélozhatja azt a HTML-elemet, hogy másként stílusozza meg. A CSS-választók segítenek meghatározni azokat az elemeket, amelyekre a CSS-szabályok egy bizonyos halmaza alkalmazandó. Különböző típusú CSS-választók léteznek, amelyekkel pontosan kiválaszthatja a stílusra szánt elemeket. Megadhatja a teljes weboldal általános stílusát, majd megpróbálhatja megformálni az oldal egyéb elemeit.
java hogyan fejezzük be a programot
A választók egy CSS-szabály részét képezik, és ezek a választók közvetlenül a CSS-blokkok deklarálása előtt jönnek. A jobb megértés érdekében hivatkozhat az alábbi képre.
Továbblépés a CSS Selectors cikkével
CSS-választók
Ez a választó lehetővé teszi a HTML elem nevének kiválasztását.
Vegye figyelembe az alábbi kódot:
p {text-align: középső szín: bíborvörös}Ezt a stílust minden bekezdésre alkalmazni fogjuk.
1. bekezdés
2. bekezdés
Ez a kód a következő kimenetet adja:
Ezt a stílust minden bekezdésre alkalmazni fogjuk
1. bekezdés
2. bekezdés
A fenti kódban a HTML elemek középre igazítottak és „bíbor” színűek.
Továbblépés a CSS Selectors cikkével
CSS azonosító választó
Egy HTML elem id attribútumának kiválasztásával kiválaszthatja az adott elemet. Mivel az azonosító egyedi egy oldalon, az id attribútum használatával kiválaszthatja a megfelelő elemet.
A HTML elemet kiválaszthatja a „#” karakterrel, amelyet az elem azonosítója követ. Például a „# keresztnév” kiválasztja azt az elemet, ahol az azonosító „keresztnév”.
Vegye figyelembe a következő kódot:
# para1 {text-align: középső szín: narancs}Helló Világ
Ezt a bekezdést ez nem érinti.
A fenti kód kimenete:
Helló Világ
rendezési algoritmus c ++
Ezt a bekezdést ez nem érinti.
Amint a fenti kimenetből látható, az id = ”para1” beillesztésével az elem színét narancssárgára változtattuk. A másik elem, amely nem rendelkezik ezzel, változatlan marad.
Továbblépés a CSS Selectors cikkével
CSS Osztályválasztó
Az osztályválasztó segítségével kiválaszthatja azokat a HTML elemeket, amelyek rendelkeznek egy meghatározott osztályattribútummal. Meghatározhatja a választót egy pont (teljes pont szimbólum) használatával, amelyet az osztály neve követ. Például az .intro kiválasztja azokat az elemeket, ahol az osztály „intro”. Egy dolgot szem előtt kell tartani, hogy soha nem lehet az osztály nevét számmal kezdeni.
Vegye figyelembe a következő kódot:
.center {text-align: középső szín: rózsaszín}Ez a címsor rózsaszínű és középre igazított.
Ez a bekezdés rózsaszínű és középre igazított.
A fenti kód kimenete:
Ez a címsor rózsaszínű és középre igazított.
Ez a bekezdés rózsaszínű és középre igazított.
CSS osztályválasztókat használhat egy adott elemhez. Ha csak egy meghatározott elemet szeretne stílusozni, akkor az elem nevét az osztályválasztóval együtt használhatja.
Vegyük például a következő kódot:
p.center {text-align: center color: pink}Ezt a címsort nem érinti
Ez a bekezdés rózsaszínű és középre igazított.
A fenti kód kimenete:
Ezt a címsort nem érinti
Ez a bekezdés rózsaszínű és középre igazított.
Amint a kimeneten látható, a h2 fejlécet nem befolyásolja a stílus. Mivel megadtuk a „p.center” szót, a stílus csak a bekezdést érinti.
Továbblépve ezzel a CSS Selectors cikkel,
CSS univerzális választó
Ez a típusú választó helyettesítő karakternek tekinthető, amely kiválasztja az oldal összes elemét. Kiválasztja az oldal összes elemét, és a „*” jelöli.
Vegye figyelembe például az alábbi kódot:
* {color: darkgreen font-size: 30px}Ez egy teszt (kisebb betűtípus)
Ez egy bekezdés.
A fenti kód kimenete:
Helló Világ
Ez egy teszt (kisebb betűtípus)
Ez egy bekezdés.
Amint az a kimeneten látható, a csoportválasztóval definiált összes elemnek ugyanaz a stílusdefiníciója - középre igazítva, és a betűszín cián.
java applet program példák kimenettel
Ezzel eljutottunk a cikk végéhez.
Nézze meg a mi oldalunkat amely oktató által vezetett élő képzéssel és valós projekt-tapasztalattal jár. Ez a képzés elsajátítja a back-end és a front-end webes technológiákkal való együttműködés képességeit. Ez magában foglalja a webfejlesztés, a jQuery, az Angular, a NodeJS, az ExpressJS és a MongoDB képzését.
Van egy kérdésünk? Kérjük, említse meg a cikk megjegyzés rovatában, és kapcsolatba lépünk Önnel.