Css matnlar bilan ishlash, Orqa fon va chegaralar


Download 0.68 Mb.
Sana31.03.2023
Hajmi0.68 Mb.
#1313244
Bog'liq
maruza-5

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

2. Matn joylashuvi


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;}


Download 0.68 Mb.

Do'stlaringiz bilan baham:




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling