10 css szovjetek, a mesterek

Ahelyett, hogy névtelen források a keresési javaslatok, hadd gondosan mérlegelje azok a fejlesztők, akik kiváló tervezés előkészítése és telt ez a módja annak, hogy a végén. Ezek CSS-tippeket gyűjtött a világ legelismertebb fejlesztők. Alátámasztására ajánlás van egy portfolió, úgy, hogy minden gramm információ alapján - a legjobb minőséget.

Az alábbiakban 10 nagy CSS tippek. hogy bármely web developer vagy a tervező számára is hasznosak lehetnek, informatív és kihívást jelent. Tekintsük ezeket a bölcs tanácsot képzett szakemberek, akik letették a hosszú és nehéz úton a kiváló design. Ez - az igazi mesterek a CSS. Élvezze egy korty tudásukat és alkalmazni tudásukat a következő tervezési kaland.

1. A CSS egyszerűnek kell lennie - Peter-Paul Koch (Peter-Pol Koh)

Amit leginkább hiányzik a gondolkodásmódot, amatőrök által CSS - mennyire aktív keresnek kemény döntéseket. Keresse meg, és meg fogjuk találni, és ha azt szeretnénk, komplexitás válnak a torkodon. Semmi sem gátolja tőled is, és nem segít.

CSS hack veszély.

Koch azt mondta, hogy minden tervező és webfejlesztő kell szorgalmasan követi a szabályt: A CSS egyszerűnek kell lennie. Ahhoz, hogy az egyszerűséget nem könnyű, különösen a CSS-design. Megtalálható számtalan jellemzője a CSS végrehajtás egy adott böngészőben egy CSS-hack minden böngészőben falu ugyanúgy néz ki, függetlenül a verzió, vagy típusát. Ugyanakkor a használata több CSS-hack jelentős hátránya. Mivel a böngészők fejlődnek, így sokkal nehezebb lépést tartani a változásokkal.

Koch bemutatja érdekes érveket webfejlesztés. Internet egésze nagyon kiszámíthatatlan hely, és próbálják megjósolni az irányt a munkáját a jövőben - igen kedvezőtlen magatartás.

Network - ez nagyon határozatlan helyet. Soha nem lehet arról, hogy a weboldalak fog működni, ahogy azt Ön is, ha használja a modern módszerek CSS, a hozzáférhetőség és a könnyű használat. Ahelyett, hogy keres hamis kényelmet hacker technikákat, amelyek úgy tűnik, hogy a kényelmesebb, mert a az integráció foka, meg kell venni, mint az alapvető szabályokat a bizonytalanság.

Böngésző nem támogatja a CSS tökéletesség; lehet dühítő, főleg azoknak, akik most kezdett tanulni CSS. Mindennek ellenére, CSS-hack - nem megoldás. Elfogadása a mód, ahogyan most van egy a hálózat munkájában - a legjobb, hogy lehet tenni, mert ez a telek marad egyszerű.

Péter-Pál hangsúlyozta, hogy úgy tűnik, hogy igaz legyen nem csak a CSS, de a webes fejlesztés általában. Egyszerűség - A legfontosabb, hogy hatékony kódolás.

Ez a megközelítés nem csak lehetővé teszi, hogy gyorsan megtekinthetjük a CSS, hanem segít, hogy a CSS-fájl mérete kicsi eltávolításával felesleges hézagokat és a karakterek.

3. A CSS csökkentés - Roger Johansson (Roger Johansson)

A legtöbb ember tudja, és használja a technikákat gyorsírás, de sokan nem maradéktalanul kihasználja a lehetőségeit helyet takarít meg.

Johansson írt egy nagyon részletes cikket a fontosságát CSS darabok és ad egy csomó példát, hogyan kell használni őket a folyamat kódoló CSS. Íme egy példa:

Segítségével a rövidítése az ingatlan lehet menteni egy csomó helyet. Például, hogy állítsa be a mozgásteret a különböző oldalain a blokk, akkor használd ezt:

margin-top: 1em;
margin-right: 0;
margin-bottom: 2em;
margin-left: 0.5em;

De itt is ugyanaz, sokkal hatékonyabb:

árrés: 1em 0 2em 0.5em;

Ugyanezt a szintaxisát használjuk a tulajdonságok párnázással.

Mivel kurzív CSS méretét csökkenti a stíluslapot, akkor is segít megszervezni és fenntartani egy egyszerű kódot. Gyönyörű CSS - ez egy egyszerű CSS.

