Сайн байцгаана уу Бизнесийн анатоми төслийн эрхэм уншигчид. Вэбмастер Александр тантай хамт байна! Сүүлийн өгүүллээр бид CSS-ийн хэв маяг гэж юу болох, ВЭБ програмчлалд хэр чухал болохыг авч үзсэн.

Хэрэв CSS хэв маяг нь HTML файлын дэлгэцэнд чухал нөлөө үзүүлдэг бол тэдгээр нь ямар нэгэн байдлаар холбогдсон байх ёстой нь ойлгомжтой. Өнөөдөр бид CSS стилийг HTML-тэй холбох дөрвөн үндсэн аргыг авч үзэх болно.

Асуудлыг хойшлуулж болохгүй урт хайрцагтэгээд эхэлцгээе!

Тусдаа CSS файлыг орууллаа!

Хамгийн тохиромжтой ба энгийн аргуудстиль холбох нь тусдаа файлыг загвартай холбох явдал юм. Үүнийг хийхийн тулд та текст засварлагч notepad++ (эсвэл өөр дурын) ашиглан .css өргөтгөлтэй файл үүсгэж, бидний байрлуулахыг хүссэн файлтай нэг хавтсанд байрлуулах хэрэгтэй.

Дараа нь HTML файлд хаягуудын хооронд дараах кодыг оруулна уу:

Одоо энэ бүхэн юу гэсэн үг болохыг харцгаая:

Англи хэлнээс орчуулсан холбоос # нь "холбоос" гэсэн утгатай. Ингэснээр бид хөтөч дээр дараагийн ярих зүйл бол холбоос гэдгийг харуулж байна. rel= # энэ атрибутаар бид CSS файл нь HTML файлтай хэрхэн холбогдож байгааг харуулдаг. "загварын хуудас" # өөрөөр хэлбэл CSS файл нь шаталсан загварын хуудас юм. type="text/css" # энд бүх зүйл энгийн: энэ нь файл нь текст хэлбэрээр бичигдсэн бөгөөд .css href="style.css" өргөтгөлтэй болохыг харуулж байна # энэ нь CSS загвартай файлын холбоос юм.

Миний бодлоор энэ бол CSS хэв маягийг оруулах хамгийн тохиромжтой арга юм.

Бид HTML файлд хэв маягийг шууд бичдэг (эхний арга)

CSS-ийн хэв маягийг тодорхойлох дараагийн арга бол тэдгээрийг HTML баримт бичигт шууд бичих явдал юм. Энэ нь дараах байдалтай харагдаж байна.

Хэрэв бид энэ HTML баримт бичгийг хөтөч дээр хэрхэн харуулахыг харвал хаягуудын хоорондох текст байгааг харах болно улаан болсон. Загварын шинж чанарыг ашиглан бид дараа нь дэлгэцийн загварын параметрүүдтэй болно гэж хэлдэг. Өнгөөнгө хариуцсан сонгогч юм. Улааннь энэ сонгогчийн утга юм. Ийм байдлаар бид текстийн тодорхой хэсгийг тодорхой төрлийн дэлгэцээр тодруулж болно.

HTML дотор шаталсан загварын хүснэгтүүдийг байрлуулах (хоёр дахь арга)

CSS-ийн хэв маягийг оруулах өөр нэг арга бол HTML файл дотор шаталсан хүснэгтүүдийг байрлуулах явдал юм. Миний бодлоор энэ арга нь хамгийн тохиромжтой биш, учир нь үүнийг ашиглах нь сайтын кодыг шинжлэх нь тийм ч тохиромжтой биш юм. CSS хэв маягийг бичиж эхлэхийн тулд та HTML файлд шошго оруулахад л хангалттай . Практикт энэ нь дараах байдалтай харагдаж байна.

Жишээ нь: HTML баримт бичигт CSS хэв маягийг харуулах

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

Олон CSS файлуудыг нэг HTML баримт бичигт холбох.

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

Бид CSS загвартай хэд хэдэн файл үүсгэдэг. Тэдний нэрийг style-1.css, style-2.css гэж нэрлэнэ үү. Бид үүнийг нэгдүгээр аргын адил HTML файлтай нэг хавтсанд байрлуулна.

Жишээ нь: HTML баримт бичигт CSS хэв маягийг харуулах

Бүх зүйл эхний аргатай төстэй, зөвхөн энэ тохиолдолд бид хоёр файлын холбоосыг нэг дор зааж өгдөг.

Доторх CSS файлыг ижил төрлийн файл руу холбоно уу.

Дээрх бүх аргуудаас гадна нэг CSS файл дотор бусад олон хүмүүсийн холбоосыг байрлуулах боломжийг олгодог арга байдаг!

Үүнийг дараах байдлаар хэрэгжүүлнэ.
Нэгдүгээрт, бид дор хаяж нэг CSS файлыг таны кодтой ижил аргаар холбох хэрэгтэй.

Хоёрдугаарт, аль хэдийн холбогдсон файлд дараах кодыг оруулна уу:

@import url("style-2.css");

Энэ мөр нь манай файлтай холбогддог нэмэлт файл CSS. Хэрэв танд CSS-ийг холбоход бэрхшээлтэй байгаа бол та тэднээс тайлбар дээр асууж болно.
Өмнөх хоёр хичээлээс бидний мэдэж байгаагаар CSS технологи нь вэбмастер бүрийн эзэмших ёстой хүчирхэг хэрэгсэл юм! Материалыг шингээх чадварыг сайжруулахын тулд би хичээл бүрийн төгсгөлд хүлээн авсан мэдээллийг нэгтгэхийн тулд сургалтын видео + тест нэмэхээр шийдсэн.

Материалын бэхэлгээний туршилт:

Бид HTML файлд CSS файлын холбоосыг байрлуулж оруулах хэрэгтэй. Дараах аргуудын аль нь зөв бэ?

Сонголт 1:

Сонголт 2:

Сонголт 3:

Сонголт 4:

Бид HTML файлд CSS каскадыг шууд байрлуулж болох уу?

CSS = Загвар ба өнгө

Текстийг удирдах

Өнгө, хайрцаг

HTML-г CSS ашиглан загварчлах

CSSЭнэ нь Cascading Style Sheets гэсэн үгийн товчлол юм.

CSS тайлбарлав HTML элементүүдийг дэлгэц, цаас эсвэл бусад зөөвөрлөгч дээр хэрхэн харуулах ёстой X.

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

CSS-г нэмж болно HTML элементүүдгурван аргаар:

• Баригдсан- HTML элементүүд дээр Style шинж чанарыг ашиглах
• Дотоод- ашиглах замаар
  
  

  Энэ бол гарчиг юм

  
  

  Энэ бол догол мөр юм.

  
  

  Гадаад CSS

  Гадаад загварын хуудсыг олон HTML хуудасны хэв маягийг тодорхойлоход ашигладаг.

  Та гадаад загварын хуудсыг ашиглан өөрчилж болно гадаад төрхНэг файлыг өөрчлөх замаар бүх вэб сайт!

  Гадаад загварын хуудсыг ашиглахын тулд хэсэг дэх холбоосыг нэмнэ үү HTML хуудаснууд:

  Жишээ

  
  
  
  
  
  

  Энэ бол гарчиг юм

  
  

  Энэ бол догол мөр юм.

  
  

  Гадаад загварын хуудсыг ямар ч хэлбэрээр бичиж болно текст засварлагч. Файл нь HTML код агуулаагүй бөгөөд өргөтгөлтэй хадгалагдах ёстой. CSS.

  "styles.css" нь дараах байдалтай байна.

  бие (
  дэвсгэр өнгө: нунтаг цэнхэр;
  }
  h1 (
  өнгө: цэнхэр;
  }
  p(
  өнгө: улаан;
  }

  CSS фонтууд

  CSS өнгөний шинж чанар нь ашиглах текстийн өнгийг тодорхойлдог.

  CSS font-family шинж чанар нь ашиглах фонтыг тодорхойлдог.

  CSS font-size шинж чанар нь ашиглах текстийн хэмжээг тодорхойлдог.

  Жишээ

  
  
  
  
  
  

  Энэ бол гарчиг юм

  
  

  Энэ бол догол мөр юм.

  
  

  Хилийн CSS

  CSS border шинж чанар нь HTML элементийн эргэн тойрон дахь хүрээг тодорхойлдог:

  Жишээ

  p(
  }
  

  CSS дэвсгэр

  CSS padding шинж чанар нь текст болон хүрээ хоорондын зайг (зай) тодорхойлдог.

  Жишээ

  p(
  хил: 1px хатуу нунтаг хөх;
  дүүргэх: 30px;
  }

  Зохиогчоос:Сайн байна уу, webformself порталын эрхэм уншигчид. Вэбсайт боловсруулахад вэб нөөцийн дизайн маш чухал байдаг. Үүнийг CSS хэл (cascading style sheets) хариуцдаг бөгөөд бид өнөөдөр ярих болно. Өөрөөр хэлбэл, түүний холболт, ашиглалтын талаар. Вэб хуудасны дизайн хийхэд ашигладаг сайтын зарим CSS загваруудыг харцгаая.

  Css-г холбож байна

  Өнөөдөр та хэнээс ч дангаар нь бүтээсэн вэб хуудсыг бараг олохгүй html функцууд. Үнэн хэрэгтээ ийм сайтуудын дүр төрх нь үнэхээр аймшигтай байх болно, тиймээс шаардлагатай элементүүдийн тэмдэглэгээ бэлэн болмогц тэдгээрийг нэн даруй төлөвлөх шаардлагатай бөгөөд үүнийг ашиглан хийдэг. css ашигланВ тусдаа файл.

  Ерөнхийдөө html файлд хэв маягийг оруулах боломж бас байдаг гэдгийг хэлэх ёстой. Жишээлбэл, тэдгээрийг загварын шинж чанар эсвэл ижил шошго ашиглан тодорхойлж болно. Үүнийг inline styles гэж нэрлэдэг. Энэ хандлага нь өнөөдөр таатай биш бөгөөд орчин үеийн хөгжлийн стандартыг зөрчиж байна.

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

  < link rel = "stylesheet" type = "text/css" href = "style.css" >

  Та аль хэдийн ойлгосон шиг шошго нь ганц бие байна. Би түүний шинж чанаруудын талаар бага зэрэг хэлье:

  rel = "загварын хуудас" - ерөнхийдөө rel шинж чанарыг тухайн хуудсан дээрх файлын үүргийг тодорхойлох зорилгоор бичдэг. Манай тохиолдолд дүр нь загварын хуудас бөгөөд үүнийг зааж өгсөн болно.

  type = "text/css" - MIME төрөл гэж нэрлэгддэг бөгөөд энэ нь ихэвчлэн бүх файлд заасан байдаг бөгөөд ингэснээр хөтөч тэдгээрийг зөв тайлбарлах болно. Орчин үеийн вэб хөтчүүдэд энэ шинж чанарыг орхигдуулж болно.

  href = “style.css” нь манай хаягийг заадаг стандарт шинж чанар юм гадаад файл. Энэ тохиолдолд файл нь нэрний хэв маяг, css өргөтгөлтэй, html баримттай нэг хавтсанд байрлаж байгааг үндэслэн бичнэ.

  Таны харж байгаагаар css файлуудыг холбоход зөвхөн href шинж чанар өөрчлөгдөх болно. Та аль болох олон загварын хуудастай холбогдож болно, гэхдээ 2-4-өөс илүүгүй нь оновчтой гэж тооцогддог, учир нь серверт хэт олон хүсэлт тавих нь тийм ч сайн биш юм.

  Би сайтад зориулсан бэлэн CSS загварыг хаанаас авах вэ?

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

  

  Жишээлбэл, Интернет дээр маш олон үнэгүй HTML загварууд байдаг. Хэрэв та тэдгээрийн аль нэгийг нь татаж авбал дотор нь вэбсайтын дизайн хийхэд шаардлагатай дүрэм журам бүхий бэлэн загварын хуудас байх болно. Гэхдээ энэ нь зөвхөн өөрийн html баримт бичигт зөв ажиллах болно. Үнэн хэрэгтээ эдгээр хоёр хэл нь сонгогч гэж нэрлэгддэг хэлээр холбогдсон байдаг.

  Сонгогч нь CSS хэлний өвөрмөц шинж чанар юм. Тэд яагаад хэрэгтэй вэ? За, энэ кодыг төсөөлөөд үз дээ:

  Толгойн текст

  Догол мөр дэх текст

  Жишээлбэл, бид CSS дээр догол мөр, гарчгийг хэрхэн зохион бүтээх вэ? Ийм учраас зөвхөн шаардлагатай элементүүдэд хандахын тулд сонгогчдыг бий болгодог. Жишээ нь:

  p( үсгийн хэмжээ: 12px; ) .title( үсгийн хэмжээ: 36px; )

  үсгийн хэмжээ: 12px; Гарчиг ( үсгийн хэмжээ: 36px;

  Бид бүх догол мөрийн үсгийн хэмжээг 12 пиксел болгон тохируулсан бөгөөд гарчгийн ангилалтай элементүүд (манай тохиолдолд h1) 36 пикселийн илүү том үсгийн хэмжээг авсан. Догол мөрийн хувьд хуудасны тоо хэд байгаагаас үл хамааран хэв маяг нь бүгдэд нь хамаарна гэдгийг анхаарна уу.

  Хоёр дахь сонгогч нь зөвхөн нэг элементийг хаягласан - гарчгийн ангитай. Мэдээжийн хэрэг, бид яг ижил ангитай бусад элементүүдийг үүсгэж болно, үүнийг хориглоогүй бөгөөд тэд ижил дүрмийг хүлээн авах болно, гэхдээ хэрэв бид зүгээр л бичвэл html шошго h1 (гарчгийн анги байхгүй) дараа нь түүнд ямар ч дүрэм нэмэгдэхгүй.

  Энэхүү тохиромжтой арга нь CSS-д хэрэгтэй элементүүдийг сонгож, шаардлагагүй элементүүдийг ганцаараа үлдээх боломжийг олгодог. Энэ юутай холбоотой вэ бэлэн загваруудИнтернетээс олж болох уу? Тэнд байгаа бүх зүйл тодорхой анги, танигчтай холбоотой тул та эдгээр хүснэгтүүдийг ямар ч файлд хялбархан холбож чадахгүй, хэрэв шаардлагатай элементүүд html-д тохирох анги байхгүй бол тэдгээр нь ажиллахгүй;

  Жишээлбэл, загварын хүснэгтэд бид дараах кодыг харж байна.

  Nav( өргөн: 300px; дэвсгэр: aqua; ... ) .nav a( дэлгэц: блок; өнгө: #ccc; ... )

  Нав ( өргөн: 300px;

  Зөвхөн эндээс л бид манай html хуудасны хаа нэгтээ nav класс бүхий элемент байх ёстой бөгөөд энэ нь холбоос агуулсан байх ёстой гэж дүгнэж болно. Хэрэв энэ нь үнэн бол загвар нь тэдэнд хэрэглэгдэж, гадаад төрх нь өөрчлөгдөнө. Хэрэв ийм элемент илрээгүй бол кодыг үл тоомсорлох болно.

  Дахин хэлэхэд, Интернет дээр та энэ ангийн харилцааг харах боломжтой маш олон бэлэн загваруудыг олох боломжтой тул хэрэв та html дээр ямар нэг зүйлийг өөрчлөх юм бол загварын хүснэгтэд холбогдох үйлдлүүдийг хийх ёстой.

  Вэбсайтынхаа CSS загварыг хэрхэн өөрөө хийх вэ?

  Css бол аймшигтай эсвэл маш хэцүү зүйл биш юм. Энэ бол хүмүүсийн вэб хуудас зохиоход зориулагдсан нийтлэг технологи бөгөөд өөрийн гэсэн дүрэмтэй. Тэдгээрийг ойлгоход хангалттай бөгөөд та энэ хэлийг ашиглан вэб нөөцийн дүр төрхийг бий болгох боломжтой болно.

  

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

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

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

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

  Вэбсайтыг үзэсгэлэнтэй, загварлаг болгохын тулд CSS файлтай ажиллах хэрэгтэй гэдгийг бид аль хэдийн мэддэг болсон. Мөн бидний хэв маягийг ашиглахын тулд бид HTML файл болон CSS файлыг нэгтгэх хэрэгтэй.

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

  Өнөөдөр бид сүүлчийн аргын талаар ярих болно.

  HTML таг руу хэв маяг оруулах

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

  Жишээлбэл, тохируулъя өөр өөр хэмжээтэйтекстийн хоёр өөр догол мөрний фонт:

  < p style= "font-size:25px;" >Энэ текстийг 25 пикселийн үсгийн өндөрт тохируулна уу. < p style= "фонтын хэмжээ:15px; өнгө:#2400ff;"> Мөн энэ бичвэр нь 15 пикселийн өндөртэй үсэгтэй байх бөгөөд хэд хэдэн хэв маягийг нэгэн зэрэг ашиглахыг харуулахын тулд бид үүнийг цэнхэр өнгөөр ​​будна.

  Алдаа дутагдал

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

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

  Мөн их хэмжээний текстийг форматлахад хэцүү байх болно. Догол мөр бүрт үсгийн хэмжээг зааж өгөх, ялангуяа ийм 40 догол мөр байгаа бол хэн ч баярлахгүй гэж би бодож байна.

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

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

  Тодорхой болгохын тулд доорх жишээг харцгаая.

  < div style= "font-family: "Roboto Condensed", sans-serif"> Бичлэг зөв байна. < div style= "font-family: "Roboto Condensed", sans-serif"> Энэ ч бас зөв. < div style= "font-family: " Roboto Condensed ", sans-serif" >Энэ бол зөв оруулга биш юм. < div style= "font-family: " Roboto Condensed ", sans-serif" >Мөн энэ нь бас үнэн биш юм

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

  Inline хэв маягийг хэзээ ашиглах вэ

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

  < div id= "productRate" > < div style= "width: 40%" >

  Энэ блокийн шаардлагатай өргөнийг бүртгэх нь энгийн ажиллагаа байх болно.

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

  < div style= "background:url(fon.jpg)" >

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

  < div class = "element" style= "display:block" >Одоогоор зохиогдож байгаа попап цонх

  Доод шугам

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

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

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

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

  Жишээ 1. Гадаад хэв маягийг холбох

  Гарчиг

  rel шинж чанарын утга үргэлж загварын хуудас байх бөгөөд өөрчлөгдөөгүй хэвээр байна. href утга нь CSS файлын зам юм; замыг харьцангуй эсвэл үнэмлэхүй гэж зааж өгч болно. Ингэснээр та өөр сайт дээр байрлах загварын хуудсыг холбож болно гэдгийг анхаарна уу. Дээрх жишээнд бид Google Fonts вэбсайтаас кирилл үсгийн хавчыг холбосон.

  style.css файлын агуулгыг 2-р жишээнд үзүүлэв.

  Жишээ 2: style.css файлын агуулга

  H1 (фонт-гэр бүл: "Лобстер", курсив; өнгө: ногоон; )

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

  Дотоод загварын хуудас

  Загваруудыг HTML баримт бичигт өөрөө, элемент дотор бичдэг.

  Гарчиг

  Энэ жишээнд элементийн хэв маягийг тохируулсан байна

  , дараа нь тухайн вэб хуудсанд ашиглах боломжтой (Зураг 1). Бид аюулгүй нэгтгэж чадна гэдгийг анхаарна уу хамт

  Гарчиг 1

  Гарчиг 2

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

  Гарчиг 1

  Гарчиг 2

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

  Facebook

  Twitter

  ВКонтакте

  Google+
  Үйл ажиллагаа