Лекция · 4.7

CSS селекторлар және қасиеттері

Өткен сабақта CSS-тің үш бөлігін (селектор, қасиет, мән) үйрендік. Ал енді нақты СОНЫ элементке дәл тиетін селекторларды қалай жазамыз? Бір ғана тақырыпшаны бояу мен барлық сілтемені бояу — екеуі мүлде басқа селектор талап етеді. Бүгін CSS селекторларының түрлерін және фон, шекара, орналасу қасиеттерін үйренеміз.

Селектор түрлері

CSS-тің қызық ерекшелігі бар — кейбір қасиеттер НЕГІЗГІ элементтен ІШКІ элементке «мұраланады». Мыс. font-size қасиетін <body>-ге орнатсаң, ол барлық ІШКІ элементтерге де беріледі.

Селектор түрі	Мысал	Қолданылады
Тег атауы	`a { color: blue; }`	ОСЫ тегтің БАРЛЫҚ данасына
Үтірмен бөлінген	`h1, h2, h3 { color: blue; }`	КӨРСЕТІЛГЕН барлық тегке
Бос орынмен бөлінген (иерархиялық)	`table a { font-size: 120%; }`	ТЕК кестенің ІШІНДЕГІ сілтемелерге

ID мен CLASS айырмашылығы

Анықтама
Идентификатор селекторы (#) — БІР ҒАНА бірегей элементке бағытталады. Бір id мәні бетте ТЕК БІР рет қана қолданылуы мүмкін.

#home { font-size: 200%; }

<div id="home">HTML zhane CSS-ti biriktiremiz</div>

Анықтама
Класс селекторы (.) — class атрибутының мәніне негізделеді, БІРНЕШЕ (әртүрлі тегке де) элементке қоюға болады.

.cl1 { text-decoration: underline; font-size: 80%; }

<div class="cl1">...</div>
<p class="cl1">...</p>

⚠️

Маңызды айырмашылық: бір бетте бір id мәні ТЕК БІР РЕТ қолданылады (бірегей), ал бір class мәнін БІРНЕШЕ элементке қоюға болады. Сондықтан ЖАЛҒЫЗ элементке — id, БІРНЕШЕ элементке ортақ стиль керек болса — class қолданылады.

Есеп (орта): класс селекторын қолдану

Берілді: тақырып үшін 16pt қаріп, жартылай қалың, ортасынан туралау; мәтін үшін 12pt қаріп, жоларалық интервал 1.5.

<style>
    .clh2 { color: blue; font-size: 16pt; font-weight: bold; text-align: center; }
    .clp { font-size: 12pt; line-height: 1.5; text-indent: 20px; }
</style>
...
<h2 class="clh2">Abai Qunanbaiuly</h2>
<p class="clp">Aqyn, agartushy...</p>

DIV және SPAN

Кейде мәтіннің белгілі бір бөлігіне ғана арнайы стиль керек болады, бірақ ол бөлікке дайын тег (h1, p) сай келмейді. Дәл осы үшін екі «универсал» тег бар:

Тег	Түрі	Қасиеті
`<div>`	Блоктық	Аяқталғаннан кейін браузер ЖАҢА ЖОЛҒА көшеді
`<span>`	Жолішілік	Аяқталғаннан кейін мәтін СОЛ ЖОЛДА жалғасады

<span> бір жолдағы жеке сөзге стиль беру үшін ыңғайлы, ал <div> — бүкіл блокты (абзацтар тобын, секцияны) топтастыру үшін.

<div class="area1">Enbektin naны tatti</div>
<div class="area2">Zhalqaudyn zhany tatti</div>

.area1 { color: red; font-weight: bolder; background: aqua; }
.area2 { color: black; background: #CFB597; }

Фон, шекара, орналасу

Қасиет	Сипаттамасы
`background-color`	Элементті түспен толтырады
`background-image`	Суретті фон етеді (`url(...)`)
`border-style`	Сызық түрі: solid, dashed, dotted, double
`border-color`, `border-width`	Шегара түсі мен қалыңдығы

Есеп (орта): фон мен шекараны безендіру

<style>
    body {
        background: #D3D3D3;
        color: #8B4513;
        border: 3px dashed red;
    }
</style>

Элементті беттің белгілі бір жеріне нақты орналастыру керек болса, position қасиеті қолданылады:

Мәні	Сипаттамасы
`static`	Әдепкі, қалыпты ағын бойынша
`relative`	Өзінің қалыпты орнына ҚАТЫСТЫ
`absolute`	Ата-элементке қатысты АБСОЛЮТТІ координата
`fixed`	ТҰРАҚТЫ — скролда да орнында қалады

position қасиетімен бірге top, left, right, bottom қасиеттері элементтің дәл орнын анықтайды.

🎯 ҰБТ байланысы

ID мен CLASS айырмашылығы, DIV мен SPAN қасиеттері жиі тексеріледі.

id — бірегей (бір рет), class — қайталанатын (бірнеше элементке).

div — блоктық (жаңа жол), span — жолішілік (сол жолда жалғасады).

position: fixed — скролда да орнында тұрады, static — әдепкі қалып.

Сабақ қорытындысы

Селектор тег атауы, үтірмен/бос орынмен бөлінген тізім түрінде жазылады.
id (#) — бір рет қана қолданылатын бірегей селектор; class (.) — көп элементке ортақ.
div — блоктық, span — жолішілік топтастыру тегі.
background, border, position — веб-бетті безендіру мен орналастырудың негізгі қасиеттері.