W3 🇺🇿 via @printfbot
Евгений Исаков "HTML5 Elements and their styling".
🎬 › RU › 36:53
🎬 › 720p › 293.1MB
🎬 › 320p › 139.2MB
@w3_uz › #kharkivcss_3, #2018, #css, #html5, #conference
🎬 › RU › 36:53
🎬 › 720p › 293.1MB
🎬 › 320p › 139.2MB
@w3_uz › #kharkivcss_3, #2018, #css, #html5, #conference
W3 🇺🇿 via @printfbot
Ксения Буркун "Анимации для души и пользы".
🎬 › RU › 26:47
🎬 › 720p › 263.7MB
🎬 › 320p › 133.3MB
@w3_uz › #kharkivcss_3, #2018, #css, #html, #conference, #animation
🎬 › RU › 26:47
🎬 › 720p › 263.7MB
🎬 › 320p › 133.3MB
@w3_uz › #kharkivcss_3, #2018, #css, #html, #conference, #animation
W3 🇺🇿 via @printfbot
Photo
CSS › Cascading Style Sheet › margin, padding, border, width, height... - kõp kodlarni uz ichiga olgan...
CSS-faqat HTML-da Aktivlashadi va HTML-kodlariga CSS-berishingiz mumkin...
HTML kodni uziga CSS berish:
CCS-Misol:
h1 {
color: red;
}
h2 {
color: green;
}
h3 {
color: yellow;
}
p {
color: cyan;
}
----------|--|----------
HTML-Misol:
<h1>Qizil Sarlavha 1</h1>
<h2>Yashil Sarlavha 2</h2>
<p>Moviy Paragraft</p>
@w3_uz › #css_kirish › #1dars
CSS-faqat HTML-da Aktivlashadi va HTML-kodlariga CSS-berishingiz mumkin...
HTML kodni uziga CSS berish:
CCS-Misol:
h1 {
color: red;
}
h2 {
color: green;
}
h3 {
color: yellow;
}
p {
color: cyan;
}
----------|--|----------
HTML-Misol:
<h1>Qizil Sarlavha 1</h1>
<h2>Yashil Sarlavha 2</h2>
<p>Moviy Paragraft</p>
@w3_uz › #css_kirish › #1dars
W3 🇺🇿 via @like
Photo
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
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
W3 🇺🇿 via @like
Photo
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
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
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.
• Ichki uslublar / Internal style sheet.
• Inline uslubi / Inline style.
@w3_uz › #css_kirish › #HTMLga_CSSni_kiritish
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
› 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
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
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
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
› 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
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
» 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
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
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