CSS3 For Dummies Cheat Sheet - dummies

Av John Paul Mueller

Når du tenker på å legge til designelementer på nettsteder, kommer CSS3 automatisk til tankene. CSS3s egenskaper og selektorer tilbyr mange alternativer og verktøy for å hjelpe deg med å redigere og definere et nettsteds presentasjon og spesialeffekter. Sjekk ut disse nyttige valgene og egenskapene her.

CSS3 Selectors

CSS3 gir tilgang til et bredt utvalg av selektorer som du bruker til å identifisere hvilket element som skal formateres på en side. En väljare definerer hva som skal formateres; stilen definerer hvordan du formaterer den. Det er imidlertid lett å gå inn i valgoverbelastning. De fleste utviklere bruker en kombinasjon av tag og attributt selectors for å utføre alle valgrelaterte oppgaver. Her er de brukte merkelektorene, som gir generelle utvalgsmetoder.

• Tag , Tag : Å skille to koder med et komma betyr at du velger begge koder, uavhengig av hvor de vises i dokumentet. For eksempel, ved å bruke p, vil div velge alle

  og koder i dokumentet.

• Tag >> Tag : Ved å skille mellom to tagger med et større enn tegn (>), forteller nettleseren å velge en tagg som har en annen tag som foreldre. Hvis du for eksempel har og bruker div> p, vil nettleseren velge

  -taggen.

  Tag

• Tag : Hvis du skiller to koder med et mellomrom, forteller nettleseren å velge en kode som vises i en annen tag. Denne väljaren adskiller seg fra å bruke et større enn tegn fordi den første merket ikke trenger direkte å vises umiddelbart før den andre merket. Hvis du for eksempel har og bruker div> p, vil ikke nettleseren velge noe. Men hvis du bruker div p i stedet, vil nettleseren velge

  -taggen.

  Tag

• + Tag : Ved å skille mellom to tagger med et plustegn (+) forteller nettleseren å velge en tag som vises umiddelbart etter en annen tag. Hvis du for eksempel har og bruker div + p, vil nettleseren velge

  -taggen. Legg merke til at

  -taggen ikke vises i taggen, den vises etter taggen.

  Tag

• ~ Tag : Å skille to tagger med en tilde (~) forteller nettleseren å velge hver tag som vises etter en annen tag. Hvis du for eksempel har og bruker div ~ p, vil nettleseren velge begge

  koder. Dette adskiller seg fra div + p (der nettleseren vil velge bare den første

  taggen som følger taggen).

  : root

• : Velger rotasjonselementet i dokumentet. Roterelementet avhenger av dokumenttypen. Denne velgeren brukes vanligvis med XML-dokumenter, men du kan potensielt bruke den med hvilken som helst dokumenttype. For å gi fint utvalg av bare de riktige elementene, bruker utviklere ofte attributtvelger i stedet for tagvelgerne.Her er attributtvelgerne som utviklere vanligvis bruker.

. 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 idattributtverdi 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 objekt med spesifisert språkverdi. For eksempel: lang (en) ville velge ethvert objekt som bruker engelsk som sitt språk. Her er en liste over vanlige språkidentifikatorer. [

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

• Egenskap = 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.

• Egenskap | = Verdi ] : Velger alle objekter som har en 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 en attributt som begynner med en bestemt verdi. For eksempel velger [title | = "Sub"] alle objekter med tittelattributter som begynner med ordet Sub. Denne form for velgeren er mindre restriktiv enn attributten [Attributt | = Verdi]. Ved å bruke dette skjemaet velges tittel = "SubHeader", title = "Sub Header", eller title = "Sub-Header" med samme pålitelighet.

• Egenskap $ = 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 med ordet Secondary. Denne form for velgeren er mindre restriktiv enn attributten [ Attribut ~ = Verdi ].Ved å bruke dette skjemaet velger du title = "SecondaryParagraph", title = "Secondary Paragraph", eller title = "Secondary-Paragraph" med samme pålitelighet. En spesiell not () -velger fullfører felles utvalg av selektorer. For å fortelle nettleseren ikke å velge en bestemt tag eller attributt, men for å velge alt annet i stedet, bruker du ikke: () -velgeren. For eksempel: ikke (p) ville velge alt, men avsnittetiketter på siden.

CSS3 Egenskaper

Noen CSS3 egenskaper er sjelden brukt; mange andre brukes ofte nok til at utviklere skal vite om dem. Egenskaper og tilhørende verdier danner grunnlaget for formateringen du utfører ved hjelp av CSS3. Her er en liste over egenskapene du vil finne deg selv ved å bruke oftest når du arbeider med CSS3:

