CSS yaratishning 4 usuli

Mundarija:

CSS yaratishning 4 usuli
CSS yaratishning 4 usuli

Video: CSS yaratishning 4 usuli

Video: CSS yaratishning 4 usuli
Video: Как самому создать QR-код в Google-таблицах? +Как создавать красивые QR-коды! 2024, Aprel
Anonim

Kaskadli uslublar jadvali (CSS) - bu veb -saytlarni kodlash tizimi bo'lib, dizaynerlarga guruhlarga ma'lum elementlarni tayinlash orqali bir vaqtning o'zida bir nechta funktsiyalarni boshqarishga imkon beradi. Masalan, veb -sayt fonining kodini ishlatib, dizaynerlar CSS -faylga bitta o'zgartirish bilan veb -saytning barcha sahifalaridagi fon rangini yoki tasvirini o'zgartirishi mumkin. Bu erda asosiy veb -sayt uchun CSS -ni yaratish.

Qadamlar

4 -qismning 1 -qismi: Inline CSS yozish

CSS yaratish 1 -qadam
CSS yaratish 1 -qadam

Qadam 1. HTML teglari haqida asosiy tushunchaga ega ekanligingizga ishonch hosil qiling

Siz teglar qanday ishlashini bilishingiz kerak

src

va

href

atributlar.

CSS -ni yaratish 2 -qadam
CSS -ni yaratish 2 -qadam

2 -qadam. CSS -ning asosiy xususiyatlarini bilib oling

Siz juda ko'p mulklar borligini topasiz. Biroq, ularning hammasini o'rganish shart emas.

  • Ba'zi yaxshi CSS xususiyatlarini bilish kerak

    rang

    va

    shrift oilasi

  • .
CSS -ni yaratish 3 -qadam
CSS -ni yaratish 3 -qadam

3 -qadam. Har bir tegishli mulk uchun qadriyatlar haqida bilib oling

Barcha xususiyatlar qiymatga muhtoj. Uchun

rang

mulk, masalan, qo'yishingiz mumkin

qizil

qiymat.

CSS -ni yaratish 4 -qadam
CSS -ni yaratish 4 -qadam

4 -qadam. Haqida bilib oling

uslub

HTML atributi.

Kabi element ichida ishlatiladi

href

yoki

src

. Uni ishlatish uchun, tenglik belgisidan keyin tirnoq ichiga CSS atributini, ikki nuqta va keyin mulk qiymatini qo'ying. Bu CSS qoidasi sifatida tanilgan.

CSS yaratish 5 -qadam
CSS yaratish 5 -qadam

5 -qadam. Inline CSS odatda professional veb -ishlab chiquvchilar tomonidan veb -saytlar uchun ishlatilmasligini tushuning

Inline CSS HTML hujjatiga keraksiz tartibsizliklarni qo'shishi mumkin. Biroq, bu CSS qanday ishlashini bilishning ajoyib usuli.

4 -qismning 2 -qismi: Asosiy CSS -ni yozish

CSS yaratish 6 -qadam
CSS yaratish 6 -qadam

Qadam 1. Siz foydalanmoqchi bo'lgan dasturni ishga tushiring

Bu sizga HTML va CSS fayllarini yaratishga imkon beradi.

Agar sizda maxsus dastur o'rnatilmagan bo'lsa, siz Notepad yoki boshqa matn muharriridan foydalanishingiz mumkin. Faqat faylni CSS va matnli fayl sifatida saqlang

CSS -ni yaratish 7 -qadam
CSS -ni yaratish 7 -qadam

Qadam 2. Veb -saytingiz uchun HTML faylini oching

Buni HTML tahrirlovchisi bilan ochish kerak, agar sizda o'rnatilgan bo'lsa.

HTML muharrirlari sizga HTML va CSS -ni bir vaqtning o'zida tahrir qilish imkonini beradi

CSS -ni yaratish 8 -qadam
CSS -ni yaratish 8 -qadam

3 -qadam. HTML boshingizda teg yarating

Bu sizga CSS -ni alohida faylga ehtiyoj sezmasdan yozish imkonini beradi.

CSS -ni yaratish 9 -qadam
CSS -ni yaratish 9 -qadam

4 -qadam. Styling qo'shmoqchi bo'lgan elementni tanlang va element nomini, so'ngra jingalak qavslar to'plamini ({}) kiriting

Kodni yanada aniqroq qilish uchun har doim ikkinchi jingalak qavsni o'z qatoriga qo'ying.

CSS -ni yaratish 10 -qadam
CSS -ni yaratish 10 -qadam

5 -qadam. Qavslar orasiga CSS qoidalarini, xuddi ishlatganingizdek kiriting

uslub

xususiyat.

Har bir satr nuqta -vergul bilan tugashi kerak (;). Sizning kodingizni o'qiy olish uchun har bir qoida o'z satridan boshlanishi va har bir satrga chiziq qo'yilishi kerak.

Shuni ta'kidlash kerakki, ushbu uslub sahifadagi tanlangan turdagi barcha elementlarga ta'sir qiladi. Keyinchalik aniq uslublar keyingi bo'limda muhokama qilinadi

4 -qismning 3 -qismi: Kengaytirilgan CSS

CSS -ni yaratish 11 -qadam
CSS -ni yaratish 11 -qadam

Qadam 1. HTML faylini emas, CSS faylini yarating va uni yordamida saqlang

.css

kengaytma

HTML faylingizni ham oching.

CSS yaratish 12 -qadam
CSS yaratish 12 -qadam

Qadam 2. HTML boshingizda teg yarating

Bu sizga alohida CSS faylini HTML hujjatingizga ulash imkonini beradi. Sizning havola tegingiz uchta xususiyatga ega bo'lishi kerak:

rel

turi

va

href

  • rel

    "munosabatlar" degan ma'noni anglatadi va brauzerga HTML hujjati bilan qanday aloqasi borligini aytadi. Bu erda uning qiymati bo'lishi kerak

    "uslublar jadvali"

  • .
  • turi

    qaysi turdagi media bilan bog'langanligini aytadi. Bu erda uning qiymati bo'lishi kerak

    "matn/CSS"

  • href

  • Bu erda u elementda qanday ishlatilgan bo'lsa, xuddi shunday ishlatiladi, lekin bu erda u CSS -faylga bog'lanishi kerak. Agar CSS fayli HTML fayli bilan bir papkada joylashgan bo'lsa, faqat fayl nomi tirnoq ichida yozilishi kerak.
CSS -ni yaratish 13 -qadam
CSS -ni yaratish 13 -qadam

Qadam 3. Xuddi shu uslubni qo'shmoqchi bo'lgan har xil turdagi elementlarni tanlang

Bir qo'shing

sinf

ushbu elementlarga atribut qo'ying va ularni siz tanlagan sinf nomiga tenglashtiring. Bu sizning elementlaringizga bir xil uslubni beradi.

CSS -ni yaratish 14 -qadam
CSS -ni yaratish 14 -qadam

4 -qadam. Sinf qanday uslubni olishini belgilang

Sinf nomini CSS -dagi fayldan oldin nuqta (.) Bilan yozing (ya'ni.

.sinf

).

CSS 15 -qadam yaratish
CSS 15 -qadam yaratish

5 -qadam. Maxsus uslublar qo'shmoqchi bo'lgan bitta elementni tanlang va

id

xususiyat.

Idlar CSS -da nuqta emas, balki funt belgisi (#) yordamida yaratilgan.

Idlar sinflarga qaraganda aniqroq, shuning uchun identifikator har qanday sinf uslubini bekor qiladi, agar u sinfdan boshqa qiymatga ega bo'lsa

4dan 4 qism: Ko'proq ma'lumot

CSS -ni yaratish 16 -qadam
CSS -ni yaratish 16 -qadam

Qadam 1. w3 maktablariga tashrif buyuring

Bu veb -ishlab chiqish ko'nikmalarini o'rgatishga qaratilgan rasmiy veb -sayt. W3 -da HTML va CSS -ga, shuningdek boshqa veb -tillarga havola qilingan ko'plab manbalar mavjud.

CSS -ni yaratish 17 -qadam
CSS -ni yaratish 17 -qadam

2 -qadam. Maxsus HTML va CSS -ni o'rganish va o'qitishga qaratilgan boshqa saytlarni toping

CSS tricks.com kabi saytlar CSS va veb -dizayn ko'nikmalarini o'rgatishga qaratilgan. Nufuzli manbalarni topish sizga o'qish yo'lida yordam beradi.

CSS -ni yaratish 18 -qadam
CSS -ni yaratish 18 -qadam

3 -qadam. Veb -dizaynerlar va ishlab chiquvchilar bilan bog'laning

Ularning tajribasi va nou-xau sizga qimmatli bilim va ko'nikmalarni o'rgatishi mumkin.

CSS -ni yaratish 19 -qadam
CSS -ni yaratish 19 -qadam

Qadam 4. Siz duch kelgan veb -saytlarning manba kodini ko'ring

Yaxshi ishlab chiqilgan veb-saytlarning CSS-larini ko'rish sizga veb-saytlarning qismlarini loyihalash usullarini ko'rsatishi mumkin. Buni amaliyot sifatida nusxalash va kodni topish sizga CSS -ning turli atributlaridan foydalanishni o'rganishga yordam beradi.

Video - bu xizmatdan foydalanib, ba'zi ma'lumotlar YouTube bilan bo'lishishi mumkin

Maslahatlar

Tavsiya: