CSS sisältää tyylisääntöjä, jotka selain tulkitsee ja soveltaa sitten asiakirjasi asianmukaisiin elementteihin. Tyylisääntö koostuu kolmesta osasta:
- Valitsin on HTML-tunniste, johon tyyliä käytetään. Tämä voi olla mikä tahansa tunniste, esim.
tai
jne.
- Omaisuus on HTML-tunnisteen attribuuttityyppi. Yksinkertaisesti sanottuna kaikki HTML:n attribuutit muunnetaan CSS-ominaisuuksiksi. Nämä voivat olla värejä, reunuksia, pehmusteita jne.
- Merkitys- on asetettu kiinteistöön. Esimerkiksi väriominaisuus voi olla vihreä, #008000 jne.
CSS:n valitsimien syntaksi on seuraava:
Valitsija ( ominaisuus: arvo )
Esimerkki. Voit asettaa taulukon reunuksen seuraavasti:
Taulukko (reunus: 2px kiinteä #FF8C00; )
Tässä valitsimen syntaksi on: taulukko on valitsin ja reuna on ominaisuus ja 2px solid #FF8C00 on tämän ominaisuuden arvo.
Voit määrittää valitsimia useilla tavoilla parhaaksi katsomallasi tavalla. Alla on valitsimien tyypit.>
Vakiovalitsimet
Tämä on sama valitsin, jonka näit yllä. Jälleen toinen esimerkki värin antamiseksi kaikille ensimmäisen tason otsikoille:
H1 ( väri: #8B4513; )
Yleisvalitsimet
Sen sijaan, että valitsisi tietyn tyyppisiä elementtejä, yleinen valitsin yksinkertaisesti vastaa minkä tahansa elementtityypin nimeä:
* ( väri: #808080; )
Tämä sääntö näyttää asiakirjan jokaisen elementin sisällön harmaalla.
Jälkijonon valitsimet tai sisäkkäiset valitsimet
Oletetaan, että haluat soveltaa tyylisääntöä tiettyyn elementtiin vain, kun se on tietyn elementin sisällä, niin sisäkkäiset valitsimet tai jälkeläiset valitsimet auttavat sinua tässä. Kuten seuraavassa esimerkissä näkyy, tyylisääntöä sovelletaan elementtiin vain silloin, kun se on tagin sisällä
- .
Ul em ( väri: #CD5C5C; )
Luokkavalitsijat
Voit asettaa tyylisääntöjä elementeille luokkaattribuutin perusteella. Kaikki elementit, joilla on tämä luokka, muotoillaan tietyn säännön mukaan.
Sininen (väri: #0000FF; )
class="sininen". Voit tarkentaa luokan valitsinta hieman. Esimerkiksi:
H1.sininen ( väri: #0000FF; )
attribuutilla class="sininen".
Voit käyttää useita luokan valitsimia yhteen elementtiin. Harkitse seuraavaa esimerkkiä:
Tämä kappale muotoillaan luokilla keskusta Ja rohkea.
ID-valitsimet
Voit asettaa tyylisääntöjä elementeille id-attribuutin perusteella. Kaikki elementit, joilla on tämä tunnus, muotoillaan tietyn säännön mukaan.
#sininen ( väri: #0000FF; )
Tämä sääntö näyttää asiakirjan sisällön sinisellä jokaisen attribuutin sisältävän elementin kohdalla id="sininen". Voit tarkentaa id-valitsinta hieman. Esimerkiksi:
H1#sininen ( väri: #0000FF; )
Tämä sääntö näyttää sisällön sinisellä vain elementtien osalta
attribuutilla id="sininen".
Tunnusvalitsimien todellinen voima on, kun niitä käytetään jälkeläisten valitsimien perustana, esimerkiksi:
#blue h2 ( väri: #0000FF; )
Tässä esimerkissä kaikki toisen tason otsikot näkyvät sinisinä, kun ne ovat attribuutin tageissa id="sininen".
Lapsivalitsijat
Tiedät jo jälkeläisvalitsijat. On olemassa toinen valitsintyyppi, joka on hyvin samanlainen kuin lapsivalitsimet, mutta jolla on erilainen toiminnallisuus, lapsivalitsin. Harkitse seuraavaa esimerkkiä:
Runko > p ( väri: #0000FF; )
Tämä sääntö näyttää kaikki kappaleet sinisinä, jos ne ovat elementin suoraa alijälkeläistä
. Muut kappaleet, jotka on sijoitettu muiden tyyppisten elementtien sisääntaiViereiset valitsimet
HTML-elementtejä, jotka seuraavat toisiaan, kutsutaan vierekkäisiksi elementeiksi. Harkitse seuraavaa esimerkkiä:
Vahva + em ( väri: #0000FF; )
Tämä sääntö näyttää tunnisteen sisällön sinisellä, jos se tulee elementin jälkeen . Muut tunnisteet , ei tule tagin jälkeen , ei tällä säännöllä ole vaikutusta.
Attribuuttien valitsimet
Voit myös käyttää tyylejä HTML-elementteihin tietyillä määritteillä. Alla oleva tyylisääntö vastaa kaikkia syöteelementtejä, joilla on type-attribuutti arvotekstin kanssa:
Syöte ( väri: #0000FF; )
Attribuuttivalitsimien käytön etuna on, että elementti ei muutu, ja väriä käytetään vain halutuissa tekstikentissä.
Seuraavat säännöt koskevat määritteen valitsinta:
- p - valitsee kaikki kappaleelementit lang-attribuutilla.
- p - valitsee kaikki kappaleelementit, joissa lang-attribuutilla on tarkka arvo "ru".
- p - valitsee kaikki kappaleelementit, joissa lang-attribuutti sisältää sanan "ru".
- p - valitsee kaikki kappaleelementit, joissa lang-attribuutti sisältää arvoja, jotka ovat tarkat "ru" tai alkavat "ru".
Muutamia tyylisääntöjä
Saatat joutua määrittämään useita tyylisääntöjä yhdelle elementille. Voit määrittää nämä säännöt yhdistämään useita ominaisuuksia ja niitä vastaavia arvoja yhdeksi lohkoksi seuraavan esimerkin mukaisesti:
H1 (väri: #00CED1; kirjainvälit: .2em; tekstin muunnos: pienet kirjaimet; marginaali-ala: 2em; fontin paino: 700; )
Kaikki ominaisuus- ja arvoparit erotetaan puolipisteellä (;). Voit tallentaa ne yhdelle riville tai useille riveille. Paremman luettavuuden varmistamiseksi pidä ne eri riveillä.
Älä ole huolissasi yllä olevassa lohkossa mainituista ominaisuuksista. Nämä ominaisuudet selitetään seuraavilla oppitunneilla.
Valitsimien ryhmittely CSS:ssä
Voit muotoilla useita valitsimia, jos haluat. Erota valitsimet vain pilkulla seuraavan esimerkin mukaisesti:
H1, h2, h3 ( väri: #00CED1; kirjainvälit: .2em; tekstin muunnos: pienet kirjaimet; marginaali-ala: 2em; fontin paino: 700; )
Tätä tyylisääntöä sovelletaan h1-, h2- ja h3-elementteihin. Listan järjestyksellä ei ole väliä valitsimien ryhmittelyssä. Kaikissa valitsimen elementeissä on vastaavat ilmoitukset.
Voit ryhmitellä erilaisia valitsintunnuksia yhteen seuraavasti:
#otsikko, #sisältö, #alatunniste ( sijainti: absoluuttinen; leveys: 300 kuvapistettä; vasen: 250 kuvapistettä; )
". Valitsin on siis elementti, johon sovelletaan tyylisäännön ilmoitusta.
CSS-sääntöjen kuvauksessa käytetyt termit.
Kuva 1. Normaali CSS-sääntö.
Kuva 2. Esimerkki CSS-säännöstä.
- Lyhyesti CSS-sääntöjen kirjoittamisen syntaksista:
- Parvillen tyyliilmoitus on suljettu aaltosulkeisiin - ()
- Ilmoituksen omaisuus ja arvo erotetaan kaksoispisteellä - : Yksi ilmoitus (yhdessä aaltosulkeiden parissa) voi sisältää minkä tahansa määrän pareja
- omaisuus: arvo Yksi ilmoitus (yhdessä aaltosulkeiden parissa) voi sisältää minkä tahansa määrän pareja Jokaisen parin lopussa
- laita puolipiste - ; Yksi ilmoitus (yhdessä aaltosulkeiden parissa) voi sisältää minkä tahansa määrän pareja Viimeisen parin jälkeen
- Puolipistettä ei vaadita.
- CSS-syntaksi ei ole herkkä välilyönneille (välilyönnit, sarkaimet, tavuviivat).
CSS-syntaksi ei erota kirjainkoolla.
Mikä tahansa HTML-tunniste voi toimia valitsimena, on myös luokkavalitsimia tai id-valitsimia. Katsotaan kaikki järjestyksessä.
Tunnisteiden valitsimet
Kuten aiemmin kirjoitettu, mikä tahansa tunniste voi olla valitsin CSS-säännössä. Katsotaanpa esimerkkiä. CSS-syntaksi
Hei!
Otsikko h2!
,
Muuten, voit määrittää yhden ilmoituksen valitsimien ryhmälle. Haluamme esimerkiksi otsikkotunnisteet
Ja
olivat siniset ja kohdistettu lohkon keskelle. Voit tehdä tämän luettelemalla nämä tunnisteet valitsimessa erottamalla ne pilkulla. Tässä esimerkki koodista: Ryhmittely CSS:ssä
Hei!
Hei h1!
Tämä tyylimerkintä vastaa seuraavaa sääntöryhmää:
Voit määrittää elementeille tyylisääntöjä sen mukaan, onko elementti sisäkkäinen toiseen. Jos yksi tunniste on sisäkkäinen toisen sisällä, sisäkkäistä tunnistetta kutsutaan alitunnisteeksi ja tagia, johon lapsi on sisäkkäinen, sen esi-isäksi. Sinun on esimerkiksi asetettava kappaleita
Pöydän sisällä
punainen tekstin väri. Tämän ongelman ratkaisemiseksi valitsimen elementit järjestetään sisäkkäisjärjestykseen ja erotetaan välilyönneillä. Eli ongelmamme on ratkaistu näin:
CSS:n jälkeläisten valitsimet CSS-syntaksi
Kappaleen teksti taulukossa.
Kappaleen teksti taulukon ulkopuolella.
Kaikki tunnisteet
Kaikki asiakirjan taulukot näyttävät värin punaisena. Huomaa, että tunniste
Sijaitsee tunnisteen sisällä
näyttää myös tekstin punaisena.Itse asiassa sen sijaan
tunniste oli mahdollista määrittää
, tagista lähtien tulee aina sisältää tunniste
. Jotta voit tutkia CSS-valitsimia tarkemmin, sinun on hallittava muutama asiakirjojen rakenteeseen liittyvä yksinkertainen termi.
Dokumenttipuu on kaavio HTML-dokumentin muodostamista varten, ja se näyttää tunnisteiden järjestyksen ja niiden sisäkkäisyyden toistensa sisällä. Otetaan esimerkki tällaisesta kaavasta:
Dokumenttipuu näyttää selkeästi HTML-dokumentin yhteydet, tagien järjestyksen ja niiden sisäkkäisyyden. Kehittäjät käyttävät sitä CSS-tyylien ja JavaScript-komentosarjojen kirjoittamiseen.
Tässä on esimerkki koodista, joka vastaa kuvan 1 elementtipuukaaviota.
Asiakirjapuu. CSS-syntaksi
Teksti kohta Ja rasvainen.
-
- Kohta 1.1
- Kohta 1.2
- Kohta 1.3
-
- Kohta 2.1
- Kohta 2.2
- Kohta 2.3
Joten HTML-dokumentin tunnisteiden välillä on suhteita. Ne ilmaistaan tunnisteiden sisäkkäisyydessä tai järjestyksessä, jossa yksi tunniste seuraa toista. Näitä yhteyksiä kutsutaan sukulaissiteiksi, ja termejä, kuten esi- ja jälkeläinen, vanhempi ja lapsi, ja muita "perhe"-termejä käytetään viittaamaan erilaisiin sukulaisuussuhteisiin.
Katsotaanpa nyt kaikenlaisia yhteyksiä.
Esivanhemmat ja jälkeläiset
Esivanhemmat ovat elementtejä, jotka sisältävät muita elementtejä, eli elementti on esi-isä kaikille siihen sisäkkäisiä elementtejä.
Jälkeläiset ovat elementtejä, jotka on sijoitettu toiseen elementtiin.
Jälkeläisten valitsijoista on jo keskusteltu edellä.
Vanhemmat ja lapset
Parent on elementin ensimmäisen tason esi-isä (välitön esi-isä). Lapsielementti on ensimmäisen tason lapsi. Yläelementillä voi olla rajoittamaton määrä lapsia.
Elementtien puussamme -tunnisteessa
seuraavat lapsielementit:,
,
- ja vielä yksi
- Tunnisteen valitsin
- Luokan valitsin
- ID-valitsin
- Yleisvalitsin
- Attribuutin valitsin
- Pseudoluokan valitsin
- Pseudoelementin valitsin
- Valitsin elementin mukaan;
- Valitsija luokan mukaan;
- Valitsija tunnuksen mukaan;
- Kontekstin valitsin;
Sisaruselementit
Veljelliset tai sisarelementit (englanniksi sisarukset - veljet ja sisaret), ryhmä elementtejä, joilla on yhteinen vanhempi. Esimerkiksi tunnisteet
,
,
- ja toinen
Sisaruksina, koska heillä on yhteinen vanhempi
.Vierekkäiset elementit
Vierekkäiset elementit ovat vierekkäisiä sisarelementtejä, eli elementtejä, joilla on yhteinen emo ja jotka sijaitsevat vierekkäin elementtipuussa. Esimerkissämme vierekkäiset elementit ovat pareja:
Muuten, voit määrittää yhden ilmoituksen valitsimien ryhmälle. Haluamme esimerkiksi otsikkotunnisteet
,
JA
-
,
- Muuten, voit määrittää yhden ilmoituksen valitsimien ryhmälle. Haluamme esimerkiksi otsikkotunnisteet
Palataan nyt valitsijoihin.
Lapsivalitsijat
Kun emme ole kiinnostuneita kaikista jälkeläisistä, vaan vain ensimmäisen tason jälkeläisistä eli lapsielementeistä, CSS:ssä käytetään lapsivalitsimia. Osoittaakseen, että tyylisääntö koskee vain alielementtiä, valitsin käyttää ">"-merkkiä.
Lapsivalitsimet CSS:ssä CSS-syntaksi
Kappaleen teksti taulukossa.
Kappaleen teksti taulukossa (div-säiliössä).
Kappaleen teksti taulukon ulkopuolella.
Tämän esimerkin HTML-koodi on täsmälleen sama kuin jälkeläisen valitsimen esimerkkikoodi, vain tyylisääntö on erilainen. Lapsivalitsimen käytön seurauksena säilössä olevan taulukon kappaleen teksti
ei enää punainen, koska tämän kappaleen tunnistevanhempi ja tunnisteesi-isä. Viereinen valitsin
Viereisen elementin valitsin valitsee elementin, joka on välittömästi toisen määritetyn elementin vieressä. Tämän valitsimen syntaksi on: edellisen elementin valitsin, jota seuraa "+"-merkki, jota seuraa valittavan elementin valitsin.
Katsotaanpa todellista esimerkkiä. Suurissa artikkeleissa, joissa on useita tunnisteilla varustettuja osioita
, on suositeltavaa lisätä ylämarginaalia (margin-top-ominaisuus). 20 pikselin sisennys tekee tekstistä luettavissa. Mutta jos tag
tulee heti perään
, ja tämä voi olla artikkelin alussa, ylimmässä luetelmassa tunnisteen yläpuolella
tulee tarpeeton. Tämä ongelma voidaan ratkaista viereisen elementin valitsimella.
Tässä on html-koodi ja esimerkki siitä, kuinka viereisen elementin valitsin toimii.
Viereinen valitsin CSS:ssä CSS-syntaksi
Otsikko h2
Otsikko h2
Kappaleen teksti kertoo uskomattomista seikkailuista.
Toinen nimi viereisille valitsimille: vierekkäiset valitsimet, täältä voit lukea lisää tämäntyyppisistä valitsimista.
Aiheeseen liittyvät valitsijat
Sisarvalitsija on samanlainen kuin naapurin valitsin, vain se koskee kaikkia valittua seuraavaa määritettyä elementtiä. Sisarvalitsimen syntaksi on edellinen elementin valitsin, jota seuraa "~" (tilde) -merkki, jota seuraa elementin valitsin.
Esimerkki sisarvalitsimen käytöstä.
Sisaruselementin valitsin CSS:ssä CSS-syntaksi
Kappaleen nro 1 teksti kertoo uskomattomista seikkailuista.
Kappaleen nro 2 teksti kertoo uskomattomista seikkailuista.
Teksti div nro 1 uskomattomista seikkailuista.Kappaleen nro 3 teksti kertoo uskomattomista seikkailuista.
Esimerkistä on selvää, että sen jälkeen
Kappaleen nro 3 tunnisteteksti oli myös punainen. Eli tyylin määrittämiseksi sisarelementtien ei tarvitse tulla toistensa perään.Yleisvalitsin
Jos CSS-säännön valitsin sisältää "*"-merkin, tämä sääntö koskee poikkeuksetta kaikkia sivun elementtejä. On vaikea kuvitella tapausta, jossa tällainen sääntö olisi järkevä. Mutta on yksi tapaus, jolloin kehittäjä haluaa "nollata" kaikki ulkoiset ja sisäiset sisennykset. Sitten sinun on käytettävä tätä tyyliä:
* ( marginaali: 0; täyte: 0; )
Mutta "*"-merkkiä voidaan käyttää yhdistevalitsimissa.
Ul * (väri: punainen)
Tämä koodi määrittää kaikkien elementin jälkeläisten tekstin värin punainen
-
.
luokat
CSS:n luokat ovat yleisin tapa määrittää tyyli elementtiryhmälle. Luokkaa käytetään, kun haluat asettaa eri tyylejä yhdellä tunnisteella luodun HTML-dokumentin elementeille. Luokan syntaksi:
Tag.ClassName
Tyylivalitsimessa kirjoitetaan ensin haluttu tunniste, jonka jälkeen luokan nimi ilmoitetaan pisteellä. Luokan nimen tulee alkaa latinalaisella kirjaimella ja se voi sisältää yhdysmerkkiä (-) ja alaviivaa (_).
Esimerkki luokkien käytöstä: verkkosivustolla ylä-, sivu- ja alavalikko luodaan tagien avulla
- , näiden kolmen valikon on luotava kolme eri tyyliä. CSS:ssä luodaan kolme luokkaa: ul.menu-top, ul.menu ja ul.menu-bottom.
HTML-dokumentin rungossa luodaan erilaisia valikoita class-attribuutissa määritetyllä luokalla:
- class="menu-top">...
- class="menu">...
- class="menu-bottom">...
Luokat ovat usein käytetty CSS-työkalu. Se on kätevä ja tekee myös tyylikoodista luettavamman.
Voit luoda luokan, jota käytetään mihin tahansa tunnisteeseen. Tätä varten käytetään yleisvalitsinta.
*.Luokan nimi (ominaisuus1: arvo; ominaisuus2: arvo; ...)
Tätä merkintää voidaan lyhentää poistamalla "*"-symboli.
Luokan nimi (ominaisuus1: arvo; ominaisuus2: arvo; ...)
Tunnusvalitsimet (tunnisteet)
Tunnisteet ovat valitsimia, jotka määrittävät elementille yksilöllisen nimen. Ainutlaatuinen tarkoittaa kerran esiintyvää asiakirjakoodissa. Voit luoda tyylin tunnisteiden avulla, mutta niiden päätarkoitus on päästä niihin käsiksi komentosarjojen avulla.
Tunnistetta kuvattaessa merkitään ensin hash-symboli (#) ja sen jälkeen tunnisteen nimi.
#tunnisteen nimi(ominaisuus1: arvo; ominaisuus2: arvo; ...)
Aivan kuten luokan nimen, tunnisteen nimen on alkava latinalaisella kirjaimella ja se voi sisältää merkit yhdysviivan (-) ja alaviivan (_).
Attribuuttien valitsimet
HTML:ssä on useita tageja, jotka muuttavat vaikutustaan attribuuttien mukaan. Esimerkiksi tag Tyyppimääritteen arvosta riippuen se voi luoda lomakekentän, painikkeen ja muita lomakeelementtejä. Joten jos käytät tyyliä syöttövalitsimeen, se muuttaa kaikkia kyseisen tagin luomia lomakeelementtejä. Tällaisten elementtien tarkkaa hallintaa varten CSS tarjoaa attribuuttivalitsimia.
Attribuuttivalitsimia on erilaisia. Attribuuttivalitsimien avulla voit muokata tagin tyyliä, jos sillä on tietty attribuutti tai jos tietyllä tunnisteattribuutilla on tietty arvo.
Attribuuttien valitsimet ovat erillisen suuren artikkelin aihe. Tämän artikkelin tarkoituksia varten huomaamme vain, että ne ovat olemassa.
Pseudo-luokat
Toinen suuri aihe CSS:ssä on pseudo-luokat. Etuliite "pseudo" tarkoittaa kuvitteellista tai väärää. Tosiasia on, että html-dokumentin elementit muuttuvat käyttäjän toimien mukaan. Esimerkiksi linkki muuttuu sen mukaan, milloin siirrät osoittimen sen päälle.
Pseudo-luokkien avulla sivulle luodaan dynaamisia tehosteita.
Pseudoluokan syntaksi:
Valitsija: pseudoluokka(ominaisuus1: arvo; ominaisuus2: arvo; ...)
Voit käyttää pseudo-luokkia id- tai luokkavalitsimissa (ul.menu:hover (väri: vihreä )).
Aloittelijoille huomautan: kun kehittäjä keksii itse nimet luokkien nimille ja tunnisteille, niin pseudoluokkien nimet CSS:ssä ovat varattuja sanoja.
:active pseudo-luokka suorittaa tyylisäännön, jos elementti on aktiivinen. Esimerkiksi kohdistin asetetaan linkin päälle ja napsautetaan. Pseudoluokka :hover - hiiren osoitin viedään yksinkertaisesti elementin, esimerkiksi linkin, päälle.
Pseudo-luokkia on monia muitakin. Pseudo-luokkien aihe voidaan käsitellä kokonaan erillisessä artikkelissa. Tässä olemme käsitelleet sitä vain pinnallisesti.
Pseudoelementtejä
Pseudoelementtien avulla voit lisätä sivun sisältöön muuta sisältöä, joka ei ole lähdekoodissa. Voit myös muuttaa elementin osaa, kuten kappaleen ensimmäistä kirjainta. Eli luo kuvitteellinen html-elementti - ensimmäinen kirjain, jolla on oma näyttötyyli.
CSS-pseudoelementit ovat myös laaja aihe, joka vaatisi erillisen artikkelin kattamaan kokonaan.
Pseudoelementtien syntaksi on sama kuin pseudo-luokkien:
Valitsija:pseudoelementti(ominaisuus1: arvo; ominaisuus2: arvo; ...)
Valitsimia on yhteensä seitsemän tyyppiä. Tämä:
Yksinkertaisin kirjoitetaan tunnisteen nimeksi ilman kulmasulkuja. Esimerkiksi div.
Tällä merkinnällä sanomme, että kaikkien tunnisteiden koko sisältö
asiakirjamme tai asiakirjoistamme kirjoitetaan punaisella fontilla.Jos meidän on annettava yhdelle kappaleelle esimerkiksi taustaa. Sitten voimme käyttää luokanvalitsinta. Mutta ennen kuin kirjoitat sääntöjä, tarvitsemme tagin
Kirjoita tämän kappaleen attribuutti luokkaa, jossa voit kirjoittaa mitä haluat (latinalaisten kirjainten lisäksi voit käyttää väliviivaa ja numeroita), mutta sinun on annettava valitsimellemme nimi, jotta myöhemmin on selvää, mihin se viittaa . Sitten tyylisivulla tai tagissa
välillä kirjoitamme pisteen ja sen jälkeen attribuutin arvon luokkaa, ja aaltosulkeissa asetamme tämän kappaleen säännöt.
Jos asiakirjassa:Että
tyylisivulla:Pravilo (
…
}Samanaikaisesti eri asiakirjaelementeillä voi olla samat luokkaattribuuttiarvot. Eli samaan luokkaan voidaan määrittää useita tunnisteita ja niiden sisältö formalisoituu jollain tavalla. Tämän avulla voimme luoda yleisen säännön, esimerkiksi korostaa tärkeitä tekstin osia, ja yksinkertaisesti lisätä attribuutin dokumenttiin luokkaa tunnisteissa.
Ensimmäinen mainitsemisen arvoinen asia on, että id-attribuutin arvo HTML:ssä on ainutlaatuinen. Toisin kuin luokka, emme voi määrittää sitä millekään tunnisteelle, vaan vain yhdelle! Tyylitaulukossa se on kuvattu hash-merkkinä, ja dokumentissa sinun on lisättävä tunnisteeseen id-attribuutti, jolla on jokin arvo.
Jos asiakirjassa:Että
tyylisivulla:
#pravilo(
…
}Yleisvalitsin on kirjoitettu tähdellä. Jos asetat tälle valitsimelle säännöt taulukossa, tämä sääntö koskee kaikkien tunnisteiden sisältöä.
*{
…
}Kaikki nämä neljä valitsintyyppiä toimivat nykyään kaikissa selaimissa. Mutta on valitsimia, jotka eivät toimi kaikkialla, esimerkiksi Internet Explorerin versiossa 7.6 ja sitä vanhemmissa.
Ne on kirjoitettu näin:
{
…
}Tällä merkinnällä sanomme, että kaikki, joka sisältyy tunnisteisiin, joilla on attribuutti otsikko, on muodossa, joka on kirjoitettu kaareviin hakasulkeisiin. Lisäksi sillä ei ole mitään merkitystä, onko tällä attribuutilla merkitystä. Se voi olla tyhjä ja kirjoittaa näin:
Joka tapauksessa tagiin
Valittimeen kirjoitettuja sääntöjä sovelletaan.
Jos haluat, että määritteeseen sovelletaan sääntöjä (esim. otsikko) tietyllä arvolla, kirjoita se näin:{
…
}Jos haluat, että sääntöjä sovelletaan tietyn tunnisteen sisältöön jollakin määritteellä (esim. otsikko), jolla on tietty merkitys, se tulisi kirjoittaa näin:
p(
…
}Jos haluamme, että attribuutilla varustettujen tunnisteiden sisältöön sovelletaan sääntöjä otsikko(tai jokin muu), jonka merkitys sisältää jonkin kokonaisen sanan, sinun on kirjoitettava se näin:
{
…
}otsikko(tai jokin muu), jonka merkityksessä ei ole koko sanaa, vaan yksinkertaisesti jokin tekstikappale (esimerkiksi sana Kaspian sisältää Kaspian). Sitten sinun on kirjoitettava se näin:
{
…
}Jos haluamme, että sääntöjä sovelletaan tunnisteen sisältöön, jolla on attribuutti otsikko(tai muu), jonka merkitys alkaa joillakin symboleilla (kirjaimilla). Sitten sinun on kirjoitettava se näin:
{
…
}Jos haluamme, että sääntöjä sovelletaan tunnisteen sisältöön, jolla on attribuutti otsikko(tai muu), jonka merkitys päättyy joihinkin symboleihin (kirjaimiin). Sitten sinun on kirjoitettava se näin:
{
…
}Attribuuttien valitsimet ovat erittäin tehokas työkalu, jota ei valitettavasti käytetä nykyään niin laajasti Microsoftin ja sen IE 6.7:n ja sitä vanhemman "kiitos" ansiosta. Mutta pian, kun IE-versiot 6.7 ja sitä vanhemmat lopulta kuolevat, näistä valitsimista tulee kiinteästi osa CSS:ää ja niitä käytetään laajalti.
Pseudoluokan valitsimet vastaavat elementtien sisällön ulkonäöstä sen ollessa jossain tilassa.
Nämä valitsimet ovat :linkki, :vieraillut, :aktiivinen, :hover, :focus ja :first-child. Kaksi ensimmäistä koskevat vain linkkejä, ts. tunnisteiden sisältöön , ja loput voidaan käyttää mihin tahansa tunnisteeseen, jossa on sisältöä.:link muotoilee käyttäjien koskemat linkit.
a:link (väri:sininen)
Tällä merkinnällä sanomme, että kaikki asiakirjassa olevat linkit tai asiakirjat, joihin käyttäjä ei ole koskenut, väritetään siniseksi.
a:vieraillut (väri:punainen;)
:active koristaa aktiivisen elementin (hiiren napsautushetkellä). Voidaan soveltaa mihin tahansa elementtiin, mutta IE 6:ssa toimii vain hyperlinkeissä.
p:aktiivinen (väri:punainen)
Tällä merkinnällä sanomme, että kaikki kappaleet ovat punaisia (kirjaimia) sillä hetkellä, kun niitä napsautetaan hiirellä.
:hover – koristelee elementin, kun käyttäjä vie hiiren sen päälle. Voidaan soveltaa myös mihin tahansa elementtiin, mutta IE 6:ssa toimii vain hyperlinkeissä.
p:focus (väri:punainen;)
Kun painat Tab, elementtien teksti on punainen
:first-child – asettaa säännöt ensimmäisille "lapsille" kaikista elementeistä. Ei toimi IE 6:ssa.
Kerromme lisää siitä, mitä lapset ja vanhemmat ovat toisessa artikkelissa, mutta toistan vain, että toisen tunnisteen sisällä oleva tunniste on sen "lapsi". Meillä on esimerkiksi koodi:
Selaimessa katsottaessa ensimmäisen tunnisteen sisältö
Se muuttuu punaiseksi.
Pseudoelementtivalitsijoita on vain kaksi. Nämä ovat: ensimmäinen rivi ja: ensimmäinen kirjain
:first-line – ensimmäinen rivi (rivi)
:first-letter – ensimmäinen merkki
Jos kirjoitamme:p:first-line (väri:sininen), sitten
Asiakirjan tai asiakirjojen kaikissa kappaleissa ensimmäiset rivit ovat siniset.
Jos kirjoitamme:
p:first-letter (väri:sininen), sitten
kaikissa kappaleissa ensimmäiset kirjaimet ovat siniset.
Molemmat valitsimet eivät toimi IE 6:ssa.Siinä näyttää olevan kyse valitsijoista, jos jokin jäi huomaamatta tai jossain virheessä, kirjoita materiaalin kommentteihin.
Valitsinta käytetään yksilöimään HTML-dokumentin elementti, johon haluamme soveltaa tiettyä CSS-tyyliä.
Elementin valitsin
Tähän asti olemme työskennelleet tämän valitsimen kanssa. Valitsijana käytettiin sen html-elementin nimeä, johon halusimme soveltaa tätä tyyliä. Ne. Kirjoitettuaan luokan esimerkiksi kappaleelle (P), kaikki sivun kappaleet saivat tämän luokan tyylin.
P(
fonttikoko: 12px
}Kuvittele nyt tilanne, jossa sinun täytyy tehdä ensimmäinen kappale yhdellä tyylillä, toinen toisella, kolmas kolmannella jne. Tässä se tulee avuksemme valitsin luokan mukaan.
Valitsija luokittain
Katsotaanpa, kuinka luodaan yleinen luokka CSS:ssä. Ja se on hyvin yksinkertaista: laitamme ensin pisteen, sitten heti, ilman välilyöntiä, kirjoitamme luokan nimen ja sitten tyylin aaltosulkeisiin. Esimerkiksi:
.vihreä(
kirjasinperhe: arial, verdana, sans-serif;
fontin koko: 12px; väri: vihreä;
}Kuinka soveltaa tätä tyyliä?
Oletetaan, että haluamme käyttää tätä tyyliä asiakirjan tiettyyn kappaleeseen. Tältä se näyttää html:ssä:
Kappaleen teksti...
Kuten näet, attribuuttia käytetään luokkaa tyylin nimen merkityksen kanssa.
ESIMERKKI:
Tämä on tavallinen kappale, se käyttää elementin valitsinta
Tämä kappale on vihreä, koska siihen on lisätty luokka
Ja tämä kappale on isommalla fontilla ja punaisella
Tämä kappale on taas normaali, elementin valitsinluokan mukaan
p(
font-family:arial,verdana,sans-serif;
kirjasinkoko: 18px;
}
.green (väri:vihreä;)
.big_red(
kirjasinkoko: 28px;
väri: punainen;
}
Määritämme ensin perustyylin kaikille kappaleille (valitsin elementin mukaan), ja sitten, jos haluamme muuttaa jotakin kappaletta, luodaan sille erityinen tyyli (valitsija luokan mukaan) ja liitetään se tähän kappaleeseen. Kun luomme tämän erityisen luokan, meidän on kirjoitettava sinne vain ne ominaisuudet, jotka haluamme lisätä tai muuttaa suhteessa tämän elementin perustyyliin.
Yllä olevan esimerkin luokkia voidaan soveltaa paitsi kappaleeseen, myös esimerkiksi otsikoihin tai esimerkiksi taulukon soluun tai lyhyesti sanottuna koko taulukkoon, niitä voidaan käyttää missä vain vaikuttaa johonkin (tässä tapauksessa missä tahansa on väri- ja tekstiparametri).
Voit saada luokan vaikuttamaan vain tiettyyn elementtiin (esimerkiksi kappaleeseen) määrittämällä elementin nimen ennen pistettä:
P.green (väri:vihreä;)
Nyt vihreä luokka ei vaikuta mihinkään muuhun kuin P-elementtiin.
Valitsija tunnuksen mukaan
Tätä valitsinta käytetään, jos haluat valita yhden yksittäisen elementin, joka on erilainen kuin kaikki muut asiakirjassa. Korostetaan esimerkiksi sivun ensimmäinen otsikko tietyllä tavalla:
html osa:
<Н1 id="firstheader">Ensimmäinen otsikko sivulla
css-osa:
H1#firstheader ( väri: punainen; fontin paino: lihavoitu; tekstin tasaus: keskellä )
Kuten näet, html-osassa käytetään class-attribuutin sijaan id-attribuuttia ja css:ssä pisteen sijaan #-merkkiä.
Periaatteessa sama voidaan tehdä luokan J valitsimella
Kontekstin valitsin
Tämä on erittäin hyödyllinen asia. Oletetaan, että meillä on sivu, jossa on taulukoita ja tekstikappaleita, ja sekä taulukossa että kappaleissa on lihavoituja sanoja. On tarpeen varmistaa, että kappaleen lihavoidut sanat muuttuvat vihreiksi. Joten tässä se on:
p vahva (väri:vihreä)
Ne. alussa P sitten välilyönti, sitten VAHVA, ja vasta sitten tyyli. Tällä rivillä lukee jotain tällaista: Jos elementin sisällä P siinä on elementti VAHVA määritä sitten vihreä tyyli vahvalle elementille.
Pesä voi olla minkä tasoinen tahansa. Tässä on toinen esimerkki: "Jos yhtäkkiä taulukon solun sisällä ( td), kohta ( P) , jonka sisällä on lihavoitu sana ( VAHVA), anna tämän sanan muuttua punaiseksi! "
td p vahva (väri: punainen;)
Vlad Merževitš
Tunniste (kutsutaan myös "ID-valitsimeksi") määrittää elementille yksilöllisen nimen, jota käytetään sen tyylin muuttamiseen ja siihen viittaamiseen komentosarjojen kautta.
Tunnisteen käytön syntaksi on seuraava.
Yleisvalitsin
Vlad Merževitš
Joskus sinun on määritettävä yksi tyyli verkkosivun kaikille elementeille samanaikaisesti, esimerkiksi kirjasin- tai tekstityyli. Tässä tapauksessa universaali valitsin, joka vastaa mitä tahansa verkkosivun elementtiä, auttaa.
Asteriski-symbolia (*) käytetään osoittamaan yleisvalitsinta, ja yleensä syntaksi on seuraava.
* (Tyylisääntöjen kuvaus)
Attribuuttien valitsimet
Vlad Merževitš
Monet tunnisteet vaihtelevat vaikutukseltaan riippuen siitä, mitä attribuutteja ne käyttävät. Esimerkiksi tag voi luoda painikkeen, tekstikentän ja muita lomakeelementtejä vain muuttamalla type-attribuutin arvoa. Tyylisääntöjen lisääminen INPUT-valitsimeen kuitenkin soveltaa tyyliä samanaikaisesti kaikkiin tällä tunnisteella luotuihin elementteihin. Tällaisten elementtien tyylin ohjaamiseksi joustavasti CSS:ään on lisätty attribuuttien valitsimia.
Lapsivalitsijat
Vlad Merževitš
Lapsielementti on elementti, joka sijaitsee suoraan pääelementin sisällä. Ymmärtääksemme paremmin asiakirjaelementtien välisiä suhteita, katsotaanpa hieman koodia (esimerkki 12.1).
Esimerkki 12.1. Elementtien sijoittaminen asiakirjaan
HTML5 CSS 2.1 IE Cr Op Sa Fx
Viereiset valitsimet
Vlad Merževitš
Web-sivun elementtejä kutsutaan vierekkäisiksi, kun ne seuraavat välittömästi toisiaan dokumenttikoodissa. Katsotaanpa muutamia esimerkkejä elementtisuhteista.
Lorem ipsum väri istu amet.
Tässä esimerkissä tunniste on tunnisteen ali
Koska se on tämän säiliön sisällä. Vastaavasti
Toimii vanhempana .
Kontekstin valitsimet
Vlad Merževitš
Kun luot verkkosivua, joudut usein upottamaan joitain tageja muiden sisään. Vain tietyssä kontekstissa toimivat valitsimet auttavat varmistamaan, että näiden tunnisteiden tyylejä käytetään oikein. Aseta esimerkiksi tunnisteen tyyli vain silloin, kun se on säiliön sisällä
Tällä tavalla voit samanaikaisesti asettaa tyylin yksittäiselle tunnisteelle sekä toisen tunnisteen sisällä olevalle tunnisteelle.
Suosittelemme
"Kolmannen osapuolen lähteistä peräisin olevia teemoja ei tueta" MIUI:ssa: kuinka ohittaa kielto
Etsitkö kolmannen osapuolen MIUI 9 -teemoja ja haluat tietää kuinka käyttää kolmannen osapuolen MIUI 9 -teemoja Redmi Note 4:ssä ja muissa Xiaomi-teemoissa. Älä huoli täällä, me...
