Агуулга маркетинг

Каскадын загварын хуудас (CSS) гэж юу вэ?

Загварын каскадын хүснэгтүүд хэрхэн ажилладаг талаар бүрэн тайлбарыг доороос уншина уу. Бид програмуудаа хуудасны дээд хэсэгт харуулдаг бөгөөд ингэснээр тэдгээрийг олох, ашиглахад хялбар болно. Хэрэв та энэ нийтлэлийг цахим шуудан эсвэл мэдээллийн хэрэгслээр уншиж байгаа бол холбоос дээр дарна уу CSS-ээ шахаарай.

CSS шахах CSS-ийг задлах Үр дүнг хуулах

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

CSS хэлний бүтэц

The сонгогч нь таны загварчлахыг хүсэж буй HTML элемент бөгөөд үл хөдлөх хөрөнгийн болон үнэ цэнэ тухайн элементэд хэрэглэхийг хүссэн хэв маягаа тодорхойл:

selector {
  property: value;
}

Жишээлбэл, дараах CSS бүгдийг хийх болно <h1> хуудасны элементүүд нь улаан өнгөтэй, фонтын хэмжээ 32px байна:

CSS

h1 {
  color: red;
  font-size: 32px;
}

гаралтын

гарчиг

Та мөн элемент дээрх өвөрмөц ID-д CSS-г зааж өгч болно:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

гаралтын

Танилцуулга

Эсвэл олон элемент дээр ангиа хэрэглээрэй:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

гаралтын

Би хүсч байна тодотгодог span шошгон дахь үг.

Та HTML баримт бичигт CSS-ийг гурван аргаар оруулж болно:

  1. Inline CSS ашиглан style HTML элемент дээрх шинж чанар
  2. a-г ашиглан дотоод CSS <style> дахь элемент <head> таны HTML баримт бичгийн
  3. Таны HTML баримт бичигт холбогдсон тусдаа .css файлыг ашиглан гадаад CSS <link> дахь элемент <head> таны HTML баримт бичгийн

Хариуцлагатай CSS

CSS нь гайхалтай уян хатан бөгөөд дэлгэцийн нягтралд тулгуурлан элементүүдийн дэлгэцийг тохируулахад ашиглаж болох тул та ижил HTML-тэй байж болох ч үүнийг бүтээх боломжтой. хариу төхөөрөмжийн нягтралд:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

CSS шахалт

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

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

SCSS гэж юу вэ?

Sassy CSS (SCSS) нь CSS хэлэнд нэмэлт функц, синтакс нэмдэг CSS-ийн урьдчилсан процессор юм. Энэ нь стандарт CSS-д байхгүй хувьсагч, холимог, функц болон бусад функцуудыг ашиглах боломжийг олгох замаар CSS-ийн чадавхийг өргөтгөдөг.

SCSS-ийн давуу тал

  • Сайжруулсан засвар үйлчилгээ: Хувьсагчдыг ашигласнаар та утгуудыг нэг газар хадгалж, загварын бүх хуудсандаа дахин ашиглах боломжтой бөгөөд ингэснээр загвараа хадгалах, шинэчлэхэд хялбар болгоно.
  • Илүү сайн зохион байгуулалт: Холимогуудын тусламжтайгаар та загварын багцыг бүлэглэж, дахин ашиглах боломжтой бөгөөд ингэснээр загварын хүснэгтээ илүү цэгцтэй, уншихад хялбар болгоно.
  • Нэмэлт ажиллагаа: SCSS нь функцууд, удирдлагын бүтэц (жишээ нь, if/else), арифметик үйлдлүүд гэх мэт стандарт CSS-д байхгүй олон функцуудыг агуулдаг. Энэ нь илүү динамик, илэрхий загвар гаргах боломжийг олгодог.
  • Илүү сайн гүйцэтгэл: SCSS файлуудыг CSS-д хөрвүүлсэн бөгөөд энэ нь хөтчийн задлан шинжлэх шаардлагатай кодын хэмжээг багасгаснаар гүйцэтгэлийг сайжруулдаг.

SCSS-ийн сул талууд

  • Сурах муруй: SCSS нь стандарт CSS-ээс өөр синтакстай бөгөөд та үүнийг үр дүнтэй ашиглахын өмнө энэ шинэ синтаксийг сурах хэрэгтэй болно.
  • Нэмэлт нарийн төвөгтэй байдал: Хэдийгээр SCSS нь таны загварын хүснэгтийг илүү цэгцтэй, засварлахад хялбар болгож чаддаг ч, ялангуяа та шинэ функцууд болон синтаксийг сайн мэдэхгүй байгаа бол таны кодын санд нэмэлт төвөгтэй байдлыг бий болгож чадна.
  • Хэрэгсэл: SCSS ашиглахын тулд танд SCSS кодыг CSS рүү хөрвүүлэх хөрвүүлэгч хэрэгтэй болно. Энэ нь нэмэлт тохиргоо, багаж хэрэгсэл шаарддаг бөгөөд энэ нь зарим хөгжүүлэгчдэд нэвтрэхэд саад болдог.

Доорх жишээнд SCSS код нь утгыг хадгалахын тулд хувьсагчдыг ашигладаг ($primary-color болон $font-size) бүх загварын хүснэгтэд дахин ашиглах боломжтой. Энэхүү SCSS кодоос үүсгэгдсэн CSS код нь ижил төстэй боловч хувьсагчдыг оруулаагүй болно. Харин хувьсагчийн утгыг CSS-д шууд ашигладаг.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

Энэ жишээнд харуулсан SCSS-ийн өөр нэг онцлог нь үүрлэсэн хэв маяг юм. SCSS кодонд, the h1 хэв маяг дотор үүрлэсэн байна body хэв маяг, энэ нь стандарт CSS-д боломжгүй юм. SCSS кодыг эмхэтгэх үед үүрлэсэн хэв маягийг CSS кодын тусдаа загвар болгон өргөжүүлнэ.

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

Douglas Karr

Douglas Karr нь CMO юм OpenINSIGHTS болон үүсгэн байгуулагч Martech Zone. Дуглас олон арван амжилттай MarTech стартапуудад тусалж, Martech-ийн худалдан авалт, хөрөнгө оруулалтад 5 тэрбум гаруй долларын зохих шалгалт хийхэд тусалсан бөгөөд компаниудад борлуулалт, маркетингийн стратегиа хэрэгжүүлэх, автоматжуулахад нь тусалсаар байна. Дуглас бол олон улсад хүлээн зөвшөөрөгдсөн дижитал хувиргалт, MarTech мэргэжилтэн, илтгэгч юм. Дуглас бол Даммигийн гарын авлага, бизнесийн манлайллын номыг хэвлүүлсэн зохиолч юм.

холбоотой зүйл

Дээшээ буцах товч
Хаах

Adblock илэрсэн

Martech Zone Бид зар сурталчилгааны орлого, түншлэлийн холбоос, ивээн тэтгэгчээр дамжуулан сайтаа мөнгөжүүлдэг учраас энэ агуулгыг танд ямар ч үнэгүйгээр өгөх боломжтой. Та манай сайтыг үзэж байхдаа зар хориглогчоо устгавал бид талархах болно.