CSS төрлүүдийн төрлүүдийг ойлгох

Inline, embedded, гадаад загварын хуудсууд: Та мэдэх хэрэгтэй зүйлээ энд дурдъя

Урд талын вэбсайтыг хөгжүүлэх нь ихэвчлэн 3 хөлтэй сандлын хэлбэртэй байдаг. Эдгээр хөл нь дараах байдалтай байна:

Энэ өтгөний CSS, Cascading Style Sheets хоёр дахь хөл нь өнөөдөр бидний харж байгаа зүйл юм. Тухайлбал, бид документ дээр нэмэх 3 төрлийн хэв маягт хандахыг хүсч байна.

  1. Тойргийн хэв маяг
  2. Embedded стиль
  3. Гадаад стиль

CSS хэлбэрүүд тус бүр нь тэдний ашиг тус, сул талуудтай тул тэдгээрийг тус бүрт нь гүнзгий харцгаая.

Үндсэн загвар

Inline хэлбэрүүд нь HTML баримт бичигт шууд бичигдсэн загвар юм. Шугамын загвар нь зөвхөн тусгайлан зааж өгсөн шошго л нөлөөлдөг. Стандарт холбоосод ашиглах шугамын загварын жишээ юм уу эсвэл зангуу:

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

Шугамын загвар нь маш өндөр өвөрмөц чанартай байдаг.

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

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

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

Embedded Styles

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

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

Үүсгэгдсэн хэв маяг

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

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

Гадаад Style Sheets

Өнөөдөр ихэнх вэбсайтууд гаднах загварын хуудсыг ашигладаг. Гадны загварууд нь тусдаа баримт бичигт байгаа стилиуд бөгөөд дараа нь янз бүрийн вэб баримт бичгүүдэд хавсаргагдана. Гадаад загварын хуудсууд нь хавсаргасан баримт бичгүүдэд нөлөөлж болох бөгөөд энэ нь хэрэв та хуудас бүр нь ижил загварын хуудсыг ашиглаж байгаа 20 хуудастай хуудастай бол (энэ нь ихэвчлэн хэрхэн хийгддэг) танд харагдахуйц өөрчлөлт хийж болно Эдгээр хуудсуудыг зүгээр л тэр хэв маягийн хуудсыг засварлана уу.

Энэ нь урт хугацааны менежментийн ажлыг илүү хялбар болгодог.

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

Гадны CSS файлуудад зориулсан гүйцэтгэлийн хит байдаг нь үнэн боловч энэ нь мэдээж хамгийн бага байх болно. Үнэндээ бол CSS файлууд нь зөвхөн текст файлууд учраас тэд эхлээд эхлүүлэхэд тийм ч том биш байдаг. Хэрэв таны бүх вэбсайт нь 1 CSS файл ашигладаг бол эхлээд дуудагдсаны дараа энэ баримт бичигт хадгалагдаж буй ашиг тусыг олж авна.

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