Hjemmesider ville se kedelige ud uden CSS, da dette stylingsprog er ansvarlig for tekststil, størrelse, farve og placering på en webside.
Indholdsfortegnelse
Hvad er CSS?
Cascading Style Sheets, forkortet som CSS, er et sprog, der beskriver, hvordan HTML-elementer skal vises på en skærm eller papir. CSS blev oprettet af World Wide Web Consortium (W3C) i 1996.
HTML-elementer var ikke designet til at have tags, der kunne hjælpe med at formatere en webside, og udviklere var kun forpligtet til at skrive en markering til siden. Introduktionen af tags såsom , da HTML 3.2 blev lanceret, introducerede nye problemer for udviklere.
Da websider har farvede baggrunde, forskellige skrifttyper og flere stilarter, blev omskrivning af kode dyrt og smertefuldt. W3C-skoler introducerede CSS for at løse disse udfordringer, og det er fortsat med at udvikle sig gennem årene.
Hvorfor CSS?
#1. CSS er effektiv
CSS redder os fra smerten ved at tilføje tags som skrifttype, elementjusteringer, kant, farve, baggrundsstil og størrelse på hver webside.
#2. Spare tid
Du kan nemt ændre hele hjemmesidens udseende ved at ændre den eksterne CSS-fil.
#3. Kompatibilitet med flere enheder
Moderne webbrugere får adgang til websteder på gadgets med varierende skærmstørrelser, såsom pc’er, tablets og smartphones. CSS gør det nemt at oprette websider, der reagerer på skærmstørrelser.
#4. Applikationer, der er nemme at vedligeholde
Moderne webapplikationer er altid i udvikling. CSS gør det nemt at ændre enkelte komponenter eller endda hele webstedet uden at ændre kodebasen.
Hvordan bruges CSS med HTML til at oprette websteder?
HTML er et standard opmærkningssprog, der bruges til oprettelse af websider. På den anden side beskriver CSS, hvordan websider (skabt ved hjælp af HTML) vises. En webside oprettet ved hjælp af HTML og CSS vil ideelt set have en HTML-fil med tekst, billedlinks og HTML-tags.
Denne HTML-fil kan enten have en separat CSS-fil knyttet til sig ved hjælp af et link-tag eller anvende interne eller inline CSS-stile. En HTML-fil kan have en overskrift såsom
og et afsnit, der er angivet med
. Du kan bruge CSS til at instruere browseren til at vise alt indholdet i afsnittet med fed skrift eller endda gøre overskriftens indhold 50 pixels og grøn i farven.
Vi vil demonstrere, hvordan HTML og CSS fungerer i næste afsnit.
Typer af CSS
#1. Ekstern CSS
For at CSS kan klassificeres som ekstern, skal der være en HTML-fil og en separat CSS-fil med en .css-filtype. For eksempel style.css. CSS-filen er forbundet med HTML-filen/dokumentet ved hjælp af et link-tag.
Eksempel på en ekstern CSS-fil:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}
CSS-filen kan linkes til følgende HTML-dokument:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/> </head> <body> <div class = "main"> <div class ="GF">Geek Flare!!!! </div> <div id ="TP"> Your favourite tech portal </div> </div> </body> </html>
Link-tagget forbinder det eksterne typografiark med HTML-dokumentet, mens href-attributten angiver det eksterne typografiarks placering.
Den endelige webside vises som følger:
Ekstern CSS er den mest anbefalede tilgang, da den gør det nemt at skabe genanvendelige komponenter og foretage universelle ændringer af kodebasen.
#2. Intern CSS
Intern CSS er ideel, når du har et enkelt HTML-dokument, du vil style unikt. Stilregelsættet er skrevet på HTML-dokumentet i hovedafsnittet.
Dette er et eksempel på intern CSS:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>
Den gengivne webside vises som følger:
Intern CSS er ikke ideel i de fleste tilfælde, da det gør koden i et HTML-dokument så stor, hvilket påvirker indlæsningshastigheden.
#3. Inline CSS
Inline CSS indeholder CSS-stilen i kroppen. For eksempel kan du style et afsnit, en overskrift eller endda en div ved hjælp af inline CSS.
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:red; font-size:50px; font-style:bold; text-align:center;"> Inline CSS Demonstration </p> </body> </html>
Det gengivne dokument vil fremstå som følger:
Inline CSS er ikke ideel, hvis du ønsker at skalere din webapplikation, da det tager tid at tilføje en CSS-egenskab til hvert HTML-tag.
Udforsk nogle af de bedste onlinekurser og bøger til at mestre CSS.
Byg responsive hjemmesider med HTML og CSS
Dette kursus i opbygning af responsive websteder i den virkelige verden lærer, hvordan man bygger responsive websteder ved hjælp af HTML5 og CSS3. Du behøver ingen forudgående viden i webudvikling for at lære dette kursus, der udforsker begreber som boksmodellen, løsning af vælgerkonflikter, positioneringsskemaer og arv.
Det er også det ideelle kursus, hvis du vil lære at brainstorme, planlægge, skitsere, kode, teste og optimere en professionel hjemmeside.
Avanceret CSS og Sass
Avanceret CSS og Sass-kursus introducerer dig til, hvordan CSS fungerer bag kulisserne ved at udforske emner som kaskade, specificitet og arv.
Kurset har mange moderne CSS-teknikker til at skabe kraftfulde, responsive websider. Kurset introducerer Saas og hvordan man bruger det i projekter, mens man opbygger CSS, globale variabler og administrerer medieforespørgsler.
Det er også det ideelle kursus, hvis du vil lære CSS-animation, da det berører @keyframes, animation og overgang.
Lær CSS
Lær CSS af Codecademy lærer, hvordan man bruger CSS til at omdanne HTML til visuelt iøjnefaldende websteder. Kurset er opdelt i 8 lektioner og har 6 projekter for at teste din forståelse.
De vigtigste ting, du vil lære fra dette kursus, er, hvordan du tilføjer styling til HTML-elementer, forbinder HTML- og CSS-filer og skaber unikke layouts til websider.
Byg din første webside med HTML og CSS
Kurset Byg din første webside lærer, hvordan du bruger HTML5 og CSS3 til at skabe responsive hjemmesider. Dette gratis kursus præsenteres i 4 moduler og tager omkring 10 timer at gennemføre. Du behøver ingen forudgående viden om programmering for at lære dette kursus.
Grundlæggende om CSS
CSS Basics er skabt af W3Cx. Nogle af de ting du vil lære på dette kursus er; bedste praksis inden for webdesign, grundlæggende CSS-vælgere og hvordan man vælger CSS-egenskaber. Kurset er opdelt i 5 moduler; du skal bruge cirka 5 uger til at gennemføre det, når du studerer 5-7 timer om ugen.
Introduktion til CSS3
Dette kursus om CSS3 introducerer Cascading Style Sheets. Kurset er udarbejdet af University of Michigan og lærer at skrive CSS-regler, etablere gode programmeringsvaner og teste kode. Du har brug for omkring 12 timer for at gennemføre dette kursus, som kommer med et delbart certifikat ved afslutningen.
Introduktion til HTML og CSS
Dette introkursus om HTML og CSS lærer, hvordan man laver stylede og velstrukturerede hjemmesider ved hjælp af HTML og CSS. Kurset lærer eleverne at skabe hjemmesider ved hjælp af en trælignende struktur og derefter style dem ved hjælp af CSS.
Dette gratis kursus er velegnet til begyndere og bruger en læringsmodel i eget tempo. Du har brug for omkring 3 uger for at gennemføre dette kursus, som brancheeksperter underviser.
CSS tutorial
CSS Tutorial er et gratis kursus om W3schools. Kurset er opdelt i kapitler for nem forståelse. Hvert kapitel giver eksempler og øvelser. Platformen har en online, hvor du kan eksperimentere med forskellige koncepter via knappen “Prøv det selv”.
CSS: The Definitive Guide
CSS: The Definitive Guide-bogen er nyttig, hvis du vil lære det grundlæggende i CSS, fra Selectors og specificitet til kaskaden. Bogen også flexbox, positionering og flydetricks i detaljer.
Det er også bogen du skal bestille, hvis du vil lære at bruge CSS til at producere 2D og 3D transformationer, overgange og animationer. The Definitive Guide er tilgængelig i både Kindle- og paperback-versioner.
Responsivt webdesign med HTML5 og CSS
Denne bog om responsivt webdesign med HTML5 og CSS lærer, hvordan man skaber fremtidssikrede responsive websites ved hjælp af HTML5 og CSS.
Efter at have lært trickene fra denne bog, vil de websteder, du opretter, køre fejlfrit på desktops, tablets og mobiltelefoner. Bogen er skrevet i et let-at følge format og fås i paperback og Kindle-formater.
HTML og CSS: Design og byg websteder
Denne bog om HTML og CSS er ideel for alle, uanset om du er hobbymand, studerende eller professionel.
Forfatteren leverer indholdet af denne bog gennem informationsgrafik og livsstilsfotografering for at gøre det nemt at forstå forskellige koncepter. Ressourcen er præsenteret i en unik struktur, der gør det nemt at gennemse alle kapitlerne.
Moderne CSS
Denne bog om Modern CSS: Master the Key Concepts of CSS for Modern Web Development lærer CSS gennem kodeeksempler, diagrammer og skærmbilleder.
Bogen introducerer farver, vælgere, boksmodeller, kombinatorer og specificitet i sine første kapitler. Bogen introducerer derefter styling af tekst, positionering, gradienter, kanter, Z-indeks og stablingskontekster. Du lærer også avancerede emner som overgange, animationer, transformationer, flexbox og CSS-gitter.
Afsluttende ord
CSS’s rolle på moderne hjemmesider kan ikke understreges nok. Ud over at gøre websider visuelt tiltalende, gør CSS det nemt at navigere på forskellige websider.
Det kan være nemt at lære CSS, hvis du bruger ressourcerne nævnt ovenfor. Nogle af disse kurser er gratis, mens andre er betalt.
Dernæst kan du tjekke CSS-cheat sheets for udviklere og designere.