CSS List,Table,Form

CSS List

List

list-style-type

list-style=type property нь жагсаалтын өмнөх цэгийн загварыг хянах боломжийг олгодог.

Unordered List

Unordered list буюу ul tag-д авч болох утгууд:

  • None
  • disc
  • circle
  • square
Ordered List

Ordered list буюу ol tag-д авч болох утгууд:

  1. decimal
  2. decimal-leading-zero
  3. lower-alpha
  4. upper-alpha
  5. lower-roman
  6. upper-roman

list-style-image

list-style-image property нь жагсаалтын өмнөх цэгүүдийн оронд зураг оруулдаг.

Үүний утга нь url-ээр эхлэх бөгөөд араас нь дугуй хаалтанд тухайн зураг руу хүрэх замыг double quotes ("...") дотор зааж өгнө.

Энэ property-г ul, li элементүүд дээр авах боломжтой.

example

List Shorthand

Бусад CSS property-нуудын нэгэн адил list style-ийн товчлолын үүрэг гүйцэтгэдэг propertie байдаг. Үүнийг list-style гэж нэрлэдэг бөгөөд энэ нь list-ийн хэв маяг, зураг, байршлын шинж чанарыг дурын дарааллаар илэрхийлэх боломжийг олгодог.

CSS table

Table

Table Properties

Бид өмнө нь хүснэгт дээр түгээмэл хэрэглэгддэг property-нуудтай танилцсан. Одоо харин тэдгээрийг бүгдийг нь нэг жишээн дээр нэгтгэж ашиглацгаая.

  • width
    Хүснэгтийн өргөнийг заана
  • padding
    Хүснэгтийн нүд бүрийн хүрээний хооронд зай авах
  • text-transform
    Хүснэгтийн толгой дахь текстийг том үсэг рүү хөрвүүлэх
  • letter-spacing, font-size
    Хүснэгтийн толгой дахь текстэд загвар нэмдэг.
  • border-top, border-bottom
    Хүснэгтийн толгойд хүрээ нэмдэг
  • text-align
    Хүснэгтийн нэд дэх зарим текстийг зүүн заримыг нь баруун тал руу шахдаг.
  • background-color
    Хүснэгтийн мөрний дэвсгэр өнгийг өөрчилдөг.
  • :hover
    Хэрэглэгч mouse-аа хүснэгтийн нүд дээгүүр явуулах үед тухайн нүдийг тодруулдаг.
example
Хоосон нүдний хүрээ (Border on Empty Cells)

Empty Cells

Хэрэв таны хүснэгтэд хоосон нүд байгаа бол empty-cells property ашиглаж хил хязгаарыг нь тодорхойлох боломжтой.

    • show
      Нүд хоосон байсан ч хүрээтэй харагдуулна.
    • hide
      Хоосон нүдийг хүрээгүй болгоно.
    • inherit
      Хэрэв нэг хүснэгт дотор давхар хүснэгт байгаа бол *inherit* утгыг ашиглаж гаднах хүснэгт дээр авч буй утгыг уламжлуулж болно.

example

Нүднүүдийн хоорондын зай
(Gaps Between Cells)

border-spacing property нь зэрэгцээ нүднүүдийн хоорондын зайг зааж өгдөг. Мөн хэвтээ болон босоо тэнхлэгийн зайг өөр өөрөөр өгч болно.

Хүснэгтийн нүднүүдэд хүрээ өгсөн үед зэрэгцээ нүднүүдийн хүрээ нийлж илүү өргөн болж харагддаг. Үүнээс сэргийлэхийн тулд border-collapse property-г хэрэглэнэ:

    • collapse
      Нийлсэн хүрээнүүдийг нэгтгэж нэг юм шиг болгоно. Үүнийг ашигласан үед *border-spacing*, *empty-cells* property хүчингүй болдог.
    • separate
      Хүрээнүүд нэг нэгнээсээ салангид болдог. Үүнийг ашигласан үед *border-spacing*, *empty-cells* property хүчинтэй байна.

