Css - Cikk
A CSS, webfejlesztés szinte teljesen felváltotta az elavult címkéket használnak az első négy műszaki Hypertext Markup Language. Ma, a stílus lap nem csak külön a tartalmát egy webhely által a design, hanem lehetővé teszi, hogy alkalmazzák a különböző hatásokat, amelyeket korábban az oldalakon lehet megvalósítani csak útján grafikonok.
Az alábbi cikkben fogjuk feltárni jellemzői a modern használata CSS web design, mi kell érteni az alapelveket létrehozása Cascading Style Sheets, valamint nézd meg néhány, a jótékony tulajdonságait leíró nyelv, amely segítségével a saját honlapjukon.
Mi az a CSS? Ruslan Tertyshniy
Ki tudja, a HTML, az biztos figyelt, hogy létezik egy számot a címkék és leíró tulajdonságok nemcsak a szerkezet a dokumentum, hanem a megjelenését. Például a tag , amely meghatározza a színét a kijelölt szöveget, vagy border tulajdonság, amely azt jelzi, hogy a hatálya alá az elem és vastagságát.
Mivel CSS ismeretek és szükségessé válik, hogy mindenki, aki dolgozik, a HTML-kódot. Lényegét tekintve a Cascading Style Sheets nem teljes programozási nyelv, valamint a szintén HTML, csak egy bizonyos jelölőnyelv. Azonban minden új változata CSS képességek nő, így a közeljövőben, akkor lehet változó támogatási és normális körülmények között.
Addig azt javaslom, hogy megismerjék a Cascading Style Sheets a formában, ahogy most vannak.
CSS alapjai
Cascading Style Sheets utasításokat tartalmaznak a vizuális tervezés egyes elemeinek a weboldal, amely leírja az ő stílusuk. A Cascade is abban a tényben rejlik, hogy az előírt stílus öröklődik minden komponens, amely a gyermekek azokat, amelyek az általunk meghatározott egy bizonyos fajta.
A gyakorlatban ez azt jelenti, a következő. Ha például kért tag
szöveg színe, mondjuk zöld, akkor minden szöveges elemek az oldalon (sőt az egész látható oldal tartalma van ágyazva a body tag) zöld lesz :) Undo stílust nem lehet (ez a lényege a kaszkád), de felülbírálhatja beállításával jobb elemei az új design:A fenti képen azt látjuk, hogy a stílusok regisztrált a „fej” (HEAD szakasz) HTML-dokumentumot, és korlátozott címkék . Ez nem az egyetlen vagy a legjobb módja annak, hogy állapítsa stílusok, de az egyszerűség kedvéért mi is lakozik rajta (hogyan kell csatlakoztatni a CSS másképp megbeszéljük alább).
Most mi érdekli csak elvileg leírja a stílus. Ez az elv az úgynevezett „CSS szintaxis”. Alapvetően, ez elég egyszerű megérteni, ha már tudjuk, HTML, vagy legalább angolul. CSS szintaxis leírni néhány szabályt:
Valamennyi fenti szabályokat ki lehet fejezni egy kép:
Itt, sőt, az egész alapja a CSS szintaxis. Kivételek a fenti szabályokat, de vannak olyan kiegészítéseket, amelyek akkor tanulni tovább, ahogy olvassa a cikket.
Addig, csak akkor tudjuk, hogy mely paraméterek állíthatók segítségével CSS. Ha nem érinti az egyedi alkalmazási terület a modern CSS 3, mint például az animáció, a lista hasonló lesz a következő:
- megjelenése, mérete és színe szöveges elemek;
- háttér színek és képek;
- helyzete az egyes elemek a másikhoz képest;
- behúzás belüli és közötti blokkok;
- jelenlétét és megjelenése a stroke-blokk és a belső elemek;
- megjelenése adott blokk típusú, listák, táblázatok, és a kapcsolatokat;
- láthatóságát vagy láthatatlanná egyes töredékei az oldalt.
Csatlakozó a CSS
Most, hogy már van egy koncepció, amit a stílus szabályokat, és miért használják őket, mi kell érteni, hogyan hajtsák végre azokat a HTML-dokumentum. Jelenleg összesen 4 CSS csatlakozni:
- Csatlakozó külső kiterjesztésű fájl a tag által .css :
Én elegáns bekezdés :)
Mind a módszereknek megvannak a végrehajtási prioritás. A legalacsonyabb prioritást kap az első eljárás csatlakozó külső CSS-fájl segítségével tag . A második és harmadik módszer egymással egyenértékű. Tény, hogy a második út a stílusok importálása külső fájlból, és regisztrálja azokat a belső, de nem mindig működik megfelelően. A legmagasabb prioritást kap ugyanolyan string stílus meghatározása a stílus attribútum adott elem egy oldalon.
A gyakorlatban ez azt jelenti, hogy a kezdetben lesz a stílusok alkalmazásához deklarált közvetlenül a szervezetben az oldal, majd (ha a húr a stílus nem található) azok, amelyek meghatározott a „fej” a dokumentum, és végső fokon a készítmény meghatározott külső CSS-fájlt.
CSS választók
Ahhoz, valamilyen módon kiadni egy adott elem egy weblapon, meg kell valahogy találni. Tulajdonképpen csak azért, hogy jelezze a kívánt fragmentumokat oldalak használjuk választókat.
A fenti példákban is gondoltunk csak a választókat az egyedi címkéket. A gyakorlatban azonban, elég gyakori, hogy a teljes tartalmát a tömeg az azonos címkéket kiosztani csak egy bizonyos részét. Ezért amellett, hogy a szelektor címkék számos különböző típusú kapcsolók és ezek kombinációit. Azt javaslom, hogy fontolja meg őket a táblázat formájában:
Arra használják, hogy helyezze karaktereket, szavakat vagy szövegrészletek előtt (mielőtt), vagy azt követően elem. Ahhoz, hogy helyezze be a kötelező tartalmi tulajdonság.
Van még néhány más típusú kombinációk kapcsolók és pszeudo-osztályok, de ezek nem használják gyakran, ezért lemondanak eddig nélkülük. És most nézd meg az alapokat a dolgozó tömb, amely nélkül szabhat site CSS akkor nem lesz képes.
Blokk okmánymintát és elhelyezése blokkok
A táblázatos elrendezés lehet rögzíteni (az egyes cellát úgy szereljük szigorú szélessége pixelben), vagy a „gumi” (százalékos érték helyett a pontos méretek). Ez az elv az elrendezés meglehetősen egyszerű és nyilvánvaló, azonban megköveteli a táblázatok használata más célra, és ezért sérti a szemantika a weboldalt.
A lényeg a blokk elrendezés
Megoszlása a CSS 2.0, mint már említettük, hagyjuk majdnem teljes elválasztása tartalmat a stílus így született egy új elv, releváns a mai napig - „blokk elrendezés”.
Az új megközelítés alapja az úgynevezett blokk modell. Ennek lényege, hogy a tartalom az oldal található a független, vagy beágyazott blokk, amelynek helyét meg lehet változtatni a CSS meglehetősen rugalmas. Az alapja a blokk elrendezés - blokk (rendszerint
Minden egyes blokk, továbbá a tulajdonságok egyértelműen meghatározott szélessége (W) és a magasság (H) több összetevőből áll, amelyek befolyásolják annak méreteit. Először is, van vágva a szöveget a határ a készülék belsejében, kifejezi az ingatlan „padding”, valamint az árrés blokkok közötti kívül kérte, „marginális” tulajdonság.
Másrészt, amint az asztalok, a keret egység lehet kifejezni „határ” tulajdonság. Azonban, ellentétben a táblázatok sejtek gépcsoportkerettel kívül közös határa, növelve annak tényleges szélessége és magassága. Ez részben hozzáadásával oldják meg, hogy a teljes dokumentum tulajdonságok „box-méretezés: border-box”, de ez a funkció már végre csak a CSS 3.0 és nem támogatja a régebbi böngészők.
Mellesleg, a készülék nem csak kezdetben blokk típusú elem. Bármely sor, mint például a bekezdés (
), Fejléc (
, . ) Vagy egy szöveges rész () CSS eszközökkel leírható, mint egy blokk. Erre a célra az ingatlan „display” értékű „blokk”, vagy „inline-block”. Ugyanezzel értékeket „inline” lehet fordítva, blokk (például, ) Ahhoz, hogy egy sor elemet.
pozicionáló blokkok
Az alapértelmezett egységek vannak elrendezve egymás fölött a sorrendjében vényköteles a szervezetben a HTML-dokumentum. Ez az úgynevezett standard áramlását. Azonban szinte minden helyszínen vorstke flow esik most majd a szünet, mint néhány blokkot kell elhelyezni egy sorban.
Ezt meg lehet tenni a különböző módon, minden megvan a maga előnye és hátránya, így nincs univerzális recept, sajnos, nem. A választott módszer függ a konkrét feladatokat, amelyekkel szembe minket, mint a betűszedő. A leggyakrabban használt módszerek a következők:
- relatív elhelyezése ( „helyzet: a relatív”) kombinálva a tulajdonságait „úsztatott” és a „tiszta”;
- abszolút pozíciót ( „összesen: abszolút”) kombinálva a tulajdonságait „bal” és „jobb” forgalomba blokkok szükséges mozgástér;
- keverő besorolásának változatok beágyazó blokkok
- az új tulajdonságok CSS 3.0 „flex” és a „rács”;
- dinamikus elhelyezése változás segítségével médialekérdezés.
Modern tulajdonság, ami a CSS 3.0 nagyban egyszerűsíti az elrendezés az eljárás azonban eddig nem minden böngésző támogatja az új előírásoknak. Ezért különös figyelmet kell fordítani a legrégebbi példa a relatív és abszolút pozícióra:
A fenti képen, kiderül, hat különböző színű blokkokat. Piros, kék és rózsaszín, szürke szélütés relatív helymeghatározás, és még az első két és csomagolja a bal oldalon. Zöld és sárga négyzetek vannak elhelyezve feltétlenül szigorúan francia a felső és bal széleit. Rózsaszín azonos stroke osztály fekete hozzáadott összehasonlítás a végén, és egy relatív elhelyezése.
Piros és kék blokkok kerülnek egymás mellé, sőt, megzavarhatja a normál adatfolyam. Ez a gyakorlatban azt szükség alaphelyzetbe első behúzás balra rózsaszín blokk. A továbbiakban majd a zöld és a sárga blokkok, de rovására abszolút pozicionálás, azok kiesnek a patak és után egy rózsaszín blokk azonnal jön egy második rózsaszín, fekete szélütés.
Zöld és sárga négyzetek rárakódik a második blokk rózsaszín szigorúan meghatározott helyen kapcsolatot. Ennek megfelelően megvizsgálja a javasolt struktúra, arra lehet következtetni, hogy abszolút pozicionált elemek nem lépnek kölcsönhatásba a többi blokk és ezekre csak a saját stilisztikai szabályok, kiesnek a teljes áramlás.
Ez a tulajdonság lehet használni, például, hogy hozzon létre egy merev váz helyén vagy végrehajtására úszó és átfedő blokkokat. A relatív helymeghatározás hasznos létrehozása adaptív hálózatok, mert nem sérti a standard adatáramlás.
Adaptív és rugalmas elrendezési
A megjelenése és fejlődése CSS 3.0, valamint széles körű eszközök az internet eléréséhez különböző képernyőfelbontás vezetett a megjelenése egy ilyen újmódi trendek egyaránt adaptív és rugalmas elrendezést. Röviden a lényeg, hogy nézd weblapok könnyebb olvasni bármilyen méretű kijelzőn.
Ebből a célból a grafikus eleme a helyszín lehet változtatni a megjelenését a kényelmes ujjal nyomást, hogy menjen egy új helyre, vagy eltűnik. Ez úgy történik, akkor a fő hangsúly a tartalmi blokk, amely a fő elem információt hordozó terhelést.
Megvalósítása ez a fajta elrendezés egy speciális CSS innováció nevezett médialekérdezéseket (eng. „Médialekérdezéseket”). Ezek speciális irányelvek, mint például a „@media”, amely lehet próbálni több készülék paramétereit, kérve az oldalt, és attól függően, hogy az adatok változhatnak a design.
Ahhoz, hogy megteremtse a legtöbb helyen adaptív bevezetését általában elegendő használni a teszt megfelel a képernyő szélességének a készülék kívánt maximális vagy minimális szélességét. Körülbelül úgy néz ki, mint: "@media képernyő és (max-width 480px.)." Itt irányelv „@media” mi adja a feladatot, hogy milyen méretű vetítővászon és formában, ha a maximális szélessége 480 képpont.
Majdnem nem érte el a kódot az oldal, épp befejeztük a média lekérdezés végén stílus, de a kívánt eredményt! A gyakorlatban, sajnos, a normál beállítás lefektetett korábbi oldalakon néha részben átírni és stílusok, és még a kódot az oldal, azonban időnként elég, mint a mi például csak kisebb változtatásokat.
Itt vagyunk veled, és elvégezte felmérő ismeri Cascading Style Sheets. Ismerjük a szintaxis CSS, hatályát, elveit moduláris és alkalmazkodó elrendezést. A színfalak mögött voltak, talán csak a tulajdonságait CSS, ami elég sok, és akik elkötelezett a speciális online útmutatókat.
Amellett, hogy a cikket Tudod letölt tartalmazó archívum minden tesztoldalakból példákkal, hogy mi tekinthető formájában screenshotok. Alapján ezeket a példákat, akkor lehet, hogy a saját kísérletek vorstke vagy még használni őket, mint egy egyszerű sablont saját helyén :)
Általában CSS - ez egy elég érdekes dolog. Ez olyan, mint egy puzzle, vagy egy keresztrejtvény, felvette a megfelelő szavakat, hogy ami látható egy szép képet, azaz a helyszínen. Tudjon Cascading Style Sheets - ne hagyd, hogy az agy elsorvad. )
Kapcsolódó cikkek
pozicionáló blokkok
Az alapértelmezett egységek vannak elrendezve egymás fölött a sorrendjében vényköteles a szervezetben a HTML-dokumentum. Ez az úgynevezett standard áramlását. Azonban szinte minden helyszínen vorstke flow esik most majd a szünet, mint néhány blokkot kell elhelyezni egy sorban.
Ezt meg lehet tenni a különböző módon, minden megvan a maga előnye és hátránya, így nincs univerzális recept, sajnos, nem. A választott módszer függ a konkrét feladatokat, amelyekkel szembe minket, mint a betűszedő. A leggyakrabban használt módszerek a következők:
- relatív elhelyezése ( „helyzet: a relatív”) kombinálva a tulajdonságait „úsztatott” és a „tiszta”;
- abszolút pozíciót ( „összesen: abszolút”) kombinálva a tulajdonságait „bal” és „jobb” forgalomba blokkok szükséges mozgástér;
- keverő besorolásának változatok beágyazó blokkok
- az új tulajdonságok CSS 3.0 „flex” és a „rács”;
- dinamikus elhelyezése változás segítségével médialekérdezés.
Modern tulajdonság, ami a CSS 3.0 nagyban egyszerűsíti az elrendezés az eljárás azonban eddig nem minden böngésző támogatja az új előírásoknak. Ezért különös figyelmet kell fordítani a legrégebbi példa a relatív és abszolút pozícióra:
A fenti képen, kiderül, hat különböző színű blokkokat. Piros, kék és rózsaszín, szürke szélütés relatív helymeghatározás, és még az első két és csomagolja a bal oldalon. Zöld és sárga négyzetek vannak elhelyezve feltétlenül szigorúan francia a felső és bal széleit. Rózsaszín azonos stroke osztály fekete hozzáadott összehasonlítás a végén, és egy relatív elhelyezése.
Piros és kék blokkok kerülnek egymás mellé, sőt, megzavarhatja a normál adatfolyam. Ez a gyakorlatban azt szükség alaphelyzetbe első behúzás balra rózsaszín blokk. A továbbiakban majd a zöld és a sárga blokkok, de rovására abszolút pozicionálás, azok kiesnek a patak és után egy rózsaszín blokk azonnal jön egy második rózsaszín, fekete szélütés.
Zöld és sárga négyzetek rárakódik a második blokk rózsaszín szigorúan meghatározott helyen kapcsolatot. Ennek megfelelően megvizsgálja a javasolt struktúra, arra lehet következtetni, hogy abszolút pozicionált elemek nem lépnek kölcsönhatásba a többi blokk és ezekre csak a saját stilisztikai szabályok, kiesnek a teljes áramlás.
Ez a tulajdonság lehet használni, például, hogy hozzon létre egy merev váz helyén vagy végrehajtására úszó és átfedő blokkokat. A relatív helymeghatározás hasznos létrehozása adaptív hálózatok, mert nem sérti a standard adatáramlás.
Adaptív és rugalmas elrendezési
A megjelenése és fejlődése CSS 3.0, valamint széles körű eszközök az internet eléréséhez különböző képernyőfelbontás vezetett a megjelenése egy ilyen újmódi trendek egyaránt adaptív és rugalmas elrendezést. Röviden a lényeg, hogy nézd weblapok könnyebb olvasni bármilyen méretű kijelzőn.
Ebből a célból a grafikus eleme a helyszín lehet változtatni a megjelenését a kényelmes ujjal nyomást, hogy menjen egy új helyre, vagy eltűnik. Ez úgy történik, akkor a fő hangsúly a tartalmi blokk, amely a fő elem információt hordozó terhelést.
Megvalósítása ez a fajta elrendezés egy speciális CSS innováció nevezett médialekérdezéseket (eng. „Médialekérdezéseket”). Ezek speciális irányelvek, mint például a „@media”, amely lehet próbálni több készülék paramétereit, kérve az oldalt, és attól függően, hogy az adatok változhatnak a design.
Ahhoz, hogy megteremtse a legtöbb helyen adaptív bevezetését általában elegendő használni a teszt megfelel a képernyő szélességének a készülék kívánt maximális vagy minimális szélességét. Körülbelül úgy néz ki, mint: "@media képernyő és (max-width 480px.)." Itt irányelv „@media” mi adja a feladatot, hogy milyen méretű vetítővászon és formában, ha a maximális szélessége 480 képpont.
Majdnem nem érte el a kódot az oldal, épp befejeztük a média lekérdezés végén stílus, de a kívánt eredményt! A gyakorlatban, sajnos, a normál beállítás lefektetett korábbi oldalakon néha részben átírni és stílusok, és még a kódot az oldal, azonban időnként elég, mint a mi például csak kisebb változtatásokat.
Itt vagyunk veled, és elvégezte felmérő ismeri Cascading Style Sheets. Ismerjük a szintaxis CSS, hatályát, elveit moduláris és alkalmazkodó elrendezést. A színfalak mögött voltak, talán csak a tulajdonságait CSS, ami elég sok, és akik elkötelezett a speciális online útmutatókat.
Amellett, hogy a cikket Tudod letölt tartalmazó archívum minden tesztoldalakból példákkal, hogy mi tekinthető formájában screenshotok. Alapján ezeket a példákat, akkor lehet, hogy a saját kísérletek vorstke vagy még használni őket, mint egy egyszerű sablont saját helyén :)
Általában CSS - ez egy elég érdekes dolog. Ez olyan, mint egy puzzle, vagy egy keresztrejtvény, felvette a megfelelő szavakat, hogy ami látható egy szép képet, azaz a helyszínen. Tudjon Cascading Style Sheets - ne hagyd, hogy az agy elsorvad. )