4. Hagyjuk tömb elemei, hogy töltse tér természetesen - Jonathan Snook (Dzhonatan Snuk).

Mr. Snook van egy másik kulcsfontosságú ajánlás, amely élni minden webfejlesztő: Hagyjuk tömb elemei üregek kitöltésére szervesebben, mint lehetséges. Ha van egy visszatérő téma a fejlesztés CSS, ez: ne erőltesse a kódot csinálni azokat a dolgokat, melyek nem úgy tervezték. Ez azt jelenti, elkerülve a CSS-hack, megtalálni a legegyszerűbb megoldás.

Saját ökölszabály: ha én meg egy széles, nem adtam meg margó vagy padding. Ugyanígy, ha én meg a tőke vagy a kitöltés, nem határozza meg a szélességét. Munka a blokk modell néha elviselhetetlen, különösen, ha van dolgunk, százalékok. Emiatt én meg a tartály szélessége, majd a margó vagy padding az elemek bennük. Általában simán fut.

Jonathan általában nagyon jól, hogy megbizonyosodjon arról, hogy az elrendezés nem törött, és még a legegyszerűbb létrehozásakor használatos elrendezések blokkot tartalmaz.

5. Állítsa be és állítsa vissza az úszót - Trevor Davis (Trevor Davis)

Float, vitathatatlanul az egyik legfontosabb dolog, amit meg kell érteni a CSS, de tudja, hogyan kell visszaállítani az úszó (átlátszó) - ez nem feltétlenül szükséges.

Trevor Davis, talán nem is olyan nagy név a világon a web design, mint Zeldman (Zeldman) vagy Snook (Snook), de biztosan említést érdemel miatt kiváló web elrendezések portfólió. Blogján - egy nagy erőforrás bármilyen webes fejlesztő, aki azt akarja, hogy megszabaduljon a szemetet.

szeres úszó

A fő cikk „6 Fontos CSS technikákat, hogy meg kell tudni,” Trevor hozzá egy igazi aranyrög, amely képes menteni fejfájást, ha az oszlopok a jelölésben.

Készítettem egy egyszerű oldalt két oszlopból szabadon mozogni. A példában azt láthatjuk, hogy a szürke háttér nem tartalmazza ezeket az oszlopokat. És a legegyszerűbb dolog, amit gondol - ez ahhoz, hogy a befogadó elem is lebeg. De most úgy látja, hogy a háttérben a tartály nem tartalmazza a tartalom területén.

Mivel a tartálynak van egy margin: 0 auto, nem akarjuk, hogy tegyen úszás, mert akkor átirányíthatja az oldalra, onnan, ahol lennie kell. Tehát, egy másik módja annak, hogy korlátozzák a lebegő tárgy -, hogy helyezzen be egy korlátozó elemet. Ebben az esetben, egyszerűen kezelhető egy üres div állítsa egyértelmű: mindkettő. Jelenleg más módon, hogy törölje a lebegő tárgy nincs jelölés, de én észrevettem, hogy néhány ellentmondás ez a technika, úgyhogy csak feláldozni egy üres div'om.

6. Használjon negatív árrés - Dan Cederholm (Dan Siderholm)

Company Dan Siderholma SimpleBits - egy energikus csapat a tervezők. Dan dolgozott:

... és még sok más neves internetes cégek. Szerencsére Dan átadja a szerzett ismeretek dolgozni ezekkel grandiózus nevek, blogjában SimpleBits. Itt van egy gyakorlati módszer az Ön számára, webes tervezők és fejlesztők: Ha Dan Siderholm mond valamit, te figyelj. Gondold azt, hogy egy digitális útmutató, Sherpa, ami meg a tetején a hegy design.

negatív árrés

Vannak olyan helyzetek, amikor is a negatív különbözet ​​az elem - a legegyszerűbb módja annak, hogy „push” ez a többi közül, figyelembe véve, mint egy kivétel a szabály alól, hogy egyszerűsítse a kódot.

7. A CSS összehangolni jelölés - Dan Cederholm (Dan Siderholm)

„Ahogy Középre elrendezés fix szélességű a CSS?» Azok, akik tudják, hogy ez csak. Azok számára, akik nem, megtalálni a két teljesítéséhez szükséges a szabályok is csalódás.

Így nem csoda, hogy Dan megy, hogy ezt a listát kétszer. Központosítás jelölés egy alkalmi vizsgálata egy nagyon egyszerű ötlet, de valamilyen oknál fogva ez nem mindig működik olyan könnyen, mint meg kell dolgozni. Központosítás az elrendezés a CSS segítségével lehet hiábavaló erőfeszítés a kezdő, ha valaha is megpróbálta, hogy nem.

