li css өнгө. Текстэнд сум эсвэл дугаар нэмэх

Гэр / Windows 7
  • Дугаарлагдсан жагсаалтын стандарт сумны харагдах байдлыг өөрчлөх
  • Сумтай жагсаалтын тэмдэгтийн төрлийг тохируулах
  • Жагсаалтын зүйлд сумны оронд зураг тохируулах

HTML хаягуудыг ашигласнаар та дугаарласан болон тэмдэглэгдсэн сумтай хоёр төрлийн жагсаалт үүсгэж болно. Анхдагч байдлаар ихэнх хөтчүүд сумтай жагсаалтын тэмдэглэгээг тойрог хэлбэрээр, дугаарласан жагсаалтын тэмдэглэгээг дарааллаар нь харуулдаг. CSS нь стандарт тэмдэглэгээний харагдах байдлыг өөрчлөх боломжийг олгодог. Дараа нь бид өөр өөр төрлийн тэмдэглэгээ бүхий жишээнүүдийг үзүүлэх болно, тэдгээрийн тусламжтайгаар та жагсаалтынхаа харагдах байдлыг өөрчлөх боломжтой.

Тэмдэглэгээг засах, устгах

CSS дахь тэмдэглэгээний стандарт төрхийг өөрчлөхийн тулд стандартыг солихыг хүссэн тэмдэглэгээний төрөлд тохируулсан list-style-type шинж чанарыг ашиглана уу.

Дугаарлагдсан жагсаалтын зарим төрлийн сумыг харуулсан жишээ:

CSS шинж чанар:

жагсаалтын хэв маягийн төрөл:

Үр дүн:

  1. Жагсаалтын хэв маягийн шинж чанарын утгыг дарна уу
  2. Тэмдэглэгээний өөрчлөлтийг ажиглаарай
  3. Жагсаалтандаа хамгийн тохиромжтой сумыг ашигла

#миний жагсаалт (
жагсаалтын хэв маягийн төрөл: аравтын ;
}

Үр дүнг харахын тулд үл хөдлөх хөрөнгийн дурын утгыг дарна уу

Сумтай жагсаалтын хувьд зөвхөн гурван төрлийн тэмдэглэгээ байдаг бөгөөд тэдгээрийг тойрог, диск болон квадрат утгыг ашиглан тодорхойлж болно:

Баримт бичгийн гарчиг

  • Кофе
  • Цай
  • Кофе
  • Цай
  • Кофе
  • Цай
Оролдоод үз »

None утгыг ашигласнаар та жагсаалтын зүйлээс тэмдэглэгээг арилгах боломжтой боловч зүүн талын догол мөр хэвээр байх болно:

Баримт бичгийн гарчиг

  • Кофе
  • Цай
  1. Кофе
  2. Цай
Оролдоод үз »

Тэмдэглэгээг зургаар солих

Хэрэв анхдагч тэмдэглэгээний аль нь ч танд тохирохгүй бол CSS нь тэдгээрийг ямар ч зургаар солих боломжийг олгодог бөгөөд энэ нь танд сонгосон зургийн замыг зааж өгөх шаардлагатай жагсаалтын хэв маягийн шинж чанар юм.

Зургийг жагсаалтад багтаахын тулд автоматаар масштаблахгүй бөгөөд өөрийн хэмжээгээр харуулах тул та тохирох хэмжээтэй зургийг сонгох эсвэл одоо байгаа зургийг засварлаж, багасгаж эсвэл томруулж болно гэдгийг анхаарна уу. хүссэн хэмжээ:

Баримт бичгийн гарчиг

  • Кофе
  • Цай
  1. Кофе
  2. Цай
Оролдоод үз »

Жагсаалтын догол

Жагсаалтын зүйлээс сумыг хасахдаа хөтчийн зүүн талын үндсэн хэмжээг хасах эсвэл багасгах боломжтой. Учир нь бүрэн арилгах padding та padding-left шинж чанарыг ашиглах шаардлагатай бөгөөд энэ нь танд тохируулах боломжийг олгодог дэвсгэр:

Баримт бичгийн гарчиг

  • Кофе
  • Цай
  1. Кофе
  2. Цай
Оролдоод үз »

Жишээн дээр бид зүүн талын догол мөрийг бүрмөсөн арилгасан тул жагсаалтын зүйлүүд хөтчийн цонхны ирмэг дээр яг таарч байна. Мөн жишээн дээрээс харж байгаагаар, тэмдэглэгдсэн жагсаалт яг зориулалтын дагуу харагдаж байгаа боловч дугаарласан жагсаалтад тэмдэглэгээ байхгүй байна. Шалтгаан нь тэмдэглэгээнд байдаг - анхдагч байдлаар маркерууд нь жагсаалтын зүйлийн агуулгын нэг хэсэг биш тул зүүн догол мөрийг арилгавал тэдгээр нь элементийн агуулгатай хамт хөдлөхгүй.

  • , гэхдээ зүгээр л хөтчийн цонхны ирмэгийн ард нуугдаж болно.

    Жагсаалтын хэв маягийн байрлалын шинж чанар нь сумыг жагсаалтын зүйлсийн дотор эсвэл гадна талд байрлуулах эсэхийг тодорхойлдог. Энэ өмч нь хоёр утгыг авч болно:

    • гадна талд - тэмдэглэгээ нь агуулгын зүүн талд байрладаг (энэ нь анхдагч юм)
    • дотор - тэмдэглэгээ нь агуулгын хамт жагсаалтын зүйл дотор байрладаг

    Одоо та зүүн талын догол мөрийг арилгахын тулд өмнөх жишээг дахин бичиж болно, гэхдээ маркерууд хөтчийн ирмэгээс гарахгүй.

    Баримт бичгийн гарчиг

    • Кофе
    • Цай
    • Кофе
    • Цай
    • Кофе
    • Цай
    Оролдоод үз »

    Жишээн дээр жагсаалтын зүйлсийн хил хязгаарыг нүдээр харуулахын тулд жагсаалтын зүйл бүрт хүрээ нэмсэн.

    Энэхүү сургалтын нийтлэл нь CSS-ийн жагсаалттай ажиллахад анхаарлаа төвлөрүүлэх бөгөөд та сумны төрөл, жагсаалтын зүйлтэй харьцуулахад сумны байрлалыг хэрхэн өөрчлөх, өөрийн сум үүсгэх, тэр ч байтугай сумны өнгийг өөрчлөх талаар сурах болно.

    HTML 5 нь үндсэн хоёр төрлийн жагсаалт (тайлбарын жагсаалт болон цэсийн зүйлээс бусад) ашигладаг гэдгийг та аль хэдийн мэдэж байгаа гэж бодож байна.

  • © 2024 ermake.ru -- Компьютер засварын тухай - Мэдээллийн портал