W3 🇺🇿

214 views.ɐsɐ { nz }, 06:10

CCS-ni class-qilib nomlash:

class-misol:
.yellow {
color: yellow;
}

.red {
color: red;
}

.cyan {
color: cyan;
}

----------|--|----------

html-misol:
<p class="yellow">class › sariq › matn</p>
<p class="red">class › qizil › matn</p>
<p class="cyan">class › moviy › matn</p>

@w3_uz › #css_kirish › #2dars, #class

214 views.ɐsɐ { nz }, 06:11

😍😃🤔☹

W3 🇺🇿 via @like

209 views.ɐsɐ { nz }, 06:12

👍👎

W3 🇺🇿 via @like

Photo

CSS-ni ID-qilib nomlash:

id-misol:
#yellow {
color: yellow;
}

#red {
color: red;
}

#cyan {
color: cyan;
}

----------|--|----------

html-misol:
<p id="yellow">id › sariq › matn</p>
<p id="red">id › qizil › matn</p>
<p id="cyan">id › moviy › matn</p>

@w3_uz › #css_kirish › #3dars, #id

212 views.ɐsɐ { nz }, 06:13

😍😃🤔☹ 1

W3 🇺🇿 via @like

215 views.ɐsɐ { nz }, 06:15

👍 1 👎

W3 🇺🇿 via @like

Photo

CSS-ni Guruhlash:

CSS-Misol:
h1 {
    color: orange;
}

p {
    color: orange;
}

b {
    color: orange;
}

Guruhlashga-Misol:
h1, p, b {
color: orange;
}

----------|--|----------

HTML misol:
<h1>Sarlavha 1</h1>
<p>Paragraft</p>
<b>Bold</b>

@w3_uz › #css_kirish › #4dars, #guruhlash

219 views.ɐsɐ { nz }, 06:16

😍😃🤔 1 ☹

W3 🇺🇿 via @like

HTML-ga › CSS-ni kiritishning 3-ta usuli:

• Tashqi uslublar / External style sheet.
• Ichki uslublar / Internal style sheet.
• Inline uslubi / Inline style.

@w3_uz › #css_kirish › #HTMLga_CSSni_kiritish

222 views.ɐsɐ { nz }, 08:36

😍😃🤔☹

W3 🇺🇿 via @like

HTML-ga › CSS-ni kiritishning 3-ta usuli: • Tashqi uslublar / External style sheet. • Ichki uslublar / Internal style sheet. • Inline uslubi / Inline style. @w3_uz › #css_kirish › #HTMLga_CSSni_kiritish

» Tashqi uslublar / External style sheet:

› Tashqi uslubi bir lavha bilan, faqat bir faylni o'zgartirish orqali butun bir veb-sayt ko'rinishini o'zgartirish mumkin!

› Har bir sahifa <link> elementi ichida tashqi uslubi lavha fayl uchun bir ma'lumot o'z ichiga olishi kerak. <link> kodi <head> bo'lim uz ichida oladi:

Misol:
<!DOCTYPE html>
<html lang="uz">
<head>

<link rel="stylesheet" href="style.css">

</head>
<body>
content
</body>
</html>

----------|--|----------

style.css - faylni ichki qismida esa css-larni uz ichiga oladi.

Misol:
body {
color: white;
background-color: black;
}

h1 {
color: green;
margin-left: 20px;
}
...

@w3_uz › #css_kirish › #HTMLga_CSSni_kiritish › #tashqi_uslublar

257 views.ɐsɐ { nz }, 08:37

😍 1 😃🤔☹

W3 🇺🇿 via @like

HTML-ga › CSS-ni kiritishning 3-ta usuli: • Tashqi uslublar / External style sheet. • Ichki uslublar / Internal style sheet. • Inline uslubi / Inline style. @w3_uz › #css_kirish › #HTMLga_CSSni_kiritish

Ichki uslublar / Internal style sheet.

Ichki style-lardan HTML bir sahifaning <head> qismida ichki qismida <style> kodi uz ichiga oladi.

Misol:
<!DOCTYPE html>
<html lang="uz">
<head>

<style>
body {
    background-color: black;
}

h1 {
    color: orange;
}

p {
    color: red;
}
</style>

</head>
<body>

<h1>Sarlavha 1</h1>
<p>Paragraft</p>

</body>
</html>

@w3_uz › #css_kirish › #HTMLga_CSSni_kiritish › #ichki_uslublar

247 views.ɐsɐ { nz }, 14:56

😍 1 😃🤔☹

W3 🇺🇿 via @like

HTML-ga › CSS-ni kiritishning 3-ta usuli: • Tashqi uslublar / External style sheet. • Ichki uslublar / Internal style sheet. • Inline uslubi / Inline style. @w3_uz › #css_kirish › #HTMLga_CSSni_kiritish

» Inline uslubi / Inline style:

› Inline tarzi bir kod uchun yagona uslub qo'llash uchun foydalanish mumkin.

› Inline jihozlardan foydalanish, uslubi kiritish uchun tegishli kod uchun xususiyati. Tarzi xususiyati har qanday CSS-larni uz ichiga olishi mumkin.

Misol:
<h1 style="color: yellow; text-align: center;">css › inline › sariq - markaz › sarlavha 1</h1>

<h2 style="color: red; text-align: right;">css › inline › qizil - õng › sarlavha 2</h2>

<h2 style="color: green; text-align: left;">css › inline › yashil - chap › sarlavha 3</h2>

@w3_uz › #css_kirish › #HTMLga_CSSni_kiritish › #inline_uslublar

246 views.ɐsɐ { nz }, 15:00

😍 1 😃 1 🤔☹

W3 🇺🇿 via @printfbot

CCS › Ranglarni nomlaridan foydalanib ranglash.

235 views.ɐsɐ { nz }, 09:30

😍 1 😃 1 🤔😕

💬 Izoh qoldirish...

W3 🇺🇿 via @like

W3 🇺🇿 via @printfbot

CCS › Ranglarni nomlaridan foydalanib ranglash.

CCS › Ranglarni nomlaridan foydalanib ranglash.

» red, blue, cyan, violet, black, white, green, yellow, orange, darkblue...

background-color / fon-rang:

Misol:
<div style="background-color: red;">red</div>
<div style="background-color: blue;">blue</div>
<div style="background-color: cyan;">cyan</div>
<div style="background-color: violet;">violet</div>
<div style="background-color: black;">black</div>
<div style="background-color: white;">white</div>
<div style="background-color: green;">green</div>
<div style="background-color: yellow;">yellow</div>
<div style="background-color: orange;">orange</div>
<div style="background-color: darkblue;">darkblue</div>

@w3_uz › #css › #rang

235 views.ɐsɐ { nz }, 09:37

😍😃🤔☹

W3 🇺🇿 via @printfbot

@w3_uz › CSS › Rang › RGB

220 views.ɐsɐ { nz }, 09:37

😍 1 😃🤔😕

💬 Izoh qoldirish...

W3 🇺🇿 via @like

W3 🇺🇿 via @printfbot

@w3_uz › CSS › Rang › RGB

CSS › Rang › RGB:

Formulasi: rgb(red, green, blue / qizil, yashil, kuk),
va 0-dan 255-gacha foydalaniladi.

Misol:
<div style="background: rgb(0, 0, 0);">rgb(0, 0, 0)</div>
<div style="background: rgb(255,0,0);">rgb(255,0,0)</div>
<div style="background: rgb(0,255,0);">rgb(0,255,0)</div>
<div style="background: rgb(0,0,255);">rgb(0,0,255)</div>
<div style="background: rgb(0,255,255);">rgb(0,255,255)</div>
<div style="background: rgb(255,255,0);">rgb(255,255,0)</div>
<div style="background: rgb(255,165,0);">rgb(255,165,0)</div>

@w3_uz › #css › #rang › #RGB

214 views.ɐsɐ { nz }, 09:38

😍😃🤔 1 ☹