10 simple CSS -kodeeksempler, du kan lære på 10 minutter

10 simple CSS -kodeeksempler, du kan lære på 10 minutter

Når du er begyndt at dabbe i HTML, vil du sandsynligvis være interesseret i at tilføje mere visuelt slag til dine websider. CSS er den bedste måde at gøre det på. CSS lader dig anvende ændringer på hele din side uden at stole på inline -styling.





Her er flere enkle CSS -eksempler, der viser dig, hvordan du foretager nogle grundlæggende stylingændringer på din webside.



1. Grundlæggende CSS -kode til nem afsnitsformatering

Styling med CSS betyder, at du ikke behøver at angive en stil hver gang, du opretter et element. Du kan bare sige 'alle afsnit skal have denne særlige styling', og du er god til at gå.





Lad os sige, at du vil have hvert afsnit (

, et af HTML -tags alle burde kende) til at være lidt større end normalt. Og med mørkegrå tekst, i stedet for sort.

Relaterede: HTML Cheat Sheet



CSS -koden for dette er:

p { font-size: 120%; color: dimgray; }

Enkel! Nu, når browseren gengiver et afsnit, arver teksten størrelsen (120 procent af det normale) og farven ('dimgray').



Hvis du er nysgerrig efter, hvilke farver med almindelig tekst du kan bruge, så tjek dette CSS farve liste fra Mozilla.

2. CSS -eksempel til ændring af tegn

Vil du oprette en betegnelse for afsnit, der skal være i små bogstaver? En CSS -prøve til dette ville være:



p.smallcaps { font-variant: small-caps; }

For at lave et afsnit, der er helt i små bogstaver, skal du bruge et lidt andet HTML -tag. Sådan ser det ud:

Your paragraph here.

Tilføjelse af en prik og et klassens navn til et element angiver en undertype af det element, der er defineret af en klasse. Du kan gøre dette med tekst, billeder, links og næsten alt andet.

Hvis du vil ændre et sæt tekst til en bestemt sag, skal du bruge disse CSS -kodeeksempler:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Den sidste markerer det første bogstav i hver sætning.

Stilændringer er ikke begrænset til afsnit. Der er fire forskellige farver, et link kan tildeles: dets standardfarve, dens besøgte farve, svævefarven og dens aktive farve (som den viser, mens du klikker på den). Brug denne eksempel -CSS -kode:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Med links efterfølges hvert 'a' af et kolon, ikke en prik.

Hver af disse erklæringer ændrer farven på et link i en bestemt kontekst. Det er ikke nødvendigt at ændre klassen på et link for at få det til at ændre farve.

Selvom understreget tekst tydeligt angiver et link, ser det nogle gange pænere ud at skrotte den understregning. Dette opnås med attributten 'tekst-dekoration'. Dette CSS -eksempel viser, hvordan man fjerner understregninger på links:

a { text-decoration: none; }

Alt med linket ('a') -mærket forbliver ikke understreget. Vil du understrege det, når brugeren svæver hen over det? Tilføj blot:

a:hover { text-decoration: underline; }

Du kan også tilføje denne tekstdekoration til aktive links for at sikre, at understregningen ikke forsvinder, når der klikkes på linket.

Vil du tiltrække mere opmærksomhed til dit link? En linkknap er en god måde at gøre det på. Denne kræver et par flere linjer:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Lad os forklare denne CSS -prøvekode.

Inklusiv alle fire linkstater sikrer, at knappen ikke forsvinder, når en bruger svæver eller klikker på den. Du kan også indstille forskellige parametre for svæver og aktive links, f.eks. Ændre knap eller tekstfarve.

Baggrundsfarven er indstillet med baggrundsfarve, og tekstfarve med farve. Polstring definerer boksens størrelse --- teksten er polstret med 10px lodret og 25px vandret.

Tekstjustering sikrer, at teksten vises i midten af ​​knappen, i stedet for at gå til den ene side. Tekstdekoration, som i det sidste eksempel, fjerner understregningen.

spil at spille når det keder sig online

CSS-koden 'display: inline-block' er lidt mere kompliceret. Kort sagt lader det dig indstille objektets højde og bredde. Det sikrer også, at den starter en ny linje, når den indsættes.

6. CSS -eksempelkode til oprettelse af en tekstboks

Et almindeligt afsnit er ikke særlig spændende. Hvis du vil fremhæve et element på din side, kan du tilføje en kant. Sådan gør du det med en streng simpel CSS -kode:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Denne er ligetil. Det skaber en solid lilla kant, fem pixels bred, omkring ethvert vigtigt afsnit. For at få et afsnit til at arve disse egenskaber, skal du bare erklære det sådan:

Your important paragraph here.

Dette fungerer uanset hvor stort afsnittet er.

Der er mange forskellige kantstilarter, du kan anvende; i stedet for 'solid', prøv 'prikket' eller 'dobbelt'. I mellemtiden kan bredden være 'tynd', 'medium' eller 'tyk'. CSS -kode kan endda definere tykkelsen af ​​hver kant individuelt, således:

border-width: 5px 8px 3px 9px;

