2. CSS
СSS – Cascading Style Sheets (Стильдердің сатылы кестелері) –
гипермәтідік мәліметтер мамұнын олардың экрандағы бейнелеу формасын бөліп
орнатуға мүмкіндік беретін құрал болады.
Қазіргі WWW-интернет-ресурстарын безендіруді стильдің сатылы кестелерінсіз
көзге елестіру қиын. Стильдердің атылы кестелері мынандай мүмкіндіктер береді:
- WWW-парағын безендіруді оның мазмұнынан бөліп тәуелсіз орнату;
- Стандартты HTML тілі мүмкіндіктерін түбегейлі түрде кеңейту;
CSS арқылы HTML – тілінің экрандағы элементтерді бейнелеудің
көптеген тәсілдеріне жауапты тәгтер мен олардың атрибуттарын алып тастау
жолымен файылдың жалпы көлемін кішірейте аламыз (мысалы, мынадай тәгтер:
<font>, <center>m <b>, <i>, <s>, <U> т.б.; арибуттар: align, color, bgcolor, size,
width, height, т.с.с);
- HTML тілінің тәгтері мен атрибуттарына қарағанда, CSS кестелері интернет-
ресурстың сыртқы түрін басқарудың жеңіл тәсілін береді;
3. Стильді бір тәгтің параметірі ішінде жазуға болады. Ол үшін BODY
ішіндегі кез келген тәгте (BODY тәгіне де) STYLE атрибуты қолданылады.
Бұлардың «инлайдық» стиль кестелері деп атайды.
STYLE атрибуты арқылы
Жеке тәг стильі;
Жеке HTML – файлы стилі;
Біренше HTML – файлдарына арналған стиль;
Аралас стильдерді пайдалану атқарылады.
Бірнеше HTML – файлдаға арналған стиль
Әдетте бірнеше файылдаға арналған стильдер басқа бір жеке файлға
бөлек жазылады. Мұндай файл типі (кеңейтіліуі) css болып жазылады. Мысалы,
style.css файлына мынадай стильдерді жазайық:
BODY {margin-left: 40px;}
H1, H2, H3, H4, H5, H6
{text-align: right;
Color: red;
Font- family: “Arial Cyr”, Geneva, sans-serif; }
4. Стиль бетін документке жалғау
<html> example.html
<head>
<link rel="stylesheet" type="text/css" href=“mystyles,css"/>
</head>
<body>
м
</body>
</html>
Интернет желісінде сақталған глобальды бетке, және локалды бетке қосыла
алады.
<head> example1.html
<link rel="stylesheet" type="text/css"
href="http://www.google.com/uds/css/gsearch.css" />
</head>
p { color: white; background-color: black; } mystyles.css
h1 { font-size: large; font-weight: bold; }
h2 { font-weight: 500; color: blue; }
6. Түс атрибуты
color: red;
color: rgb(25, 30, 120);
color: #c0c0c0;
background-color: yellow;
Түс атаулары
aqua – Көгілдір,
black – қара,
blue – Көк,
fuchsia – Қызғылт,
gray – Боз,
green – Жасыл,
lime – Ашық-жасыл,
maroon - Қызыл қоңыр,
navy –күңгірт қызыл,
purple – Күлгін,
red – қызыл,
silver – Күміс (Ашық-боз),
white – ақ,
yellow – сары.
7. Құжатта стильдің глобалді анықтауы.
<html>
<head>
<style type="text/css">
body { color: blue; font-family: sans-serif;
width: 400px; text-align: justify; }
strong { color: red; font-weight: 600; }
em { background-color: silver; }
</style>
</head>
<body>
<p>Дүниежүзi бiр-бiрiне қарсы тұрған қоғамдық-саяси екi жүйеге
бөлiнiп, <strong>қырғиқабақ соғыс </strong> орын алды. Азия мен Африка
елдерiнде <em> ұлт- азаттық </em> қозғалыстар өрши түстi, сондай-ақ жаңа
тәуелсiз мемлекеттер құрылып, әлемде ғылыми-техникалық революция жүрiп
жатты.
</p>
</body>
</html>
8. Стилдер байланысы
body { font-family: sans-serif; background-color: yellow; }
p { color: red; background-color: aqua; }
a { text-decoration: overline underline; }
h2 { font-weight: bold; text-align: center; }
<body>
<h2>Бастапқы </h2>
<p>Бұл мәтін
<a href="myref.html"> сілтеме </a>
ішінде
</p>
</body>
body
h2 p
a
Бастапқы
Бұл мәтін сілтеме ішінде
9. Класстарды қолдану
p { font-family: sans-serif; }
p.special { background-color: yellow; font-weight: bold; }
.standout { color: red; font-family: cursive; }
<body>
<h2 class="standout"> Бұл standout классы </h2>
<p>Бұл жәй мәтін</p>
<p class="special">Бұл special класс абзацы</p>
<p class="standout special"> Бұл special және special
класс абзацы </p>
</body>
Б л standout классыұ
Бұл special класс абзацы
Бұл жәй мәтін
Б л special ж не special класс абзацыұ ә
classes.html
10. CSS қасиеттеріне шолу
Стильдік әр түрлі анықтаулар жазуда 70-тен аса оның түрі қасиеттерін
көрсетуге болады. Жалпы жұмыс атқару кезінде білім беру интернет-ресурсының
соңында берілетін анықтамаларды пайдалану қажет.
Стильді оның қасиеттерін мынадай топтарға бөліп беру қалыптасқан:
қаріп (шрифт)
түстер;
мәтін;
өрістер мен жақтаулар (поля и рамки);
сыртқы түрлері.
Пункттер мен пикалар – типографиялық өлшем бірліктерді, олар қаріп
көлемін немесе оның кеглін береді.
Word – та мысалы, параметр 8-ден 72 пт-ке дейін. Бұл кельдің пунктпен
берілген мөлшері. 1 типографиялық пт = 1/72дюйм= 0.375 мм. Бұл символдың өз
мөлшері емес, оның “ұпай” («очко») мөлшері, яғни типографиядағы сол символды
(литер) ойып орналастыратын матрица биіктігі. Оның мөлшері литер мөлшерінен
үлкен. Мысалы, кеглі 10 шрифтің бас әрпінің көлемі 7 пункт шамасында болады.
11. Courier – моноенді шрифт
Үнсіз келісім бойсынша (по умолчанию) браузер қалыпты
мәтін үшін Times Roman шрифтін, ал программалар үшін – Courier
шрифтің (моноенді) пайдаланады. Интернет-ресурс үшін өз
гарнитуранды көрсету қажет емес, ондай шрифт компютерде
болмаса, ол иеролифке айналып кетеді. Жергілікті (локальды)
гипермәтін үшін кез келген шрифт жарайды. Ал Интернет желісі
үшін тек топты ғана көрсету жеткілікті шыған немесе шрифті қоса
жіберіп оны орнату ережесі де бірге беріліуі тиіс. Font-family қасиеті
үшін бір емес, бірнеше шрифт абзал (үтір арқыл бөліп), мысалы:
H1, H2, H3, H4, H5, H6
{ Font- family: “Arial Cyr”, Geneva, Helvetica, sans-serif; }
