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