Css matnlar bilan ishlash, Orqa fon va chegaralar

CSS

Matnlar bilan ishlash, Orqa fon va chegaralar

Reja

• Orqa fon
• Chegara
• Matnlar bilan ishlash

Orqa fon ( Background )

• orqa fonga rang berishda backgroud-color dan foydalaniladi.

Hello World

Lorem ipsum...

Orqa fon ( Background )

Linear Gradient

background-color: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);

Orqa fon ( Background )

• Orqa fonga rasm joylash uchun background-image dan foydalaniladi. background-image: url("paper.gif");
• Rasm takror joylashmasligi uchun background-repeat dan foydalanish. background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat;
• Rasmni sahifa bilan harakatini cheklash background-attachment: fixed;
• Rasm o’lchamini belgilash background-size: contain; background-size: cover; background-size: 30px 70px;

Chegara (Border)

CSS chegara (border) xususiyatlari teg chegarasining turini, o’lchamini va rangini belgilashga imkon beradi.

Chegara turlari:

Misol

Chegara rangini o’zgartirish

p.one {border-style: solid; border-color: red;}
p.two { border-style: solid; border-color: green;}
p.three { border-style: dotted; border-color: blue;}

Chegara tomonlari

CSS da har bir tomon uchun alohida dizayn berish mumkin.

border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: double;
border-left-color: red;
border-right-color: green;
border-top-color: blue;
border-bottom-color: yellow;

kodning qisqa yozilishi

Kodni qisqartirish uchun, bitta xususiyatda barcha individual chegara xususiyatlarini ko'rsatish mumkin.

Bular quyidagilar:

• border-width
• border-style (majburiy)
• border-color

Qisqa ko’rinishi. p { border: 5px solid red;}

Chegara radiusi

border-radus xususiyati element burchaklarining radiusini aniqlaydi.

border-radius: 15px 50px 30px 5px;

Matnlar bilan ishlash

• Matn rangini o’zgartirish

Hello World

Lorem ipsum...

Matnlar bilan ishlash

text-align: center;	markazda joylashishi	hello world!
text-align: left;	chapda joylashishi	hello world!
text-align: right;	o’ngda joylashishi	hello world!
text-align: justify;	maydonni to’liq egallash	Lorem ipsum dolor sit amet, consectetur adipisicing elit,
direction: rtl; unicode-bidi: bidi-override;	matnni teskari o’girish	hsirig’o irakset inntam

Matnlar bilan ishlash

text-decoration: overline;	Hello world!
text-decoration: line-through;	Hello world!
text-decoration: underline;	Hello world!
text-transform: uppercase;	HELLO WORLD!
text-transform: lowercase;	hello world!
text-transform: capitalize;	Hello World!

Matnlar bilan ishlash

letter-spacing: 3px; letter-spacing: -3px;
line-height: 0.5;	This is a paragraph with a smaller This is a paragraph with a bigger
word-spacing: 10px;	hello world test

Shadow

selector { text-shadow: x y soya rang; }

x - soyaning chap tarafdan surilishi. Qiymati pixselda beriladi.Misol uchun 5px

y - soyaning tepadan surilishi. Qiymati pixelda beriladi.

soya - soyaning yoyilish chegarasi. Qiymati pixselda beriladi.

rang - soyaning rangi. Qiymati RGB

h1 {text-shadow: 2px 2px 5px red;}