Õppige CSS-i viie minutiga - õpetus algajatele

Kiire õpetus veebi kujunduskeele kohta.

CSS (Cascading Style Sheets) on see, mis muudab veebisaidid headeks ja esitletavateks. See on oluline osa kaasaegsest veebiarendusest ja peab olema kohustuslik oskus igale veebidisainerile ja arendajale.

Selles artiklis esitan teile kiire sissejuhatuse, mis aitab teil CSS-iga alustada.

Samuti oleme käivitanud Scrimba teemal tasuta täispika CSS-kursuse. Selle kontrollimiseks klõpsake siin.

Eeldan, et teil on HTML-ist põhiteadmised, kuid peale selle pole selle õpetuse jaoks eeltingimusi.

Alustamine

Alustame sellest, kuidas õppida CSS-i oma projektidesse õppima. Seda tehakse tavaliselt kolmel viisil.

1. Sisemine CSS

Esiteks võime CSS-i lisada otse oma HTML-elementidesse. Selleks kasutame styleatribuuti ja seejärel pakume sellele atribuute.

Hello world!

Siin anname sellele atribuudi ja määrame colorväärtuseks blue, mille tulemuseks on järgmine:

styleSoovi korral võime märgendi sisse seada ka mitu omadust . Ma ei taha siiski seda teed jätkata, sest asjad hakkavad segaseks minema, kui meie HTML on täis palju CSS-e.

Seetõttu võeti kasutusele teine ​​CSS-i kaasamise meetod.

2. Sisemine CSS

Teine viis CSS-i stylekaasamiseks headon HTML-dokumendi jaotises oleva elemendi kasutamine . Seda nimetatakse sisemiseks stiiliks.

  h1 { color: blue; }   

Stiilielemendis saame oma HTML-elementidele anda stiili, valides elemendi (d) ja pakkudes stiiliatribuudid. Täpselt nagu rakendasime colorvara h1ülaltoodud elemendile.

3. Väline CSS

Kolmas ja soovitatav viis CSS-i kaasamiseks on välise stiililehe kasutamine. Loome .csslaiendiga stiililehe ja lisame selle lingi HTML-dokumenti järgmiselt:

Ülaltoodud koodis oleme lisanud elemendi style.cssabil faili lingi link. Seejärel kirjutame kogu oma CSS-i eraldi stiilitabelisse style.css, et see oleks hõlpsasti hallatav.

h1 { color: blue; } 

Seda stiililehte saab importida ka teistesse HTMLfailidesse, nii et see sobib korduvkasutamiseks.

CSS-i valijad

Nagu me varem käsitlesime, on CSS disainikeel, mida kasutatakse HTML-elementide kujundamiseks. Ja elementide stiilimiseks peate kõigepealt need valima. Olete juba näinud, kuidas see toimib, kuid sukeldume veidi CSS-i valijatesse ja uurime kolme erinevat viisi, kuidas saate HTML-elemente valida.

1. Element

Esimene viis HTML-elemendi valimiseks on lihtsalt nime kasutamine, mida me ka eespool tegime. Vaatame, kuidas see töötab:

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

Ülaltoodud näide on peaaegu iseenesestmõistetav. Oleme valides erinevaid elemente nagu h1, p, divja andes neile erinevaid stiil atribuute. font-sizeKontrollib teksti suurust, colormäärab teksti värvi ja marginlisab tühikud element.

2. Klass

Teine võimalus HTML-elementide valimiseks on atribuudi class kasutamine. HTML-is saame oma elementidele määrata erinevad klassid. Igal elemendil võib olla mitu klassi ja iga klassi saab rakendada ka mitmele elemendile.

Vaatame seda toimimas:

This is heading

 .container { margin: 10px; } 

Ülalolevas koodis määrasime containerelemendi div klassi . Stiililehes valime oma klassi kasutades .classNamevormingut ja andes sellele 10pxvaru.

3. ID

Nagu klassid, saame ka ID-sid kasutada HTML-elementide valimiseks ja neile stiili rakendamiseks. Ainus erinevus klassi ja ID vahel on see, et ühe ID saab määrata ainult ühele HTML-elemendile.

This is a paragraph

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

Ülaltoodud näide näitab, kuidas määrame lõiguelemendile ID ja hiljem kasutame stiililehel ID-valijat lõigu valimiseks ja sellele stiili rakendamiseks.

Fondid ja värvid

CSS pakub meile sõna otseses mõttes sadu võimalusi fontide ja värvidega ringi mängimiseks ning meie HTML-elementide ilusaks muutmiseks. Saame valida kahte tüüpi fontide perekonnanimede vahel:

1. Üldine perekond: sarnase välimusega fondiperekondade rühm (nt „Serif” või „Monospace”)

2. Fontide perekond: konkreetne fondiperekond (nt „Times New Roman” või „Arial”)

Värvide jaoks võime kasutada eelnevalt määratletud värvinimesid või RGB, HEX, HSL, RGBA, HSLA väärtusi.

CSS is Coooooool!!!!

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

Nagu näete ülaltoodud näites, on meil klassiga div element div container. Selle div-i sees on h1silt, mille sees on tekst.

In-stiil, valime konteineri klassi ja määrata selle width, height, background-color, ja text-align.

Lõpuks valime .heading1klass - mis on rakendatud h1tag - ja seda atribuudid font-familyja color.

Järeldus

Võimalik, et tunnete end kogu sellest teabest veidi üle jõu, kuid ärge muretsege.

Vaadake lihtsalt meie Scrimba CSS-i kursust ja saate vähem kui tunni pärast veebidisaini ninja.

Täname lugemast! Minu nimi on Per Borgen, olen Scrimba asutaja - lihtsaim viis kodeerimise õppimiseks. Kui soovite õppida kaasaegse veebisaidi loomist professionaalsel tasemel, peaksite tutvuma meie reageeriva veebidisaini alglaadimisega.