Лекция · 4.6

CSS: каскадты кесте, қолдану негіздері

Екі сайт бірдей HTML құрылымда болуы мүмкін, бірақ бірі көрікті, екіншісі жалаң көрінеді. Айырмашылық неде? HTML тек МАЗМҰНДЫ анықтайды, ал сыртқы КӨРІНІСТІ (түс, қаріп, орналасу) басқа тіл басқарады — CSS. Бүгін осы «безендіру тілін» үйрене бастаймыз.

CSS деген не

Анықтама
CSS (Cascading Style Sheets — каскадты стильдер кестесі) — веб-бет элементтерінің сыртқы көрінісін (стилін) басқаруға арналған технология. HTML — МАЗМҰН мен ҚҰРЫЛЫМ, CSS — СЫРТҚЫ КӨРІНІС.

CSS 1997 жылы, HTML-ден КЕЙІН пайда болды. Ол «каскадты» деп аталады, себебі бір бетке БІРНЕШЕ стиль кестесін қатар қолдануға болады — олар «каскад» (сарқырама) сияқты бір-бірінің үстіне жинақталады.

CSS синтаксисі үш бөліктен тұрады:

h1 { color: blue; font-size: 12px; }

Бөлік	Мысал	Мағынасы
Селектор	`h1`	Қай элементке қолданылады
Қасиет	`color`	НЕ өзгертіледі
Мән	`blue`	ҚАНДАЙ мәнге өзгертіледі

CSS қолданудың артықшылықтары: кодтың көлемін азайтады; HTML-де беруге болмайтын параметрлерді (мыс. сілтеме асты сызуын алып тастау) береді; КӨП БЕТТІ бір ғана стиль кестесі арқылы басқаруға мүмкіндік береді.

CSS қосу тәсілдері

CSS-ті HTML құжатқа қосудың үш тәсілі бар — олардың айырмашылығы «қаншалықты кең қолданылатынында»:

Тәсіл 1
Ішкі стиль — жалғыз элементке керек болғанда, тегтің style атрибутында тікелей жазылады. ЕҢ ЖОҒАРЫ басымдыққа ие.

<p style="font-size: 120%; color: #cd66cc">
    Abzaqqa ishki CSS stil qoldanu
</p>

Тәсіл 2
Құжат деңгейіндегі (жаһандық) стиль — бүкіл құжатқа қолданылады, <head> ішіндегі <style> тегінде жазылады.

<head>
    <style>
        ul li { font-size: 36px; color: green; }
        ol li { font-size: 20px; color: blue; }
    </style>
</head>

Бұл тәсіл — бір құжаттағы БІРНЕШЕ элементке (тегке) бірдей стиль қажет болғанда ыңғайлы.

Сыртқы стиль файлы

Тәсіл 3
Сыртқы (байланысты) стиль — .css кеңейтілімімен БӨЛЕК файлда сақталады, <head> ішінде <link> тегі арқылы қосылады.

<link rel="stylesheet" type="text/css" href="style1.css">

Бұл ЕҢ ТИІМДІ тәсіл — бір стиль файлы бүкіл сайттың БАРЛЫҚ бетінде қолданылады. Фон түсі мен қаріп өлшемін БІР ҒАНА файлда өзгертіп, оны барлық беттерге бірден тарата аласың.

Есеп (орта): сыртқы CSS файлымен сілтеме безендіру

Берілді: сілтемелердің астын сызуды алып тастап, қаріп өлшемін кішірейту керек.

style1.css файлы:

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

HTML файлы:

<head>
    <link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<a href="..." class="cl1">Qara sozderi</a>
</body>

Түсіндірме: .cl1 класы жалпы стильді орнатады, ал A.cl1 (ТЕК <a> тегіне қолданылатын) сілтеменің асты сызуын өшіреді.

Стиль басымдылығы — қай ереже жеңеді?

Егер бір элементке БІРНЕШЕ ереже сәйкес келсе, қайсысы қолданылады?

⚠️

Негізгі ереже: ЕҢ ЖАҚЫН (ең нақты) және ЕҢ СОҢҒЫ қолданылған ереже басым болады.

Есеп (қиын): қай стиль жеңеді?

<style>
    HTML { color: black; }
    BODY { color: red; }
    P { color: green; }
</style>
...
<p style="color: blue;"><span style="color: olive;">Matin</span></p>

Табу керек: «Matin» сөзі қандай түсте көрінеді?

Неге дәл осылай? <span> элементінің ӨЗ ІШКІ стилі бар (color: olive) — ол <p>-ден де, жаһандық HTML/BODY/P ережелерінен де БАСЫМ, себебі ол ЕҢ ЖАҚЫН орналасқан.

Жауабы: сары (маслина, olive) түсте.

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

CSS қосу тәсілдерін және басымдылық ережесін ажырата білу маңызды.

Ішкі стиль (style атрибуты) ЕҢ ЖОҒАРЫ басымдыққа ие.

Селектор, қасиет, мән — CSS ережесінің үш міндетті бөлігі.

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

CSS — веб-беттің сыртқы көрінісін (стилін) басқаратын технология, HTML-ден кейін пайда болды.
Үш қосу тәсілі: ішкі (style атрибуты), жаһандық (<style>), сыртқы (<link> арқылы .css файл).
Сыртқы стиль — ЕҢ ТИІМДІ, себебі бір файл бүкіл сайтты басқарады.
Басымдылық: ең жақын және ең соңғы қолданылған ереже жеңеді.