Dan egy régi és bevált módszer, hogy ő gyakran használja annak érdekében, hogy az ideális állapot központosított elrendezést.

Sok modern tervezők támaszkodnak központú elrendezés, így az ezzel készen módszer hasznos a web-fejlesztők és a tervezők.

8. A helyes DOCTYPE - Jeffrey Zeldman (Dzheffri Zeldman)

Írtál egy hatékony XHTML és CSS. Ön fogja használni a W3C-szabvány Document Object Model (DOM) elleni védekezésre irányuló dinamikus oldal elemekkel. Azonban a böngészők célja, hogy támogassa azokat a nagyon normák webhely esik. Oka ennek valószínűleg hibás DOCTYPE.

Dzheffri Zeldman - az egyik alapítója a kiváló weboldalt List Apart alapított és futott The Web Standards Project által kezelt Boldog Cog design stúdió, és könyvet is írt tervezése webes szabványokat. Röviden, Zeldman tartozik a kedvenc Web design körökben.

Tévhit DOCTYPE

DOCTYPE weboldal - az egyik leginkább figyelmen kívül hagyott szempontokat a tervezés. A helyes DOCTYPE - a legfontosabb pillanat, és Zeldman megmagyarázza, hogy miért.

Ha úgy találja, elrendezések megmagyarázhatatlan nehézséget, akkor lehetséges, hogy a probléma a DOCTYPE.

9. Központ az egyes elemek a CSS segítségével - Wolfgang Bartelme (Wolfgang Barthelemy)

Központosítás elemek - közös feladat, ha a weboldalak létrehozása. De a kezdők CSS gyakran olyasmi, mint egy puzzle, hogyan kell középre, például az egész honlap mellett IE böngészők.

Wolfgang Barthelemy - Web designer a design cég Bartelme design. Mi Barthelemy egyik legelegánsabb blogolás, és folyamatosan teremt gyönyörű ikonok és a tervezési munkát. Ő tette a tervezés blogolás platform Squarespace és népszerű szoftver MacHeist.

Wolfgang létrehozott egy bemutató, amely segít megbirkózni a nehéz feladatot, központosító elemek a CSS segítségével. Központú elemek őrülten hasznos, de néha nehéz elérni a kívánt mintát. Barthelemy bemutató biztosítja a központi helyzetének kiválasztja a megfelelő DOCTYPE és csatlakozott CSS mágia. Kód szerény, lehetővé teszi, hogy a munka és jól kombinálható a vágy egyszerűséget CSS.

10. A text-transform - Trenton Moss (Trenton Moss)

Trenton Moss megérti az egyszerű használat. Ő a saját cég web usability, amelyeken a vonatok a könnyű használat és a web-írásban. Azt is írja, az oldalak, mint SitePoint. Trenton ad kiváló tippeket tapasztalatai alapján, mint egy szakértő Web használhatóságát.

Köztudott, hogy az idő múlásával a stílusok változnak, különösen ahogy a szöveg tükrözi a weboldalak. A legjobb dolog, hogy lehet, hogy a tervező, mindig a jövőben, ahelyett, hogy változó, ahogy a szöveg megjelenítésére használt kézi változtatni a megjelenését a CSS szöveget. Trenton Moss megmutatja nekünk, hogyan lehet elérni ezt a használata egyszerű, alulértékelt CSS nevű parancsot szöveges transfom

Az egyik legkevésbé ismert, de nagyon hasznos CSS- csapat - csapat szöveges transfom. Három legáltalánosabb értelmében a szabályok: text-transform: nagybetű, text-transform: a kis- és a text-transform: kihasználni. Az első szabály fordul minden karakter nagybetűs, a második végéhez kisbetűs, a harmadik teszi meg az első betűjét szó nagybetűs.

CSS segítségével jelenítse meg a szöveg megjelenését befolyásolják az oldal lehetővé teszi, hogy változtassa meg a jövőben, és előírja, következetesség sokáig után.

Bár a szöveges transfom- ez egy kicsit, hozzáadjuk a css elrendezés, akkor nagy érték a jövőben, amikor a megváltoztatásának szükségessége.

Ebben a gyűjteményben tíz CSS tippek webmesterek vége, sok sikert kívánok a fejlesztési területek.

Fordította és szerkesztette: Victor Horn és Andrew Bernatsky. webformyself csapat.

A legtöbb IT hírek és webfejlesztés A csatorna-távirat