Mis on teie CSS-stiil?

CSS-iga (Cascading Style Sheets) töötamise üks segasemaid aspekte on see, et saate stiile kirjutada väga mitmel viisil. Sarnaselt proosa kirjutamisele ei tähenda see, et mõistate grammatika ja õigekirja põhireegleid, et olete õppinud kokkuvõtlikku proosat kirjutama.

Kogenud CSS-i disainerid kulutavad palju aega lühikese ja selge CSS-i loomisele, mida on lihtne redigeerida ja värskendada. Kuid need, kes on CSS-i uued kasutajad, kirjutavad rohkem stiile kui vaja ja loovad üleliigseid stiile.

Üleliigse koodi allalaadimine veebibrauserisse ei võta mitte ainult kauem aega, vaid seda on hiljem palju raskem muuta või üle vaadata. Ja mida üleliigsem on teie kood, seda tõenäolisemalt tekivad stiilikonfliktid.

Siin on viis näpunäidet puhaste ja tõhusate stiilide kirjutamiseks:

• Ärge kunagi looge kahte stiili, kui ühest piisab. Näiteks saate kõigi jaoks sildivalija abil luua stiili

  sildid, mis muudavad teie pealkirjade fondiperekonda, ja looge seejärel klassivalija abil teine ​​stiil, mida saate pealkirjadele värvi muutmiseks rakendada.

  Kuid tõhusam oleks määratleda nii värv kui ka fondipere samas stiilis. Pidage meeles, et kui soovite stiili vormingut muuta, võite alati minna tagasi ja muuta stiili, et lisada veel üks reegel.

• Kuueteistkümnendsüsteemi värvikoodide lühendamine. Saate CSS-is värve määratleda, lisades kogu kuueteistkümnendsüsteemi värvikoodi. Kui aga kasutate korduvaid värvikoode, peate lisama ainult kolm esimest tähemärki. Näiteks #ffffff on sama mis #ffff; mõlemad loovad valge värvi.

• Kasutage väliseid stiililehti. Saate määratleda stiile iga veebilehe ülaosas olevas sisemises stiililehes või salvestada laadid välisesse faili laiendiga .css ja lisada see laadileht kõigile oma veebilehtedele. Välised stiililehed on oma olemuselt tõhusamad, kuna võimaldavad teil kasutada sama stiili oma saidi mis tahes või kõigil lehtedel.

  Näiteks kui määrate stiili, mis muudab kõik peamised pealkirjad paksuks, siniseks ja suureks, saate selle stiili salvestamisel välisele stiililehele kasutada iga pealkirja jaoks sama stiili. Seejärel, kui otsustate hiljem, et soovite muuta pealkirjad roheliseks, saate muuta stiili ühel välisel stiililehel ja muuta kõiki pealkirju korraga.

  Kui salvestasite stiilid sisemisele stiililehele, peaksite iga faili pealkirja stiili muutma.

• Töötage välja oma stiilide jaoks nimede andmise tava. Kuigi saate klassi- või ID-valijatega loodud stiile nimetada ükskõik mida, on parem valida stiilid, millel on peale vormingu ka tähendus. Näiteks kui loote stiili nimega .redHeadlines ja otsustate hiljem, et soovite, et kõik teie .redHeadlines oleksid sinised, saate kas sinise pealkirjastiili nimega .redHeadlines või peate stiili ümber nimetama.

  Ja stiili ümbernimetamine hõlmab tagasipöördumist ja selle stiili uuesti rakendamist kõikjal, kus on punane pealkiri, mille soovite siniseks muuta, mis tühistab stiilide võime teha globaalseid värskendusi. Selle probleemi vältimiseks looge stiilinimed, mis viitavad elementide asukohale või tähtsusele, näiteks .mainHeadlines või .sidebarHeadlines.

• * Testige ja kinnitage oma koodi. Isegi kogenud CSS-i disainerid teevad vigu, mistõttu sisaldab Dreamweaver nii palju suurepäraseid tööriistu teie veebilehtede koodi testimiseks ja kinnitamiseks. Kontrollige kindlasti oma CSS-i levinud vigade suhtes.

  Järgmised on kaks veebipõhist testimisteenust, mida saate kasutada oma CSS-koodis vigade kontrollimiseks. Sisestage lihtsalt ükskõik millise Interneti-lehe URL mõlema saidi aadressiväljale ja klõpsake nuppu Esita, et saada aruanne, mis näitab teie koodi vigu:

  • W3C CSS valideerimine Service

  • XHTML-CSS : õppige või õppige