bakgrunn: Definerer innholdet for bakgrunnen til et element. Verdien for denne egenskapen er ofte en funksjon, for eksempel lineær gradient ().

• bakgrunnsvedlegg

• : Angir hvordan et bilde samhandler med resten av et element. Du bruker følgende søkeord for å konfigurere denne egenskapen: bla, fast og lokal. bakgrunnsfarge

• : Angir bakgrunnsfargen til en enhet, for eksempel den underliggende sidefargen. Du kan bruke en av disse teknikkene for å definere funksjonen bakgrunnsfarge: heksadesimal verdi, fargenavn, rgb (), rgba (), hsl () eller hsla (). bakgrunnsbilde

• : Gir plass til en ressurs som skal brukes som grafikk for bakgrunnen til et element. Du bruker funksjonen url () til å spesifisere plasseringen. bakgrunnsrepetisjon

• : Lar bakgrunnsbildet gjenta eller ikke gjenta (ved hjelp av det ikke gjenta søkeordet) etter behov. Du kan også velge å gjenta bildet bare horisontale (repeat-x) eller vertikale (repeat-y) retninger. bakgrunnsstørrelse

• : Bestemmer størrelsen på bakgrunnsbildet som en absolutt verdi eller en prosentandel. grense

• : Definerer hvilken type ramme som skal opprettes ved å angi ett av følgende nøkkelord: ingen, skjult, prikket, stiplet, solidt, doblet, sporet, ryggen, innsatsen, starten eller arven. Det er også mulig å endre stilen på hver side av en kant individuelt ved hjelp av egenskapene for grensebunnsstil, kantlinjestil, kantlinjestil og kantlinjestil. border-farge

• : Angir fargen på grensen som omgir en enhet. Du kan bruke en av disse teknikkene for å definere funksjonen bakgrunnsfarge: heksadesimal verdi, fargenavn, rgb (), rgba (), hsl () eller hsla (). border image

• : Definerer et bilde som skal brukes til grenseinnholdet, i stedet for en linjetype. Du bruker vanligvis funksjonen url () for å angi verdien av denne egenskapen. border-radius

• : Bestemmer om kantene på en kant er avrundet og mengden av avrunding. Når du oppretter et avrundet hjørne, angir du mengden av avrunding. For å fjerne et avrundet hjørne, bruk ingen søkeord. kantbredde

• : Bestem tykkelsen på grensen som omgir et element.Du kan definere grensebredden ved hjelp av et søkeord (medium, tykk eller tynn) eller en faktisk måling. kolonneantal

• : Angir antall kolonner som skal opprettes. Bredden på kolonnene svinger automatisk mens brukeren endrer størrelsen på nettleservinduet (eller nettleseren viser en horisontal rullebjelke for å gjøre det mulig å bla over kolonner når en bestemt bredde er angitt også). kolonnefylling

• : Bestemmer hvordan nettleseren fyller kolonnene (enten fyller en kolonne ad gangen eller fyller alle kolonnene samtidig med en jevn mengde innhold). kolonneavstand

• : Oppretter et mellomrom mellom kolonner for å gjøre det lettere å bestemme hvor en kolonne slutter og en annen begynner. kolonne-regel

• : Oppretter en regel mellom kolonner, slik at brukeren kan se en fysisk separator. Denne egenskapen består av farge, stil og bredde. kolonne-regel-farge

• : Bestemmer med fargen på regelen som brukes mellom kolonnene. kolonne-regel-stil

• : Bestemmer stilen til regelen som brukes mellom kolonner. kolonne-regelbredde

• : Bestemmer bredden på regelen som brukes mellom kolonnene. kolonneavstand

• : Angir antall kolonner som en objekt kan spenne. kolonnebredde

• : Angir en kolonnebredde. kolonner

• : Gir en stenografi-metode for å definere både kolonne-tall og kolonnebreddeegenskaper. farge

• : Angir forgrunnsfarge på en enhet, for eksempel tekst. Du kan bruke en av disse teknikkene for å definere funksjonen farge: heksadesimal verdi, fargenavn, rgb (), rgba (), hsl () eller hsla (). innhold

• : Utfører teksten eller annen ressurs som er angitt som en del av elementpresentasjonen. Denne egenskapen brukes ofte til å utføre oppgaver som å legge piler til visuelle elementer. Du angir verdien ved hjelp av url () -funksjonen, Unicode-tegnnummeret foran en tilbakeslag (for eksempel 27A8), eller et søkeord. display

