Példák megváltoztatja a háttér színe, a szöveg a CSS
1. példa változása háttérben.
Ebben a példában fogjuk vizsgálni, mint a háttérben a könyvtárban lehet változtatni. Kezdetben a könyvtárat a következő:
A választás a Firebug (F12 billentyűt) elem szükséges számunkra:
Körül egy piros keret a kódot, hogy mi tesz ma. A mentés után az elem háttérszíne megváltozik a kiválasztott kapcsolat:
2. példa Change gomb színe.
Válassza ki a kívánt elemet:
Add meg a kódot, amely megváltoztatja a színét a gomb megnyomása előtt:
És, ha rákattint a „Mentés” gombra. Megnézzük az eredmény:
3. példa megváltoztatása betűtípus.
Most változik a betűtípus „Kosár” gombra. Válassza ki a kívánt tételt minket, keresi a megfelelő kódot:
Azt szeretnénk, hogy ezt a feliratot a kék, megjeleníteni nagyított és dőlt. Ehhez helyezze be a következő kódot:
És látjuk, hogy a dolgok megváltoztak, „Kosár” gombra.
4. példa: változtassa meg a stílus a fejléc.
Ebben az esetben meg kell gondolni magát először, szüksége van egy szabály, hogy ebben az osztályban. Változtatni a színét a fejléc a zöld, hogy a font nagyobb és dőlt:
És a változtatások elmentése után néz változtatni a fejléc:
5. példa: Változás linkek stílusban.
Miután rákattint a linkre megnyitja a fájlt style.css on line 165, és láthatjuk, hogy a linkek leírt szabályokat.
Az ál-kapcsolat felelős látogatott hivatkozás látogatott - egy látogatást. Az ál-hover akkor aktiválódik, ha a kurzor. Színének megváltoztatása nem látogatott hivatkozások a zöld, a színe a meglátogatott - a piros, és ha mozog a lila szín fog tenni, és távolítsa el az aláhúzás kapcsolatok (mert a szabály text-decoration: none):
Most Külső linkek meg teljesen más a helyzet:
6. példa váltás és a blokk mérete.
A távolság közötti elemek megfelel általában árrés. ahogy a távolság az elem határán és annak tartalmát - padding. Változás szélessége a blokk használhatja a szélessége szabályokat. Válassza ki az elemeket, hogy mi fog változni:
Most mi írjuk a következő módosításokat: növeli a padding pixel 100 és állítsa be a margó és a felső margó balra 50 pixel:
A megjelenése az elem lesz:
Most változik a szélessége az elem. Válassza ki a kívánt elemet:
és hozzáadjuk a megváltozott szabály .right_block osztály - csökkenti a szélessége a szélessége 200 pixel:
Most a hatalom már észrevehető:
7. példa keretek blokkokat.
Ön megváltoztathatja a blokk határokat a szabály határ - például, hogy állítsa be a kerekítés alkalmazásával border-radius. Szintén ebben a példában, azt vizsgáljuk, hogy árnyékot adhat elemet a box-árnyék.
Jelentenek nagyobb kerekítési elem - border-radius érték növelése 50 pixel, a határ maga is kövérebb (5 pixel), és ez a zöld is hozzá egy fekete árnyék alsó és jobb keresztül box-shadow:
Végül, a következőképpen fog kinézni:
8. példa: elrejtése elem.
Ön tudja elrejteni bármely elem segítségével megjelenítési szabályok: nincs. Példaként elrejteni a feliratot a láblécben:
Most a kijelölt szöveget a lábléc nem lesz látható a felhasználók számára:
9. példa Cserélje a logó.
Eredetileg regisztrált sablonok meghatározott méret a logó, és töltse ki a képet hosszabb, először meg kell elrejteni a meglévő logó és egy új képet a háttérben.
Így a logó megjelent változás előtt:
Most, hogy a szükséges változtatásokat. Új kép tölthetők fel a webhely vagy egy harmadik fél képmegosztó oldalon, és egy linket onnan.
Miután ezek a szabályok logo néz ki: