2015-09-06
777
Стильдік анықтауларды тәгтерді көрсетпей-ақ жазуға болады. Мұндай жағдайда, берілген стилді нақты тәгке сәйкестендіру үшін, әрбір анықтауға арнайы атау меншіктелуі тиіс. Мұндай стильдік анықтаулар кластар деп аталады. Класс келесі түрде жазылады:
.аты
{ сипаттама: мәні;
...
сипаттама: мәні;
}
Басқаша айтқанда, анықтаулар әдеттегідей жазылады, бірақ тәгтердің аттары орнына.аты конструкциясы қолданылады.
Мысалы, def атты стильдік класс жазып шығайық:
.def
{color: red; font-size: 16pt;
font-family: Geneva, Helvetica, sans-serif;
border: solid 0.2cm blue }
Мұнда border: solid 0.2cm blue қатары бір стиль-дік нұсқауда бірнеше параметрлердің қызметін жазуды көрсетеді (мұнда: стиль, жақтау қалыңдығы, және оның түсі). Мұндай біріктіруді border сияқты жалпыланды-рылған арнайы стильдік қасиеттерге қолдануға болады.
Стильдік класты тәгпен сәйкестендіру үшін class атрибуты қолданылады:
<Р class=def > текст </P>
|
|
|
Бұл кодтың қалай жұмыс істейтінін қарастырайық.
<HTML>
<HEAD>
<TITLE>Класты анықтау</TITLE>
<STYLE type="text/css">
.def
{font-family:Helvetica;font-size:14pt;
border: solid 4pt red;padding: 6pt;
margin-left:5%;margin-right:5% }
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2>Кластар</H2>
<P class=def>
Клacc — тәгке бекітілмеген стильді анықтау.
<P> Анықтауда тәгті көрсету орнына кластың аты жазылады.
<P class=def>
Класс атының алдына нүкте қойылады.
</BODY>
</HTML>
Құрылған стильдік анықтаулар негізінде кластар құруға болады. Келесі мысалда def класының негізі ретінде <Р> тәгі үшін анықталған стиль алынып, оған қосымша жаңа қасиеттер қосылып жазылған:
<HTML>
<HEAD>
<TITLE>Класты анықтау</TITLE>
<STYLE type="text/css">
P {font-family:Helvetica}
P.def
{text-align: justify;
background:#CFB597;
font-size:14pt;
border:solid 4pt red;
padding:6pt;
margin-left:5%;margin-right:5%}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2> Кластар(Кәдімгі тақырып)</H2>
<P> Бұл азат жол Р тәгіне арналған (жұмыр қаріп) стильдік анықтауларды қолданады.
<P class=def>
Бұл азат жол туынды класс стилін қолданады
“def”
(стилді анықтауда Р тәгі үшін: қызыл түсті жақтау, өріс, фон түсі, оң жақ және сол жақтан туралау, қаріп өлшемін үлкейту қолданылған).
</BODY>
</HTML>
<DIV> және <SPAN> тәгтері
Бұл тәгтер CSS үшін маңызды болып табылады. Олар құжаттағы жеке бір бөліктерді ерекшелеп алып, оларға арнайы қасиеттер беру ісін атқарады. Ол үшін керекті элементтерді <DIV>...</DIV> немесе <SPAN>...</SPAN> тәгтері ішіне орналастыру керек.
|
|
|
Бұлардың айырмашылығы мынада: <DIV> блогынан соң браузер жаңа жолға көшіреді, ал <SPAN> блогынан кейін – бұрынғы жолда қала береміз. Сонымен, <SPAN> тәгін пайдалану - бір жолдағы сөздерге не символдарға жеке стильдік қасиеттер тағайындай алады. Осыларға мысал келтірейік.
<DIV> тәгін пайдалану:
<HTML>
<HEAD>
<TITLE> DIV тәгін пайдалану </TITLE>
<STYLE type="text/css">
.area1
{ color:red; font-weight:bolder;
font-size:40pt; background:aqua}
.area2
{ color:black; background:#CFB597}
.area3
{ color:blue;background:#C0C0C0}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<DIV class=area1><IMG src=vopros.gif> Где</DIV>
<DIV сlass=аrеа2>начало того конца,</DIV>
<DIV class=area3>которым оканчивается начало?
</DIV>
</BODY>
</HTML>
<SPAN> тәгін пайдалану мысалы:
<HTML>
<HEAD>
<TITLE> Использование тега SPAN</TITLE>
<STYLE type="text/css">
.area1
{ color:red; font-weight:bolder;
font-size:40pt; background:aqua}
.area2
{ color:maroon; background:#CFB597;
padding:6pt}
.area3
{ color:blue;background:#C0C0C0;
padding:6pt}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<SPAN class=area1><IMG src=vopros.gif>Где</SPAN>
<SPAN сlass=аrеа2>начало того конца,</SPAN>
<SPAN class=area3>которым оканчивается начало?
</SPAN>
</BODY>
</HTML>
Абсолюттік түрде орналастыру
CSS арқылы экрандағы элементтерді браузер терезесінің сол жақ жоғары бұрышынан бастап нақты координаталар бойынша орналастыра аламыз. Мұндай мүмкіндікке position стильдік қасиетінің absolute мәні арқылы қол жеткізуге болады. Координаталар пиксель бірлігімен left (горизонталь координата) және top (вертикаль координата) сөздері арқылы тағайындалады.
Енді мысалдар қарастырамыз.
<HTML>
<HEAD>
<TITLE> Абсолютное позиционирование</TITLE> <STYLE type="text/css">
.area1
{ position:absolute; top:10; left:10;
color:red; font-weight:bolder;
font-size:40pt; background:aqua} 
.area2
{ position:absolute; top:20; left:150;
color:maroon; background:#CFB597;
padding:12pt}
.area3
{ position:absolute; top:70; left:130;
color:blue; background:#C0C0C0;
padding:12pt}
</STYLE>
</HEAD>
<BODY bgcolor = white text = black>
<DIV class =area1><IMG src=vopros.gif>Где</DIV>
<DIV class =area2>начало того конца,</DIV>
<DIV class =area3>которым оканчивается начало?
</DIV>
</BODY>
</HTML>
Мұнда браузер үш <DIV> тәгімен берілген элементтерді көрсетілген координаталар бойынша орналастырып шықты. Элементтер бірінің үстіне бірі шығып тұрғанын байқаған шығарсыңдар.
Ең үстіне, яғни бізге жақын түрде HTML-кодта ең соңғы көрсетілген элемент шығады. Егер <DIV> тәгтерінің орнын ауыстырсақ, онда элементтердің қабаттаса орналасу реттілігі де өзгеріске ұшырайды. Дегенмен, CSS элементтерді қабаттастыра орналасу реттілігін жылдам өзгертетін тағы бір мүмкіндікті - Z-index тәсілін де ұсынады.
