Браузер алдымен Arial Cyr қаріпін іздейді, таба алмаса - Geneva, соңынан - Helvetica, ешқайсысы да болмаса, әйтеуір бір жұмыр қаріп табады (sans-serif).
Егер қаріп аты бірнеше сөзден тұрса, ол міндетті түрде қос тырнақшаға алынады.
Font-size
font-size қасиеті қаріптің абсолюттік немесе салыстырмалы мөлшерін береді. Салыстырмалы түрде бергенде, пайыздық өлшем қолданылады (ағымдағы қаріп - негізгі) немесе мынадай түйінді сөздер қою керек:
larger – ірілеу - крупнее;
smaller – шағындау - мельче.
Абсолюттік мөлшерде келесі өлшем бірліктерінің бірін көрсету керек: in, cm, mm, px, pt, pc.
Мынадай түйінді сөздерді де пайдалануға болады:
xx-smali
– өте майда
– сверхмелкий;
x-smail
– майдалау
– очень мелкий;
small
– майда
– мелкий;
medium
– орташа
– седний;
large
– ірі
– купный;
х-large
– ірілеу
– очень крупный;
xx-large
– өте ірі
– сверхкрупный.
Көбінесе осындай салыстырмалы шамаларды берген дұрыс болып саналады.
Түстерді тағайындау
Стильдік қасиеттер түстерді тағайындаудың үш түрлі тәсілін береді:
· түйінді сөз, мысалы, white;
· он алтылық RGB-код, мысалы, #eee5d8;
· ондық RGB-код, мысалы, rgb(255,64,0);
color –элемент түсін анықтайды.
background-color –элемент шығарылатын маңайдағы фон түсін анықтайды.
мысалы, стиль үшін мынадай фрагмент енгізуге болады:
Мысал
<HTML>
<HEAD>
<!-- CSS қасиеттерін енгізу -->
<STYLE type="text/css">
<!--
P
{
font-family: "Arial Cyr",Helvetica,sans-serif;
font-size: 0.5cm;
color: blue;
background-color: yellow; }
-->
</STYLE>
<TITLE> 4 мысал </TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<P>Тестирование - это защитная сеть вокруг вашей программы, последняя и, порой, единственная надежда на серьезное повышение ее качества до того,как она выйдет в свет(Лу Гринзоу "Философия программирования").
<H6 style="color:red;background-color:silver;
letter-spacing:20px">
Тестирование - это форма приема экзамена </H6>
</BODY>
</HTML>
Бұл жұмыс нәтижесі 8.4 суретте келтірілген.
8.4 сурет. Стильдік анықтаулар қасиеттері
Мәтіндерді анықтау
letter-spacing – әріптер арасындағы аралықты қосымша анықтау үшін керек, normal түйінді сөзін немесе нақты мән беруге болады, минус таңбалы мән де болады (символдар бірінің үстіне бірі жазылады). Пайыздық тәсіл қолданылмайды.
line-height –жолдар аралығын тағайындайды (интерлиньяж). Абсолюттік биіктікті берсе де болады (14pt), жол аралығын (1.4) немесе жол биіктігінің пайызымен де (200%) көрсетіледі. Мысалы, жоларалық екі интервал:
line-height: 2 ; немесе line-height: 200%;
normal түйінді сөзімен де берсе болады.
text-align –мәтінді көлденең туралау тәсілін көрсетеді (способ горизонтального выравнивания). Оның мынадай мәндері қолданылады:
left – сол жақ шетке туралау;
right – оң жақ шетке туралау;
center – ортаға туралау;
justify – екі шетін де туралау (по ширине).
Соңғы мәнді justify қолдану қиын, өйткені ұзын сөзді тасымалдауды браузер білмейді (мысалы, орысша немесе қазақша мәтіндерді).
ӨРІСТЕР МЕН ЖАҚТАУЛАР (Поля и рамки)
border-style – элементті қоршап тұратын жақтау сызықтардың түрін анықтайды. Мәндері мынадай:
none – жақтау жоқ (келісім бойынша); solid – кәдімгі тұтас жақтау;
border-color –жақтау сызығының түсін анықтайды. Бұл қасиет border-style берілсе ғана жұмыс істейді.
border-width –жақтау сызығының қалыңдығын береді. Бұл қасиет те border-style берілсе ғана жұмыс істейді. Қалыңдығын сан бірліктерімен (пайыздық жазу жоқ) немесе келесі сөздермен беруге болады:
thin – жіңішке - тонкая; medium – орташа - средняя; thick – жуан - толстая.
margin –элементтегі блок шеттерінде бос қалатын өріс енін (ширину поля отступа) береді. Санмен, пайызбен (блок ені негізінде) немесе түйінді сөзбен – auto беріледі. Auto болса, тиімді мәнді браузер өзі анықтайды.
padding –элемент пен жақтау арасындағы қашықтықты береді. Санмен немесе пайызбен (от ширины элемента) беріледі.
Сыртқы түрді анықтау
width –элементтің енін тағайындайды. Санмен, пайызбен немесе auto түйінді сөзімен беріледі. Auto болса, тиімді мәнді браузер өзі анықтайды.
Допускаются числовые, процентные значения и auto. Бұл қасиет <div> и <span> элементтері үшін қолданылады, олар элементтерді блокқа біріктіреді.
height –элемент биіктігін тағайындайды. Санмен немесе auto түйінді сөзімен беріледі. Бұл қасиет те <div> и <span> элементтері үшін қолданылады.
Бір программа фрагментін толық келтірейік :
Мысал
<HTML>
<HEAD>
<!-- Подключение свойств CSS -->
<STYLE type="text/css">
<!--
P
{
font-family: "Arial Cyr",Helvetica,sans-serif;
font-size: 0.5cm;
color: blue;
background-color: yellow; }
-->
</STYLE>
<TITLE>Пример 4</TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<P> Тестирование - это защитная сеть вокруг вашей программы, последняя и, порой, единственная надежда на серьезное повышение ее качества до того, как она выйдет в свет (Лу Гринзоу "Философия программирования").
</H6>