Css tippek és trükkök, 1. rész, css
Mivel 2 évig széles körben használtam a CSS-t, emlékszem néhány olyan technikára, amelyek a CSS-t hatékonyabb eszközként használják fel és megoldanak bizonyos problémákat. Szeretnék megosztani a kedvenc CSS technikáimat és megmagyarázni azokat a leggyakoribb hibákat, amelyeket az újoncok tesznek. Ha tapasztalatai vannak a CSS-szel, akkor valószínűleg az úton már eleget tettek ezeknek a tippeknek és trükköknek, de ki tudja, hirtelen lesz pár új.
A kezdetektől fogva mindent meg kellett írni egy cikkből, de több tanács is létezett, ezért két részre osztottam mindent, hogy megkönnyítsem ezt az anyagot.
Ha az érték nem 0, akkor mindig adja meg a mérési egységet
Ne adjon meg egy mérési egységet a hosszúságértékért - meglehetősen gyakori hiba a kezdőknek, hogy megtanulják a CSS-t. Ezt elkerülheti a HTML-ben, de a CSS-ben a hosszúságértékeknek rendelkezniük kell egy mértékegységgel. Két kivétel van: vonalmagasság és 0 (nulla). Ne feledje, hogy az értéknek feltétlenül követnie kell egy mértékegységet - nincs szükség üres hely (tér) beillesztésére.
Nem szükséges megadni egy mérési egységet 0-ra (nulla). A nullpont pixelek nulla centiméter vagy bármely más mértékegység. Ennek ellenére nagyon gyakran van valami, mint a padding: 0px, amikor kitöltheti a padding: 0, és a hatás ugyanaz lesz.
Nincs semmi baj, ha egy mérési egységet nullához adunk, ez csak egy extra térfogat, és számomra nem tűnik tisztának.
Ne felejtse el a regiszter érzékenységét
Ha a CSS-t XHTML-en használják, akkor az elemnevek és szelekciók kis- és nagybetűkre érzékenyek. A kapcsolódó problémák elkerülése érdekében azt javaslom, hogy mindig a CSS elemválasztók kisbetűjét használja a CSS kiválasztókban.
Az osztály és az id attribútumok értékei a kis- és nagybetűkre érzékenyek a HTML-ben és az XHTML-ben, így elkerülve a vegyes esetet az osztály és az id attribútumok nevében. Ha valamilyen okból kevert regisztert használ, ellenőrizze a regiszter személyazonosságát a CSS-ben.
Adja meg a színeket
Ezt a tanácsot a korábban említett cikket, de én olyan gyakran használják, hogy meg fogja ismételni itt: amikor a szín CSS megadott hexadecimális (hexadecimális szín jelölés), és amikor a szín alkotja három pár hexadecimális számok, akkor adja meg a színek minden második szám törlésével: # 000 azonos a # 000000, a # 369 azonos a # 336699-vel.
És ne feledje a szám jelét - a szimbólum "#" a színkód előtt.
Egy másik tipp színű - megadhatja lévő színek a World Wide Web, a számok, amelyek 3-mal szorozva a vörös, zöld és kék értékei 0, 3, 6, 9, C és F # 99c biztonságos színű, # 98c nem.
Az osztálytípusok és az id kiválasztók elemeinek kizárása
Ha az írási szelektor, amelyek jelzik egy elemet, hogy bizonyos értékeket és az osztály id, akkor eltávolíthatja a tételt, mielőtt a pont típusát (osztály választó) vagy # (id-választó).
Tehát, az írás helyett:
írhatsz:
és mentse el néhány byte-ot az egyes szelektorokhoz.
Ez különösen hasznos az id szelektorokhoz, hiszen ezeknek egyedinek kell lenniük a dokumentumban, ami csökkenti a egymásnak ellentmondó CSS-szabályok kockázatát. Az osztálynevek azonban a dokumentumban tetszőleges számú alkalommal használhatók, és különböző elemtípusok azonos osztálynévvel (vagy több névvel) rendelhetők. Az elemek azonos típusú névvel való megkülönböztetéséhez meg kell adnia az elemtípust a választóban.
Tudja, hogy a fenti CSS szabályok nem azonosak. Ha megad egy szabály nélkül elemtípusnak a választó, a másik pedig az elem típusát a választó, akkor a szabály, amely az elem típusát, lesz egyre fontosabb részleteket.
Alapértelmezett értékek
/
Gyakran nem kell megadnia a tulajdonság értékét, amely a tulajdonság alapértelmezett értékén alapul. Ez különösen akkor fontos, ha rövidített tulajdonságokat használ, mivel minden nem specifikált tulajdonsághoz hozzárendel egy alapértelmezett értéket.
Néhány közös alapértelmezés 0 a kitöltéshez (néhány kivétel van), és átlátszó a háttérszínhez.
Azon a tényen alapul, hogy a különböző böngészők vannak különbségek az alapértelmezett értékeket, egyesek szívesebben használják az elején a CSS-fájl globális reset üres térben nullázás tulajdonságok margin és padding az összes elemet.
Ne átsorolja az örökölt értékeket
Számos tulajdonság értékét örökölte az elem minden olyan leszármazottja, amelyhez a tulajdonságot megadják. A kapcsolódó tulajdonságok színe és betűtípusa az ilyen tulajdonságok legszembetűnőbb példája.
Tudja, hogy egyes tulajdonságok felülírhatók a böngészők felhasználói ügynökeinek (böngészőinek), például az alapértelmezett böngészőértékek speciális lépcsőzetes stílusaiban. Ezért a következő szabály használatával nem lehet minden címkét alacsony zsírtartalmú:
Az előre definiált böngésző szabályok pontosabbak a kaszkád miatt, amelyet az alábbiakban ismertetünk.
Használja ki a kaszkádot
A kaszkád lehetővé teszi, hogy több szabályt használjon egy elem tulajdonságaira vonatkozóan. Ugyanazt a tulajdonságot felülbírálhatja, vagy további tulajdonságokat határozhat meg. Tegyük fel, hogy a következő oldal kódja van:
Frissítés: Lorem ipsum dolor set
A CSS-ben különböző szabályokat használhat az összes p elemre és a p elemekre specifikus tulajdonságok meghatározására a frissítési osztályban:
Mindkét szabály kombinálódik a p elemekhez a frissítési osztálysal. A kiválasztó osztály fontosabb, mint a választó típus, tehát ha konfliktus lép fel, akkor a második szabályban meghatározott tulajdonságokat fogják használni. Ebben az esetben a szín.
A CSS-szabályok kiszámolásának módjáról a CSS 2.1 specifikációjában található Selector Specific Calculation című részben olvashat.
Több osztály neve
Bármelyik kép egy speciális osztályban kb. 2 képpontnyi területet és sárga háttérrel rendelkezik. A royaltyfree osztályú képek 2 képpontos élszélettel rendelkeznek, a két osztályú képek pedig szélességgel, térrel és sárga háttérrel rendelkeznek.
Nem állhat meg itt - ez csak egy példa. És próbálj meg olyan szemantikailag helyes osztályneveket használni, amelyek leírják, hogy mi az elem, és nem az, hogy néz ki.
Használjon gyermekválasztókat
Ne használj gyerekek kiválasztóit - ez a leggyakoribb példa a CSS nem hatékony használatára, amelyet a kezdők közül látok. A gyermekszelektorok segíthetnek az osztály számos tulajdonsága nélkül, és hatékonyabbá tehetik a CSS-szelektorokat. Például a következő kódstruktúrát tehetjük:
Ezt a kódot a következő CSS követheti:
div # subnav ul li.subnavitem a.subnavitem
div # subnav ul li.subnavitemselected
div # subnav ul li.subnavitemselected a.subnavitemselected
A fenti példákat a következő kóddal helyettesítheti: