4-amaliy ish css bilan html hujjatni bog‘lash usullari. Css sintaksisi. Selektorlar turlari

4-AMALIY ISH
CSS bilan HTML hujjatni bog‘lash usullari. CSS sintaksisi. Selektorlar turlari.
CSS (Cascading Style Sheets) selectorlari HTML elementlari uchun stil belgilash uchun ishlatiladigan ifodalar hisoblanadi. CSS kodlarida, HTML elementlarining taglariga, attributlariga, ID va klasslari bo'yicha tan olish uchun berilgan ishoralar hisoblanadi.
Quyidagi usullar bilan siz HTML elementlari uchun CSS selectorlari yozishingiz mumkin:
Element nomi - tagga asoslangan
Elementlarning taglariga asoslangan. Masalan: p, h1, div, a, ul, li kabi.

Klass nomi - klasslar bilan asoslangan

HTML kodida attributi yordamida berilgan belgi. CSS kodida .classname yoziladi. Misol uchun: .redtext, .btn kabi.

ID nomi - ID bilan asoslangan

HTML kodida attributi yordamida berilgan belgi. CSS kodida #idname yoziladi. Misol uchun: #header, #footer kabi.

Universal selector - Barcha elementlarni belgilash

CSS kodida * yoziladi va veb sahifadagi barcha elementlarni belgilash uchun ishlatiladi.
Descendant selector - Bog'langan elementlar

Elementning ichki yoki tarkibiy elementlariga murojaat uchun ishlatiladi.

1. The CSS Universal Selector

* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}

2. The CSS id Selector

.animated-text #title {
color: crimson;
font-size: 50px;
font-weight: 700;
line-height: 70px;
letter-spacing: 1px;
}

3. The CSS Grouping Selector

.contact-form .input-box input,
.contact-form .input-box textarea {
color: #111;
width: 100%;
padding: 10px;
font-size: 17px;
font-weight: 400;
outline: none;
border: 1px solid #111;
border-radius: 5px;
resize: none;
}

4. The CSS class Selector

.about .content .col-left {
position: relative;
width: 45%;
box-shadow: 0 5px 25px rgba(1 1 1 /25%);
border-radius: 10px;
}
5. The CSS element Selector
header {
position: fixed;
background: rgba(255, 255, 255, .1);
top: 0;
left: 0;
width: 100%;
padding: 15px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 99;
}

5-AMALIY ISH
CSS rang berish usullari, chegara, orqa fon, shrift, margin va padding xususiyatlari. Box model tushunchasi. Box model qoidalari.
1.
DOCTYPE html>

Specify colors using RGB values

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

NATIJASI:

2.

Specify colors using HEX values

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

HSL Saturation

The second parameter of hsl() defines the saturation. Less saturation mean less color. 0% is completely gray:

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

style = "text-transform:capitalize;">
This will be capitalized

style = "text-transform:uppercase;">
This will be in uppercase

style = "text-transform:lowercase;">
This will be in lowercase




style = "text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.

CSS Animation

Note: When an animation is finished, it goes back to its original style.

CSS Animation

Note: Animatsiya yakunlanganda avvalgi holatiga qaytadi.

CSS Animation

Note: Animatsiya yakunlanganda avvalgi holatiga qaytadi.

The rotate() Method

Rotate() methodi elementni burchak bo’lab burib beradi.

Bu normal div elementi.

Bu metod berilgan karobkani 40 gradusga burib beradi.