Css га кириш. Селекторлар турлари. Ўлчов бирликлари

CSS га кириш. Селекторлар турлари. Ўлчов бирликлари.

Мултимедиа технологиялари кафедраси
МУҲАММАД АЛ-ХОРАЗМИЙ НОМИДАГИ
ТОШКЕНТ АХБОРОТ ТЕХНОЛОГИЯЛАРИ УНИВЕРСИТЕТИ

Режа:

• CSS га кириш.
• CSS билан HTML ҳужжатни боғлаш.
• Селекторлар турлари.
• Ўлчов бирликлари.

CSS га кириш

CSS – Cascading Style Sheets (каскадли стиллар жадвали)
CSS – веб ҳужжатнинг ташқи кўринишини шакллантирувчи формал тил ҳисобланади.
CSS – HTML элементларни броузерда қандай кераклигини тасвирлайди.
CSS – веб саҳифанинг ёзилган коди ҳажмини қисқартириш ва уни ўқишни осонлаштириш имкониятини беради.

CSS версиялари

CSS1

• 1996 й.

CSS2

• 1998 й.

CSS3

• 1999

CSS4

• 2011

CSS билан HTML ҳужжатни боғлаш

Inline CSS
Ўрнатилган CSS – HTML элемент ичидаги style атрибутида CSS хусусиятларини қўллаш мақсадида фойдаланилади:

Example

Sarlavha tegi

> Xatboshi tegi
id="para1"> Xatboshi tegi

1-blok tegi

2-blok tegi

Heading

Text content-1.

Blok tegi

Xatboshi tegi

Paragraph 1 in the div.


Paragraph 2 in the div.

Paragraph 3 in the div.

Paragraph 4. Not in a div.

Paragraph 1 in the div.


Paragraph 2 in the div.

Paragraph 3 in the div.

Paragraph 4 in the div.

Paragraph 5. Not in a div.

Paragraph 1 in the div.
Paragraph 2 in the div.

Paragraph 3. Not in a div.

Paragraph 4. Not in a div.
Paragraph 1.

Paragraph 2.

Paragraph 3.
Some code.
Paragraph 4.
My name is Farrux
I live in Navoiy
My name is Farrux
I live in Navoiy
My name is Farrux.
I live in Navoiy.
My best friend is Hasan.
You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more.

Select some text on this page:

This is a paragraph.

This is some text in a div element.

This paragraph is the first child of its parent (body).

Welcome to My Homepage

This paragraph is not the first child of its parent.

This paragraph is the first child of its parent (div).

This paragraph is not the first child of its parent.

I am a strong person. I am a strong person.
I am a strong person. I am a strong person.
I am a strong person. I am a strong person.
I am a strong person. I am a strong person.
I am a strong person. I am a strong person.
I am a strong person. I am a strong person.
I live in Italy.
Ciao bella!
The links with a target attribute gets a yellow background:
w3schools.com
target="_blank">disney.com
target="_top">wikipedia.org

The width Property

Search:
The image with the title attribute containing the word "flower" gets a yellow border.
title="klematis flower" width="150" height="113">
title="flowers" width="224" height="162">
title="landscape" width="160" height="120">

Welcome

Hello world!
Are you learning CSS?
Are you learning CSS2?

Welcome

Hello world!
Are you learning CSS?

The second div element.

Are you learning CSS2?

The first div element.

The second div element.

The third div element.

This is some text in a paragraph.

The first div element.

The second div element.

The third div element.

This is some text in a paragraph.