CSS Megjegyzés példa-hogyan Kommentálhatjuk a CSS

megjegyzéseket a CSS-ben egy kódblokk magyarázatára vagy ideiglenes változásokra a fejlesztés során. A kommentált kód nem fut.

mind az egysoros, mind a többsoros megjegyzések a CSS-ben a/* – val kezdődnek, és a végén a*/ – val végződik, és annyi megjegyzést adhat hozzá a stíluslapjához, amennyit csak akar. Például:

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

a megjegyzéseket stilizálással is olvashatóbbá teheti:

nagyobb projektekben a CSS fájlok gyorsan növekedhetnek, és nehezen tarthatók fenn., Ez hasznos lehet szervezni a CSS a különböző szakaszok, a tartalomjegyzéket, hogy könnyebb legyen megtalálni bizonyos szabályok a jövőben:

Egy kicsit többet CSS: CSS Szintaxis, valamint Választók

Amikor arról beszélünk, hogy a szintaxis a CSS, beszélünk arról, hogy a dolgok lefektetett. Vannak szabályok arról, hogy mi megy, ahol, mind így lehet írni CSS következetesen és egy program (mint egy böngésző) tudja értelmezni, és alkalmazza azt az oldalra helyesen.

a CSS írásának két fő módja van.,

Inline CSS

a CSS specificitás sajátosságai: CSS trükkök

az Inline CSS egyetlen elemre és gyermekeire vonatkozik, amíg egy másik, az elsőt felülíró stílus nem találkozik.

az inline CSS alkalmazásához adja hozzá a” stílus ” attribútumot egy módosítani kívánt HTML elemhez. Belül idézetek, tartalmaz egy pontosvesszővel határolt listát a kulcs / érték párok (minden viszont elválasztva egy kettőspont) jelezve stílusok beállítani.

íme egy példa az inline CSS-re. Az “egy” és “kettő” szavak háttérszíne sárga és szövegszíne piros lesz., A “három” szónak új stílusa van, amely felülírja az elsőt, háttérszíne zöld, szövegszíne pedig Cián. A példában stílusokat alkalmazunk a <div> címkékre, de stílusokat alkalmazhat bármely HTML elemre.

<div style="color:red; background:yellow"> One <div> Two </div> <div style="color:cyan; background:green"> Three </div></div>

belső CSS

míg egy inline stílus írása gyors módja annak, hogy egyetlen elemet megváltoztassunk, hatékonyabb módja annak, hogy ugyanazt a stílust egyszerre alkalmazzuk az oldal számos elemére.,

a belső CSS stílusai a <style> címkében vannak megadva, és a <head> címkébe van beágyazva.

Íme egy példa, amelynek hasonló hatása van, mint a fenti” inline ” példának, kivéve a CSS-t a saját területére. Az “egy” és “kettő” szavak megegyeznek a div választóval, és sárga alapon piros szövegűek lesznek., A “három” és a “négy” szavak megegyeznek a div választóval is, de megegyeznek a .nested_div választóval is, amely az adott osztályra hivatkozó HTML elemekre vonatkozik. Ez a konkrétabb választó felülírja az elsőt, és végül Cián szövegként jelennek meg zöld háttéren.

a fenti kiválasztók rendkívül egyszerűek, de meglehetősen összetettek lehetnek. Például a stílusokat csak beágyazott elemekre lehet alkalmazni; vagyis egy elem, amely egy másik elem gyermeke.,

itt van egy példa, ahol olyan stílust határozunk meg, amelyet csak a div elemekre kell alkalmazni, amelyek más div elemek közvetlen gyermeke. Az eredmény az, hogy a” kettő “és a” három “piros szövegként jelenik meg sárga alapon, de az” egy “és a” négy ” nem változik (és valószínűleg fekete szöveg fehér alapon).

<style type="text/css"> div > div { color: red; background: yellow; }</style><div> One <div> Two </div> <div> Three </div></div><div> Four</div>

külső CSS

minden stílusnak saját dokumentuma van, amely a <head> címkével van összekapcsolva. A csatolt fájl kiterjesztése .css

Share

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük