Cascading Style Sheet (CSS) нь вэбсайтын кодчиллын систем бөгөөд дизайнеруудад тодорхой элементүүдийг бүлэгт хуваарилах замаар хэд хэдэн функцийг нэгэн зэрэг удирдах боломжийг олгодог. Жишээлбэл, вэбсайтын дэвсгэрийн кодыг ашигласнаар дизайнерууд вэбсайтын бүх хуудсан дээрх дэвсгэр өнгө эсвэл зургийг CSS файлд нэг өөрчлөлт оруулах замаар өөрчлөх боломжтой. Үндсэн вэбсайтад зориулж CSS хэрхэн үүсгэх талаар эндээс үзнэ үү.
Алхам
4 -ийн 1 -р хэсэг: Inline CSS бичих
Алхам 1. HTML хаягийн талаархи үндсэн ойлголттой байгаа эсэхээ шалгаарай
Та хаягууд хэрхэн ажилладаг, мөн хэрхэн ажилладагийг мэдэх ёстой
src
ба
href
шинж чанарууд.
Алхам 2. CSS -ийн зарим үндсэн шинж чанаруудтай танилцана уу
Маш олон үл хөдлөх хөрөнгө байгааг та олж мэдэх болно. Гэсэн хэдий ч тэдгээрийг бүгдийг нь сурах шаардлагагүй юм.
-
CSS -ийн зарим сайн шинж чанаруудыг мэдэх хэрэгтэй
өнгө
ба
фонтын гэр бүл
- .
Алхам 3. Тухайн өмч бүрийн үнэ цэнийн талаар олж мэдэх
Бүх үл хөдлөх хөрөнгөд үнэ цэнэ хэрэгтэй. Учир нь
өнгө
үл хөдлөх хөрөнгө, жишээ нь, та үүнийг тавьж болно
улаан
үнэ цэнэ.
Алхам 4.
хэв маяг
HTML шинж чанар.
Гэх мэт элемент дотор ашиглагддаг
href
эсвэл
src
. Үүнийг ашиглахын тулд тэгшитгэлийн тэмдгийн дараа ишлэл дотор CSS шинж чанар, хоёр цэг, дараа нь өмчийн үнэ цэнийг оруулна уу. Үүнийг CSS дүрэм гэж нэрлэдэг.
Алхам 5. Шугаман CSS -ийг мэргэжлийн вэб хөгжүүлэгчид вэбсайтад ихэвчлэн ашигладаггүй гэдгийг ойлгох хэрэгтэй
Шугаман CSS нь HTML баримт бичигт шаардлагагүй эмх замбараагүй байдлыг нэмж болно. Гэсэн хэдий ч энэ нь CSS хэрхэн ажилладаг талаар танилцуулах сайхан арга юм.
4 -ийн 2 -р хэсэг: Үндсэн CSS бичих
Алхам 1. Ашиглахыг хүсч буй програмаа ажиллуулна уу
Энэ нь танд HTML болон CSS файл үүсгэх боломжийг олгох ёстой.
Хэрэв танд тусгай програм суулгаагүй бол Notepad эсвэл өөр текст засварлагч ашиглаж болно. Файлаа текст болон CSS файл хэлбэрээр хадгалах нь хангалттай
Алхам 2. Өөрийн вэбсайтын HTML файлыг нээнэ үү
Хэрэв та үүнийг суулгасан бол үүнийг HTML засварлагчаар нээх хэрэгтэй.
HTML засварлагчид нь HTML болон CSS -ийг нэгэн зэрэг засварлах боломжийг олгодог
Алхам 3. HTML толгой дотроо шошго үүсгээрэй
Энэ нь танд тусдаа файл шаардлагагүй CSS бичих боломжийг олгоно.
Алхам 4. Загвар оруулахыг хүссэн элементээ сонгоод элементийн нэрийг бичээд дараа нь буржгар хаалт ({}) оруулна уу
Кодыг илүү ойлгомжтой болгохын тулд хоёр дахь буржгар бэхэлгээг үргэлж өөрийн мөрөнд тавь.
Алхам 5. Хаалтны хооронд CSS дүрмүүдээ ашиглан бичсэн шиг бичнэ үү
хэв маяг
шинж чанар.
Мөр бүр цэг таслалаар төгсөх ёстой (;). Таны кодыг ойлгомжтой болгохын тулд дүрэм бүр өөрийн мөрөөс эхэлж, мөр бүр догол мөртэй байх ёстой.
Энэхүү загвар нь хуудасны сонгосон хэлбэрийн бүх элементүүдэд нөлөөлөх болно гэдгийг анхаарах нь маш чухал юм. Илүү тодорхой сарлагийн саваг дараагийн хэсэгт авч үзэх болно
4 -ийн 3 -р хэсэг: Илүү дэвшилтэт CSS
Алхам 1. HTML файл биш CSS файл үүсгээд түүнийг ашиглан хадгална уу
.css
өргөтгөл.
Мөн HTML файлаа нээнэ үү.
Алхам 2. HTML толгой дээрээ таг үүсгээрэй
Энэ нь тусдаа CSS файлыг HTML баримт бичигтэйгээ холбох боломжийг танд олгоно. Таны холбоосын шошго гурван шинж чанарыг шаарддаг:
rel
төрөл
ба
href
-
rel
гэдэг нь "харилцаа" гэсэн утгатай бөгөөд HTML баримт бичигтэй ямар холбоотой болохыг хөтөчид хэлдэг. Энд энэ нь утгатай байх ёстой
"загварын хуудас"
- .
-
төрөл
ямар төрлийн мэдээллийн хэрэгсэлтэй холбогдож байгааг хэлж өгдөг. Энд энэ нь үнэ цэнэтэй байх ёстой
"текст/css"
-
href
- энд үүнийг элементэд хэрхэн ашигладагтай адил ашигладаг боловч энд CSS файлтай холбох ёстой. Хэрэв CSS файл нь HTML файлтай ижил хавтсанд байрласан бол зөвхөн файлын нэрийг ишлэл дотор бичих шаардлагатай.
Алхам 3. Ижил хэв маягийг нэмж оруулахыг хүссэн төрөл бүрийн элементүүдийг сонгоно уу
Нэмэх
анги
Эдгээр элементүүдийг тодорхойлж, тэдгээрийг сонгосон ангийн нэртэй тэнцүү болгоно уу. Энэ нь таны элементүүдэд ижил загвар өгөх болно.
Алхам 4. Анги ямар загвар авахыг оноох
Ангиллын нэрийг CSS файлдаа өмнө нь цэг (.) Оруулна уу.
анги
).
Алхам 5. Тусгай сарлагийн саваг нэмж оруулахыг хүссэн ганц элементээ сонгоод a нэмнэ үү
id
шинж чанар.
Id -ийг CSS дээр цэг биш харин фунт тэмдэг (#) ашиглан бүтээдэг.
Id нь ангиас илүү онцлог шинж чанартай тул id нь ангиас өөр утгатай атрибуттай бол ямар ч ангийн загварыг дарах болно
4 -р хэсгийн 4: Илүү ихийг сурах
Алхам 1. w3 сургуулиудтай танилцана уу
Энэ бол вэб хөгжүүлэх ур чадварыг заах зорилготой албан ёсны вэбсайт юм. W3 нь HTML, CSS болон бусад вэб хэл дээр жагсаасан олон лавлагаа байдаг.
Алхам 2. HTML болон CSS -ийг сурах, заахад зориулагдсан бусад сайтуудыг хайж олох
CSS tricks.com гэх мэт сайтууд нь CSS болон вэб дизайны ур чадварыг заахад зориулагдсан болно. Нэр хүндтэй эх сурвалж хайх нь суралцах аялалд тань туслах болно.
Алхам 3. Вэб дизайнер, хөгжүүлэгчидтэй холбоо бариарай
Тэдний туршлага, мэдлэг нь танд үнэ цэнэтэй мэдлэг, ур чадварыг зааж чадна.
Алхам 4. Танд тааралдсан вэбсайтуудын эх кодыг харах
Сайн хөгжсөн вэбсайтуудын CSS-ийг үзэх нь вэбсайтын зарим хэсгийг хэрхэн яаж зохиох арга замыг танд харуулах болно. Үүнийг дадлага болгон хуулбарлаж, кодыг хуурч тоглох нь CSS -ийн янз бүрийн шинж чанаруудыг хэрхэн ашиглах талаар сурахад тусална.
