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

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

Når du har begynt å dabbe i HTML, vil du sannsynligvis være interessert i å legge til mer visuelt slag på nettsidene dine. CSS er den beste måten å gjøre det på. CSS lar deg bruke endringer på hele siden din uten å stole på innebygd styling.





Her er flere enkle CSS -eksempler for å vise deg hvordan du gjør noen grunnleggende stylingendringer på nettsiden din.



1. Grunnleggende CSS -kode for enkel avsnittformatering

Styling med CSS betyr at du ikke trenger å spesifisere en stil hver gang du lager et element. Du kan bare si 'alle avsnitt skal ha denne spesielle stylingen', og du er god til å gå.





La oss si at du vil ha hvert avsnitt (

, en av HTML -taggene alle burde kjenne) til å være litt større enn vanlig. Og med mørk grå tekst, i stedet for svart.

I slekt: HTML Cheat Sheet



CSS -koden for dette er:

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

Enkel! Nå, når nettleseren gjengir et avsnitt, arver teksten størrelsen (120 prosent av normal) og fargen ('dimgray').



Hvis du er nysgjerrig på hvilke farger med ren tekst du kan bruke, kan du sjekke ut dette CSS fargeliste fra Mozilla.

2. CSS -eksempel for å bytte tegn

Vil du lage en betegnelse for avsnitt som skal være i små bokstaver? En CSS -prøve for det vil være:



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

For å lage et avsnitt som er helt i små bokstaver, bruk en litt annen HTML -tag. Slik ser det ut:

Your paragraph here.

Hvis du legger til en prikk og et klassenavn i et element, angis en undertype av elementet definert av en klasse. Du kan gjøre dette med tekst, bilder, lenker og omtrent alt annet.

Hvis du vil endre et sett med tekst til en bestemt sak, bruker du disse CSS -kodeeksemplene:

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

Den siste gir store bokstaver i hver setning.

Stilendringer er ikke begrenset til avsnitt. Det er fire forskjellige farger en lenke kan tildeles: dens standardfarge, den besøkte fargen, hoverfargen og den aktive fargen (som den viser mens du klikker på den). Bruk denne eksempel -CSS -koden:

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

Med lenker blir hvert 'a' etterfulgt av et kolon, ikke en prikk.

Hver av disse erklæringene endrer fargen på en lenke i en bestemt kontekst. Det er ikke nødvendig å endre klassen på en lenke for å få den til å endre farge.

Selv om understreket tekst tydelig indikerer en lenke, ser det noen ganger bedre ut å skrot den understrekningen. Dette oppnås med attributtet 'tekstdekorasjon'. Dette CSS -eksemplet viser hvordan du fjerner understreker på lenker:

a { text-decoration: none; }

Alt med lenken ('a') -taggen forblir ikke understreket. Vil du understreke det når brukeren holder musepekeren over det? Bare legg til:

a:hover { text-decoration: underline; }

Du kan også legge til denne tekstdekorasjonen i aktive lenker for å sikre at understrekningen ikke forsvinner når du klikker på lenken.

Vil du tiltrekke mer oppmerksomhet til lenken din? En lenkknapp er en fin måte å gjøre det på. Denne krever noen 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; }

La oss forklare denne CSS -prøvekoden.

Inkludert alle fire lenketilstander sikrer at knappen ikke forsvinner når en bruker holder musen eller klikker på den. Du kan også angi forskjellige parametere for svever og aktive lenker, f.eks. Endre knapp eller tekstfarge.

Bakgrunnsfargen er satt med bakgrunnsfarge, og tekstfarge med farge. Polstring definerer størrelsen på boksen --- teksten er polstret med 10px vertikalt og 25px horisontalt.

Tekstjustering sikrer at teksten vises i midten av knappen, i stedet for å gå av til den ene siden. Tekstdekorasjon, som i det siste eksemplet, fjerner understrekningen.

kjører Windows XP på Windows 10

CSS-koden 'display: inline-block' er litt mer komplisert. Kort sagt, den lar deg angi høyden og bredden på objektet. Det sikrer også at den starter en ny linje når den settes inn.

6. CSS -eksempelkode for å lage en tekstboks

Et enkelt avsnitt er ikke veldig spennende. Hvis du vil markere et element på siden din, kan du legge til en kant. Slik gjør du det med en streng med enkel CSS -kode:

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

Denne er grei. Det skaper en solid lilla kant, fem piksler bred, rundt ethvert avsnitt av viktig klasse. For å få et avsnitt til å arve disse egenskapene, bare erklær det slik:

Your important paragraph here.

Dette vil fungere uansett hvor stort avsnittet er.

Det er mange forskjellige kantstiler du kan bruke; i stedet for 'solid', prøv 'prikket' eller 'dobbel'. I mellomtiden kan bredden være 'tynn', 'middels' eller 'tykk'. CSS -kode kan til og med definere tykkelsen på hver kant individuelt, slik:

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

Det resulterer i en toppramme på fem piksler, en høyre kant på åtte, en bunn på tre og en venstre kantstørrelse på ni piksler.

7. Senterjuster elementer med grunnleggende CSS-kode

For en vanlig oppgave er sentrering av elementer med CSS -kode overraskende uintuitiv. Når du har gjort det noen ganger, blir det mye lettere. Du har et par forskjellige måter å sentrere ting på.

For et blokkelement (vanligvis et bilde) bruker du marginattributtet:

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

Dette sikrer at elementet vises som en blokk og at marginen på hver side settes automatisk. Hvis du vil sentrere alle bildene på en gitt side, kan du til og med legge til 'margin: auto' til img -taggen:

img { margin: auto; }

For å finne ut hvorfor det fungerer på denne måten, sjekk ut CSS -boksmodellforklaring på W3C .

Men hva om du vil sentrere tekst med CSS? Bruk denne eksempel -CSS:

.centertext { text-align: center; }

Vil du bruke klassen 'midttekst' for å sentrere teksten i et avsnitt? Bare legg den klassen til

stikkord:

This text will be centered.

8. CSS -eksempler for justering av polstring

Polstring av et element angir hvor mye plass som skal være på hver side. For eksempel, hvis du legger til 25 piksler med polstring i bunnen av et bilde, blir følgende tekst presset 25 piksler ned. Mange elementer kan ha polstring, ikke bare bilder.

La oss si at du vil at hvert bilde skal ha 20 piksler med polstring på venstre og høyre side, og 40 piksler på toppen og bunnen. Den mest grunnleggende utførelsen av CSS -koden for dette er:

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

Det er imidlertid en kortere CSS -instruksjon som presenterer all denne informasjonen på en enkelt linje:

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

Dette setter topp, høyre, bunn og venstre polstring til riktig nummer. Takket være at bare to verdier brukes (40 og 25) kan du gjøre det enda kortere:

img { padding: 40px 25px }

Når du bare bruker to verdier, settes den første verdien for topp og bunn, mens den andre vil være venstre og høyre.

9. Fremhev tabellrader med CSS -koding

CSS -kode får tabeller til å se mye bedre ut enn standardnettene. Det er enkelt å legge til farger, justere grenser og gjøre bordet ditt lydhørt for mobilskjermene. Dette enkle CSS -eksemplet viser deg hvordan du markerer tabellrader når du holder musen over dem.

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

Når du holder musen over en tabellcelle, endrer den raden farge. For å se noen av de andre kule tingene du kan gjøre, sjekk ut W3C -side på flotte CSS -tabeller .

10. Eksempel CSS for å skifte bilder mellom gjennomsiktig og ugjennomsiktig

CSS -kode kan også hjelpe deg med å gjøre kule ting med bilder. Her er et CSS -eksempel for å vise bilder med mindre enn full ugjennomsiktighet, slik at de ser litt 'hvite ut'. Når du holder musen over bildene, blir de fullstendig ugjennomsiktige:

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

Attributtet 'filter' gjør det samme som 'opacity', men Internet Explorer 8 og tidligere kjenner ikke igjen opacitetsmåling. For eldre nettlesere er det en god idé å inkludere den.

Nå som bildene er litt gjennomsiktige, kan du gjøre dem helt ugjennomsiktige ved å holde musen over:

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

10 CSS -eksempler med kildekoden

Med disse eksemplene på CSS -kode, bør du ha en mye bedre ide om hvordan CSS fungerer. CSS -maler kan hjelpe, men å forstå råelementene er avgjørende.

De 10 enkle CSS -kodeeksemplene gjentok seg:

  1. Enkel formatering av avsnitt
  2. Endre bokstaver
  3. Endre lenkefarger
  4. Fjern lenke understreker
  5. Lag en lenkknapp
  6. Lag en tekstboks
  7. Senterjuster elementer
  8. Juster polstring
  9. Fremhev tabellrader
  10. Gjør bilder ugjennomsiktige

Når du ser dem igjen, vil du legge merke til flere mønstre som du kan bruke på fremtidig kode. Og det er da du vet at du virkelig har begynt å bli en CSS -mester. Men å huske det kan være tøft. Du vil kanskje bokmerke denne siden for fremtidig referanse.

Dele Dele kvitring E -post Essential CSS3 Properties Cheat Sheet

Mestre essensiell CSS -syntaks med juksearket til CSS3 -egenskapene våre.

Les neste Relaterte temaer
  • Programmering
  • Webdesign
  • CSS
  • Scripting
Om forfatteren Christian Cawley(1510 artikler publisert)

Nestlederedaktør for sikkerhet, Linux, gjør -det -selv, programmering og teknologi forklart, og virkelig nyttig podcast -produsent, med lang erfaring innen desktop og programvarestøtte. Christian er en bidragsyter til magasinet Linux Format, og er en Raspberry Pi -tinkerer, en lego -elsker og en retro spillfan.

Mer fra Christian Cawley

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere