СSS технологиясының қасиеттері

Бұл бөлімде СSS каскадты стильдер кестесінің қасиеттерімен танысамыз. СSS стильдер кестесінде қасиет «property-name» деп аталады. Қасиеттің мәндері кілт сөздермен беріледі. Кілт сөздер < (кіші) және > (үлкен) символдары арасына жазылады.

Кілт сөздер арасында кездесетін │ символы, қасиеттің осы мәндердің тек біреуін қабылдайтынын білдіреді. Сол сияқты, кілт сөздер арасында кездесетін ║ символы, қасиеттің осы мәндердің бірнешеуін, кез келген тәртіпте қабылдайтынын білдіреді. Ал кілт сөздерді топтау үшін [ ] символдары қолданылады.

Төменде осы технологияның негізгі қасиеттерін қарастырамыз [12].

Мысалы:

background-color: gray;

}
Көрсетілген мысалда фон үшін күлгін түс таңдалған.
background-image: url ()│none│inherit – фон ретінде суретті файлдан алады. none – фондық сурет берілмейді. Inherit – фонның мәнін аналық қасиеттен алады. Үндеместен none мәні алынады.

Мысалы:

background-color : "#e0e0e0";

background-image : url ("files/logo_fon.gif");

font-family : "Times New Roman", shadow;

font-size : 12 pt;

color : "#000080";

}
Көрсетілген мысалда фондық сурет ретінде «files» бумасындағы «logo_fon.gif» файлы алынады. Сонымен қатар «background-color» қасиетімен «#e0e0e0» түсі берілген. Егер қандай-да бір себеппен «logo_fon.gif» файлы жүктелмесе, онда фон «#e0e0e0» түсін алады. Фонда мәтін айқын көріну үшін «Times New Roman» шрифті, өлшемі 12 нүктемен берілген. Әдетте фондық суретті осылай фондық түспен беру бағдарламалаудың тамаша үлгісі болып есептеледі. Бұл жерде фондық түс фондық суреттің астында қалады.

background-position : top │ center │ bottom │ left │ center │ right │<пайыз>│ <ұзындық> │ inherit – фондық суреттің басталу координаталарын анықтайды. Фондық сурет координаталары кілттік сөздермен көлденеңінен және тігінен беріледі.

Фондық суреттің көлденеңінен басталуы төмендегіше беріледі:

• 
  left – солдан;
  
• 
  center – ортадан;
  
• 
  right – оңнан.
  

Фондық суреттің тігінен басталу координаталары төмендегіше беріледі:

• 
  top – жоғарыдан;
  
• 
  center – ортадан;
  
• 
  bottom – төменнен.
  

Координаталар көлденеңінен бастап, сонан соң тігінен көрсетіледі.

Мысалы:

fon {

background-position: right top;

background-image : url ("files/logo_fon.gif");

}
Көрсетілген мысалда фондық сурет жоғарғы оң жақ бұрышқа орналасады.

Мысалы:

background-color : "#e0e0e0";

background-position: 50px 50px;

background-image : url ("files/logo_fon.gif");

}
Көрсетілген мысалда фондық сурет жоғарғы сол жақ бұрыштан тігінен 50 пиксель және енінен 50 пиксель тастап орналасады.
Егер координаталар пайызда берілсе, онда 0% 0% - жоғарғы сол бұрышты, ал 100% 100% - төменгі оң бұрышты анықтайды.

Мысалы:

background-color : "#e0e0e0";

background-position: 50% 50%;

background-image : url ("files/logo_fon.gif");

}
Көрсетілген мысалда фондық сурет монитор экранының ортасынан бастап орналасады.

Жалпы, фондық суретті орналастыруда төмендегі мәндер алынады:

• 
  жоғарғы сол бұрыш - left top, 0% 0% немесе top left;
  
• 
  жоғарғы ортасы - center top, 50% 0%, top center;
  
• 
  жоғарғы оң бұрыш - right top, 100% 0%, top right;
  
• 
  сол жақтың ортасы - left center, 0% 50%, center left;
  
• 
  центр - center, 50% 50%, center center;
  
• 
  оң жақтың ортасы - right center, 100% 50%, , center right;
  
• 
  төменгі сол бұрыш - left bottom, 0% 100%, bottom left;
  
• 
  төменгі ортасы - center bottom, 50% 100%, bottom center;
  
• 
  төменгі оң бұрыш - right bottom, 100% 100%, bottom right;
  
• 
  іnherit – фонның координаталарын аналық қасиеттен алады;
  
• 
  үндеместен 0% 0% алынады.
  

background-repeat : repeat │ repeat-x │ repeat-y │ no-repeat │ inherit – экранда фондық суретті қайталайды. Үндеместен repeat мәні алынады. Мұндағы:

• 
  repeat-x – фондық сурет көлделеңінен қайталанады;
  
• 
  repeat-y – фондық сурет тігінен қайталанады;
  
• 
  no-repeat-y – фондық сурет бір-ақ рет көрсетіледі, қайталанбайды;
  
• 
  гepeat – фондық сурет көнделеңінен де, тігінен де қайталанады;
  
• 
  inherit – мәнді аналық қасиеттен алады.
  

Мысалы:

background-color : "#e0e0e0";

background-position: 50% 50%;

background-image : url ("files/logo_fon.gif");

background-repeat : no-repeat

}
background-attachment: scroll│fixed – фонды мәтінге байланыстырады. Үндеместен scroll алынады. Мұндағы:

• 
  scroll – егер мәтін терезеге симаса, онда фон мәтінмен қоса жүреді;
  
• 
  fixed – фон орнында тұрады, ал мәтін оның үстінде қозғалады.
  

background: ║ ║ ║ ║ – жоғарыда сипатталған қасиеттердің жалпыламасы, яғни фондық сурет қасиеттерін стильдер кестесінің бір жерінде анықтау мүмкіндігін береді. Қасиеттердің қабылдайтын мәндері жоғарыдағыдай. Егер кейбір қасиеттер көрсетілмесе, онда олар үндеместен алу принципі бойынша таңдалады.

Мысалы:

а) fon {

background-image : url ("files/logo_fon.gif");

background-repeat : no-repeat;

background-attachment: fixed;

background-position: right top;

}
б) fon {background: "#e0e0e0" url ("files/logo_fon.gif") no-repeat fixed right top}

• 
  thin – жұқа рамка (әдетте 2 пиксель);
  
• 
  medium – орташа рамка (әдетте 4 пиксель);
  
• 
  thick – қалын рамка (әдетте 6 пиксель);
  
• 
  inherit – мәнді аналық қасиеттен алады.
  

Мәндердің тізімінде бір, екі, үш немесе төрт мән кездесуі мүмкін. Егер бір мән кездессе, онда рамканың барлық төрт жағына бірдей әсер етеді. Егер екі мән кездессе, онда рамканың тек қана жоғарғы және төменгі жақтарына әсер етеді. Егер үш мән кездессе, онда біріншісі рамканың жоғарғы, екіншісі сол және оң жақтарына, үшіншісі төменгі жақғына әсер етеді. Ал егер төрт мән кездессе, онда рамканың сәйкес жоғарғы, сол, оң және төменгі жақтарына әсер етеді.

Мысалы:

а) p { border-width: 4px}

б) p { border-width: thin thick}

в) р {border-width: 3px 2px 4px 1px}

• 
  solid – қарапайым сызық;
  
• 
  none – бордюр жоқ, оның қалындығы нольге тең;
  
• 
  hidden – жасырын, бордюр жоқ;
  
• 
  dotted – жіңішке пунктир сызық;
  
• 
  dashed – пунктир сызық;
  
• 
  double – екі еселенген сызық;
  
• 
  groove – көлемді, қысылған сызық ;
  
• 
  ridge – көлемді, қалындатылған сызық;
  
• 
  inset – көлемді, қысылған сызықтың басқа варианты;
  
• 
  outset – көлемді, қалындатылған сызықтың басқа варианты;
  
• 
  inherit – мәнді аналық қасиеттен алады.
  

Мәндердің тізімінде бір, екі, үш немесе төрт мән кездесуі мүмкін. Олардың әсері жоғарыдағы «border-width» қасиетіндегі ретпен анықталады.

Мысалы:

а) p { border-style: none}

б) p { border-style: solid double solid }

в) р {border-style: ridge}

Түс мәндері тізіммен берілсе, тізімде бір, екі, үш немесе төрт мән кездесуі мүмкін. Олардың әсері жоғарыдағы «border-width» қасиетіндегі ретпен анықталады.

Мысалы:

p { border-color: red} /* бордюр түсі қызыл */

║ ║ - қысқартылған қасиет, элементтің рамкасының бордюрінің бірнеше атрибуттарын, яғни енін, стилін және түсін бір қатарда анықтайды. Қасиет рамканың төрт жағына бірдей әсер етеді.

Мысалы:

а) p {border: 2px double navy}
б) p {

border-top: 2px double navy;

border-bottom: 2px double navy;

border-left: 2px double navy;

border-right: 2px double navy;

}
Көрсетілген мысалдағы а) және б) варианттар эквивалент. Рамканың бордюрі төрт жағында бірдей: қалындығы 2 пиксель, стилі екі еселенген және түсі тоқ көк болып анықталады.

font-family: <шрифттер тізімі> – Шрифттер немесе олардың типтері үтірмен бөлектеніп көрсетіледі. Браузер шрифттерді көрсетілген ретпен компьютерде кездескенше іздеп, табылған шрифтті пайдаланады. Қасиеттің шрифт типтері түрінде төмендегі мәндер алынуы мүмкін:

• 
  serif – түртпесі бар шрифттер, мысалы: Times;
  
• 
  sans-serif – түртпесі жоқ шрифттер, мысалы: Helvetica;
  
• 
  cursive – курсивті шрифттер, мысалы: Zarf-Chencery;
  
• 
  fantasy – декоратив шрифттер, мысалы: Western;
  
• 
  monospace – моношрифттер, мысалы Courier.
  

Егер шрифт типі бірнеше сөзден тұрса, онда шрифт типін тырнақша ішінде жазу қажет, мысалы: “Times New Roman Cyr”.

Егер бірнеше шрифт │ белгісімен көрсетілсе, браузер олардың біреуін үндеместен алу принципі бойынша таңдайды.
font-style: normal │italic│ oblique – шрифт стилдерін көрсетеді. Үндеместен normal алынады. Мұндағы:

• 
  normal – қалыпты;
  
• 
  italic – курсив;
  
• 
  oblique – қиғаш.
  

font-size: <абсолют>│<салыстырмалы>│<нақты>│<пайыз> – шрифт өлшемін анықтайды. Қасиеттің мәні ретінде абсолют, салыстырмалы, нақты өлшемдер немесе пайыз көрсетіледі. Үндеместен normal алынады.

font-weight: normal│bold│bolder│lighter – шрифттің енін анықтайды. Үндеместен normal алынады. Мұндағы:

• 
  normal – қалыпты;
  
• 
  bold – жартылай жуан;
  
• 
  bolder – жуан;
  
• 
  lighter – жіңішке.
  

font-variant: normal │small-caps – шрифттің бас әріптерінің өлшемін анықтайды. Үндеместен normal алынады. Мұндағы:

• 
  normal – қалыпты;
  
• 
  small-caps – кіші бас қаріп.
  

font: ║║║║ – жоғарыда сипатталған қасиеттердің жалпыламасы, яғни шрифт қасиеттерін стильдер кестесінің бір жерінде анықтау мүмкіндігін береді. Қасиеттердің қабылдайтын мәндері жоғарыдағыдай. Егер кейбір қасиеттер көрсетілмесе, онда олар үндеместен алу принципі бойынша таңдалады.

Мысалы:

h1 {

font-family: Arial;

font-size: 30 pt;

font-weight: bold;

font-style: italic

}

p {

font: bold italic large Times New Roman, serif

}
word-spacing: normal│<ұзындық> – сөздер арасындағы аралық беріледі. Үндеместен normal алынады.

