Tämä artikkeli tuo esiin mielenkiintoisen ja tärkeän aiheen, joka tunnetaan nimellä Valitsijat ja seuraa sitä tukevalla käytännön esittelyllä. Seuraavat vihjeet käsitellään tässä artikkelissa,
- HTML-elementtien muotoilu
- CSS-valitsimet
- CSS-tunnuksen valitsin
- CSS-luokan valitsin
- CSS-universaali valitsin
- CSS-ryhmän valitsimet
Joten aloitetaan sitten,
HTML-elementtien muotoilu
Ymmärretään, mikä CSS on, ennen kuin pääsemme CSS-valitsimiin. Jos HTML: ää on pidettävä luurankona, CSS (Cascading Style Sheets) on kuin lihakset ja iho. Aivot ovat JavaScript. Joten verkkosivun CSS-tyylit ovat lähinnä asettelua ja ulkoasua. Heti kuvien ja tekstin sijoittamisesta fonttikokoon ja taustaväriin CSS ohjaa HTML-elementtien ulkoasua selaimessa.
Voit ymmärtää CSS: ää paremmin, jos sinulla on hyvä käsitys CSS-valitsimista. Näiden valitsimien avulla voit kohdistaa tiettyihin HTML-elementteihin, jotta voit käyttää niihin oikeaa tyyliä.
Ymmärretään miten voimme valita HTML-elementtejä,
Kuinka valita elementit?
Sano, että haluat tietyn otsikon tyylin olevan erilainen kuin muu verkkosivun sisältö. CSS-valitsimien avulla voit kohdistaa kyseisen HTML-elementin muotoillaksesi sen eri tavalla. CSS-valitsimet auttavat määrittelemään elementit, joihin sovelletaan tiettyä CSS-sääntöjoukkoa. CSS-valitsimia on erityyppisiä, joiden avulla voit valita tyyliteltävät elementit tarkasti. Voit antaa koko verkkosivulle yleisen tyylin ja sitten muotoilla sivun muita elementtejä.
Valitsimet ovat osa CSS-sääntöä, ja nämä valitsimet tulevat juuri ennen CSS-lohkojen ilmoittamista. Parempaa ymmärtämistä varten voit viitata alla olevaan kuvaan.
Siirtyminen CSS Selectors -artikkelin kanssa
CSS-valitsimet
Tämän valitsimen avulla voit valita HTML-elementin nimen perusteella.
Harkitse alla olevaa koodia:
p {text-align: keskusväri: magenta}Tätä tyyliä käytetään kaikissa kappaleissa.
1 kohta
poikkeuksen käsittely pl sql
2 kohta
Tämä koodi antaa sinulle seuraavan tuloksen:
Tätä tyyliä käytetään kaikissa kappaleissa
1 kohta
2 kohta
Yllä olevassa koodissa HTML-elementit on kohdistettu keskelle ja niiden väri on 'magenta'.
Siirtyminen CSS Selectors -artikkelin kanssa
CSS-tunnuksen valitsin
Valitsemalla HTML-elementin id-määritteen voit valita kyseisen elementin. Koska tunnus on yksilöllinen sivulle, voit valita oikean elementin käyttämällä id-määritettä.
kuinka käyttää iteraattoria java
Voit valita HTML-elementin käyttämällä # -merkkiä ja sen jälkeen kyseisen elementin tunnusta. Esimerkiksi '# etunimi' valitsee elementin, jossa id on 'etunimi'.
Harkitse seuraavaa koodia:
# para1 {text-align: keskusväri: oranssi}Hei maailma
Tämä ei vaikuta tähän kohtaan.
Yllä olevan koodin lähtö on:
Hei maailma
Tämä ei vaikuta tähän kohtaan.
Kuten yllä olevasta tuotoksesta näet, sisällyttämällä id = ”para1 ″, pystyimme muuttamaan kyseisen elementin värin oranssiksi. Toinen elementti, jolla ei ole tätä, säilyy ennallaan.
Siirtyminen CSS Selectors -artikkelin kanssa
CSS-luokan valitsin
Luokanvalitsimella voit valita HTML-elementtejä, joilla on tietty luokan attribuutti. Voit määrittää valitsimen käyttämällä pistettä (täysi-stop-symboli), jota seuraa luokan nimi. Esimerkiksi .intro valitsee elementit, joissa luokka on 'intro'. Yksi mielessä pidettävä asia on, että luokan nimeä ei voi koskaan aloittaa numerolla.
Harkitse seuraavaa koodia:
.center {text-align: keskusväri: vaaleanpunainen}Tämä otsikko on vaaleanpunainen ja keskitetty.
Tämä kohta on vaaleanpunainen ja kohdistettu keskelle.
Yllä olevan koodin lähtö on:
Tämä otsikko on vaaleanpunainen ja keskitetty.
Tämä kohta on vaaleanpunainen ja kohdistettu keskelle.
Voit käyttää CSS-luokan valitsimia tietylle elementille. Jos haluat tyylittää vain yhden tietyn elementin, voit käyttää elementin nimeä luokan valitsimen kanssa.
Harkitse esimerkiksi seuraavaa koodia:
p.center {text-align: keskusväri: vaaleanpunainen}Tämä otsikko ei vaikuta
Tämä kohta on vaaleanpunainen ja kohdistettu keskelle.
Yllä olevan koodin lähtö on:
Tämä otsikko ei vaikuta
Tämä kohta on vaaleanpunainen ja kohdistettu keskelle.
Kuten tulosteesta näet, tyyli ei vaikuta otsikkoon h2. Koska olemme määrittäneet “p.center”, tyyli vaikuttaa vain kappaleeseen.
Siirtyminen tämän CSS-valitsimet -artikkelin kanssa
CSS-universaali valitsin
Tämän tyyppistä valitsinta voidaan pitää jokerimerkkinä, joka valitsee kaikki sivun elementit. Se valitsee kaikki sivun elementit, ja sen määrittää '*'.
Harkitse esimerkiksi seuraavaa koodia:
mikä on vektori jaavassa
* {väri: tummanvihreä kirjasinkoko: 30 kuvapistettä}Tämä on testi (pienempi fontti)
Tämä on kappale.
Yllä olevan koodin lähtö on:
Hei maailma
Tämä on testi (pienempi fontti)
Tämä on kappale.
Kuten tulosteesta näkyy, kaikilla ryhmävalitsimella määritellyillä elementeillä on sama tyylimääritelmä - ne ovat keskitettynä ja kirjasimen väri on syaani.
Tämä tuo meidät tämän artikkelin loppuun.
Katso meidän joka sisältää ohjaajan vetämän live-koulutuksen ja tosielämän projektikokemuksen. Tämä koulutus antaa sinulle taitoja työskennellä back-end- ja front-end-verkkoteknologioiden kanssa. Se sisältää koulutusta verkkokehityksestä, jQuery, Angular, NodeJS, ExpressJS ja MongoDB.
Onko sinulla kysymys meille? Mainitse se artikkelin kommenttiosassa ja palaamme sinuun.