Kaskādes stila lapa (CSS) ir vietņu kodēšanas sistēma, kas ļauj dizaineriem vienlaikus manipulēt ar vairākām funkcijām, grupām piešķirot noteiktus elementus. Piemēram, izmantojot vietnes fona kodu, dizaineri var mainīt fona krāsu vai attēlu visās vietnes lapās, veicot vienu CSS faila maiņu. Lūk, kā izveidot CSS pamata vietnei.
Soļi
1. daļa no 4: InSS rakstīšana
1. solis. Pārliecinieties, ka jums ir pamatzināšanas par HTML tagiem
Jums vajadzētu zināt, kā darbojas tagi un
src
un
href
atribūti.
2. solis. Uzziniet dažus CSS pamata rekvizītus
Jūs atklāsit, ka ir ļoti daudz īpašumu. Tomēr nav nepieciešams tos visus apgūt.
-
Ir jāzina dažas labas CSS pamata īpašības
krāsa
un
fontu saime
- .
3. solis. Uzziniet par katra attiecīgā īpašuma vērtībām
Visiem īpašumiem ir nepieciešama vērtība. Priekš
krāsa
īpašumu, piemēram, varat ievietot
sarkans
vērtību.
4. solis. Uzziniet par
stils
HTML atribūts.
To izmanto tādā elementā kā
href
vai
src
. Lai to izmantotu, pēdiņās aiz vienādības zīmes ievietojiet CSS atribūtu, kolu un pēc tam īpašuma vērtību. Tas ir pazīstams kā CSS noteikums.
5. solis. Saprotiet, ka profesionālu tīmekļa izstrādātāju vietnēm parasti neizmanto iekļauto CSS
Iekļautā CSS var pievienot nevajadzīgu jucekli HTML dokumentam. Tomēr tas ir lielisks veids, kā iepazīties ar CSS darbību.
2. daļa no 4: Pamata CSS rakstīšana
1. solis. Palaidiet programmu, kuru vēlaties izmantot
Tam vajadzētu ļaut jums izveidot HTML un CSS failus.
Ja jums nav instalēta īpaša programma, varat izmantot Notepad vai citu teksta redaktoru. Vienkārši saglabājiet failu gan kā teksta, gan CSS failu
2. solis. Atveriet savas vietnes HTML failu
Jums vajadzētu to atvērt arī ar HTML redaktoru, ja tāds ir instalēts.
HTML redaktori ļauj vienlaikus rediģēt HTML un CSS
3. Izveidojiet tagu savā HTML galvgalī
Tas ļaus jums rakstīt CSS bez atsevišķa faila.
4. solis. Izvēlieties elementu, kuram vēlaties pievienot stilu, un ierakstiet elementa nosaukumu, kam seko cirtainu lenču komplekts ({})
Lai padarītu kodu vieglāk salasāmu, vienmēr ievietojiet otro cirtainu skavu savā rindā.
5. solis. Starp breketēm ierakstiet savus CSS noteikumus tāpat kā, izmantojot
stils
atribūts.
Katrai rindai jābeidzas ar semikolu (;). Lai jūsu kods būtu salasāms, katrai kārtulai jāsākas no savas rindas un katrai rindai jābūt atkāpei.
Ir ļoti svarīgi atzīmēt, ka šis stils ietekmēs visus lapā atlasītā tipa elementus. Precīzāks stils tiks apskatīts nākamajā sadaļā
3. daļa no 4: uzlabota CSS
1. darbība. Izveidojiet CSS failu, nevis HTML failu, un saglabājiet to, izmantojot
.css
pagarinājums.
Atveriet arī savu HTML failu.
2. solis. Izveidojiet tagu savā HTML galvgalī
Tas ļaus jums saistīt atsevišķu CSS failu ar savu HTML dokumentu. Jūsu saites tagam ir nepieciešami trīs atribūti:
rel
tipa
un
href
-
rel
nozīmē "attiecības" un norāda pārlūkprogrammai, kāda ir saistība ar HTML dokumentu. Šeit tam vajadzētu būt vērtībai
"stila lapa"
- .
-
tipa
norāda, ar kāda veida plašsaziņas līdzekļiem tiek saistīts. Šeit tam vajadzētu būt vērtībai
"text/css"
-
href
- šeit tiek lietots līdzīgi tam, kā tas tiek izmantots elementā, bet šeit tam ir jābūt saistītam ar CSS failu. Ja CSS fails atrodas tajā pašā mapē, kurā atrodas HTML fails, pēdiņās jāieraksta tikai faila nosaukums.
3. solis. Atlasiet dažāda veida elementus, kuriem vēlaties pievienot to pašu stilu
Pievienojiet a
klase
atribūtu šiem elementiem un iestatiet tos vienādus ar jūsu izvēlēto klases nosaukumu. Tas jūsu elementiem piešķirs tādu pašu stilu.
4. solis. Piešķiriet klasē stilu
Ierakstiet klases nosaukumu savā CSS failā ar punktu (.) Pirms tā (t.i.
.klase
).
5. solis. Izvēlieties atsevišķus elementus, kuriem vēlaties pievienot īpašu stilu, un pievienojiet
id
atribūts.
Id tiek veidoti CSS, izmantojot mārciņas simbolu (#), nevis punktu.
Id ir specifiskāki par klasēm, tāpēc ID aizstās jebkuru klases stilu, ja tam ir atribūts ar citu vērtību nekā klase
4. daļa no 4: Uzziniet vairāk
1. solis. Apmeklējiet w3 skolas
Tā ir oficiāla vietne, kuras mērķis ir mācīt tīmekļa izstrādes prasmes. W3 ir daudz atsauču, kas uzskaitītas HTML un CSS, kā arī citām tīmekļa valodām.
2. solis. Atrodiet citas vietnes, kas īpaši paredzētas HTML un CSS apguvei un mācīšanai
Vietnes, piemēram, CSS tricks.com, ir īpaši paredzētas CSS un tīmekļa dizaina iemaņu mācīšanai. Cienījamu avotu atrašana palīdzēs jums mācīties.
3. solis. Sazinieties ar tīmekļa dizaineriem un izstrādātājiem
Viņu pieredze un zinātība var iemācīt jums vērtīgas zināšanas un prasmes.
4. solis. Skatiet tīmekļa vietņu avota kodu, ar kuru jūs saskaraties
Labi attīstītu vietņu CSS skatīšana var parādīt veidus, kā veidot tīmekļa vietņu daļas. Nokopējot to praksē un meklējot kodu, varat uzzināt, kā izmantot dažādus CSS atribūtus.