CSS form

Form

Формыг загварчлах (Styling Forms)

Хүмүүс форм бөглөхдөө тийм ч тааламжтай байдаггүй. Хэрэв та өөрийн формыг илүү нүдэнд дулаахан, харахад таатай болгож загварчилвал хүмүүс түүнийг дуртайяа бөглөнө. Browser-ууд дээр өөр өөр харагдах тохиолдол байдаг:

CSS ашиглан формын дизайныг өөрчлөх нь илүү гоё бас өөр өөр browser-ууд дээр нийцтэй харагдахад тусладаг.

Styling Text Inputs
  • font-size
    Хэрэглэгчийн оруулсан теĸстийн хэмжээ
  • color, background-color
    Теĸстийн өнгө болон input-ийн дэвсгэр өнгө
  • border
    Input-д хүрээ оруулна.
  • border-radius
    нь хүрээний буланг дугуйруулна.
  • :focus
    Хэрэглэгч input дээр бичих үед харагдах байдал
  • :hover
    Хэрэглэгч input дээгүүр mouse-аа аваачих үед харагдах байдал
  • background-image
    Хайрцагт дэвсгэр зураг нэмнэ
Styling submit bottoms
  • color
    Товчлуур дээрх теĸстийн өнгийг өөрчилнө.
  • text-shadow
    Теĸстийг 3D юм шиг харагдуулах сүүдэр нэмнэ.
  • border-bottom
    Товчлуурын доод хэсэгт хүрээ нэмж илүү зузаан харагдуулах замаар 3D юм шиг болгодог.
  • background-color
    Илгээх товчийг хуудас дээрх бусад элементээс ялгаруулна. Товчлуур бүрийг ижил өнгөтэй болговол хэрэглэгч үүнтэй харьцахад илүү хялбар, ойлгомжтой болно.
  • :hover
    Товч дээр mouse очих үед харагдах загвар

Styling Fieldsets & Legends

Fieldset нь хүрээ үүсгэж ялангуяа урт формын эхлэл төгсгөлийг танихад тусладаг.
Legend (тэмдэглэгээ) нь тухайн fieldset-д ямар мэдээлэл шаардлагатайг зааж өгдөг.

Aligning Form Controls: Problem

Input-үүдийн label бүр нь өөр өөр урттай байгаагаас болж input-үүд нэг шугаманд харагддаггүй.

Дooрх жишээнээс харвал хэсэг бүрийг нь шинэ мөрөнд оруулахын тулд гадуур нь div элемент-д оруулсан байна.

Aligning Form Controls: Solution

Элементүүдэд өргөн өгснөөр label-үүд ижил өргөнтэй болж input-үүдийг нэг шугаманд оруулах боломжтой болсон байна.

Cursor style

cursor property нь mouse-ны төрлийг өөрчилөх боломжийг танд олгоно.

Дooрх orange text-нь дээгүүр hover хийн mouse-aa ажиглана уу!

alias

auto

cell

col-resize

context-menu

copy

default

ew-resize

grabbing

help

no-drop

css-list table form

summary

  • Бүх элементийн агуулгатай ажилладаг бусад бүлгүүдэд хамаарах CSS шинж чанаруудаас гадна жагсаалт, хүснэгт, маягтуудын харагдах байдлыг хянахад тусгайлан ашигладаг хэд хэдэн бусад property-нууд байдаг.
  • List-style-type-ийн болон list-style image property-ыг ашиглан жагсаалтын тэмдэглэгээг өөр өөр дүр төрхөөр өгч болно.
  • Хүснэгтийн нүднүүд өөр өөр browser-ууд дээр өөр өөр хүрээ, зайтай байж болох ч тэдгээрийг хянаж, илүү тогтвортой болгохын тулд ашиглаж болох property-нууд байдаг.
  • Хэрэв маягтын удирдлагыг CSS ашиглан босоо байдлаар байрлуулбал маягтуудыг ашиглахад хялбар болно.