Жагсаалтын загварын css өнгө. Жагсаалт дахь тэмдэглэгээний өнгийг хэрхэн өөрчлөх вэ? Жагсаалтын тэмдэглэгээний төрөл list-style-type

Сумтай жагсаалтын мөрүүдийг үндсэн бичвэрээс ямар нэгэн байдлаар ялгахын тулд жагсаалтын сумны өнгийг текстийн өнгөнөөс өөр болгож болно.

Анхдагч нь хар цэг юм. Хэрэв та зүгээр л li элементийн өнгийг тохируулбал юу ч ажиллахгүй - өнгө нь бүхэл бүтэн мөрөнд тавигдах бөгөөд та зөвхөн тэмдэглэгээний өнгийг өөрчлөх хэрэгтэй (цэгүүдийн ul li өнгө).

CSS ашиглан сумны өнгийг хэрхэн өөрчлөх вэ

  1. Өмчийг ашиглан анхны жагсаалтын тэмдэглэгээг нууж байна жагсаалтын хэв маягийн төрөл
  2. Псевдо-элемент ашиглан өөрийн маркеруудыг нэмэх :өмнөболон шинж чанарууд агуулга. Энэ нь элементийн өмнө ямар нэгэн текст эсвэл тэмдэг оруулах боломжийг танд олгоно ли.
  3. Тэмдэглэгээний харагдах байдлыг CSS-ийн загвараар удирдаж, өнгө, фонт, дэвсгэр болон бусад зүйлийг өөрчлөх боломжтой. Би тод Montserrat фонт ашигласан.
