CSS3: Opplæring med alt grunnleggende for nybegynnere
I denne opplæringen vil vi introdusere CSS3 til deg. CSS3 er den nye standarden for å definere utformingen av et nettsted eller et dokument. Ved siden av HTML er CSS det viktigste grunnlaget i webutvikling.
CSS3 Tutorial: Krav
Før du kan begynne å programmere CSS, trenger du en redigerer. Vi anbefaler gratis editor Notepad ++, som bare er tilgjengelig for Windows. Hvis du jobber med Mac, vil du finne gode alternativer her. Du trenger også kunnskap om HTML. Grunnleggende om HTML5 finner du i et annet praktisk tips.
Opplæring: Struktur av CSS-kommandoer
Først lærer vi grunnstrukturen i CSS-kommandoer.
- I utgangspunktet, når du bygger en CSS-kommando, må du spørre deg selv hvem som bør ta hvilken verdi fra en viss eiendom.
- Eksempel: Alle
Overskrifter skal ha verdien rød i fontfargeegenskapen.
- Syntaksen ser da slik ut: [element] {[eiendom]: [verdi]; }
- I vårt eksempel farger vi overskriften slik: h1 {farge: rød; }
- Hvilket som helst antall egenskapelige verdipar kan følge hverandre i de krøllete parentesene.
- Viktig: Hvert par må avslutte med en semikolon.
CSS3 tutorial: Legge ned CSS i HTML
Det er tre måter å legge inn CSS i HTML, men bare en av dem er virkelig fornuftig.
- Variant 1: Justering direkte i elementet med stilattributtet. eksempel:
overskrift
- Det gjelder bare dette elementet. Også her kan flere eiendommerpar brukes etter hverandre.
- Variant 2: I begynnelsen av HTML-filen i en kode i dokumentet. Eksempel: h1 {farge: rød; bakgrunnsfarge: blå; }
- Variant 3: outsource til et annet dokument. Skriv kommandoene i en ekstern fil med filtypen .css. Du inkluderer deretter denne filen i HTML-hodet.
- I nesten alle tilfeller bør du bruke variant 3. Dette er den eneste måten å bruke designet i flere HTML-filer uten å måtte skrive den samme koden flere ganger.
CSS3 tutorial: Elementer, ID og klasser som velgere
Den første verdien før seler tilsvarer alltid velgeren. Dette avgjør hvem følgende blir brukt til.
- Du kan ganske enkelt bruke en dag som velger. Dette påvirker da hvert element i denne taggen. I eksemplet over ville hver h1-overskrift være rød.
- Alternativt kan du bruke en ID for å sikre at bare ett element kan brukes. For å gjøre dette, legg til attributtet i HTML-elementet:
Headeren min
- Henvis deretter denne IDen i CSS-arket med et # foran velgeren: #myHeader {color: red; }
- Alternativt kan du tilordne klasser for å påvirke noen, men ikke alle, av elementene:
Headeren min
- I stedet for et #, bruk en '.' I CSS før velgeren: .myH1Class {farge: rød; }
CSS-veiledning: viktige funksjoner
Nedenfor er de viktigste egenskapene du trenger for å manipulere utseendet til elementer.
- farge: tilordne en skriftfarge. Mange vanlige farger er forhåndsdefinerte, for eksempel rød, svart, hvit, gul osv. Du kan spesifisere individuelle farger som sekskantverdier: # B3D2FF
- bakgrunnsfarge: Bruk dette til å tilordne bakgrunnsfarge. Du kan bruke de samme fargene som for farger.
- border: Definer en ramme rundt et element. kant: svart 2px solid; lager for eksempel en svart ramme.
- font-størrelse: Angi skriftstørrelse. Relative (em) eller punkt (pt) verdier er vanlige her.
- bredde og høyde: Angi bredden og høyden på elementene. Dette gjøres vanligvis statisk via piksler (px) eller relativt til maksimalverdien i prosent: div {bredde: 70%; høyde: 300 piksler; }
- float: Bruk venstre og høyre for å spesifisere om elementet skal være i retning venstre eller høyre.
- polstring: Skriv inn polstring. For eksempel kan du plassere tekst i en boks.
- margin: Ligner på polstring, bortsett fra at du spesifiserer margen her. På denne måten kan du skape et mellomrom mellom to bokser.
CSS3 tutorial: muligheter med CSS3
Med CSS3 er det sjeldnere nødvendig å lage og integrere din egen grafikk fordi flere effekter kan skapes dynamisk.
- uklarhet: Med en verdi mellom 0 og 1 kan du enkelt bestemme gjennomsiktigheten til elementer.
- Farger kan nå spesifiseres i HSL-format. 'H' står for Hue (fargetone), 'S' for Saturation (metning) og 'L' for Lightness: farge: hsl (300, 100%, 60%);
- boks-skygge: Tildel en skygge for et område. boks-skygge: 10px 10px 10px rød; ville lage en rød skygge til høyre og under.
- border-radius: Bare opprett avrundede hjørner for overflater eller bilder.
Hvordan endre HTML-linjeavstand med CSS kan leses i neste praktiske tips.