10 Hasznos tippek a css egy webfejlesztő, xozblog - leckék és cikkek létrehozása honlap, blog
@media képernyő és # 40; max-width. 960 x # 41; # 123;
.
# 125;
A CSS3 specifikációban média lekérdezéseket használhat. Ezeknek a CSS lekérdezéseknek köszönhetően értékelheti a látogató eszközeinek egyes műszaki jellemzőit, és ennek megfelelően megfelelő formatervezési stílusokat alkalmazhat. A fenti példában olyan stílusok írhatók le, amelyeknél a böngészőablak 960 képpont széles vagy kisebb.
2) háttérméret
szerv # 123;
háttérben. url # 40; image.jpg # 41; no-repeat;
background-méret. 100%;
# 125;
A CSS3 másik rendkívül hasznos tulajdonsága a háttérméret. Ennek köszönhetően a háttérképet tetszés szerint méretezheti.
3) @ font-face
@ font-face # 123;
font-family. blackout;
src. url # 40; "Blackout.ttf" # 41; formátum # 40; "TrueType" # 41; ;
# 125;
h1 # 123; font-family. blackout; # 125;
Még mindig normál betűtípust használsz? Aztán megyünk hozzád! Ez egy vicc persze, de igazán a „bűn” nem kihasználni azt a tulajdonságát CSS @ font-face, és telepítse a betűtípusokat a honlapon, hogy a legalkalmasabbak, hogy dolgozzon ki egy tervezési és ugyanúgy néz ki a különböző böngészőkben és különböző eszközöket. Mindössze annyit kell keresnie, hogy létrehozzon egy betűtípust, és a CSS @ font-face használatával elkapja az oldalra. Használhat harmadik fél szolgáltatásait is, például a Google Web Betűtípusokat.
4) margin: 0 auto
#container # 123;
árrés. 0 auto;
# 125;
Meglepő módon az elemblokk (div) központosításához még nincsenek tulajdonságok. Szóval próbálkozzon a trükkökkel, itt van az egyik legjobb módja annak, hogy a divot a szülővel kapcsolatban összpontosítsuk.
5) túlcsordulás: rejtett
konténer # 123;
túlcsordulás. rejtett;
# 125;
Szükséges, hogy a blokkelem méretei érintetlenek maradjanak, azaz Ne növelje a tartalom cselekvése alatt: legyen szó szövegről vagy képről. Ez egyszerűen megoldódik az ingatlan túlcsordulással, rejtett értékkel. Ez a tulajdonság más értékekkel is rendelkezik, például egy görgetősávot (görgetési értéket).
6) .clearfix
clearfix. után # 123;
tartalmat. "" ;
kijelzőn. blokk;
világos. mindkettő;
láthatóságát. rejtett;
line-height. 0;
magasságot. 0;
# 125;
Azokban a helyzetekben, amikor a túlcsordulás: rejtett nem működik, használhatja a Clearfix metódust. Az osztály neve bármi lehet, nem feltétlenül egyértelmű.
7) szín: rgba ()
BTN # 123;
színét. RGBA # 40; 178. 120. 134. 1 # 41; ;
# 125;
Az RGBa CSS használatával megadhatja a szín átláthatóságát, amely lehetetlen hexadecimális értékkel (#fafcdc). Szín létrehozásához meg kell adnia az alkotó színek értékeit: piros, zöld és kék, és állítsa be az alfa paramétert is. 1 - teljesen átlátszó, 0 - teljesen átlátszó, illetve 0,5 - átlátszó fele.
8) bemenet [type = "szöveg"]
bemenet # 91; type = "szöveg" # 93; # 123;
szélessége. 200px;
# 125;
Tervezés során használj css szelektort bölcsen, ez csökkenti és optimalizálja a kódot. És általában arra törekednek, hogy a lehető legkevesebb kódot, mert ez garantálja a jó programozás) A fentiek miatt a választó, válassza ki az összes mezőt a szöveg típusához, és ez határozza meg a szélessége 200px.
9) transzformáció: forgatás (30deg)
cím # 123;
-moz-transzformáció. forog # 40; 15deg # 41; ; / * Firefoxhoz * /
-ms-transzformáció. forog # 40; 15deg # 41; ; / * Az IE * /
-WebKit-transzformáció. forog # 40; 15deg # 41; ; / * Safari, Chrome, iOS * /
-o-transzformáció. forog # 40; 15deg # 41; ; / * Opera * /
átalakítani. forog # 40; 15deg # 41; ;
# 125;
Ne felejtsd el a CSS animációt. Miért kell túltölteni a weboldalt felesleges szkriptekkel, amikor helyettesíthetők a css animációval?
egy # 123; vázlat. none; # 125;
Semmi sem rontja el a designot, mint a pontozott vonalakat a link körül, amikor megnyomják. A vázlat segítségével: ez nem kerülhető el.
A legújabb cikkek és leckék naprakészen tartása érdekében feliratkozhat a heti levelezési listára vagy az RSS hírcsatornára. Köszönöm!