Hogyan lehet a legjobban kihasználni a CSS-listákat?

Ez a cikk megismerteti Önt a CSS-listákkal, és közben segít megérteni, hogyan működik a CSS-lista stílusa egy bemutatóval.

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ó,



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ám1,4,3
Tizedes első nulla 0 a tényleges szám előtt01, 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élalfa, 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
  1. Jáva
  2. Piton
  3. Szögletes
  1. Jáva
  2. Piton
  3. Szögletes
  1. Jáva
  2. Piton
  3. Szögletes

Kimenet

Kimenet - CSS listák - Edureka

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
  1. Matematika
  2. Társadalomtudomány
  3. Fizika
  1. Matematika
  2. Társadalomtudomány
  3. 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.