• : Angir hvordan du kan presentere bestemte elementtyper på siden. Du kan bruke et av følgende søkeord til å definere skjermtype: ingen, boks (eller fleksiboks), blokk, flex, inline, inline-blokk, inline-flex, inline-tabell, listevare, bord, bildetekst, tabell-celle, tabell-kolonne, tabell-kolonne-gruppe, tabell-footer-gruppe, tabell-header-gruppe, tabellrad eller tabellrad-gruppe. float

• : Lar et bilde flyte i den angitte retningen. Du definerer denne egenskapen ved hjelp av følgende søkeord: venstre, høyre eller ingen. font-family

• : Definerer navnet på skrifttypen. Tre er tre skrifttypeklassifikasjoner som vanligvis brukes som en del av CSS (og de fleste CSS-sider bruker alle tre med mindre du også angir src-egenskapen): spesifikk, websikker og generisk. skriftstørrelse

• : Bestemmer skriftstørrelsen når den sammenlignes med andre skrifttyper på siden eller gir en bestemt skriftstørrelse. Du kan bruke en av disse teknikkene for å definere skriftstørrelsen: bestemt størrelse, søkeord (for eksempel stor eller større) og prosentandel. skrifttype-stil

• : Bestemmer stilen på skrift som nettleseren oppretter.Nettleseren må støtte stilen, og skrifttypen må levere stilen for at denne egenskapen skal tre i kraft. Font-stil søkeordene er: normal, kursiv, skrå (normalt en sterkere kursiv), og arve. skriftvariant

• : Angir om skrifttypen skal presenteres i en variantform. Ikke alle nettlesere og skrifter støtter denne funksjonen. Søkeordene for denne eiendommen er vanlige, små caps og arve. skriftvekt

• : Bestemmer det relative mørket i skrifttypen og bredden av slagene sine. Det er to metoder for å definere skriftvekten: numerisk og søkeord (for eksempel fet skrift). høyde

• : Angir vertikal størrelse på et element. venstre

• : Angir den venstre plasseringen av et element på en side. listestil

• : Definerer utseendet på et listelement. Du kan definere hvilken type markører du vil bruke, plasseringen av markørene, og om markørene faktisk er opprettet ved hjelp av bilder, i stedet for standard tegn. margin

• : Angir mengden mellomrom mellom grensen til et element og marginen til et annet element. marginbunn

• : Angir den nederste plasseringen av en elementmargin på en side. margin-left

• : Angir den venstre plasseringen av en elementmargin på en side. margin-top

• : Angir den øverste plasseringen av en elementmargin på en side. polstring

• : Angir mengden mellomrom mellom grensen til et element og innholdet i elementet. posisjon

• : Angir plasseringen av elementer på en side. Du spesifiserer plasseringen ved hjelp av disse søkeordene: statisk (elementene flyter), absolutt (elementene vises på et bestemt sted, selv om en slik plassering vil overskrive et annet element), fast (elementene er plassert i forhold til nettleservinduet), eller relativ (elementene er plassert i forhold til foreldreelementer). tekstjustering

• : Angir plasseringen av teksten på en linje. Du angir justeringen ved hjelp av søkeordene rettferdiggjøre, høyre, senter og venstre. tekstdekorasjon

• : Definerer tillegg av en karakteristikk, for eksempel understreke, overlinje eller linje gjennom til skrifttypen. Denne egenskapen fungerer overalt, så du trenger ikke å bekymre deg om noen ser på siden din på en TV eller bruker en smarttelefon, vil få meldingen din. tekstoverflyt

• : Definerer handlingen som vil finne sted når teksten overgår boksen som brukes til å inneholde den. Akseptable verdier er: klipp, ellipser eller en strengverdien du oppgir. tekstskygge

• : Viser en skygge av måltekstene i samme bredde som målteksten. Skyggenes posisjonering, styrke og farge bestemmes av følgende egenskaper: h-skygge (bestemmer horisontal posisjonering av skyggen), v-skygge (bestemmer skyggens vertikale posisjonering), uskarphet (angir klarheten i skygge tekst), og farge (definerer fargen på omrisset). synlighet

• : Angir synlighetsnivået for et element.Du bruker følgende søkeord for å konfigurere denne egenskapen: synlig, skjult eller kollaps. bredde

• : Angir den horisontale størrelsen på et element. ordbrudd

• : Bestemmer hvordan tekst blir pakket inn i en inneholdende boks når du arbeider med et ikke-CJK-språk (kinesisk japansk koreansk). Godtagbare verdier er: normal, break-all og bindestrek. word-wrap

• : Bestemmer hvordan tekst blir ødelagt og deretter pakket inn i den neste linjen i en inneholdende boks når du arbeider med et ikke-CJK-språk. Akseptable verdier er: normal og break-word.