Hvordan arbeide med CSS3 Attributvelgerere - dummier

Innenfor mange tagger er attributter som beskriver tagegenskaper. To vanlige attributter er taggidentifikatoren (id) og CSS-klassifiseringen (klasse). Men CSS3 gjør det mulig å velge objekter etter hvilket som helst attributt som er ønsket. Følgende liste forteller deg om attributtvelger som du vanligvis bruker når du lager stiler.

• . ClassName : Velger objekter som har en klasseattributtverdi med det oppgitte navnet. For eksempel,. StdPara ville velge hvert objekt som har et klasse = "StdPara" attributt uten hensyn til objekttype.

• # Id : Velger objekter som har en ID-attributtverdi med det oppgitte navnet. For eksempel vil #ThirdHeader velge hvert objekt som har et id = "ThirdHeader" -attributt uten hensyn til objekttype.

• : lang ( Språkidentifikator ): Velger et objekt med den angitte språket. For eksempel: lang (en) ville velge ethvert objekt som bruker engelsk som sitt språk. Du kan finne en liste over vanlige språkidentifikatorer på w3schools. com.

• [ Attribut ]: Velger alle objekter som bruker et bestemt attributt uavhengig av attributtens verdi. For eksempel vil [lang] velge alle objekter som bruker langattributtet.

• [ Attribut = Verdi ]: Velger alle objekter som har en attributt med en bestemt verdi. Verdien må samsvare nøyaktig. For eksempel vil [lang = "en-us"] velge hvert objekt som har et språkattributt med en verdi på engelsk.

• [ Egenskap ~ = Verdi ]: Velger alle objekter som har et attributt som inneholder en bestemt verdi. Søkeverdien trenger bare å vises et sted innenfor verdien som helhet. For eksempel velger [title ~ = "Secondary"] alle objekter med tittelattributter som inneholder ordet Secondary som et diskret ord. Denne velgeren fungerer med hele ord.

  Det er mulig å begrense mange av disse attributtvelgerne ytterligere ved å kombinere dem med tagvelgerne. For eksempel velger p [title ~ = "Secondary"] bare

  taggen objektene med tittelattributter som inneholder ordet sekundære som et diskret ord. Det er ofte mulig å kombinere selektorer på unike måter å skape nøyaktig hvilken effekt du vil ha.

• [ | = Verdi ]: Velger alle objekter som har et attributt som begynner med en bestemt verdi. Søkeverdien må vises i begynnelsen av verdien som helhet, men trenger ikke å være hele verdien.For eksempel velger [title | = "Sub"] alle objekter med tittelattributter som begynner med ordet Sub. Denne velgeren fungerer sammen med bindestreger. [

• Egenskap ^ = Verdi ]: Velger alle objekter som har et attributt som begynner med en bestemt verdi. For eksempel velger [title | = "Sub"] alle objekter med tittelattributter som begynner med ordet Sub. Denne form for selektoren adskiller seg fra attributten [Attribut | = Verdi] fordi den er mindre restriktiv. Ved å bruke dette skjemaet velges tittel = "SubHeader", title = "Sub Header", eller title = "Sub-Header" med samme pålitelighet. [

• Attribut $ = Verdi ]: Velger alle objekter som har en attributt som ender med en bestemt verdi. For eksempel velger [title $ = "Secondary"] alle objekter med tittelattributter som slutter med ordet Secondary. Denne form for attributtet er ikke-restriktiv - det krever ingen spesiell formatering. [

• Egenskap * = Verdi ]: Velger alle objekter som har et attributt som inneholder en bestemt verdi. For eksempel velger [title $ = "Secondary"] alle objekter med tittelattributter som inneholder ordet Secondary. Denne form for velgeren er mindre restriktiv enn attributten [Attributt ~ = Verdi]. Ved å bruke dette skjemaet velger du title = "SecondaryParagraph", title = "Secondary Paragraph", eller title = "Secondary-Paragraph" med samme pålitelighet. Nå som du har en ide om hvordan attributtselektorer jobber, er det på tide å se dem i aksjon. Følgende prosedyre hjelper deg å forstå hva attributtvelektorer gjør, og hvordan du kan bruke dem til å velge bestemte objekter i et dokument for formatering.

Opprett ExternalCSS. HTML og ExternalCSS. CSS-filer og kopier dem til en ny mappe.

1. Åpne ExternalCSS. HTML.

2. Skriv inn følgende kode etter den eksisterende

3. -taggen i filen og lagre endringene på disken.

   Endre tekst

   
   Mer tekst
   Fortsatt
   
   Fortsatt mer tekst
   Endre tekst
   Denne koden legger ganske enkelt til koder i spesifikke ordninger slik at du kan teste de ulike valgene. Hvis du åpner den resulterende filen nå, ser du at hver av
   

   og

   -kodene har blitt automatisk formatert som den opprinnelige

   og

   -kodene; Resultatet ligner dette:

   Åpne ExternalCSS. CSS.

   

4. Skriv inn følgende kode etter eksisterende stiler og lagre endringene på disken.

5. . SubHead {border: double; kantbredde: tykk; border-farge: Grønn;}

   Oppdater testsiden.
   

6. Du ser effekten av å gjøre stilendringen. Hvert objekt som har en klasseverdi av SubHead, har nå en tykk dobbeltgrense farget grønt.

   Det er mange måter å definere farger du vil bruke. Mange utviklere bruker det heksadesimale formatet som hittil er vist, fordi det er presist og fleksibelt. Men # 008000 er litt vanskelig å lese. Ved å bruke fargeavnet, Green, er det mye lettere. Selvfølgelig betyr dette at du trenger å vite navnet på fargen. Heldigvis kan du finne en liste over navn som nettlesere forstår på w3schools.com.

   

   Skriv inn følgende kode etter eksisterende stiler og lagre endringene på disken.

7. #ThirdHeader {text-decoration: line-through;}

   Oppdater testsiden.
   

8. Du ser effekten av å gjøre stilendringen. Hvert objekt som har en ID-verdi for ThirdHeader, har nå en tekstdekorasjonsverdi av linje gjennom, snarere enn understreke. Legg merke til at den nye verdien overskriver den gamle verdien. Hvis du vil bevare den opprinnelige verdien, må du angi den igjen.

   Skriv inn følgende kode etter eksisterende stiler og lagre endringene på disken.

   

9. [title | = "Sub"] {text-align: right; bakgrunnsfarge: rgb (128, 255, 128);}

   Last testsiden tilbake.
   

10. Du ser effekten av å gjøre stilendringen. Hvert objekt som har ordet Sub et sted i tittelattributtet, er endret. Legg merke til at denne spesielle endringen påvirker både

    og

    -kodene. Dette eksemplet viser også en annen måte å definere fargevalg på. Hver farge: rød, grønn, blå (rgb) representeres av en verdi mellom 0 og 255.

    Du kan lese mer om rgb () tilnærmingen til å lage farger på w3schools. com.