letter-spacing: normal│<ұзындық> – символдар арасындағы аралық анықталады. Үндеместен normal алынады.
text-decoration: underline │overline │line-through │blink │none – Символ гарнитурасы көрсетіледі. Мұндағы:

• 
  underline – астын сызу;
  
• 
  overline – төбесін сызу;
  
• 
  line-through – үстін сызу;
  
• 
  blink – жанып-өшу;
  
• 
  none – алдынғы орнатылған мәндерді жою.
  

text-transform: capitalize│uppercase│lowercase│none – мәтінді бейнелеуде регистрді түрлендіруді анықтайды. Үндеместен none алынады. Мұндағы:

• 
  capitalize – әрбір сөздің бірінші қаріпі бас қаріпке түрленеді;
  
• 
  uppercase – барлық әріптер бас қаріпке түрленеді;
  
• 
  lowercase – барлық әріптер кіші қаріпке түрленеді;
  
• 
  none – алдынғы орнатылған мәндерді жояды.
  

text-align: left│right│center│justify – мәтінді терезе шеттеріне теңестіреді. Мұндағы:

• 
  left – солға;
  
• 
  right – оңға;
  
• 
  center – ортаға;
  
• 
  justify – екі шеттен.
  

<абсолют бірліктер>│<пайыз> – мәтіннің шегінуін көрсетеді. Әдетте шегіну абзацтың бірінші қатарының сол жағына ғана тиісті. Егер бірлік мәні сол таңбалы болса, онда салыстырмалы түрде солға қарай жылжыйды. Абсолют бірліктер төмендегідей анықталады:

• 
  px – логикалық пиксельдер;
  
• 
  pt – логикалық нүктелер;
  
• 
  em – шрифт өлшемінің бірліктері;
  
• 
  cm – сантиметрлер;
  
• 
  mm – миллиметрлер.
  

Мысалы: еm.

vertical-align: baseline │sub │super │top │text-top │middle │bottom │text-botton │<пайыз> – элементтің тік орналысуын анықтайды. Үндеместен baseline алынады. Мұндағы:

• 
  baseline – элементті негізгі элементтен төменге орналастырады;
  

• 
  middle – элементтің орта сызығын «негізгі + жартылай биіктікке» теңестіреді;
  
• 
  sub – элементті қатар астына теңестіреді (әдетте font-size: smaller қасиетімен бірге беріледі);
  
• 
  super – элементті қатар төбесіне теңестіреді (әдетте font-size: smaller қасиетімен бірге беріледі);
  
• 
  text-top – элементің жоғарғы шетін негізгі элементтің төбесімен теңестіреді;
  
• 
  text-bottom – элементтің төменгі шетін негізгі элементтің астымен теңестіреді;
  
• 
  top – элементтің төбесін негізгі элементтің ең жоғарғы шетімен теңестіреді;
  
• 
  bottom – элементтің астын негізгі элементтің ең төменгі шетімен теңестіреді.
  

line-height: normal│<сан>│<ұзындық>│<пайыз> – қатар биіктігін көрсетеді. Үндеместен normal алынады.

color:<түс> – құжат мәтінінің түсін көрсетеді. Үндеместен құжатта анықталған түсті алады. Түстің мәні бірнеше тәсілмен анықталады:

• 
  түс аттары бойынша, мысалы: red (қызыл), blue (көк);
  
• 
  он алтылық сан түрінде, мысалы: #000000 (қара);
  
• 
  нөлдері алып тасталған он алтылық сан түрінде, мысалы: #fff (ақ);
  
• 
  RGB моделі бойынша, мәндері 0-ден 255-дейін, мысалы: rgb(255,255,255) (ақ);
  
• 
  RGB моделі бойынша пайызбен берілген, мысалы: rgb(100%, 0%, 0%) (қызыл).
  

Мысалы:

h1 {color: green} /* түс аттары бойынша берілген (жасыл) */

h1 {color: #008000} /* түс он алтылық сан түрінде берілген (жасыл) */

жүктеу/скачать 1,62 Mb.

Достарыңызбен бөлісу: