A CSS-listák nagyon hasznosak számozott vagy felsorolt pontok elérésében. Ez a cikk megmutatja, hogyan szabályozhatja a típusát, helyzetét, stílusát CSS használatával. A következő mutatókról itt lesz szó,
- CSS tulajdonságok
- A lista stílusú tulajdonság
- CSS listák: Mintaprogram
- JelölőértékekList-style-position tulajdonságban
Tehát kezdjük el akkor,
CSS listák
CSS tulajdonságok
Öt különböző CSS tulajdonság létezik, amelyekben listák vezérlésére használhatja:
- List-style-type: Lehetővé teszi számunkra, hogy ellenőrizzük a marker alakját vagy megjelenését.
- List-style-position: Megadja, hogy hosszú pontra van szükség a második sorhoz való tekeréshez, vagy igazodnia kell az első sorhoz, vagy a jelölővel kell kezdődnie.
- List-style-image: Megadja, hogy a jelölő képét hozzá kell adni vagy vonzóbbá kell tenni, nem pedig a golyókat vagy a számozott pontokat.
- Lista stílus: Megjeleníti a rövidítést az előző tulajdonságokkal.
- Marker-offset: Megadja a marker és a listába beírt szöveg közötti távolságot.
Itt a leggyakrabban használt lista a következő: list-style-type és list-style-position. Az alábbiakban kifejtésre kerül
különbség az interfész és az osztály között
Továbblépve ezzel a cikkel a CSS-listákon
A lista stílusú tulajdonság
A lista stílusú tulajdonságban a sorrend nélküli lista esetében szabályozhatjuk a felsorolási pontok vagy jelölők alakját és stílusát. Rendezett lista esetén számozási karakterek.
A rendezetlen listákra vonatkozó táblázat alatt:
| Érték | Leírás |
| Egyik sem | NA |
| Lemez | Kitöltve a kört. (Alapértelmezett) |
| Kör | Ez egy üres kör. |
| Négyzet | A tér be van töltve. |
A rendezett listákra vonatkozó alábbi táblázat:
| Érték | Leírás | Példa |
| Decimális | Ez egy szám | 1,4,3 |
| Tizedes első nulla | 0 a tényleges szám előtt | 01, 04, 03 |
| Alsó-alfa | Kisbetűs alfanumerikus karakterek. | a, b, c, d |
| Felső-alfa | Nagybetűs alfanumerikus karakterek. | A, B, C, D |
| Alsó-római | Kisbetűs római számok. | i, ii, iii, iv, v |
| Felső-római | Nagybetűs római számokkal. | I., II., III., IV., V. |
| Alsó-görög | Marker görögül beszél | alfa, gamma |
| Alsó latin | A jelölő alsó latin nyelvű | a, b, c, d |
| Felső latin | A jelölő felső latin nyelvű | A, B, C, D |
Továbblépve ezzel a cikkel a CSS-listákon
CSS listák: Mintaprogram
- Jáva
- Piton
- Szögletes
- Jáva
- Piton
- Szögletes
- Jáva
- Piton
- Szögletes
- Jáva
- Piton
- Szögletes
- Jáva
- Piton
- Szögletes
Kimenet
Továbblépve ezzel a cikkel a CSS-listákon
A list-style-position tulajdonság
Marker Values For List-style-position tulajdonságban
A list-style-position tulajdonságban azt mutatja, hogy a jelölőnek a felsorolási pontokat tartalmazó mezőben vagy kívül kell megjelennie. Ennek lehet a két értéke közül az egyik:
| Érték | Leírás |
| Egyik sem | NA |
| Belül | Ebben az esetben, ha a szöveg a második sorba kerül, akkor a szöveg a jelölő alá kerül. Ez azt is megmutatja, hogy a szöveg hol kezdődött volna, ha a listákon kívül volt vödör. |
| kívül | Ebben az esetben, ha a szöveg a második sorba kerül, a szöveg igazodik az első sor elejéhez. |
Példa:
- Matematika
- Társadalomtudomány
- Fizika
- Matematika
- Társadalomtudomány
- Fizika
- Matematika
- Társadalomtudomány
- Fizika
- Matematika
- Társadalomtudomány
- Fizika
Kimenet
Ezzel eljutottunk a CSS-listákról szóló cikk végéhez.
Nézze meg a mi oldalunkat amely oktató által vezetett élő képzéssel és valós projekt-tapasztalattal jár. Ez a képzés elsajátítja a back-end és a front-end webes technológiákkal való együttműködés képességeit. Ez magában foglalja a webfejlesztés, a jQuery, az Angular, a NodeJS, az ExpressJS és a MongoDB képzését.
Van egy kérdésünk? Kérjük, említse meg a cikk megjegyzés rovatában, és kapcsolatba lépünk Önnel.