CSS (Cascading Style Sheet) on veebisaitide kodeerimise süsteem, mis võimaldab disaineritel manipuleerida mitme funktsiooniga korraga, määrates rühmadele teatud elemendid. Näiteks kasutades veebisaidi tausta koodi, saavad disainerid muuta saidi kõigi lehtede taustavärvi või pilti ühe muudatusega CSS -failis. Siit saate teada, kuidas luua CSS -i põhilise veebisaidi jaoks.
Sammud
Osa 1 /4: tekstisisese CSS -i kirjutamine
Samm 1. Veenduge, et teil on HTML -siltide põhiteadmised
Te peaksite teadma, kuidas sildid töötavad ja
src
ja
href
atribuudid.
Samm 2. Õppige mõningaid CSS -i põhiomadusi
Leiad, et kinnisvara on väga palju. Neid kõiki pole aga vaja õppida.
-
Mõned head CSS -i põhiomadused on teada
värvi
ja
font-family
- .
Samm 3. Lugege iga vastava atribuudi väärtuste kohta
Kõik omadused vajavad väärtust. Jaoks
värvi
kinnisvara, näiteks võite panna
punane
väärtus.
Samm 4. Lisateave
stiil
HTML atribuut.
Seda kasutatakse sellises elemendis nagu
href
või
src
. Selle kasutamiseks pange võrdusmärgi järel jutumärkidesse CSS -i atribuut, koolon ja seejärel atribuudi väärtus. Seda nimetatakse CSS -reegliks.
Samm 5. Mõista, et professionaalseid veebiarendajaid ei kasuta veebisaitide jaoks tavaliselt sisemist CSS -i
Inline CSS võib lisada HTML -dokumendile tarbetut segadust. Siiski on see suurepärane võimalus tutvuda CSS -i toimimisega.
Osa 2/4: Põhiliste CSS -ide kirjutamine
Samm 1. Käivitage programm, mida soovite kasutada
See peaks võimaldama teil luua HTML- ja CSS -faile.
Kui teil pole spetsiaalset programmi installitud, võite kasutada Notepadi või mõnda muud tekstiredaktorit. Salvestage oma fail lihtsalt teksti- ja CSS -failina
Samm 2. Avage oma veebisaidi HTML -fail
Peaksite selle avama ka HTML -redaktoriga, kui see on installitud.
HTML -redaktorid võimaldavad teil HTML -i ja CSS -i korraga redigeerida
Samm 3. Looge oma HTML -päis silt
See võimaldab teil CSS -i kirjutada ilma eraldi failita.
Samm 4. Valige element, millele soovite stiili lisada, ja tippige elemendi nimi, millele järgneb lokkis trakside komplekt ({})
Koodi loetavamaks muutmiseks pange alati teine lokkis traks oma reale.
Samm 5. Tippige trakside vahele oma CSS -reeglid, nagu kasutaksite
stiil
atribuut.
Iga rida peab lõppema semikooloniga (;). Koodi loetavaks muutmiseks peaks iga reegel algama oma realt ja iga rida olema taandatud.
On väga oluline märkida, et see stiil mõjutab kõiki valitud tüüpi elemente lehel. Täpsemat stiili käsitletakse järgmises osas
Osa 3/4: Täpsem CSS
Samm 1. Looge CSS -fail, mitte HTML -fail ja salvestage see, kasutades
.css
pikendamine.
Avage ka oma HTML -fail.
Samm 2. Looge oma HTML -päis silt
See võimaldab teil oma HTML -dokumendiga linkida eraldi CSS -faili. Teie lingimärgend vajab kolme atribuuti.
rel
tüüpi
ja
href
-
rel
tähendab "suhe" ja ütleb brauserile, milline seos on HTML -dokumendiga. Siin peaks sellel olema väärtus
"stiilileht"
- .
-
tüüpi
ütleb, millist tüüpi meediat lingitakse. Siin peaks sellel olema väärtus
"tekst/css"
-
href
- siin kasutatakse sarnaselt sellele, kuidas seda kasutatakse elemendis, kuid siin peab see viitama CSS -failile. Kui CSS -fail asub HTML -failiga samas kaustas, tuleb jutumärkidesse kirjutada ainult faili nimi.
Samm 3. Valige erinevat tüüpi elemendid, millele soovite sama stiili lisada
Lisa
klassi
atribuut neile elementidele ja määrake need võrdseks teie valitud klassi nimega. See annab teie elementidele sama stiili.
Samm 4. Määrake, millist stiili klass saab
Sisestage oma CSS -faili klassi nimi, millele eelneb punkt (.) (St.
.klass
).
Samm 5. Valige üksikud elemendid, millele soovite erilise stiili lisada, ja lisage
id
atribuut.
Id -id luuakse CSS -is, kasutades punkti asemel sümbolit (#).
Id -id on klassidest spetsiifilisemad, seega tühistab ID mis tahes stiili, kui sellel on klassist erineva väärtusega atribuut
Osa 4/4: Lisateave
Samm 1. Külastage w3 koole
See on ametlik veebisait, mille eesmärk on õpetada veebiarendusoskusi. W3 -l on palju viiteid HTML -i ja CSS -i ning muude veebikeelte jaoks.
Samm 2. Leidke teisi saite, mis on spetsiaalselt suunatud HTML -i ja CSS -i õppimisele ja õpetamisele
Selliste saitide nagu CSS tricks.com eesmärk on õpetada CSS -i ja veebidisaini oskusi. Hea mainega allikate leidmine aitab teil õppimist teha.
Samm 3. Võtke ühendust veebidisainerite ja -arendajatega
Nende kogemus ja oskusteave võivad teile õpetada väärtuslikke teadmisi ja oskusi.
Samm 4. Vaadake kohatud veebisaitide lähtekoodi
Hästi arenenud veebisaitide CSS-i vaatamine võib näidata võimalusi veebisaitide osade kujundamiseks. Selle praktiliseks kopeerimine ja koodi näppimine aitab teil õppida erinevate CSS -atribuutide kasutamist.
