Ta članek predstavlja zanimivo in pomembno temo, znano kot Selektorji in temu sledi s podpornim praktičnim prikazom. V tem članku bodo zajeti naslednji napotki:
- Oblikovanje elementov HTML
- Izbirniki CSS
- Izbirnik ID-ja CSS
- Izbirnik razreda CSS
- Univerzalni izbirnik CSS
- Izbirniki skupin CSS
Začnimo torej,
Oblikovanje elementov HTML
Razumejmo, kaj je CSS, preden pridemo do izbirnikov CSS. Če naj bi bil HTML okostje, je CSS (Cascading Style Sheets) podoben mišicam in koži. Možgani so JavaScript. Za spletno stran so slogi CSS v bistvu postavitev in oblikovanje. Od položaja slik in besedila do velikosti pisave in barve ozadja CSS nadzoruje, kako so elementi HTML videti v brskalniku.
CSS lahko bolje razumete, če se dobro zavedate, kaj so izbirniki CSS. Ti izbirniki omogočajo ciljanje na določene elemente HTML, tako da lahko zanje uporabite pravi slog.
Razumejmo, kako lahko izberemo elemente HTML,
Kako izbrati elemente?
Recimo, da želite, da je določen naslov oblikovan drugačno od preostale vsebine na spletni strani. Zdaj lahko s pomočjo izbirnikov CSS ciljno usmerite element HTML, da ga oblikujete drugače. Izbirniki CSS pomagajo pri določanju elementov, za katere velja določen nabor pravil CSS. Obstajajo različne vrste izbirnikov CSS, ki vam omogočajo natančno izbiro elementov, ki jih želite oblikovati. Celotno spletno stran bi lahko dali splošnemu slogu, nato pa se potrudite za oblikovanje drugih elementov strani.
Izbirniki so del pravila CSS in ti izbirniki pridejo tik pred deklaracijo blokov CSS. Za boljše razumevanje se lahko obrnete na spodnjo sliko.
Nadaljujemo s člankom CSS Selectors
Izbirniki CSS
Ta izbirnik vam omogoča, da izberete element HTML po njegovem imenu.
Upoštevajte spodnjo kodo:
p {poravnava besedila: srednja barva: magenta}Ta slog bo uporabljen za vsak odstavek.
Odstavek 1
2. odstavek
Ta koda vam bo dala naslednji izhod:
Ta slog bo uporabljen za vsak odstavek
Odstavek 1
2. odstavek
V zgornji kodi so bili elementi HTML poravnani po sredini in imajo barvo 'magenta'.
Nadaljujemo s člankom CSS Selectors
Izbirnik ID-ja CSS
Če izberete atribut id elementa HTML, lahko izberete ta element. Ker je id edinstven za stran, lahko z uporabo atributa id izberete pravi element.
Element HTML lahko izberete s pomočjo '#', čemur sledi ID tega elementa. Na primer, '#firstname' izbere element, pri katerem je id 'firstname'.
Upoštevajte naslednjo kodo:
# para1 {text-align: center color: orange}Pozdravljen, svet
kaj je tolmač v javi
Ta odstavek ne bo vplival.
Izhod za zgornjo kodo je:
Pozdravljen, svet
Ta odstavek ne bo vplival.
Kot lahko vidite v zgornjem izhodu, smo z vključitvijo id = ”para1 ″ lahko spremenili barvo tega elementa v oranžno. Drugi element, ki tega nima, ostaja nespremenjen.
Nadaljujemo s člankom CSS Selectors
Izbirnik razreda CSS
Z izbirnikom razreda lahko izberete elemente HTML, ki imajo določen atribut razreda. Izbirnik lahko določite s piko (simbol pike), ki ji sledi ime razreda. Na primer .intro izbere elemente, v katerih je razred »uvod«. Ne pozabite, da imena predavanja nikoli ne morete začeti s številko.
Upoštevajte naslednjo kodo:
.center {text-align: center color: pink}Ta naslov je roza in poravnan na sredino.
Ta odstavek je roza in poravnan na sredino.
Rezultat zgornje kode je:
Ta naslov je roza in poravnan na sredino.
Ta odstavek je roza in poravnan na sredino.
Za določen element lahko uporabite izbirnike razredov CSS. Če želite, da je oblikovan samo en določen element, lahko uporabite ime elementa skupaj z izbirnikom razreda.
struktura java programa
Upoštevajte na primer naslednjo kodo:
p.center {poravnava besedila: sredinska barva: roza}Ta naslov ne vpliva
Ta odstavek je roza in poravnan na sredino.
Rezultat zgornje kode je:
Ta naslov ne vpliva
Ta odstavek je roza in poravnan na sredino.
Kot lahko vidite v izhodu, slog na naslov h2 ne vpliva. Ker smo določili »p.center«, slog vpliva samo na odstavek.
Nadaljujemo s tem člankom CSS Selectors,
Univerzalni izbirnik CSS
To vrsto izbirnika lahko štejemo za nadomestni znak, ki izbere vse elemente na strani. Izbere vse elemente na strani in je določen z '*'.
Upoštevajte na primer spodnjo kodo:
* {barva: temnozelena velikost pisave: 30 slikovnih pik}To je test (manjša pisava)
To je odstavek.
Izhod za zgornjo kodo je:
Pozdravljen, svet
To je test (manjša pisava)
To je odstavek.
Kot lahko vidite v izhodu, imajo vsi elementi, ki so definirani s pomočjo izbirnika skupin, enako definicijo sloga - poravnani so na sredino in barva pisave je modrozelena.
To nas pripelje do konca tega članka.
Oglejte si našo ki prihaja z usposabljanjem pod vodstvom inštruktorjev v živo in izkušnjami iz resničnega projekta. To usposabljanje vam omogoča, da obvladate veščine za delo z zalednimi in prednjimi spletnimi tehnologijami. Vključuje usposabljanje za spletni razvoj, jQuery, Angular, NodeJS, ExpressJS in MongoDB.
Imate vprašanje za nas? Prosimo, omenite to v oddelku za komentarje v članku in se vam bomo javili.