CSS3 egenskaper - dummies

En del av CSS3 For Dummies Cheat Sheet

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-sidene 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 strengverdi 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.