Det resulterer i en topkant på fem pixels, en højre kant på otte, en bund på tre og en venstre kantstørrelse på ni pixels.

7. Center-Juster elementer med grundlæggende CSS-kode

For en fælles opgave er centrering af elementer med CSS -kode overraskende uintuitiv. Men når du har gjort det et par gange, bliver det meget lettere. Du har et par forskellige måder at centrere tingene på.

For et blokelement (normalt et billede) skal du bruge margenattributten:

.center { display: block; margin: auto; }

Dette sikrer, at elementet vises som en blok, og at margenen på hver side indstilles automatisk. Hvis du vil centrere alle billederne på en given side, kan du endda tilføje 'margin: auto' til img -tagget:

img { margin: auto; }

Hvis du vil vide, hvorfor det fungerer på denne måde, kan du tjekke det CSS boks model forklaring på W3C .

Men hvad nu hvis du vil centrere tekst med CSS? Brug denne prøve -CSS:

.centertext { text-align: center; }

Vil du bruge klassen 'centertext' til at centrere teksten i et afsnit? Tilføj blot den klasse til

tag:

This text will be centered.

8. CSS -eksempler til justering af polstring

Polstring af et element angiver, hvor meget plads der skal være på hver side. Hvis du f.eks. Tilføjer 25 pixel polstring til bunden af ​​et billede, bliver følgende tekst skubbet 25 pixels ned. Mange elementer kan have polstring, ikke kun billeder.

Lad os sige, at du ønsker, at hvert billede skal have 20 pixels polstring på venstre og højre side og 40 pixels på toppen og bunden. Den mest grundlæggende CSS -kodeudførelse til dette er:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Der er dog en kortere CSS -instruktion, der præsenterer alle disse oplysninger i en enkelt linje:

img { padding: 40px 25px 40px 25px; }

Dette indstiller top, højre, bund og venstre polstring til det rigtige nummer. Takket være at kun to værdier bruges (40 og 25) kan du gøre det endnu kortere:

img { padding: 40px 25px }

Når du kun bruger to værdier, indstilles den første værdi til top og bund, mens den anden vil være til venstre og højre.

9. Fremhæv tabelrækker med CSS -kodning

CSS -kode får tabeller til at se meget pænere ud end standardgitterne. Det er let at tilføje farver, justere grænser og gøre dit bord lydhørt over for mobilskærme. Dette enkle CSS -eksempel viser dig, hvordan du fremhæver tabelrækker, når du holder musen over dem.

tr:hover { background-color: #ddd; }

Nu når du holder musen over en tabelcelle, ændrer den række farve. For at se nogle af de andre fede ting, du kan gøre, skal du tjekke den W3C -side på flotte CSS -borde .

10. Eksempel CSS til skift af billeder mellem gennemsigtig og uigennemsigtig

CSS -kode kan også hjælpe dig med at lave fede ting med billeder. Her er et CSS -eksempel til visning af billeder med mindre end fuld opacitet, så de fremstår lidt 'whited out'. Når du holder musen over billederne, får de fuld opacitet:

img { opacity: 0.5; filter: alpha(opacity=50); }

Attributten 'filter' gør det samme som 'uigennemsigtighed', men Internet Explorer 8 og tidligere genkender ikke opacitetsmåling. For ældre browsere er det en god idé at inkludere den.

Nu hvor billederne er lidt gennemsigtige, kan du gøre dem fuldstændig uigennemsigtige på en mouseover:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 CSS -eksempler med kildekode

Med disse CSS -kodeeksempler burde du have en meget bedre ide om, hvordan CSS fungerer. CSS skabeloner kan hjælpe, men at forstå de rå elementer er afgørende.

Disse 10 nemme CSS -kodeeksempler blev genoptaget:

  1. Nem afsnitsformatering
  2. Skift bogstaver
  3. Skift linkfarver
  4. Fjern link understreger
  5. Lav en linkknap
  6. Opret en tekstboks
  7. Midterjuster elementer
  8. Juster polstring
  9. Fremhæv bordrækker
  10. Gør billeder uigennemsigtige

Når du gennemgår dem igen, vil du bemærke flere mønstre, som du kan anvende til fremtidig kode. Og det er, når du ved, at du virkelig er begyndt at blive CSS -mester. Men at huske det kan være hårdt. Du vil måske bogmærke denne side til fremtidig reference.

Del Del Tweet E -mail Essential CSS3 Properties Cheat Sheet

Behersk essentiel CSS -syntaks med vores CSS3 egenskaber snydeblad.

Læs Næste Relaterede emner
  • Programmering
  • Webdesign
  • CSS
  • Scripting
Om forfatteren Christian Cawley(1510 artikler udgivet)

Stedfortrædende redaktør for sikkerhed, Linux, gør -det -selv, programmering og teknologi forklaret og virkelig nyttig podcast -producent med stor erfaring inden for desktop- og softwaresupport. Christian er en bidragsyder til Linux Format -magasinet og er en Raspberry Pi -tinkerer, Lego -elsker og retro -fan.

Mere fra Christian Cawley

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere