Alapvető trükkök css stílusok kezdő webmesterek számára, sebweo

Vannak olyan helyzetek a webfejlesztésben, ahol gyors döntésekre van szükség, és a legegyszerűbb módja az egyszerű, de hatékony CSS trükkök használata. Néhány trükk olyan egyszerű, hogy a webes tervezők nem gondolnak rájuk és használják őket automata módban. És néhány CSS trükköt használni, meg kell keresnie egy kicsit a google-t, hogy megbizonyosodjon róla, hogy ezt vagy az adott módszert helyesen használják. Úgy döntöttünk, hogy összegyűjtjük a CSS programozásának alapvető módjait egy helyen. Ezért ebben a bejegyzésben megtalálja a leggyakrabban használt megoldásokat, amikor a CSS stílusokkal dolgozik.

Középső elemek

A központosító elemek a CSS egyik legnehezebb trükkjei, amelyek sokféleképpen módosíthatók. A döntés különböző formákat ölthet, és alapvetően attól függ, hogy mit kell központosítania. Az alábbiakban a legfontosabb megoldásokat tekintjük az oldal különböző elemeinek központosítására.

A szöveg az oldal középpontjához (vagy egy egyedi blokkhoz) igazodik a text-align: center stílus használatával; .

Címke (konténer vagy blokk)

A div elem (vagy bármely más elem) központosítható, például akkor, ha blokk tulajdonságait állítja be. majd használja az automatikus vízszintes behúzást (bal és jobb).

A példában egy szélessége 100% a méret a blokk (vagy oldalt) és a bemélyedés (árrés) a felső és alsó 0. és a bal és jobb automatikus. amely lehetővé teszi a böngésző számára, hogy kiszámítsa a tartály közepét, és ennek megfelelően központosítsa.

Függőleges igazítás (függőleges központosítás)

Ez egy meglehetősen gyakori trükk a CSS-ben, és érdemes megfontolni. A függőleges központosítás fő feladata ugyanaz a vonalmagasság és magassági stílus használata. Ez azt is lehetővé teszi, hogy a böngésző kiszámolja az elem magasságát, és ennek megfelelően megtalálja a központi tengelyét. Ha a függőleges középső tengely mentén be kell igazítani valamit a blokkba, akkor az függvény függőleges igazítása: középen; .

Abszolút pozícionálás

Ha teljes ellenőrzése van az oldal bármely blokkjának helyén, akkor abszolút pozícionálást kell használnia (pozíció: abszolút;). Az abszolút pozícionálás lehetővé teszi, hogy a blokkot a megfelelő helyre helyezze 1 pixel pontossággal. A tulajdonságok használata felül. jobbra. alul és balra (ez egyfajta bemélyedés az oldal megfelelő oldaláról), megadhatja a kívánt blokk pontos "koordinátáit".

Ebben a példában, az osztály blokk blok kerül behúzásra a tetején a böngésző (oldal) a 25 képpont, és a bal széle a bemélyedés a 50 képpont. Ha a szülőblokk más helyzetben van statikusan. akkor a beszúrás számlálása e szülőelem éleiből történik. Például, ha a blokk van ágyazva az osztály blok másik blokkra (például helyzet-: relatív;), amely be van állítva a felső szegélyen 35px, majd blok egy közös felső margó 60 képpont (35px + 25 képpont).

Közvetlen gyermekek kiválasztása

Elég gyakran szükséges meghatározni nem csak az általános stílus az egész egységet, hanem bizonyos stílusok közvetlen leszármazottai (gyermek elemek, beágyazott elemeket). Ehhez egy megfelelő trükk van a CSS-ben - csak használja a> -t. hogy közvetlen gyermekeket határozzanak meg.

Ez a stílus lehetővé teszi, hogy kiválasszon egy (link) elemet, amely közvetlenül a blokk alatt helyezkedik el, és a betűméretet 33px értékre állítja be. Ha például a címke be van ágyazva a p címkébe. akkor nem lesz többé közvetlen blokk blokk. és a betűméret megváltoztatása nem érinti.

Egy adott gyermek kiválasztása

Ez a trükk is hasznos lehet. Ha egy adott gyermekelemre stílusot szeretne alkalmazni, használja az űrlap választóját

A fenti példában a fiókhoz tartozó második képhez, amelyik a blokkblokk gyermeke, a szükséges stílusokat alkalmazzuk. A blokkban lévő egyéb képek nem befolyásolják a megadott stílust.

A blokkméretek képméretének beállítása

Néha be kell illeszteni egy képet egy blokkba, amely más dimenziókat tartalmaz. Például egy 250px szélességű blokkban helyezzen be egy 500x500 képpont méretű képet. Ha nem adja meg a stílusok ezekre a helyzetekre, a kép „kifelé” a szélén a blokk, vagy fordítva, nem tölti be a kívánt mezőt (ha a blokk méretét a nagyobb képhez). Ennek legegyszerűbb módja a dinamikus szélesség használata a kép megjelenítéséhez.

Ezek a stílusok lehetővé teszik, hogy a kép teljesen betöltse a szülőblokk teljes szélességét, és a kép magasságát kiszámolja és automatikusan megváltoztatja.

Pszeudo-elem: korábban

Ezzel az ál-elemzel a kívánt tartalmat beillesztheti egy adott blokk tartalma előtt. Nagyon gyakran ezzel a trükkökkel a webmesterek beillesztenek néhány mini-ikont a szükséges címkék elé. Például egy felsorolt ​​listát (ul) egy bizonyos módon stilizálni. Ez a tartalom tulajdonságaival történik. A tartalom lehet például egy adott szöveg vagy kép. Nagyon gyakran ikonikus betűtípust is használ (például FontAwesome).

Példa a kép tartalmának felhasználására:

Példa a szöveg tartalomként való használatára:

Pszeudo-elem: utána

Pszeudo-elemhez hasonlóan: az ál-elem előtt: művek után. A különbség az, hogy a tartalom a kívánt elem után kerül beillesztésre.

Elemek módosítása CSS-szűrők használatával

A CSS3 stílusokban már vannak olyan fejlettebb technikák, amelyek lehetővé teszik a szükséges elemek módosítását JavaScript nélkül. Például a CSS szűrők használatával képeket szerkeszthet anélkül, hogy képszerkesztő programokat használna. Például nagyon egyszerű a színes kép színezése a CSS-stílusokban csak néhány sornyi kóddal.

A kép elszíneződésének kódja:

Érdekes megoldás lenne például visszaadni a színt a képre, amikor az egeret felhúzza rajta. Ehhez használja az ál-osztályt: lebegés. amelyek felülbírálhatják az elem stílusait, amikor az egeret felhelyezi rajta.

Példa a szín visszajuttatására egy elszíneződött képre:

Paraméterek A CSS-szűrők szinte minden modern böngészőben működnek (az Internet Explorer kivételével).