HTML darslari 5-dars. CSS . Style

Web dasturlash

Assalomu alaykum Hurmatli o'quvchilar!
HTML ni o'rganishni davom ettiramiz. Ushbu darsimizda

CSS

bilan ishlashni o'rganib chiqamiz.

Siz web sahifangizni chiroyli dizayn va chiroyli ranglar bilan, o'ziz hohlagandek qilishni istasangiz CSS sizga juda katta yordam beradi.
CSS ni biz 3 xil usulda web sahifamizga boglashimiz mumkin.

HTML teglarining atributi sifatida ishlatishimiz mumkin
```
<style>
```
tegi bilan ishlatishimiz mumkin. Ya'ni
```
<head>
```
qismida.
Fayl orqali bog'lashimiz mumkin, ya'ni css fayl yaratib
```
<head>
```
qismida yaratilgan css faylni bog'lashimiz mumkin.

Keling end yuqoridagilarni birma bir o'rganib chiqamiz.
HTML teglarining atributi sifatida ishlatish.
Biz hali teglarning attributlarini o'rganib chiqmaganmiz, asta sekinlik bilan ularni ham o'rganib ketamiz.
HTML da har bir teg ga

style

attributini berishimiz mumkin. Ushbu style attributining qiymatiga biz css ni yozishimiz mumkin.
Misol:

<html>
<body style="background-color:yellow;">
	<h2 style="background-color:red;">Bu sarlavha</h2>
	<p style="background-color:green;">Bu paragraf.</p>
</body>
</html>

Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com

background-color

— Bu CSS element hisoblanib, orqa fonga rang berish uchun ishlatiladi.
Ushbu element quyidagi qiymatlarni olishi mumkin:

rang nomi(ingliz tilida)
rang kodi(misol uchun oq rangning kodi #FFFFFF)

CSS elementlari haqida CSS darslarimizda batafsil o'rganamiz.
Natija:

Ko'rib turganingizdek, sahifaning umumiy tanasiga sariq rang berildi, sarlavhaning orqa foniga qizil, paragrafning orqa foniga esa yashil rang berildi.

<style>
tegi bilan ishlatish.

<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

HEAD qismida style tegini ichiga yozishimiz mumkin
Misol:

<html>
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head> 
<body >
	<h2 >Bu sarlavha</h2>
	<p >Bu paragraf.</p>
</body>
</html>

Ushbu kodni o'zingiz ham yozib tekshirib ko'ring. htmledit.squarefree.com

Ushbu misolda body tegi uchun orqa fon berildi,

background-color:yellow

body{csslar yoziladi..}
p{csslar yoziladi..}
h1{csslar yoziladi..}
pre{csslar yoziladi..}
h3{csslar yoziladi..}
... qolgan teglar

Yuqoridagi ko'rinishda teglarga stil berishimiz mumkin.

HTML ga CSS faylni boglash.
HEAD qismida link tegi yordamida boglashimiz mumkin.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

href atributiga faylni nomi(agar css fayl va html fayl yonma yon turgan bo'lsa,agar yonma yon turmagan bo'lsa faylning turgan yo'li bilan yoziladi)

opennetdan yiroqlashmang…

HTML darslari 1-dars.
HTML darslari 2-dars. Teglar bilan ishlash
HTML darslari 3-dars. Teglar bilan ishlash(2-qism)
HTML darslari 4-dars. HEAD tegi.

html, web, css

9 комментариев

Sardor aka menimcha p (color;blue;) h2(color; red;) qilib yana pastdan «h2» bu sarlavfa" «p» bu paragraf qilgandan ko'ra Style attributidan foydalangan yaxwiro wekilli.
hammasini birdaniga qilib ketarkansizde. Misol uchun «h2 style=background-color;red;» Bu sarlavfa "/h2"

p (color;blue;) h2(color; red;)

bunaqa yozishni foydali tomoni juda ko'p, qayerda p yoki h2 ishlatsangiz manashu yozgan stil bo'yicha ishlidi.
Siz aytgandek:

«h2 style=background-color;red;» Bu sarlavfa "/h2"

kabi yozadigan bo'lsak, tasavvur qiling, siz h2 tegini 50 yoki 100 ta qatorda ishlatdingiz, har bir tegni atributiga style=background-color:red; dib yozib chiqasizmi? BU vaqtni oladi, kodni hajmini ko'paytiradi, agarda siz stilni o'zgartirmoqchi bo'lsangiz usha 50-100 tasini ham qo'lda o'zgaritirb chiqishga to'gri keladi.