2015-09-06
786
Стильдік анықтауларды, тәгтердің кірістіріліп орналасу реттілігіне сәйкес орындалатындай етіп жазуға болады. Мысалы: <EM> тәгіндегі мәтін түсі ол <H3> тәгінің ішінде орналасқан жағдайда ғана көк болатындай етіп орналастырайық:
<HTML><HEAD><TITLE> Контексті селекторлар </TITLE> <STYLE type=”text/css”> <!-- H3 Em {color: blue} </STYLE></HEAD> <BODY bgcolor=white text=black> <H3> Контексті <EM> селекторлар </EM><H3> <P > Контексті <EM> селекторлар </EM></P> </BODY> </HTML>
Экранға «селектор» сөзі бірінші қатарда көк түспен (<H3> тәгінің ішінде), ал екінші қатарда қара түспен (<Р> тәгінің ішінде) шығады. Стильдік анықтауларда үтір қойылмағандығына назар аударңыз. Бұл контекстік анықтаулардың үтір қойылмағандығына назар {color:blue} түрінде жазсақ, онда <H3>тәгімен қатар <EM> тәгі де көк түске боялады, яғни үтір бірнеше тәгтер тобы үшін бірдей болатын ортақ стильді анықтайды.
|
|
|
Кластар
Стильдік анықтауларды тәгтерді көрсетпей ақ жазуға болады. Мұнадй жағдайда, берілген стильді нақты тәгке сәйкестендіру үшін, әрбір анықтауға арнайы атау меншіктелуі тиіс. Мұндай стильдік анықтаулар кластар деп аталады. Класс келесі түрде жазылады.
Аты
{ сипаттама:мәні;
....
сипаттама:мәні;
}
Басқаша айтқанда, анықтаулар әдіттегідей жазылады, бірақ тәгтердің аттары орнына.аты конструкциясы қолданылады. Мысалы, 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 атрибуты қолданылады. Бұл кодтың қалай жұмыс істейтінін қарастырайық.
<HTML> <HEAD> <TITLE> класты анықтау </TITLE> <STYLE type=”text/css”>
.def { font-size: 14pt; font –family: Helvetica; border: solid 4pt red;padding: 6pt; margin-left:5%; margin-right:5%} </STYLE> </HEAD> <BODY bgcolor=white text=black> <H2> Кластар <H2> <P class=def > Класс — тәгке бекітілмеген стильді анықтау <P> Анықтауда тәгті көрсету орнына кластың аты жазылады. <P class=def > Класс атының алдында нүкте қойылады. </BODY></HTML>
Құрылған стильдік анықтаулар негізінде кластар құруға болады. Келесі мысалда def класының негізі ретінде <P> тәгі үшін анықталған стиль алынып, оған қосымша қасиеттер қосылып жазылған.
|
|
|
<HTML><HEAD><TITLE> класты анықтау </TITLE><STYLE type=”text/css”>
P{ font –family: Helvetica;} P.def{ text-align:justify; Background:#CEB597; 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>
18.Стильдерді қатарластыра пайдалану.
Сонымен HTML-кодтары үшін стильдерді пайдаланудың үш тəсілі бар екен:
• жеке тəг үшін анықтау;
• HTML-файлының тақырыбында анықтау;
• басқа CSS файлында стильді анықтау.
Енді осы тəсілдерді араластыра пайдаланып көрейік. Олардың қайсысы басым екенін мысалдар арқылы қарастырайық.
CSS-файлдағы CSS-анықтаулар
Алдын ала жазылған prim.сss файлының
ішкі мəтіні:
