A HTML stílusú attribútum áttekintése
A HTML-kódhoz szüksége van a weblapok stílusatribútumának megjelenítéséhez olyan böngészőkben, mint a Chrome, a FireFox, az IE, hogy azok megjelenésük szerint megjelenjenek. A HTML címkék különféle információkat tartalmazhatnak, és a style attribútum az inline stílus használatával irányítja a HTML blokkokban található információk megjelenését.
Ebben a cikkben többet fogunk megtudni a HTML stílus attribútumról, amely nem más, mint egy szabálykészlet, amely meghatározza, hogy az oldal hogyan jelenjen meg a böngészőben.
A HTML stílus attribútuma
Az alábbiakban felsoroljuk azokat a stílustulajdonságokat, amelyek felhasználhatók a HTML elemek tervezésének befolyásolására és vezérlésére, egy gyakorlati példával együtt:
1. Háttér szín
Ezzel a CSS tulajdonsággal beállíthatjuk a háttér színét bármely HTML elemhez, például,
stb.
Példa
My background is blue
Kimenet:
2. Szín
A HTML elemben a szöveg betűtípust úgy lehet szabályozni, hogy a színtulajdonságot a megfelelő színnévre vagy a HEX vagy RGB kódra állítja.
Példa
My font color is blue
Kimenet:
3. Keretszín
Beállíthatunk bármely HTML elem szegélyének színét, ha szeretnénk hozzá szegélyt hozzáadni.
Példa
A határom piros
Kimenet:
Amint az a fenti kódból kitűnik, a szegélytulajdon 3 tulajdonságot fogad el a következő sorrendben: „Határ szélességű szegély stílusú szegélyszín”.
4. Háttérkép
A képet háttérként is beállíthatjuk a háttérkép tulajdonság felhasználásával:
Példa:
Kimenet:
5. Háttér - ismételje meg
Amint azt a fenti példában látja, amikor egy képet háttérként állítanak be a háttérkép tulajdonság használatával; alapértelmezés szerint megismétli a képet mind vízszintesen, mind függőlegesen. Előfordulhat azonban, hogy néhány képet függőlegesen vagy vízszintesen is meg kell ismételni, vagy lehet, hogy nem kell megismételni. Ez a viselkedés úgy szabályozható, hogy a kívánt értéket a háttér-ismétlés tulajdonságához viszonyítja, és csak háttérkép használatakor használható, egyébként nem ad hozzá stílusformát, ha önálló tulajdonságként használja.
Az „repe-x” érték arra szolgál, hogy a kép csak vízszintesen ismétlődjön.
Az „ismétlés-y” érték arra szolgál, hogy a képet csak függőlegesen lehessen ismételni.
A „nem ismétlés” érték a háttérkép bármilyen ismétlésének megállítására szolgál.
Módosítsuk a fenti példát a háttérkép javítása érdekében.
Példa
Kimenet:
Össze tudjuk hasonlítani a fenti példákat, és megértjük, hogy a háttérképet háttérképként adhatjuk hozzá, a háttérismétlés segítségével pedig szabályozhatjuk a háttérkép ismétlését.
6. Háttér-helyzet
Ezzel a tulajdonsággal meghatározhatjuk a háttérkép helyzetét.
Példa
Kimenet:
7. Margók
A CSS olyan tulajdonságokkal rendelkezik, amelyekkel a margókat beállíthatjuk a HTML elem mind a négy oldalán, vagy különféle margókkal egészíthetjük ki az elem adott oldalát.
Ha a margó felső határt hozzáadhat margót az elem tetejéhez, a jobb margó hozzáad egy margót az elem jobb oldalán, a bal oldali margó hozzáad egy margót az elem bal oldalán, és a margó alja hozzáad egy margót az elem aljára. E 4 tulajdonság használata helyett a margin tulajdonságot is felhasználhatjuk, és értékét az elvárásaink szerint állíthatjuk be.
Példa
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Padding
A párnázási tulajdonság meghatározza az elemet az elem tartalma és annak szegélyei között. Használhatjuk a „párnázás” tulajdonságot vagy az egyes párnázási tulajdonságokat, például a párnázat felső részét, az alsó párnázatot az alsót, a bal oldali párnázatot, a jobb oldali párnázatot a párnázás beállításához az elem tartalmának felső, alsó, bal vagy jobb oldalán.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Magasság és szélesség
A magasság és a szélesség a legalapvetőbb CSS tulajdonságok, amelyeket bármely HTML elem magasságának és szélességének meghatározásához használnak. Beállíthatók pixelértékre, például 200 képpont, vagy olyan százalékra, mint 10%, 20% stb.
10. Szöveg-igazítás
Ez a tulajdonság annak a vízszintes iránynak a beállításához használható, amelybe szeretnénk igazítani az elem szövegét. Az érték beállítható középre, jobbra vagy balra.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Szöveg-dekoráció
A szövegdekoráció tulajdonság felhasználható dekorációk beállítására, például aláhúzás, átváltás vagy átfedés a szövegbe a HTML-ben.
Példa:
Ez aláhúzott
Kimenet:
12. Betűköz
Ahogy a neve is sugallja, ez a tulajdonság a betűk / karakterek közötti távolság meghatározására szolgál. Pozitív vagy negatív pixelértéket lehet hozzárendelni a betűk közötti távolság növeléséhez vagy csökkentéséhez.
Példa:
A szavaim átfedésben vannak
Kimenet:
13. Vonalmagasság
A vonalmagasság határozza meg a függőleges vonalak közötti távolságot. Mint a betűköz, a sormagasság is beállítható pozitív vagy negatív pixelértékre. Nézzük át az alábbi példát, hogy jobban megértsük:
Példa:
Ennek a bekezdésnek a vonalmagassága kicsi.
Ennek a bekezdésnek a vonalmagassága kicsi.
Kimenet:
14. Szöveg irány
Időnként, ha a weboldal tartalma nem angol, hanem valamilyen más nyelv, például arab, amely a balról egyeztető jogot követi, meg kell változtatnunk a szöveg irányát. Ilyen esetekben megfordíthatjuk a szöveg irányát.
Példa:
Jobb vagyok balra
Kimenet:
15. Szöveg árnyék
Ez a tulajdonság árnyékot ad a szöveghez.
Példa:
Van egy szürke árnyéka
Kimenet:
16. Betűtípus-család
Meghatározhatjuk az elem betűkészlet osztályát. A vesszővel elválasztott több betűtípuscsaládot tartalékrendszerként definiálhatjuk olyan helyzetek kezelésére, amelyekben az előnyben részesített betűkészlet-osztály nem tölthető be.
- Betűstílus: A betűstílus tulajdonsággal dőlt vagy ferde hatást adhatunk a szöveghez.
Példa:
Ez ferde stílus.
Kimenet:
- Betűtípus súlya: Ez a tulajdonság meghatározza a betűtípus súlyát.
Példa:
Ez egy merész bekezdés
Kimenet :
Az építőelemek fölött bemutatott stílusjellemzők UI és UX tervezéssel. A CSS új verzióinak bevezetésével tovább fejlődik.
Ajánlott cikkek
Ez egy útmutató a HTML stílusú attribútumhoz. Itt tárgyaljuk az összes stílustulajdonság felsorolását, amelyek felhasználhatók a HTML elemek tervezésének befolyásolására és irányítására gyakorlati példák segítségével. Lehet, hogy megnézi a következő cikkeket is, ha többet szeretne megtudni -
- HTML betűtípus stílusok
- HTML listastílusok
- Alapvető HTML címkék
- A HTML előnyei
- HTML keretek
- Fordítva a JavaScript-ben
- HTML blokkok
- Állítsa be a háttér színét HTML-ben a Példa segítségével