Css (cascading style sheets – stillarning kaskadli jadvali)

Mavzu: CSSga kirish.HTMLga ulanish usullari.Selektor turlari

Reja:

• 1 CSSga haqida tushuncha
• 2 HTML atribuntlari orqali style berish
• 3 Selektorlar haqida tushuncha

CSSga kirish

Bu stillar jadvali(CSS) to’liq holatda 1997 yilda tashkil topib, “WWW Consorcium” ida qo’llab quvvatlangan va foydalanishga taqdim etilgan. O’sha paytlarda HTML ning 3 versiyasi ommabop edi. CSS ni dastlab Netscape Navigator 4.0 va Internet Explorer 4.0 brouzerlarida ko’rish mumkin bo’lgan. Hozirda barcha brouzerlar css da yozilgan kodlarni tushuna oladi. Bu stillarga oid dasturlash tilini o’rganish sodda bo’lib, yangi stillar qo’shilishi natijasida kengayib bormoqda.CSS ni HTML xujjati ichida ishlatilishini birin ketin ko’rib o’tamiz:

Web sahifada ishlatiladigan CSS kodlari orqali hosil qilinadigan stillarni hammasini bitta faylga yozib, uni serverda saqlaymiz. So’ng, sahifadan, serverdagi saqlab qo’yilgan faylga murojaat qilib, kerakli stilni olamiz. Bu usul katta hajmdagi web sahifalar yaratishda foydali hisoblanadi. Faylga murojaat, tegi ichida amalga oshiriladi va quyidagi ko’rinishga ega bo’ladi.  tegi sahifa biror faylga murojaatni amalga oshirmoqda degani, REL – fayl qandaydir stillardan iborat degani, TYPE — stillar css kodlaridan iborat va fayl joylashgan manzil yoziladi.

CSS kodlar veb sahifa ichidagi tegi orasida beriladi. Bunda yaratilgan stillar shu sahifaga tegishli bo’ladi, bu degani faqat shu sahifada ishlatilish mumkindir.

CSS haqida tushuncha

CSS bu Cascading Style Sheets – stillar bilan ishlay oladigan kaskadli stillar majmuasidir. Web sahifalarga har xil stillar berish uchun ishlatiladi. HTML xujjat ichida teglar bilan birga foydalaniladi. CSS kodlarini kompilyastiya qilish uchun qandaydir kompillyatorlar, qandaydir dasturlar, va bu kod tushuna oladigan qandaydir redaktorlar kerak bo’lmaydi. Bu kodlarni HTML singari web brauzerning o’zi kompilyastiya qiladi va natijani chiqarib beradi.

CSS (CASCADING STYLE SHEETS – STILLARNING KASKADLI JADVALI).

HTML VA CSS Inline style – Html elementi bilan bir chiziqda External style sheet – alohida tashqi faylda Internal style sheet – Html sahifaning aynan oʼzida Html elementlariga stillar 3 hil usulda beriladi:

1 – Usul:

2 – Usul

2 – Usul

3 – Usul:

• This is a heading

HTML VA CSS

id – dasturchi tomonidan oʼylab html da qaytarilmaydigan nom asosida

teg – html dagi mavjud teg nomlari asosida

class – dasturchi tomonidan oʼylab topilgan nom asosida;

Css da stillash obyektlarining 3 koʼrinishi mavjud:

1 - usul

• 1 - usul
• body {
• font-family: "Montserrat",sans-serif;
• }
• 2 - usul
• .logo{
• display: flex;
• align-items: center;
• }
• Div~p
• Div+p
• Div>p
• 3 - usul
• #line{
• width: 20px;
• height: 75px;
• background-color: #4e4e4e;
• transform: skewX(-15deg);
• }

SELEKTORLAR

• Teg selektorlari html da mavjud boʼlgan barcha html teglar nomi bilan bogʼlangan holda Css
• orqali stillashdir. Teg selektorlari orqali stillanganda html dagi barcha shu nomdagi teglarga
• taʼsir koʼrsatiladi.
• Id – selector turi bu alohida bir tur boʼlib, u html da bir marrta takrorlanadigan class larga
• oʼxshagan ixtiyoriy nomlanadigan selector turidir. Nomlash qoidalari huddi class lar singaridir.
• Faqatgina sonlar ishlatmaslik tavsiya qilinadi.
• Class – selektorlari bu dasturchi tomonida ixtiyoriy oʼylab topiladigan nom asosida murojaat
• qilish usulidir. Nomlanganda ixtiyoriy nom sonlar bilan boshlanmaydi lekin sonlar bilan davom
• ettirilishi mumkin. Ixtiyoriy nomda ingliz alifbosidan foydalaniladi va class selektori nomi
• oldiga nuqta qoʼyib yoziladi.

Universal selektor CSS kodida, universal selektor Yulduzli ramz sifatida yozuv “ * “ Universal selektor buyurtmada kerak Barcha sahifa elementlarida CSS xususiyatlarini o'rnatish. Odatda u ko'rsatkichlarni elementlardan tiklash uchun ishlatiladi, masalan:

BASIC

• CSS (Cascading Style Sheets) bu – Html sahifamizning stilini oʼzgartirish uchun foydalaniladigan tildir. U bizga
• sahifamizni brauzer qanday aks ettirishini lozimligini koʼrsatishimizda qoʼl keladi