Гадаад Style Sheet хэрхэн бүтээх

CSS Сайтын өргөнийг ашиглах

Вэбсайтууд нь хэв маяг, бүтцийг хослуулсан бөгөөд өнөөгийн вэбсайт нь сайт дээрх хоёр талыг бие биенээсээ тусад нь байлгах шилдэг арга юм.

HTML нь түүний бүтэцтэй сайтыг ямагт хангадаг байсан юм. Вэбийн эхэн үед HTML нь хэв маягийн мэдээллийг агуулдаг. тагийн элементүүд нь HTML кодоор гажуудуулсан бөгөөд бүтцийн мэдээллийг хамт харах, мэдрэх мэдээллийг нэмдэг. Вэбийн стандарт хөдөлгөөн нь биднийг энэ дасгалыг өөрчлөхөд түлхэж, бүх хэв маягийг CSS эсвэл Cascading Style Sheets-д оруулахад хүргэсэн. Үүнийг цааш үргэлжлүүлэхийн тулд, одоогийн зөвлөмжүүд нь таны вэбсайтын загварын хэрэгцээнд зориулан "гаднах загварын хуудас" гэж нэрлэдэг.

Гадаад загварын хуудсын давуу болон сул талууд

Cascading Style Sheets-ийн хамгийн шилдэг зүйлүүдийн нэг нь та бүхэн сайтаа тогтвортой байлгахын тулд ашиглаж болно. Үүнийг хийх хамгийн хялбар арга бол гаднах загварын хуудсыг холбох эсвэл импортлох явдал юм. Хэрвээ та сайтын хуудас бүрт зориулж ижил загварын хуудсыг ашиглаж байгаа бол бүх хуудсууд ижил хэв маягтай гэдэгт итгэлтэй байж болно. Та мөн ирээдүйд өөрчлөлт хийхэд хялбар болгох боломжтой. Хуудас бүр ижил гадаад хэв маягийн хуудсыг ашигладаг тул тухайн хуудас дахь аливаа өөрчлөлт нь сайтын хуудас бүрт нөлөөлөх болно. Энэ нь хуудас бүрийг дангаар нь өөрчлөхөөс хамаагүй дээр.

Гадаад загварын хуудсын давуу тал

  • Та нэг дор хэд хэдэн баримт бичгийн харагдах байдлыг мэдэрч чадна.
    • Хэрэв та вэбсайтаа үүсгэхийн тулд хүмүүстэй хамтарч ажиллах бол энэ нь ялангуяа ашигтай. Олон загварын дүрмийг санахад хэцүү байж болох бөгөөд хэвлэсэн загварын гарын авлагатай байж болно. Жишээ нь текстийг 12 оноо Arial үсгийн маягт эсвэл 14 цэгээс шуудангаар бичих эсэхийг тодорхойлохын тулд тасралтгүй үргэлжлүүлж байх нь үр ашиггүй, төвөгтэй байдаг. Бүх газрыг нэг дор байрлуулснаар, тэр газар нь өөрчлөлт хийх газраасаа шалтгаалан та засвар хийх боломжтой.
  • Та янз бүрийн HTML элементүүдэд ашиглаж болох загваруудын загвар үүсгэж болно.
    • Хэрвээ та хуудсан дээрх янз бүрийн зүйлийг онцлон тэмдэглэхийн тулд зарим үсгийн загварыг ашигладаг бол энэ загварын төрлөөс хамаарч тодорхой хэв маягийг тодорхойлохын оронд загварын хуудсан дээрээ тохируулсан загварын шинж чанарыг ашиглаж болно. онцлон тэмдэглэв.
  • Та өөрийн стилийг илүү үр ашигтай болгох боломжтой.
    • CSS-д зориулсан бүлэглэх бүх аргыг гадны хэв маягт ашиглаж болох бөгөөд энэ нь танд илүү уян хатан, уян хатан байдлыг хангадаг.

Гадаад загварын хуудсын сул талууд

  • Гадны загварын хуудас нь татаж авах хугацааг ихэсгэдэг, ялангуяа их хэмжээтэй бол нэмэгдэж болно. CSS файл нь ачаалах ёстой тусгайлсан баримтаас болоод татаж авалтыг гүйцэтгэхэд гүйцэтгэлд нөлөөлнө.
  • Хуудас устгагдах үед устгагдахгүй учраас гаднах хэв маяг хуудас нь маш хурдан байдаг тул хэв маяг ашиглагдахаа больсон үед хэлэх нь хэцүү байдаг. Ихэнх хүмүүс ижил файл дээр ажиллаж байгаа бол таны CSS файлуудын зөв зохицуулалт чухал юм.
  • Хэрэв та зөвхөн нэг хуудастай вэбсайттай бол CSS-д зориулж гадаад файлтай байх шаардлагагүй тул зөвхөн нэг хуудсыг хэв маягаар хэвлэ. Зөвхөн нэг хуудастай сайт байвал гадны CSS-ийн олон ашиг тусыг нь алддаг.

Гадаад загварын хуудсыг хэрхэн үүсгэх

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

selector {property: value;}

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

Загварын хуудастай бол түүнийгээ вэб хуудсууддаа холбох хэрэгтэй. Үүнийг хоёр аргаар хийж болно:

  1. Холбоос
    1. Style хуудас холбохын тулд та HTML тагийг ашиглана. Энэ нь attrib rel , type , href байна. Rel attribute нь таны холбож байгаа зүйлээ (энэ тохиолдолд загварын хуудсууд) холбож өгдөг бөгөөд төрөл нь хөтөчийн хувьд MIME-Type-ийг тодорхойлж өгдөг бөгөөд href нь .css файл руу чиглэсэн зам юм.
  2. Импортлох
    1. Та импортлогчийн загварын хуудасыг баримт бичгийн түвшингийн загварын хуудас дотор ашиглахын тулд гадны загварын хуудасны шинж чанарыг импортлох боломжтой. Холбоотой загварын хуудсыг дуудахтай ижил аргаар дууддаг. Үүнийг зөвхөн баримт бичгийн түвшний загварын мэдэгдэл дотор дуудах ёстой. Вэбсайтаа хадгалахын тулд гадны загварын хуудсуудыг оруулж болно.

Женнифер Кэрнин эх нийтлэл. 8/8/17 дээр Жереми Герард засварлав