Css га кириш. Селекторлар турлари. Ўлчов бирликлари
CSS га кириш. Селекторлар турлари. Ўлчов бирликлари.
Мультимедиа технологиялари кафедраси
МУҲАММАД АЛ-ХОРАЗМИЙ НОМИДАГИ
ТОШКЕНТ АХБОРОТ ТЕХНОЛОГИЯЛАРИ УНИВЕРСИТЕТИ
UniversalstudyTUIT
Режа:
CSS га кириш.
CSS билан HTML ҳужжатни боғлаш.
Селекторлар турлари.
Ўлчов бирликлари.
CSS га кириш
CSS – Cascading Style Sheets (каскадли стиллар жадвали)
CSS – веб ҳужжатнинг ташқи кўринишини шакллантирувчи формал тил ҳисобланади.
CSS – HTML элементларни броузерда қандай кераклигини тасвирлайди.
CSS – веб саҳифанинг ёзилган коди ҳажмини қисқартириш ва уни ўқишни осонлаштириш имкониятини беради.
CSS версиялари
CSS1
CSS2
CSS3
CSS4
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).
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.
http://hozir.org
Do'stlaringiz bilan baham: |