Css - szabályokat a jó modor - orosz
CSS - a legjobb, amit elér, hogy ellenőrizzék a megjelenése a weboldalakat. Ha megfelelő módon használják, lehetőség van egy pár másodpercig, hogy változtatni a képet a több ezer oldalnyi az oldalon. Abban az esetben helytelen használata a CSS - annak alkalmazása továbbra is a használati szint a címke a HTML-kódot. A különbség a jó és a rossz használata CSS óriási. CSS elválasztja design tartalom: minél kisebb a megjelenés van kötve a kódot az oldal - a könnyebb kezelni, vagy megváltoztatni.
Alkalmazni CSS az oldalon a következő három módon:
- Soros CSS - a style attribútum a HTML-címkék
- Beágyazott CSS - stylesheet kerül az oldal kódja, az elem . Minden oldalon a honlap azt köthető több stíluslapok. Ezen túlmenően, a külső CSS dokumentum használatával járó @import irányelvet. például:
Ne feledje: a beágyazott CSS dokumentum (Embedded CSS) és a linket a külső CSS fájlok (külső CSS) mindig el kell helyezni a legelején a dokumentum (X) HTML között a nyitó és záró címkék
.Tehát tegyük a stíluslapot külső CSS fájl társítását a HTML-dokumentumot, és elkezdi, hogy meghatározza a szelektor és azok tulajdonságait.
Szögezték alapértelmezett böngésző
Először szögezték a kitöltés és a határ elemek, hogy a böngésző hozzáadhatjuk a terméket saját belátása szerint. Ehhez állítsa be őket a „0” az összes alapértelmezett értékek segítségével egy választó, amely található a legelején stíluslapot.
Minden elem a választó most úgy nulla értékeket margin, padding és a határok, bármi voltak korábban, amikor a böngésző elindul az oldal megjelenítéséhez. Egy ilyen módszer lehetővé teszi, hogy megverte az összes alapértelmezett, és akkor kezdhetjük tervezni az oldalt a formában, amelyben szeretne látni. Folytatjuk:
Selector p bejelenti árrést a p elem. Röviden, a behúzás 15 pixelek minden oldalról minden elemére szakasz
.
. Így megkapjuk az azonos megjelenítési szakaszok különböző böngészők. Mint bekezdés behúzás lehet állítani és / vagy a határokat a többi elem, hogy nullázni az első választó ismét a hasonló megjelenést a különböző böngészőkben.Az alábbi képen látható, hogy a fieldset elem jelenik meg az Internet Explorer és a Firefox. Egyértelmű, hogy az alapértelmezett értékek a kereszt-böngésző kompatibilitás nem behúzás csak a screenshot. Mind a böngészők a megértés megjelenését meghatározza az azonos elem.
Az alábbi képen látható, a hatása nulla padding és a határok fieldset. mit tettünk az első választó. Ez most a böngésző jeleníti meg az oldalt megfelelően a használati utasítás, és nem szeretnék. Bár ismét észre fogod venni egy kis különbség: az alapértelmezett legenda kék az Internet Explorer és a Firefox fekete, akkor biztosan nem fog. Változtassuk meg a szöveg színét és egyéb beállításokat lehet egy külön fieldset választó. Azt is megteheti, állapítsa őket értékeket az alapértelmezett honlap az első választó, ahol nullával, majd újra minden eleme a kívánt értékeket érte, ahogy azt tette a bekezdést.
Tesztelés oldalon
Ez nagyon fontos eljárás, amikor dolgozik CSS. és még az összes dokumentumot is. Teszteld az oldalak folyamatosan, annál inkább fog alatt az elrendezés, annál kevesebb idő szükséges a végső hibakeresés, és különben is, ez sokkal könnyebb, hogy bármilyen változás a jól felépített és jól megírt oldalt.
Készítsen oldalak Standard Mode
Ágyazódnak szabványok jelentősen megkönnyíti munkáját kód írása oldalak, szkriptek, CSS, teszi kiszámíthatóbb időráfordítást, megkönnyíti a folyamatos támogatást hely, hogy megváltoztatja a kódot, vagy megjelenését, és általában van egy csomó előnye van a nem szabványos oldalak. Az első dolog, amit tenned kell - a megfelelő doctype.
- szabvány vagy átmeneti XHTML1.0
- Normál Core HTML4.01
Először is, próbára lapok a megfelelő böngészők
A böngésző ahol tesztelheti az oldalakat, amelyek nagy jelentőséggel bír. Ha ez a régi vagy nem túl járatos a szabványok a böngésző, akkor nehéz elérni kompatibilitás más böngészők helyesen jeleníti meg az oldalakat.
Egy példaértékű sor vizsgálat létrehozásának folyamatát csökkenő oldal: Firefox (valamint más Gecko-böngésző tökéletesen kezeli CSS), az Opera és az Internet Explorer. Csak akkor indítsa el tesztelés IE, mert nagyrészt helytelen, és van elegendő számú hibák, a harc, amely jobb, hogy ezt követően a sikeres hibakeresés rendszeres böngészők.
Tisztázzuk a nevét szelektor
Természetesen a szelektor id és class bármi lehet a neve, de jobb, ha akkor tükrözik a lényege a választó. Nevek egyértelműnek kell lennie, hogy visszatérjen a CSS szerkesztő fél év, nem volt egy hosszú és fájdalmas keresést az is, hogy meg kell változtatni.
A neve ennek a kiválasztó (#MenuBlock) egyértelműen azt mondja, hogy tartalmaz egy navigációs készüléket.
De ez azt jelenti # div1 nehéz lesz megjegyezni a második napon az oldal elrendezést. Nevek szelektor értéktelen.
szövegének mérete
Ne használjon abszolút betűméretek a dokumentumban, ebben az esetben sok böngésző nem képes változtatni a méretét, ha a szöveg túl kicsi. A legjobb, ha használni relatív egységek: em vagy%.
A folyamat során a oldal létrehozásával is folyamatosan ellenőrzi, hogyan viselkedik a böngészőt, ha változtatni a betűméretet, hogy a terv túl sok növekedése megtört.
A font az oldalon
font-family: Arial, Verdana, Helvetica, sans-serif;
Ezen túlmenően emlékeztetni kell arra, hogy ha a font neve több szóból áll, szóközzel elválasztva, a nevet kell idézőjelbe: „Times New Roman”.
Alapértelmezett értékek
A cikk elején, megszabadultunk a böngészők értékeket kell alkalmazni, mint az alapértelmezett HTML-elemeket, akkor nullázódik árrés és határait. Most, éppen ellenkezőleg, az alapértelmezett értékek a dokumentumot. A legjobb hely a számukra - a címke szervezetben.
Ez a különös értéke 100,01% betűméret kompenzálja néhány hibák böngészők. Először is, az alapértelmezett érték a betűméretet százaléka (nem em) kiküszöböli az IE / Win probléma aránytalan nyújtás és összenyomás a font, ha majd em a többi elem. Ezen túlmenően, egyes változatai Opera mutatják font-size: 100% -kal kisebb, mint a többi böngésző. Safari is gondok vannak a font-size: 101%. Ezért jobb, hogy egy 100.01%!
Tehát az alapértelmezett betűméretet a szervezetben. majd használja, mint a bázis, meg tudja határozni a relatív betűméretet más elemek az oldalon. Például, hogy elem p meghatározhatja a betűtípus-méret: 80%, és ez 80% -os relatív, hogy a betűméretet a test. Tag H1. például lehet, hogy egy font-size: 135%.
Továbbá, azonosítottunk egy család az alapértelmezett betűtípus az oldalhoz. Ezek a betűtípusok fogják használni az összes elemet az oldal, ha nem felülírható ezek közül bármelyik külön-külön, például a h1, hogy bármilyen más betűtípust.
Ezután az alapértelmezett szöveg színét (color: # 333), ami szintén lehet felülbírálni bármely elemét, és beállítja a háttér színét az oldal (background-color: #fff).
Összefoglalva
Kapcsolódó cikkek