li (жагсаалтын маягийн төрөл: байхгүй; /* Өгөгдмөл тэмдэглэгээг нуух */ ) li:before (фонт-гэр бүл: "Монцеррат", санс-serif; үсгийн жин: 400; өнгө: #d7002e; /* Тэмдэглэгээний өнгө * / агуулга: " "; /* Тэмдэглэгч */ padding-right: 7px; /* Тэмдэглэгчээс текст рүү догол мөр */ )

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

нийтлэл li (жагсаалтын маягийн төрөл: байхгүй; /* Өгөгдмөл тэмдэглэгээг нуух */ ) нийтлэл li:before ( font-family: "Montserrat", sans-serif; font-weight: 400; color: #d7002e; /* Marker color */ content: " "; /* Marker */ padding-right: 7px; / * Тэмдэглэгчээс текст рүү догол мөр */ )

Сумны өнгийг текстийн өнгөнөөс өөр болгох хоёр түгээмэл арга байдаг.

Хэрэглээ

Элемент бүрийн дотор

  • бид хөрөнгө оруулалт хийдэг , дараа нь бид текстийг дотор нь байрлуулна. Өөрөөр хэлбэл, уламжлалт схемийн оронд

  • текст

    • загвар бий болгох

  • текст

    • Энэ тохиолдолд тэмдэглэгээний өнгийг li сонгогчийн өнгөний загварын шинж чанараар, харин текстийн өнгийг span сонгогчоор тодорхойлно (жишээ 1).

    Жишээ 1: Оруулсан шошго ашиглах

    Жагсаалт дахь текст болон сумны өнгө

    • Хийл
    • Гитар
    • Уушигны хоолой
    • Эрхтэн эрхтэн
    • Селеста

    Энэ жишээний үр дүнг доор харуулав (Зураг 1).

    Цагаан будаа. 1. Үндсэн бичвэрээс өнгөөр ​​ялгаатай тэмдэглэгээ

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

    Хэрэглээ::өмнө

    Гол нь бид жагсаалтын хэв маягийн шинж чанараар анхны жагсаалтын тэмдэглэгээг устгаж, :: псевдо элемент болон агуулгын шинж чанарыг ашиглан өөрсдийн тэмдэглэгээг нэмнэ. Энэ холбоос нь элементийн өмнө ямар нэгэн текст эсвэл тэмдэг оруулах боломжийг олгодог

  • . Түүнчлэн, жишээ 2-т үзүүлсэн шиг текстийн төрлийг (өнгө, фонт, дэвсгэр гэх мэт) хэв маягаар удирдаж болно.

    Жишээ 2: Псевдо-элементийн өмнөх ::-г ашиглах

    Тэмдэглэгээний өнгөний жагсаалт

    • Хойд
    • Өмнөд
    • Баруун
    • Зүүн

    Энэ жишээний үр дүнг Зураг дээр үзүүлэв. 2.

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

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

    Практикт тэмдэглэгдсэн жагсаалтууд илүү түгээмэл байдаг ч нэг жижиг сул талтай гэдгийг тэмдэглэх нь зүйтэй. Жагсаалт дахь тэмдэглэгээ нь таны ашиглаж буй хөтөчөөс хамаарч өөр өөр харагдана. Ноцтой дизайнерын хувьд энэ бол асуудал юм.

    Энэ сөрөг нөлөөг арилгахын тулд та жагсаалтын хэв маягийн шинж чанарыг ашиглан тэмдэглэгээний гаралтыг цуцлах хэрэгтэй.

    ол, ул (жагсаалтын загвар: байхгүй; )

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

    Зургуудаар дамжуулан тэмдэглэгээ хийх

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

    ul ( жагсаалтын хэв маяг: аль нь ч биш; ) li( дэвсгэр: url(зураг хүртэлх зам) давтагдахгүй; дүүргэх- зүүн: 20px; )

    Энэ арга нь өвөрмөц байдалдаа сэтгэл хангалуун байдаг тул зураг хэлбэрээр ямар ч тэмдэглэгээ хийх боломжийг олгодог. Манай код хөтөч дээр хэрхэн харагдахыг доор харуулав.

    Энэ аргын гол эерэг тал нь хөтчөөс 100% нийцдэг боловч үүнээс үл хамааран жижиг сул тал бий. Зураг ашиглах нь сервер рүү залгах нэмэлт дуудлага юм.

    Өмнөх тэмдэгтүүд

    Хэрэв дизайны нөхцөл зөвшөөрвөл зураггүйгээр хийх сонголт бий. Жагсаалтыг дөрвөлжин ( ) эсвэл сум ( →) гэх мэт хамгийн энгийн элементүүдээр тэмдэглэсэн тохиолдолд үндсэн агуулгыг төлөвлөхдөө үүнийг ихэвчлэн зөвшөөрдөг. Тиймээс бид ямар ч тохиромжтой тусгай дүр нь маркер болж чадна гэсэн цэгт хүрсэн.

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

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

    li( this. innerHTML = "-" + this. innerHTML) /*IE hack*/ ) li: before( контент: " \201 3" ; }

    Практикт бид дараах зургийг олж авна.

    Бодит нөхцөлд хакерууд болзолт тайлбартай холбогддог гэдгийг сануулъя.

    Энэ аргыг ашиглахдаа гол зүйл бол шаардлагатай дүрсний кодчиллыг мэдэх явдал юм. Илэрхийллийн хувьд тусгай тэмдэгтүүдийг тоон хослол эсвэл мнемоник код хэлбэрээр бичдэг гэдгийг тэмдэглэх нь зүйтэй. Агуулгын шинж чанарын хувьд, энэ тохиолдолд эхлээд ташуу зураасыг байрлуулж, дараа нь арван зургаатын кодыг бичнэ.

    insertAdjacentHTML ашиглаж байна

    Дээрх арга нь домогт IE-д үргэлж зөв ажилладаггүй (хакердсан ч). Илүү нарийвчлалтай хэлэхэд, энэ хөтөчийн "таяг" бүрэн боловсруулагдаагүй байна. Илүү үр дүнтэй арга нь дээр тулгуурладаг insertAdjacentHTML, энэ аргын кодыг доор харуулав.

    ли( //z-индекс: илэрхийлэл(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", "-")); }

    CSS шинж чанаруудаар зурсан тэмдэглэгээ

    Зарим дөрвөлжин тэмдэглэгээг зарим CSS шинж чанарыг ашиглан зурж болно. Жишээлбэл, өнгөт дүүргэгчтэй дөрвөлжин нь background-color шинж чанарыг ашиглан зурж, хүрээ хэлбэртэй дөрвөлжин нь border шинж чанарыг ашиглан зурдаг (дашрамд хэлэхэд дүүргэгчтэй дөрвөлжинг ийм аргаар зурж болно) . CSS файл дахь жишээ оруулга:

    ли( //z-индекс: илэрхийлэл(runtimeStyle.zIndex = 1,энэ. innerHTML = "

    " + энэ. innerHTML) /* e6 ба 7-г хакердах */) li: өмнө, . listMarkerBackColor( дэвсгэр өнгө: #539127; өргөн: 7px; өндөр: 7px; агуулга: "" ; хөвөх: зүүн; захын зай: 6px 6px 0 0; халих: далд; ) html . listMarkerBackColor( захын баруун: 1px; /* IE6 дээрх жижиг алдааг засах */ }

    Тиймээс CSS шинж чанаруудаар зурсан тэмдэглэгээ практикт иймэрхүү харагдах болно.

    Өмнөх болон анхны хүүхдийг хослуулан хэрэглэх

    Энэ аргыг вэбсайт дээр талхны үйрмэг үүсгэх үед ихэвчлэн ашигладаг. Бидний юу яриад байгааг мэдэхгүй байгаа хүмүүсийн хувьд доорх жишээг харна уу.

    Энэ тохиолдолд холбоос бүрийг бие биенээсээ тусгай тэмдэгтээр тусгаарлах боловч эхний элементийн өмнө тусгай тэмдэгт байх ёсгүй. Энэ талаар псевдо анги бидэнд туслах болно анхны хүүхэд, энэ нь зөвхөн жагсаалтын эхний элементэд ханддаг. Код дээр энэ нь иймэрхүү харагдах ёстой

    HTML

    < ul> < li>< a href= "#" >гэр < li>< a href= "#" >Блог < li>< a href= "#" >CSS < li>target= "_blank" ашиглах үед хүчинтэй код

    li:өмнө( контент: " \21 92" ; ) li: анхны- хүүхэд: өмнө( агуулга: "" ; )

    Энэ техникийг зөвхөн талхны үйрмэг хийхэд төдийгүй дизайны товчлолоос хамааран ердийн тэмдэглэгдсэн жагсаалтад ашигладаг гэдгийг тэмдэглэх нь зүйтэй.

    Энэ нь ямар хөтөч дээр ажилладаг вэ?

    6.0+ 4.0+ 9.5+ 3.0+ 3.0+ - -

    дүгнэлт

    Дүгнэж хэлэхэд, жагсаалтын загварт тусгай шаардлага байхгүй тул өмнөх псевдо-элементийг ашиглах нь үндсэн агуулгад үндэслэлтэй бөгөөд оновчтой болохыг бид тэмдэглэж болно. Энэ нь эргээд зураг ашиглах үеийн сонголттой харьцуулахад сервер дээрх ачааллыг багасгах болно. Хэрэв та үндсэн агуулга нь маш олон тэмдэглэгдсэн жагсаалт агуулж болохыг анхаарвал ялгаа нь илүү чухал болж магадгүй юм. Гэхдээ зураг нь маркер дизайны шийдлүүдийн хувьд маш их ашиг тустай байдаг.

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

    Стандарт CSS шинж чанаруудыг ашиглаж болно жагсаалтын тэмдэглэгээний харагдах байдлыг өөрчлөх, тэмдэглэгээнд зориулж зураг нэмнэ үү, ба тэмдэглэгээний байршлыг өөрчлөх. Тэмдэглэгээний блокийн өндрийг line-height шинж чанараар тохируулж болно.

    CSS хэв маягийг ашиглан жагсаалт гаргах

    1. Жагсаалтын тэмдэглэгээний төрөл list-style-type

    Үл хөдлөх хөрөнгө нь тэмдэглэгээний төрлийг өөрчилдөг эсвэл тэмдэглэгээг арилганатэмдэглэгдсэн болон дугаарласан жагсаалтын хувьд. Өв залгамжлагдсан.

    жагсаалтын хэв маягийн төрөл
    Утга:
    диск Өгөгдмөл утга. Дүүргэгдсэн тойрог нь жагсаалтын зүйлсийн тэмдэглэгээний үүрэг гүйцэтгэдэг.
    армян Арменийн уламжлалт дугаарлалт.
    тойрог Нээлттэй тойрог нь тэмдэглэгээний үүрэг гүйцэтгэдэг.
    cjk-ideographic Идеографийн дугаарлалт.
    аравтын 1, 2, 3, 4, 5, …
    аравтын тэргүүлэх-тэг 01, 02, 03, 04, 05, …
    гүрж Гүржийн уламжлалт дугаарлалт.
    еврей Уламжлалт еврей дугаарлалт.
    хирагана Япон дугаарлалт: a, i, u, e, o, …
    хирагана-ироха Япон дугаарлалт: i, ro, ha, ni, ho, …
    катакана Япон дугаарлалт: A, I, U, E, O, …
    катакана-ироха Япон дугаарлалт: I, RO, HA, NI, HO, …
    доод альфа a, b, c, d, e, …
    доод Грек Грек цагаан толгойн жижиг үсгүүд.
    доод латин a, b, c, d, e, …
    доод Ром i, ii, iii, iv, v, …
    аль нь ч биш Тэмдэглэгч байхгүй.
    дөрвөлжин Дүүрсэн эсвэл дүүргээгүй квадрат нь тэмдэглэгээний үүрэг гүйцэтгэдэг.
    дээд-альфа A, B, C, D, E, …
    дээд латин A, B, C, D, E, …
    дээд роман I, II, III, IV, V, …
    анхны Үл хөдлөх хөрөнгийн утгыг анхдагч утгад тохируулна.
    өвлөн авах Үндсэн элементээс өмчийн утгыг өвлөнө.

    Синтакс

    Ul (жагсаалтын загварын төрөл: байхгүй;) ul (жагсаалтын загварын төрөл: дөрвөлжин;) ol (жагсаалтын загварын төрөл: аль нь ч биш;) ol (жагсаалтын загварын төрөл: доод альфа;) Цагаан будаа. 1. Сумтай болон дугаарласан жагсаалтыг зохион бүтээх жишээ

    2. Жагсаалтын зүйлд зориулсан зургууд жагсаалт-хэв маягийн дүрс

    Та зураг болон градиент дүүргэлтийг жагсаалтын зүйлийн тэмдэглэгээ болгон ашиглаж болно. Өв залгамжлагдсан.

    Синтакс

    Ul (жагсаалтын хэв маягийн зураг: url("images/romb.png");) ul (жагсаалтын хэв маягийн зураг: шугаман-градиент(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
    Цагаан будаа. 2. Зургийг ашиглан тэмдэглэгдсэн жагсаалт зохиох
    Цагаан будаа. 3. Градиент ашиглан тэмдэглэгдсэн жагсаалтыг зохион байгуул

    3. Жагсаалт маягийн байрлал

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

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

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