Alapvető technikák és trükkök, ha dolgozik, css
Fő nézet - Piggy fejlesztő. Minden, ami a tervezés, fejlesztés és területek létrehozása
Fő View - blog design, web design és webfejlesztés. Ha a fejlődő weboldalak, vagy érdekli a web design és a design csak a dolgok körülöttünk, vagy egyszerűen csak érdeklődik a téma a web design és webfejlesztés, ez a blog lesz, hogy nagyon hasznos. A blog megtalálható cikkek, értékelések, útmutatók és még sok más.
1. Rövid kód CSS font
Amikor kérni egy lefolyó az a font CSS. Általában írják a szabályokat az alábbiak szerint:
Azonban, akkor egyszerűsíteni a rekord is, úgy, hogy könnyebb érzékelni. Akkor vágott és stílus a betűtípust levelet tulajdonságok rövidített formában:
Szerintem így sokkal jobb! És egy pár szót: a rövidítés CSS csak akkor működik, ha meg két szabályt együtt: font-size és a font-family. És szabály font-family kell helyezni a legvégén a sor, mint általában font-size kell elhelyezni szigorúan előtte. Is, akkor nem adja meg a szabályokat font-weight. font-style és a font-variant. Ebben az esetben az értékeket, amelyek automatikusan megjelennek a normális. Ez meg kell emlékezni.
2. A több osztály.
Általában az attribútumok jelzik egy osztályban. De ez nem jelenti azt, hogy megengedett, hogy csak egy osztályba. Sőt, ha lehet rendelni annyi osztályok, ahogy kell. Például:
Itt is, mint látjuk bekezdés rendelt két osztálya szöveges és oldalsó. Ezekkel osztályok együtt (szóközzel elválasztva, nem vessző) azt jelenti, hogy a bekezdés kerül alkalmazásra előírt szabályok a klassahtextandside. Ha az osztály tartalmazza az azonos szabályokat kell alkalmazni a szabályokat az osztályban, ami alatt található a CSS dokumentumot.
3. Az alapértelmezett érték a határ (határ) a CSS.
Ha írsz egy szabályt a járdára, akkor általában a színt (színes), vastagsága (szélesség) és a stílus (style). Például, az írás egy határ: 3pxsolid # 000 kapsz egy fekete szilárd határ, 3 pixel vastag. Azonban az egyetlen szükséges érték itt a határ a stílus. Ha írsz, csak határ: szilárd. A többi opció lenne az alapértelmezett érte. De ez az alapértelmezett? Minden le van írva a CSS szabvány, hogy meg kell tudni, vagy legalább olvasni. Mivel a szélessége, az alapértelmezett érték kerül felhasználásra, hogy megfékezze a közepes (ez kb 3-4 pixel). Ennek színe, alapértelmezés szerint használják szegélyszínét a szöveg a kereten belül.
Így, ha a paraméter értékek egybeesnek az értékek az alapértelmezett beállításokat, akkor nem adja meg ezt a beállítást.
4. CSS dokumentum nyomtatásra.
Az első sorban a kód okozza a CSS megjelenítéséhez (a média = „screen”), és a második sor kódot okozza a CSS nyomtatni (a média = „print”).
Hozzon létre egy egyszerű szöveges dokumentumot, és hívják printstyle.css. Jegyezzük meg azokban CSS parancsokat fogja képezni az oldal nyomtatásra.
5. Technika képeket cserélni.
Amikor az oldal elrendezése nagyon fontos, hogy az alap HTML tag megjelölésére szöveget. A képek segítségével a szöveg cseréje nem szükséges. Ez rossz. És ez az egyik legsúlyosabb hibája kezdő webmesterek. Bár én magam, már a kezdetektől nem szeretné használni a képeket, de néha nem az összes de. Markup szabványos HTML számos előnye van. És a fő oka az, hogy az oldal HTML-címkékkel megjelölni egy jó megértése keresők. Ezen túlmenően, az oldal betöltődik sokkal gyorsabb. Vannak más előnyök, de most ez nem erről.
Tegyük fel, hogy van olyan szép, mint a különböző betűtípusokat, amelyek már használják ezeket a címeket a design a helyén. Most üljön vissza, és úgy gondolja, hogy mindent tördelt. Végtére is, biztosan a látogatók a webhely a számítógépek a jövő nem lesz a csodálatos font. Ezért nem lehet megjelölni az oldalt csak címkézett HTML. Nos, csak ki kell cserélnie a címkéket a kép a csodálatos címsort. Úgy tűnt, hogy egyszerű. Nem, de itt van egy probléma. A keresőmotorok nem tudja olvasni a szöveget a képre, és megfelelő index az oldalon.
Az érthetőség kedvéért mondjuk eladni kütyü, és szeretnék, hogy egy fényes vonzó címke minden oldalon, „megvenni a widget.” Számodra fontos, hogy a keresők is elolvashatja főcím egyrészt, és az olvasók figyelni rá, és ő állt ki jelentősen, ami azt jelenti, hogy a kép volt a másik oldalon:
Azt is feltételezhetjük, hogy minden rendben van. De ez elég nyilvánvaló, hogy a keresők nem adnak ilyen jelentőségű alt tag, mintha csak szöveget. Mivel hozzáértés internetes mesterek gyakran írt a címkét borzalmas, súlya túl kicsi.
Tehát mit kell tenni? - Azt kérdezed. És itt, és meg kell, hogy csak használja spoofing technika kép:
Most van egy megfelelő szöveget a keresők, de nem használja a művészeti nyomat. Megoldani, hogy a stílus file:
- A felhasználók fogják látni egy szép képet, szöveget
- Keresők fogják látni a szöveget egy szabvány címke
6. alternatív hack CSS box (doboz modell).
Alternatív hack CSS általánosan használt rögzítő megjelenítési problémákat az Internet Explorer 6-os verzió alatt és a PC, amikor a határon, és padding szerepelnek a szélessége egy elem.
Például, hogy a méret a tartály, akkor írja le a CSS-szabályok az alábbiak szerint:
Aztán hozzárendelése a CSS szabályokat a tartály:
Ez azt jelenti, hogy a teljes szélessége a tartály 150px (100px szélesség + két 5px + határ két francia 20px) minden böngészőben, kivéve az Internet Explorer böngésző 6-os verzió alatt és a PC-n. A teljes szélessége ezen böngészők 100px, és padding és a határok építeni e szélességét. Alternatív hack CSS box kijavítja ezt az ellentmondást, de lehet, hogy egy igazi káosz.
A legegyszerűbb alternatíva lenne az ilyen szabályok CSS:
És a HTML kódot kell változtatni az alábbiak szerint:
Kiváló! Most, a tartály mindig egyenlő a szélessége 150px, függetlenül a böngészőben!
7. Állítsa be a vízszintes közepén a blokk segítségével CSS.
Tegyük fel, hogy van egy fix szélességű design, és azt szeretné, hogy a tartalmat közepén helyezkedik el az oldal. Ebben az esetben, akkor használd a CSS alábbi kódot:
Most belép a tartalom a kulcsszó
Most a fő tartalmat közepén helyezkedik el. A tartály belsejében kellett kényszeríteni balra igazított. De ez működik!
8. összehangolása a középső blokk függőlegesen CSS segítségével.
A legegyszerűbb módja az, hogy a függőleges elrendezés az asztalra. De táblázatos elrendezés elavult és nem hatékony. Összehangolni a tartalmat függőleges középvonala kell használni vertical-align: közepén. De sajnos ez nem működik.
Tegyük fel. hogy be akarja állítani a magasságát a menüpont egyenlő 2em. Használja CSS függőleges igazítás, de ez nem működik. Szöveg makacsul tetején jelenik meg.
Hmm. Ez nem az, amit vártunk, hogy egy száz. Hogyan lehet megoldani ezt a problémát?
A megoldás: állítsa sormagasságának line-height magasságával egyenlő a menüpont. Mivel a magassága 2em, akkor létre kell hozni egy szabályt CSS. line-height: 2em. Kiváló! Most, a szöveg függőlegesen középen.
9. CSS pozicionálás egy tartályon belül.
Az egyik legjobb dolog a CSS, bizonyosan az. akkor intézkedik elemek az oldalon, teljesen sehol.
Azt is (és ez gyakran használják) állásba tárgyak egy tartályon belül.
Ez is nagyon egyszerű. Egyszerűen adja meg a következő szabály tartály CSS:
Most egy tetszőleges elem lesz található a tartály belsejében a tartályhoz képest.
Tegyük fel, hogy van ez a HTML struktúra:
És, hogy helyezze a konténeres pontosan 30 pixel a bal és 5 pixellel a felső széle a tartályt a tartály, akkor használja a következő CSS:
Kiváló! Azok, akik jól tudják, CSS, persze azt mondják, hogy ebben a példában, akkor használja margin: 30px 0 5px0. Mindez igaz, de bizonyos esetekben még mindig kívánatos használni elhelyezése.
10. Függőleges háttér végéig az oldalt.
Mint azt bizonyára tudják, CSS nem szabályozható függőlegesen. És ez az egyik hátránya a CSS, és létrehoz egy számos problémát bonyolítja az életünket. Bár táblázatos elrendezés és mentes ezt a hiányosságot, de megpróbálunk valamit.
Képzeld el, hogy van egy oszlop a bal oldalon az oldal szélessége 150 képpont. Meg kell, hogy áthaladjon az oldalt felülről lefelé. Az oldal hátterét fehér és a háttérben a kék oszlop. Ennek megfelelően próbál használni CSS alábbi kódot:
Csak egy megjegyzés. abban az esetben a navigációs tartály tartalmát nem használja a teljes magassága az oszlop, és azt mondják, hogy csak elég magasságának felénél, a háttér lesz vágva vége után a tartalom. Ez a háttérben a oszlop kék lesz csak a képernyő közepén. És ez határozottan rontja a csodálatos design. Mi a teendő?!
Sajnos az egyetlen megoldás erre a problémára az, hogy egy háttérkép. Akkor érdemes használni egy képet a fehér és kék oszlop, amelynek a szélessége pontosan egybeesik a design. Rendelje meg az alábbi CSS kód:
A kép, amit használni, mint a háttér legyen 150px szélesség és elárasztják a kék, mint a oszlop.
A hátránya ennek a módszernek, ahogy már bizonyára kitalálta, ez a merev ragaszkodás a szélesség. Ha a felhasználó növeli a font és az oszlop szélessége változik, látni fogja, hogy eltérés van a szélessége a háttér és a hangszórók. Ezzel a módszerrel, meg kell adnia egy képpontban (pixel).
következtetés
Ma megnéztük néhány szempontból a munka CSS. Az ilyen pillanatok valójában sokkal több. Ez a téma nem egyetlen cikket. Remélem, ez az információ hasznos lesz az Ön számára. Köszönöm a figyelmet.
Üdvözlünk! A téma a helyszíni építési ment a közelmúltban, nem az első hely alapú InstantCMS 1.7. Kezdett ásni CSS, rábukkantam az érdekes cikket. Megvalósult nem minden, azt meg fogja érteni.
5. kérdés bekezdés :) a fejét a dokumentum címe, meta tartalmat, ami lehet rendelni „vegyél egy widget.” Bizonyára nehezebbek alt. Lesz súlya több vagy kevesebb, mint a H1 fejléc rekord?
Kérdések a 10 bekezdést:
1. Amennyiben egy harmadik sor:
háttér: kék;
szélesség: 150px
Regisztráció higt: 100%, ha a magassága a tartály és milyen méretű növekedni fog, ha a növekedés?
2. Ha az 1. opció nem megfelelő, az edény navigációs hogy hozzon létre egy tartály azonos szélességű, nyilván magasabb (nem tudom, talán korlátozó min-height teljes magassága az oldalt, és regisztráljon egy új magassága pixelben), amely a teljes magassága az oszlop nagyobb volt a fennmaradó hangszórók és regisztrálni kell:
háttér: kék;
szélesség: 150px
Lesz egy rés a határ menti sáv konténer?
@ Ded-pikto
5. pontban:
Nem kétséges, hogy a címke egy nagyobb súlya van, mint az alt attribútumot a tag. Az egész bekezdés szerinti 5 pontosan, hogy megszabaduljon a kép címkét. Ennek eredményeképpen megkapjuk a tiszta szöveget tag. amely jól ismert a keresőmotorok, különösen együtt a megfelelő címkét.
pontban 10:
1) a magassága a tag csak akkor fog működni, ha megadja a magasságot az összes tag, ahol ez a címke van ágyazva. Ezért, meg kell mozgatni a magassága a szülő tag.
2) Nehéz megmondani nélkül konkrét példákat, de azt hiszem, megtalálja a szükséges megoldani. Meg lehet próbálni, több lehetőség, és nézd meg magad, hogy melyik működik.
Csökkentése CSS kódot, a tervezés, nem nagyon alkalmas lehetőség - rosszabb olvasható. Ennek következtében, sokkal nehezebb a terméket kíséri. Bár, ha a stílus csak akkor kell használni, és változtassa meg, mint senki más nem fog, egy lehetőség elfogadható, például csökkenti a helyet foglalja el őket (különösen hasznos nagy CSS fájlok) - gyorsabban töltődik böngésző
A legjobb módja annak, hogy pénzt online dolgozni Kwork.
KWORK megbízható módja annak, hogy pénzt kitöltésével feladatok 500 p.
- Admitad - származó bevételek társult
- 7offers - származó bevételek társult
- etxt - jövedelem az adásvételi szövegek
- TravelPayouts - jövedelem értékesítése repülőjegyre
- Vktarget - jövedelem VKontakte, Facebook, Instagram, Youtube, Twitter
- BestChange - Monitoring hőcserélők, ahol a fizetés a $ 0,35 minden ügyfél
Maradjon kapcsolatban
Ha elolvassa ezt a weboldalt, akkor beleegyezik a cookie fájl. Ellenkező esetben hagyja a helyén. Egyetértek