Design Definisjon av CSS Property
Hva er CSS-egenskaper, og hvordan bruker du dem?
InnholdsfortegnelseUtvideEt nettsteds visuelle stil og layout er diktert av CSS eller Cascading Style Sheets . Dette er dokumenter som former en nettsides HTML-oppmerking, og gir nettlesere instruksjoner om hvordan de skal vise sidene som er et resultat av denne markeringen. CSS håndterer en sides layout, samt farger, bakgrunnsbilder, typografi og mye mer.
Hvis du ser på en CSS-fil, vil du se at disse filene har en spesifikk syntaks i likhet med alle markerings- eller kodespråk. Hvert stilark består av en rekke CSS-regler. Disse reglene, når de tas i sin helhet, er det som stiler nettstedet.
Delene av en CSS-regel
En CSS-regel består av to forskjellige deler - velgeren og erklæringen. Velgeren bestemmer hva som skal styles på en side, og erklæringen er hvordan den skal styles. For eksempel:
|_+_|
Dette er en CSS-regel. De velger del er s , som er en elementvelger for 'avsnitt'. Det vil derfor velge ALLE avsnitt på et nettsted og gi dem denne stilen (med mindre det er avsnitt som er målrettet mot mer spesifikke stiler andre steder i CSS-dokumentet).
Den delen av regelen som sier: farge: #000; ' er det som kalles erklæringen. Denne erklæringen består av to deler - den eiendom og verdi .
De eiendom er den farge del av denne erklæringen. Det dikterer hvilket aspekt av velgeren som skal endres visuelt.
De verdi er hva den valgte CSS-egenskapen vil bli endret til. I vårt eksempel bruker vi hex-verdien av #000 , som er CSS-forkortning for 'svart'.
Så ved å bruke denne CSS-regelen, vil siden vår ha avsnitt vist i en skriftfarge av svart.
Grunnleggende om CSS-eiendom
Når du skriver CSS-egenskaper, kan du ikke bare lage dem etter eget ønske. For eksempel er 'farge' en faktisk CSS-egenskap, så du kan bruke den. Denne egenskapen bestemmer tekstfargen til et element. Hvis du prøvde å bruke 'text-color' eller 'font-color' som CSS-egenskaper, ville disse mislykkes fordi de ikke er faktiske deler av CSS-språket.
Et annet eksempel er egenskapen 'background-image'. Denne egenskapen setter et bilde som kan brukes for en bakgrunn, slik:
|_+_|Hvis du prøvde å bruke 'bakgrunnsbilde' eller 'bakgrunnsgrafikk' som en egenskap, ville de mislykkes fordi, nok en gang, dette ikke er faktiske CSS-egenskaper.
Noen CSS-egenskaper
Det finnes en rekke CSS-egenskaper du kan bruke til å style et nettsted. Noen eksempler er:
- Kantlinje (inkludert kantlinjestil, kantlinjefarge og kantlinjebredde)
- Polstring (inkludert polstring-top, polstring-høyre, polstring-bunn og polstring-venstre)
- Marginer (inkludert marg-øverst, marg-høyre, marg-bunn og marg-venstre)
- Font-familie
- Skriftstørrelse
- Bakgrunnsfarge
- Bredde
- Høyde
Disse CSS-egenskapene er flotte å bruke som eksempler, fordi de alle er veldig enkle, og selv om du ikke kan CSS, kan du sannsynligvis gjette hva de gjør basert på navnene deres.
Det er andre CSS-egenskaper du også vil møte som kanskje ikke er like åpenbare hvordan de fungerer basert på navnene deres:
- Flyte
- Klar
- Flyte
- Tekstforvandling
- Z-indeks
Når du kommer dypere inn i webdesign, vil du møte (og bruke) alle disse egenskapene og mer!
Egenskaper trenger verdier
Hver gang du bruker en eiendom, må du gi den en verdi - og visse eiendommer kan bare akseptere visse verdier.
I vårt første eksempel på egenskapen 'farge', må vi bruke en fargeverdi. Dette kan være en hex-verdi, RGBA-verdi eller til og med farge nøkkelord . Enhver av disse verdiene ville fungere, men hvis du brukte ordet 'dyster' med denne egenskapen, ville det ikke gjøre noe fordi, så beskrivende som det ordet kan være, er det ikke en anerkjent verdi i CSS.
Vårt andre eksempel på 'bakgrunnsbilde' krever en bildebane som skal brukes til hente et faktisk bilde fra nettstedets filer. Dette er verdien/syntaksen som kreves.
Alle CSS-egenskaper har verdier som de forventer. For eksempel:
- Kantfarge forventer en fargeverdi.
- Border-size forventer en størrelsesverdi, som piksler eller prosenter.
- Border-stiler forventer en av de reserverte stilene som brukes for denne egenskapen, som 'solid'.
Hvis du går gjennom listen over CSS-egenskaper, vil du oppdage at hver av dem har spesifikke verdier som de vil bruke for å lage stilene de er ment for.