CSS деген эмне?

CSS (Cascading Style Sheets) — бул HTML же XML тилдеринде жазылган документтердин сырткы көрүнүшүн сыпаттоо үчүн колдонулган стилдер тили. CSS веб-баракчалардын визуалдык берилишине жооп берет.

🎨 Жөнөкөй тил менен айтканда: Эгерде HTML веб-баракчанын скелети (структурасы) болсо, анда CSS — анын териси, кийими жана макияжы. CSS баракчаларды кооз жана кабыл алууга ыңгайлуу кылат.

CSS кантип иштейт?

CSS HTML-элементтерине колдонулган "стилдик эрежелер" принциби боюнча иштейт. Ар бир эреже төмөнкүлөрдөн турат:

Селектор - стилди кайсы элементке колдонуу керектигин көрсөтөт
Касиет (Property) - так эмнени өзгөртүү керек (түсү, өлчөмү, четтери)
Маани (Value) - кантип өзгөртүү керек (анык түсү, пиксель менен өлчөмү)

🔍 Көрсөтмөлүү мисал:

CSSсиз:

Жөнөкөй баш сөз

Стилдери жок кадимки текст.

CSS менен:

Стилүү баш сөз

Мыкты жасалгаланган кооз текст.

CSS стилдеринин базалык мисалы

                /* Бул CSSтеги комментарий */

                /* Бүтүндөй документ үчүн стилдер */

                body {

                  background-color: #f0f0f0;

                  font-family: 'Arial', sans-serif;

                  margin: 0;

                  padding: 20px;

                }

                /* h1 баш сөздөрү үчүн стилдер */

                h1 {

                  color: #264de4;

                  text-align: center;

                  font-size: 2.5rem;

                  margin-bottom: 30px;

                }

CSSтин негизги түшүнүктөрү

1. Селекторлор (Selectors)

Селекторлор стилдер кайсы элементтерге колдонуларын аныктайт.

Селектордун түрү	Мисал	Сүрөттөмө
Элемент селектору	`h1 { color: blue; }`	Бардык <h1> элементтерине колдонулат
Класс	`.menu { background: red; }`	class="menu" болгон бардык элементтерге колдонулат
ID	`#header { height: 100px; }`	id="header" болгон элементке колдонулат

2. Касиеттер жана маанилер

CSS элементтердин сырткы көрүнүшүн башкаруу үчүн жүздөгөн касиеттерди камтыйт:

                .box {

                  width: 300px; /* Туурасы */

                  height: 200px; /* Бийиктиги */

                  background-color: #ffffff; /* Фондун түсү */

                  padding: 20px; /* Ички талаалар */

                }

3. Каскаддуулук (Cascading)

CSSтин негизги өзгөчөлүгү — каскаддуулук. Стилдер мурасталышы, кайра аныкталышы жана айкалыштырылышы мүмкүн.

CSSтин жардамы менен эмне кылса болот?

Мүмкүнчүлүк	Касиеттин мисалы	Жыйынтык
Түстөрдү өзгөртүү	`color, background-color`	Тексттин жана фондун түсү
Ариптерди (шрифт) башкаруу	`font-family, font-size`	Ариптин түрү жана өлчөмү
Анимацияларды түзүү	`animation, transition`	Жумшак өтүүлөр жана кыймылдар
Адаптивдүү дизайн	`@media queries`	Ар кандай түзүлүштөргө (телефон, планшет) ыңгайлашуу

⚡ Маанилүү: CSS HTML менен жупташып иштейт. HTML структурасы болбосо, CSSти колдоно турган нерсе жок болот. Аларды чогуу үйрөнүңүз!

Сабактын аягы

Куттуктайбыз! Сиз CSSтин негиздерин үйрөндүңүз. Эми сиз CSS деген эмне экенин жана ал эмне үчүн керек экенин билесиз.

1-сабак: CSS деген эмне?