En hurtig vejledning om Internets designsprog.

CSS (Cascading Style Sheets) er det, der får websider til at se godt ud og præsentable. Det er en væsentlig del af moderne webudvikling og en must-have færdighed for enhver webdesigner og udvikler.

I denne artikel giver jeg dig en hurtig introduktion, der hjælper dig med at komme i gang med CSS.

Vi har også lanceret et gratis CSS-kursus i fuld længde på Scrimba. Klik her for at tjekke det ud.

Jeg antager, at du har en grundlæggende forståelse af HTML, men bortset fra at der ikke er nogen forudsætninger for denne tutorial.

Kom godt i gang

Lad os starte med at lære, hvordan vi kan inkludere CSS i vores projekter. Der er typisk tre måder, vi gør det på.

1. Integreret CSS

For det første kan vi inkludere CSS direkte i vores HTML-elementer. Til dette bruger vi styleattributten, og derefter leverer vi egenskaber til den.

 Hello world! 

Her giver vi det egenskaben colorog sætter værdien til blue, hvilket resulterer i følgende:

Vi kan også indstille flere egenskaber inde i styletagget, hvis vi ville. Jeg vil dog ikke fortsætte ned ad denne sti, da tingene begynder at blive rodet, hvis vores HTML er rodet med masser af CSS inde i den.

Dette er grunden til, at den anden metode til at inkludere CSS blev introduceret.

2. Intern CSS

Den anden måde at inkludere CSS er at bruge styleelementet i headsektionen af ​​HTML-dokumentet. Dette kaldes intern styling.

  h1 { color: blue; }   

I stilelementet kan vi give stylingen til vores HTML-elementer ved at vælge elementet (elementerne) og give stylingattributter. Ligesom vi anvendte colorejendommen på h1elementet ovenfor.

3. Ekstern CSS

Den tredje og mest anbefalede måde at inkludere CSS på er at bruge et eksternt typografiark. Vi opretter et typografiark med en .cssudvidelse og inkluderer dets link i HTML-dokumentet, sådan:

I koden ovenfor har vi inkluderet linket til style.cssfilen ved hjælp af linkelementet. Vi skriver derefter alle vores CSS i et separat stilark kaldet style.cssså det er let håndterbart.

h1 { color: blue; } 

Dette typografiark kan også importeres til andre HTMLfiler, så dette er fantastisk til genanvendelighed.

CSS-vælgere

Som vi diskuterede tidligere, er CSS et designsprog, der bruges til at style HTML-elementer. Og for at style elementer skal du først vælge dem. Du har allerede set et glimt af, hvordan dette fungerer, men lad os dykke lidt dybere ned i CSS-vælgerne og se på tre forskellige måder, du kan vælge HTML-elementer på.

1. Element

Den første måde at vælge et HTML-element er ved blot at bruge navnet, hvilket er det, vi gjorde ovenfor. Lad os se, hvordan det fungerer:

h1 { font-size: 20px; } p { color: green; } div { margin: 10px; } 

Eksemplet ovenfor er næsten selvforklarende. Vi vælger forskellige elementer som h1, p, divog give dem forskellige stil attributter. De font-sizekontrollerer størrelsen af teksten, colorsætter tekst farve, og margintilføjer afstand omkring elementet.

2. Klasse

En anden måde at vælge HTML-elementer er ved hjælp af klasseattributten. I HTML kan vi tildele forskellige klasser til vores elementer. Hvert element kan have flere klasser, og hver klasse kan også anvendes på flere elementer.

Lad os se det i aktion:

 This is heading 

 .container { margin: 10px; } 

I koden ovenfor har vi tildelt klassen containertil div-elementet. I stilarket vælger vi vores klasse ved hjælp af .classNameformat og giver det en 10pxmargin.

3. ID

Ligesom klasser kan vi også bruge ID'er til at vælge HTML-elementer og anvende styling på dem. Den eneste forskel mellem klasse og ID er, at et ID kun kan tildeles et HTML-element.

 This is a paragraph 

 #para1 { color: green; font-size: 16px; } 

Eksemplet ovenfor viser, hvordan vi tildeler et ID til afsnitselementet og senere bruger ID-vælgeren i typografiarket til at vælge afsnittet og anvende typografien på det.

Skrifttyper og farver

CSS provides us with literally hundreds of options for playing around with fonts and colors and making our HTML elements look pretty. We can choose from two types of font family names:

1. Generic Family: a group of font families with a similar look (like ‘Serif’ or ‘Monospace’)

2. Font Family: a specific font family (like ‘Times New Roman’ or ‘Arial’)

For colors, we can use predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

 CSS is Coooooool!!!! 

.container { width: 500px; height: 100px; background-color: lightcyan; text-align: center; } .heading1 { font-family: 'Courier New'; color: tomato; } 

As you can see in the above example, we have a div element with the class of container. Inside this div, there is an h1 tag with some text inside it.

In the stylesheet, we select the container class and set its width, height, background-color, and text-align.

Endelig vælger vi .heading1klassen - som anvendes på h1koden - og giver den attributterne for font-familyog color.

Konklusion

Du føler dig måske lidt overvældet af alle disse oplysninger, men rolig.

Se bare vores gratis introduktion til CSS-kursus om Scrimba, så bliver du en webdesign-ninja på mindre end en time.

Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba - den nemmeste måde at lære at kode på. Du bør tjekke vores responsive webdesign bootcamp, hvis du vil lære at opbygge et moderne websted på et professionelt niveau.