CSS komentāru piemērs - kā komentēt CSS

Komentāri tiek izmantoti CSS, lai izskaidrotu koda bloku vai veiktu īslaicīgas izmaiņas izstrādes laikā. Komentētais kods netiek izpildīts.

Gan vienas, gan vairāku rindiņu komentāri CSS sākas ar /*un beidzas ar */, un jūs varat pievienot savai stila lapai tik daudz komentāru, cik vēlaties. Piemēram:

/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */

Varat arī padarīt komentārus lasāmākus, stilizējot tos:

/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */

CSS organizēšana ar komentāriem

Lielākos projektos CSS faili var ātri palielināties un kļūt grūti uzturami. Var būt noderīgi sakārtot CSS atsevišķās sadaļās ar satura rādītāju, lai nākotnē būtu vieglāk atrast noteiktus noteikumus:

/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/

Nedaudz vairāk par CSS: CSS sintakse un atlasītāji

Kad mēs runājam par CSS sintaksi, mēs runājam par to, kā lietas tiek izkārtotas. Pastāv noteikumi par to, kas iet uz turieni, lai jūs varētu konsekventi rakstīt CSS, un programma (piemēram, pārlūks) var to interpretēt un pareizi lietot lapā.

CSS rakstīšanai ir divi galvenie veidi.

Iekļauts CSS

CSS specifika: CSS triki

Iekļautais CSS lieto stilu vienam elementam un tā bērniem, līdz tiek sastapts cits stils, kas ignorē pirmo.

Lai lietotu iekšējo CSS, pievienojiet atribūtu “style” HTML elementam, kuru vēlaties mainīt. Pēdiņās iekļauj ar semikolu atdalītu atslēgu / vērtību pāru sarakstu (katrs savukārt atdalīts ar kolu), norādot iestatāmos stilus.

Šeit ir iekļauts CSS piemērs. Vārdiem “Viens” un “Divi” būs dzeltenā fona krāsa un sarkanā teksta krāsa. Vārdam “Trīs” ir jauns stils, kas ignorē pirmo, un tā fona krāsa būs zaļa un teksta krāsa ciāna. Šajā piemērā tagiem tiek lietoti stili , taču stilu var lietot jebkuram HTML elementam.

 One Two Three 

Iekšējā CSS

Lai gan teksta stila rakstīšana ir ātrs veids, kā mainīt vienu elementu, ir efektīvāks veids, kā vienu un to pašu stilu piemērot daudziem lapas elementiem vienlaikus.

Iekšējā CSS stili ir norādīti tagā, un tas ir iegults tagā.

Šeit ir piemērs, kam ir līdzīgs efekts kā iepriekšējam “inline” piemēram, izņemot to, ka CSS ir izvilkts uz savu apgabalu. Vārdi “Viens” un “Divi” atbilst divatlasītājam un būs sarkans teksts uz dzeltena fona. Vārdi “Trīs” un “Četri” atbilst arī divatlasītājam, taču tie atbilst arī .nested_divatlasītājam, kas attiecas uz visiem HTML elementiem, kas atsaucas uz šo klasi. Šis konkrētākais atlasītājs ignorē pirmo, un tie galu galā parādās kā ciāna teksts uz zaļa fona.

 div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 

Iepriekš parādītie selektori ir ārkārtīgi vienkārši, taču tie var kļūt diezgan sarežģīti. Piemēram, stilus ir iespējams piemērot tikai ligzdotiem elementiem; tas ir, elements, kas ir cita elementa bērns.

Šeit ir piemērs, kur mēs precizējam stilu, kas jāpiemēro tikai tiem divelementiem, kas ir tiešs citu divelementu bērns . Rezultāts ir tāds, ka “Divi” un “Trīs” parādīsies kā sarkans teksts uz dzeltena fona, bet “Viens” un “Četri” paliks neskarts (un, visticamāk, melns teksts uz balta fona).

 div > div { color: red; background: yellow; } One Two Three Four 

Ārējā CSS

Visam stilam ir savs dokuments, kas ir saistīts ar tagu. Saistītā faila paplašinājums ir.css