Mi a CSS-stílusod?

A CSS-sel (Cascading Style Sheets) végzett munka egyik legzavaróbb aspektusa az, hogy nagyon sokféleképpen írhat stílusokat. Hasonlóan a prózaíráshoz, attól, hogy ismeri a nyelvtani és helyesírási alapszabályokat, még nem biztos, hogy elsajátította a tömör prózaírást.

A tapasztalt CSS-tervezők sok időt töltenek azzal, hogy rövid, világos CSS-t készítsenek, amely könnyen szerkeszthető és frissíthető. De azok, akik még nem ismerik a CSS-t, hajlamosak a szükségesnél több stílust írni, és redundáns stílusokat létrehozni.

A redundáns kód webböngészőbe való letöltése nem csak hosszabb ideig tart, hanem sokkal nehezebb később szerkeszteni vagy átdolgozni. És minél redundánsabb a kód, annál valószínűbb, hogy stílusütközésekbe ütközik.

Íme öt tipp a tiszta, hatékony stílusok írásához:

• Soha ne hozz létre két stílust, ha egy is elég. Létrehozhat például stílust az összes címkeválasztóval

  címkéket, amelyek megváltoztatják a címsorok betűcsaládját, majd hozzon létre egy második stílust egy osztályválasztó segítségével, amelyet a címsorokra alkalmazhat a szín megváltoztatásához.

  De hatékonyabb lenne a színt és a betűcsaládot is ugyanabban a stílusban meghatározni. Ne feledje, hogy bármikor visszaléphet és szerkeszthet egy stílust egy másik szabály hozzáadásához, ha módosítani szeretné a stílus formázását.

• A hexadecimális színkódok rövidítése. A színeket a CSS-ben a teljes hexadecimális színkód megadásával határozhatja meg. Ha azonban ismétlődő színkódokat használ, csak az első három karaktert kell megadnia. Például a #ffffff ugyanaz, mint a #ffff; mindkettő létrehozza a fehér színt.

• Használjon külső stíluslapokat. Stílusokat meghatározhat egy belső stíluslapon az egyes weboldalak tetején, vagy mentheti a stílusokat egy külső fájlba .css kiterjesztéssel, és csatolhatja a stíluslapot az összes weboldalához. A külső stíluslapok eredendően hatékonyabbak, mivel lehetővé teszik, hogy ugyanazt a stílust használja webhelye bármely vagy összes oldalán.

  Például, ha olyan stílust határoz meg, amely az összes fő címsort félkövérre, kékre és nagyra teszi, akkor a stílust egy külső stíluslapba mentve minden címsorhoz ugyanazt a stílust használhatja. Ezután, ha később úgy dönt, hogy zöldre szeretné változtatni a címsorokat, megváltoztathatja a stílust egy külső stíluslapon, és egyszerre módosíthatja az összes címsort.

  Ha a stílusokat egy belső stíluslapba mentette, akkor minden fájlban módosítania kell a címsor stílusát.

• Alakítson ki elnevezési konvenciót stílusaihoz. Bár az osztály- vagy azonosítóválasztókkal létrehozott stílusokat bármit elnevezhet, a legjobb, ha olyan stílusokat választ, amelyeknek a formázáson kívül van jelentése is. Például, ha létrehoz egy .redHeadlines nevű stílust, majd később úgy dönt, hogy az összes .redHeadline-t kéknek szeretné tenni, akkor vagy a .redHeadlines nevű kék ​​címsorstílust kapja, vagy át kell neveznie a stílust.

  A stílus átnevezése magában foglalja a visszalépést és a stílus újbóli alkalmazását mindenhol, ahol van egy piros címsor, amelyet kékre szeretne váltani, ami meggátolja a stílusok globális frissítések lehetőségét. A probléma elkerülése érdekében hozzon létre olyan stílusneveket, amelyek az elemek helyzetére vagy fontosságára utalnak, például .mainHeadlines vagy .sidebarHeadlines.

• * Tesztelje és érvényesítse a kódot. Még a tapasztalt CSS-tervezők is követnek el hibákat, ezért a Dreamweaver olyan sok nagyszerű eszközt tartalmaz a kód tesztelésére és érvényesítésére a weboldalakon. Ügyeljen arra, hogy tesztelje a CSS-t a gyakori hibákért.

  Az alábbiakban két online tesztelési szolgáltatás található, amelyek segítségével ellenőrizheti a CSS-kód hibáit. Egyszerűen írja be az internet bármely weboldalának URL-címét a címmezőbe ezen webhelyek bármelyikén, majd kattintson a Küldés gombra, hogy megkapja a kódjában található hibákat tartalmazó jelentést:

  • A W3C CSS Validation Service

  • XHTML-CSS : Legyen érvényes, vagy haljon meg