CSS  стандарты және стильдер кестесі

Стильдердің каскадты кестелері

1.1 CSS қызметі

1.2 CSS тарихы

1.3 CSS негізі

1.4 CSS тегі түс

1.5 CSS тегі өлшем

1.6 CSS тегі комментарилер

2. Стиль кестелерін жасау. Жалпы мақсаттары

2.1 Синтаксис

2.2 Тег қасиеттерінің мұрагерлігі

2.3  Констекстік селекторлар

2.4 Шрифт және мәтін

2.5 Фон

3. Бет бөлігіне стильдер кестесін қолдану

3.1 Класстар

3.2 Өзінің жеке тегі

3.3 <span> қатарлық элементі

3.4 <div> блоктык элементі

3.5 Блоктар қасиеті

3.6 Блокты мәтінмен айналып өту

3.7 Позициялау

3.8 Таңдалынған  беттер

3.9 Тег үшін стильді қолдану

4. стильдер қатынасы    

4.1 Стильдер каскады және приоритеті

4.2 ID-класстар

Қорытынды

 

Бұл дәрісте сіз сайттың веб-беттерінің түрін бірдей қалай өзгертуге және оларды бір стильде дайындау жайында, бет бөлігін немесе жеке тегті қалай өзгерту керек екендігі жайында біле аласыз. CSS стильді каскадты кестелер негіздерімен таныса аласыз.

Кілттік сөздер: стильдердің каскадты кестелері, CSS, стильдердің сыртқы кестесі, стильдердің ішкі кестесі, тег стилі, мұрагерлік, селектор, класс, ID-класс, қатарлы элемент, блокты элемент, позициялау, стильдер қатынасы, стильдер каскады.

 

 

1. Стильдердің каскадты кестелері

1.1 CSS қызметі

HTML негізін білу, сіз үшін кішкенен шындықты түсінуге жеткілікті: гипермәтіндік белгі тілдің қажетті элементтерін жазу – автор қалағанындай пайдаланушының бетінде барлық ақпараттың орналасуына кепілдеме бермейтін, өте күрделі  және шаршататын жұмыс. Елестетіңіз,  өзіңіздің өңдеп отырған веб-бетіңіз браузер терезесінің барлық көлеміне орналастыру керек болған мәтіннің он абзацынан және экранның ортасы бойынша туырлау керек болған бес көркемдеуден тұрады. Бұл дегеніміз, HTML-құжаттың кодында <p align="justify"></p> тегін он рет және бес рет <img> тегінде align="center" атрибутын көрсетуіңіз керек болады. Егер сізге, осыдан кейін барлық абзацтағы мәтін түрін өзгерту керек болатын болса, мысалы, түсі мен мөлшерін өзгерту, онда мұндай өзгерістерді он рет енгізуге тура келеді. Нәтижесінде жұмыс көлемі, уақыты ұлғаяды және веб-шебер ретіндегі құны да. Сонымен қатар, құжатқа орнатылып жатқан тег көлемі мен нәтижелік файлдың көлемі ұлғайғандықтан, оның серверден жүктелуі де көбейеді. Яғни, бұл дегеніміз, сіз өз сайтыңыздың пайдаланушыларын жоғалтасыз! HTML-белгілердің мүмкіндіктері шектеулі. Графиканың өлшемін пиксельге дейін нақты көрсетуге болады. HTML-де мәтіндік блоктар өлшемін көрсетуге болмайды: олар үнсіз келісім бойынша шрифтке қатысты өлшемнен шығып, браузермен есептеледі. Беттің авторы пайдаланушының браузер күйге келтірулерін алдын-ала анықтай алмайды, бұл бетте ақпаратты ұсынудың нұсқаларын шектейді. Осы және басқа да мәселелерді шешу үшін W3C консорциумының HTML стандартын өңдеуші-компания бағдарламалаушыларымен жаңа CSS (Cascading Style Sheets – стильдердің каскадты кестелері) стандарты жасалынды. CSS, HTML-ге қарағанда веб-бет алгоритм элементтерін жазуды басқа алгоритмін қолданады.  Мәтіндік файлдағы әрбір элементтің қасиетін бір рет көрсету арқылы, кейін сіз осы файлды HTML құжатқа қосып, браузерге веб-беттің әрбір компонентінің мәнін сол жақтан оқыта аласыз. Бұған қоса, сіз осы стильдер жазбасымен жеке файлды түрлі құжаттардың шексіз мөлшеріне қоса аласыз. Бұдан басқа веб-беттерді дайындаудың алдында  CSS –тің сөзсіз бір ерекшелігі бар. Өзіңіздің сайтыңыздың немесе бірнеше сайттардың барлық веб-беттердің қандайда бір элементін стилін өзгерту үшін, бір файлдағы кодтің бір қатарын туырлаудың өзі жеткідікті болады.  Бұдан басқа, барлық веб-беттер үшін ішкі файлдан берілген стильді оған керемет түр беру үшін, кез-келген нақты веб-беттің ішінен анықтауға болады. Сонымен қатар кез-келген бірлік тегтің стилінде өзгертуге болады. 

Стильдің каскадты кестелері – HTML секілді веб-дизайнерге үлкен нақтылық және әсермен бетке элемент қосу және өзгертуге мүмкіндік беретін технология. CSS оқу, HTML оқыған секілді өте жеңіл. Ал негізінен CSS пен жұмыс жасау жеңілірек, себебі мұнда жаңа тегтер енгізбестен, бар тегтер қолданылады. Осы бөлімді оқи отырып, сіз стильдің каскадты кестелері қалай жұмыс жасайтындығын, олардың құрылу негіздерімен танысасыз. Ары қарай сіз осы кестелердің жеке қасиеттерін қолдануды үйренесіз.

 

1.2 CSS тарихы

 

CSS стильдің каскадты кестелері HTML ден кейін, 1997 жылы пайда болды. CSS-тің HTML-мен жұмыс жасағанына қарамастан, ол HTML емес. сонымен қоса, CSS өзімен бар HTML тегтерді анықтай отырып, HTML мүмкіндіктерін кеңейтетін жеке кодты ұсынады. Бұл WWW мәтіндік құжаттарды алмасу тәсілі ретінде, ал HTML осы құжаттар жасалынатын тіл болғандығымен байланысты. Жауынгерлер мен ғылымдар үшін құжаттың көріктілігі емес, оның құрамы қызықтырды. Сондықтан да, HTML-дің алғашқы жобаларында веб-беттерге бейнені қосу әдістері болмаған. Бірақ, уақыт өте келе интернетке басқа да пайдаланушылар келіп, олар өздеріне әсем етіп жасауды талап етті. Осылайша, веб-дизайнерлердіңғ жұмысын жеңілдету мақсатымен жасалынған стильдердің каскадты кестелері пайда болды. қазіргі уақытта CSS1 және CSS2 қабылданған. Үшінші деңгей (CSS3) өңделу үстінде. Алайда, оны шығарғаннан кейін де браузерлер оны бірнеше жылдан кейін ғана қолдана алады. CSS3 –тің алдынғы жобалардан ең негізгі ерекшелігі масштабталатын векторлық графика болып табылады. Яғни, векторлық графиканың барлық мүмкіндіктері енді интернетте де қол жетімді болады. Алайда, стильдер кестесінің бірінші дәрежесі де (CSS1) тамаша мүмкіндіктерді ұсынады.

 

1.3 CSS негіздері

 

Стильдердің каскадты кестелері немесе жай стильдер кестесі (CSS – Cascading Style Sheets) – HTML кодтың түрлі фрагменттерін форматтауды жазатын және одан бөлек сақталатын ережелер терісі. Қандай да бір фрагментті форматтауды  немесе фрагмент кодының біртипті тобын форматтауды көрсететін ережені стиль деп атайды. Стильдер кестесі CSS ерекше тілінде жазылып, css кеңейтілімге ие ерекше файлдарда сақталынады. Стильдер кестесін өз іс-тәжірибеңізде үйренгеніңіз  жөн.

7.1.1. тапсырма site-family-dr бумасынмен байланысқан сайтпен жұмыс жасаймыз. Тәжірибе үшін бізге үш бет қажет болады. Блакнотта бос мәтіндік файл жасап, оны styles.css атымен сақтаңыз. Бұл файлда веб-бетті басқару стильдері бойынша барлық командаларды жазып отырамыз. Мұндай файлдың кеңейтілуі әртүрлі болуы мүмкін - txt, htm, html, css және т.б. Алайда өңдеу барысында іздеуге жеңіл болуы үшін css қолдану қабылданған. әрбір тақырыбында үш дәреже (Н1-Н3 тегтері), екі-үш абзац (Р тегі) және гиперсілтемесі (А тегі) бар жанама құрамды екі веб-бет жасаңыз. Тек қана керекті атрибуттарды пайдаланып, қысқаша код жазыңыз. Беттерді 1.htm и 2.htm. файлдарында сақтаңыз.

Егер де мәтінді орыс алфавиттерімен енгізе алмасаңыз, онда HTML құжаттың тақырыбына келесі қатарды енгізіңіз:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

 

HEAD тегіне құжаттың сыртында орналасқан стильді жазу сілтемесін орналастырыңыз, біздің файлымыз styles.css:

<link type="text/css" rel="stylesheet" href="styles.css">

 

HREF атрибуты стильдерді жазудың сыртқы файлдары үшін адресті береді (URL). Ол абсолютті немесе салыстырмалы болуы мүмкін. Бұл жағдайда біз барлық файлдарды бір бумаға сақтағанбыз, сондықтан адрес ретінде файл атын көрсетуімізге болады. Құжаттың сыртында орналасқан стильді жазу сілтемесі HEAD элементін орналастыратын LINK элементінің көмегімен орындалады.

 

экран бетінде екі веб-бетті және мәтіндік файл styles.css бірдей ашыңыз. Терезеде барлық ақпараттың орналасуы міндетті емес. мысалы, веб-бет былай көрінуі мүмкін: Қызықты саяхатқа дайынсыздар ма? Алға! Осы екі бет өзіңіздің ұйымыңыз үшін ұзақ уақыт жасаған суперсайтыңыздың бөлігі болсын. Сіз үлкен мақтанышпен сайтыңызды бастығыңызға көрсетіп жатырсыз. Ал ол өз ойынан айнып, беттің басқа түрін қалап отыр, мысалы абзац мәтінінің түсі көктем келгенінің себебімен жасыл болғанын қалайды. сіз ойланып қалдыңыз. Беттегі барлық мәтіннің түсін алмастыру оңай. Алайда бұл жерде тек ғана абзацтарды ғана өзгерту керек. Арине, барлық азбзацтарға COLOR атрибутыменен FONT тегін қоюға болады. Алайда бұл беттері көр болса үлкен және бірбетті жұмыс. Күзде қоңыр, қыста – көк түсті талап етеді. Алайда мұның барлығын веб-шебер жасайды ғой. Алайда бұл қорқынышты жұмыс. Бірақ сіз қорықпаңыз, себебі алдын қарастырғанымыздай, мұны стильдер кестесіндегі кішкене бөлігін өзгерту арқылы жасауға болады.

 

7.1.2 тапсырма styles.css файлына келесі кодты теріңіз:

p {color:#00ff00}

 

Мынаған мән беріңіз, CSS файлына веб-беттің құрылымын анықтаушы ешқандай қосымша тегтерді жазу қажет емес. берілген жағдайда, барлық файл тек қана ұсынылған бір қатар дан тұрады. Файлды сақтап, веб-бет экранын жаңартыңыз. Үлкен күрделі жұмыстың орнына  біз бірнеше минутта көптеген беттердің алпеттерін өзгерттік.

 

1.4 CSS тегі түс

 

CSS-тегі түсті атау (мысалы, blue немесе red) немесе RGB кодтың (мысалы, #87FED3) көмегімен көрсетуге болады. CSS түсінің атаулары HTML дегі атауларымен сай келеді. HTML-ге қарағанда, CSS үшмәнді сан бойынша көрсетуге мүмкіндік береді, бұл жағдайда санның әрбір цифры екіеселенеді. Осылай, #7C5 дегенміз бұл #77CC55.

 

1.5 CSS тегі өлшем

 

em ( негізгі шрифте әріп ені m)

px (пиксельдердегі өлшем)

in (дюймдар)

cm (caнтимeтpлер)

mm (миллимeтpлер)

pt (1/72 дюймнің пунактері)

pc (пиктер, он екі пункт)

% (пайыздар; пайыздық мәндер дұрыс, бұрыс ондық бөлшектер болуы мүмкін.)

CSS те барлық қасиеттердің мәні болып normal, medium, bold  және басқалары секілді кілттік сөздер болуы мүмкін. Кілтік сөздер регистрге сезімсіз борлып табылады: bold және BOLD – екеуі бір.
Әрбір қасиет, өзінің мәнін ата-аналық элементтен мұрагерлік ету керектігін көрсететін  inherit  мәнін қабылдайды.

1.6 CSS тегі комментарилер

Басқа бағдарламалау тілдеріндегі секілді, CSS-те комментарилер тек ғана сәлемдеседі. Сіз комментарилеріді өз стиліңізде /* символынан бастап, */ символынан аяқтап, дайындауыңыз керек. Комментарилерді жиірек қолданыңыз, олар сіздің стильдеріңізді болашақта модификациялауы да мүмкін.

2. Стиль кестелерін жасау. Жалпы мақсаттары

 

         Стиль кестесі – бұл, HTML тіліндегі ақпаратты экран бетінде ұсынудың жалпы параметрлерін беретін ережелер жазбасы. Бұл ережелерді тег комбинацияларын, қасиет атауларын және айнымалыларды пайдаланып жазу оңай.

 

2.2. Синтаксис

 

         HTML барлық элементтерінің стиль жазбаларының жалпы синтаксисі келесідей көрініске ие: элемент {атрибут: мәні}

Мұндай жазбаны ереже, стиль немесе селектор деп атайды.

Элемент атауы ретінде элемент белгісінің атауын, класс атауын және веб-бетегі обьект идентификаторын қолдануға болады. Атрибут көрініп тұрған элементтің қасиетін анықтайды, ал мәні – осы қасиеттің мәні.

Мысалы, 1 теңдеуінің барлық тақырыптарын ақ түске бояу үшін, келесідей жазу керек:

h1 {color: white}

или так:

h1 {color: #FFFFFF}

Көріп отырғаныңыздай, бұл екі қатар  <h1>  және  </h1> тегтерінің арасында орналасқан мәтін толығымен ақ түске боялатындығын көрсетеді (оналтылық жүйеде оның номері – ffffff).
         Алайда, егер де сіз барлық түстермен де осылай болады деп ойласаңыз, қателесесіз! Ақ және қара түстер – абсолютті түсініктер. Бірақ, "green" және "#00ff00" түстерін және басқа да танымал түстерді салыстырып көріңіз.

Бір қасиетті тегті бір жазбаға топтай отырып, бірнеше тегтерге енгізуге болады. Келтірілген мысалда біз тақырыптың барлық үш типі үшін қара түсті орнатамыз:

h1,h2,h3 {color: #000000}

Тег секілді, біз қасиеттерді де топтай аламыз.  Бұл үшін осы анықтамаларды қасиет үшін үтір нүктемен бөлу арқылы жақшаға алудың өзі жеткілікті:

h2 {
color: #000000;
font-size: 14pt;
font-family: Monaco
}

 

Бұл стиль екінші теңдеудің тақырыптары үшін 14 пунктті өлшемді Monaco шрифтті және қара түсті анықтайды. Егер де компьютерде Monaco шрифтіне рұқсат болмаса, онда үнсіз келісім бойынша орнатылған шрифт қолданылады. Мысалда код оны оқу жеңілірек болу үшін бірнеше қатарларға бөлінген. Егер де барлығын бір қатарғ,а жазатын болсақ, әсері өзгеріссіз, сол қалпы қалады. Егер де бір жазбада элементтерді немесе олардың қасиеттерін біріктіретін болса, онда неге барлығын біріктірмеске.

 

7.2.1 тапсырма.

         Стильдер кестесінде үшінші теңдеудің тақырыбы мен абзацы үшін қара түс, 14 пунктті өлшем және Monaco шрифтін беріңіз. Бірінші теңдеуден екінші теңдеуге дейінгі тақырыптарына қоңыр түс және Arial шрифтін беріңіз.

styles.css файлындағы өзгерісті сақтаңыз және  1.htm и 2.htm файлдарымен терезе құрамын жаңартыңыз. Веб-беттің түрі қалаай өзгергенін көріңіз. Жазба да жетерліктей тұтастырылған.  Стильдің жазбасы өте ұзақ болуы да мүмкін ғой,  қарама-қарсы жағдайда оны әрбір файл үшін қайталау керек болады. Бұл шамамен былай көрінеді:

p,h3 {
color: #000000;
font-size: 14pt;
font-family: Monaco;}
h1,h2 {
color: gray;
font-family: Arial;}

 

2.2 Тег қасиеттерінің мұрагерлігі

 

CSS ұсынатын мүмкіндіктерлдің бірі тегтің басқа бір тег қасиетін мұра етіп алу болып табылады. Бұл дегеніміз, біз барлық мүмкін тегтердің қасиеттерін жазбау керек дегені. Егерде біз <big> тегінің қасиетін алдын-ала бермесек, ол қосылған тег қасиетін мұра етеді. Мысалы,

<h3> бөлім4. <big> Өте үлкен</big> және таза </h3>.

Егер стиль кестесі барлық <h3> тақырыптары үшін жасыл түсті анықтаса, онда «Өте үлкен» сөзі басқалары секілді жасыл түске бояйды.  Егер басқа жағынан қарағанда, біз <big> үшін аспан көк түсті беретін болсақ, көрсетілген сөздер анықтағанымыздай, аспан көк болады.

 

1. Констекстік селекторлар

 

Мұрагерліктің тағы да бір ерекшелігі – ол стильдерді констекті түрде қолданыла алды. Мысалы, <h3> түсін жасыл, ал <big> аспан көк етіп орнатудан басқа, <big> тегін <h3> және </h3> тегтерінің арасында  және тек қана осылардың арасында осы бөлімді тапқан кезде сары түсті етіп орнатуға болады. Мұны жасау оңай:

h3 big {color: yellow}

Бұл жерде стильдер кестесі <h3> тегіне бірмезгілде орнатылып қосылған <big> құрамы сары түсте көрінеді. Бұл беттің басқа жерлерінде <big> стиліне әсер етпейді. Бұл жердегі конструкциядағы үтірдің жоғын тексеру керек, болмаса, бұл селектор  екі тегтің құрамы да сары түспен көрінеді дегенді білдіретін болады. Мұндай ережелер контекстік селектор деп аталады, себебі олар контекстке тәуелді айнымалылар мәнін анықтайды.

         Әртүрлі айнымалылар үшін, айнымалыларды үтір арқылы бөлумен бір қатарда мәнін анықтауға болады.

Мысалы, h3 em, h2 i {color: yellow}

 

7.2.2 тапсырма. Абзацтар үшін әріпше стилін жасаңыз – бірінші әріп шрифттің белгілі бір түрімен үлкейтілген қоңыр түсте болуы керек. Бірінші бөлімде «Привет» сөзін сіз FONT:<p><font color="gray" size="+2" face="Arial">П</font>ривет</p> тегі арқылы жасаған болатынсыз. Ол жерде қанша абзац болса, сонша осындай ұзын код қою керек еді.  Бұдан жұмыс уақыты ұлғаяды, код өлшемі көбейді және бетті жүктеу уақыты ұзарады.

         CSS көмегімен мұны қысқартуға болады.

Нұсқалардың бірі  - ЕМ ерекшеленуімен атрибутты қолдану.

<p><em>П</em>ривет</p>,

 Ал атрибуттың өзі стильдер кестесінде анықталады:

p em {color="gray"; font-size: 140%; font-family: "Arial";}

 

Бұл ұзақ қатар бір рет қана жазылады. Ал әрбір абзацта әріпшені жазу 50 символдан 10 символға дейін қысқарады.

Веб-бетті жүктеу уақыты мен өз қайратыңызды  үнемдеудің күштіт мақсаты емес па? Сонымен қатар ЕМ тегінің ішіндегі мәтін тек қана абзац ішінде ғана қоңыр түске боялады. Ал басқа орындарда ол кәдімгідей әрекет етеді. ЕМ тегінің орнына кез-келген басқа тегтерді де қолдануға болады.

         Бұл жерде сі шрифттердің жазылуына көру мақсатында мысалжүргіздіңіз. Бұдан кейін мәтін – бұл ақпаратты жұмысшының құралы болғандықтан оны пайдаланумен жақынырақ танысу керек.

 

2.5 Шрифт және мәтін

 

         Компьютерлік дизайнда шрифттарға үнемі үлкен көңіл бөлінген және World Wide Web шектеу болып табылмайды. Алайда орыс тілі үшін бар шрифттердің бар байлығы мен түрлілігі үш шрифтпен шектеледі:

serif (негізінен Times New Roman немесес басқа таңбалы шрифттер), sans-serif (Arial, Helvetica немесе басқа таңбасыз шрифттер) жәнен моноенді (Courier). Егер де нақтырақ айтсақ, бұл жерде шрифттердің отбасылары қарастырылған. Жиі бұл отбасылардың әрбірі комьпютерде бір кириллистік шрифтпен ұсынады.

         Әріптерді бейнелеуді басқару үшін құжат авторы шрифтке әсер ететін бірнеше атрибуттар қолданады:

font-family – сызылған шрифттер отбасы (гарнитура);

font-style – түзу сызық немесе курсив;

font-weight – әріптердің "боялғаны" ;

font-size – шрифт өлшемі (кегль).

Кейбір браузерлерде бұл параметрлерді бір ғана font атрибутында орналастыруға болады:

font:bold 12pt sans;

font-weight – шрифттардың бояуын басқару үшін қолдаеылады. Ол 100-ден (ең нәзік) 900-ге (қатты боялған) дейінгі мәндерге ие болуы мүмкін. 400 мәнін normal, ал 700 мәнін bold кілттік сөзімен алмастыруға болады. Сонымен бірге бұл қасиеттердің мәні болып ата-аналық элемент үшін қабылданғанға қарағанда , сәйкес қай шрифт болжамын қолдану керектігін көрсететін lighter және bolder кілттік сөздері де болуы мүмкін.

         Стильдің каскадтың кестелірнде font-size шрифтінің өлшемі алдын жазылған өлшемнің стандартты мәндерін немесе абсолютті өлшем үшін кілттік сөздердің бірін қабылдап алады. Мына кілттік сөздер шрифттердің жоғарылау реті: xx-small, x-small, small, medium, large, x-large, xx-large.

         Бұл өлшемдер негізінен <font> тегінің атрибуты үшін қолданылатын шрифттердің жеті өлшеміне сәйкес келеді.

         Кегльді орнату кезінде font-size әріптің ұзындығын емес, әріптің өзінен үлкен болатын әріп астының өлшемін білдіретінін есте ұстаған жөн:

        

 

 

font-size пайдаланушының бірнеше мысалы:

p {font-size:12pt} – параграф кеглі 12 пунктке орнатылған
p {font-size:12px} – параграф кеглі 12 пиксельге орнатылған
p {font-size:120%} – параграф кеглі  элемент параграфнынан алатын әріп өлшемінен 120% -тен орнатылған.

 

Мәтінді басқару үшін бірнеше атрибуттар:

letter-spacing - әріптер арасындағы қосымша интервалды анықтайды (normal  сөзімен немесе ұзындық бірлігінде)

line-height – мәтін қатарының арасындағы қашықтықты анықтау үшін қатар ұзындығын көрсетеді (абсолютті немесе қатысты бірлікте)

text-align – беттің қатысты шеттерінің мәтіндерін туралауды анықтайды (left, right, center и justify);

text-decoration – мәтінді ерекшелецді: underline (пoдчepкивaниe), overline (нaдчepкивaниe), line-through (зaчepкивaниe), none – ерекшелеу әсерін қайтарады;

text-indent – ұзындық бірлігіндегі бірінші қатардағы жылжытуды құрады (абзацты жылжу, қызыл қатар);

text-transform – тег құрамын түрлендіреді:

capitalize   (жоғарғы регистрдегі әрбір сөздің бірінші әрпін шығарады),

uppercase  (жоғарғы регистрдегінің барлығын шығарады),

lowercase  (төменгі регистрдегінің барлығын шығарады),

none.

 

Енді сізге ақпаратты қалай дайындағаны жайында ойламасаңыз да болады. Сіз өзіңіз тақырып әріптерін таңдап отыра аласыз. Барлық абзацтар қажетті орынмен жылжытылған болады.

 

 7.2.3. тапсырма. Жоғарыда келтірілген материал негізінде мәтінді немесе шрифтті басқару бойынша бірнеше тәжірибелер өткізіңіз.

 

 

2.6. Фон 

 

Веб – беттерде жазба жазуды үйрендіңіздер.  Ол үшін қандайда бір тегкке COLOR атрибутының мәні түс атауы ретінде немесе RGB коды ретінде беріледі.  Сөйтіп тег мәтінге қолданылады.

HTML- тілін оқығанда сіз фонға түс беруді және фонддық суретті қоюды үйрендіңіз. Ол үшін стиль кестесінің қандай мүмкіндіктер беретінін қарастырайық.

Фоның папаметірімен тек блоктық элементке белгі қою арқылы басқаруға болады. Бұндай элемент ретінде барлық бет болуы мүмкін кесте, абзац, тақырыпнама және т.б. мысалы, келесідей стильді шақыратын болсақ:

h4 { background-color:black;color:white;}

онда төртінші деңгейдің  барылқ тақырыпнамалары қара фонда  ақ түспен көрінетін болады.

Фонның түсі мен мөлдірлігінен басқа енді фондық картинкаларды басқаруға болады. Фондық бейнелермен жұмыс жасау үшін бірнеше атрибуттар бар:

• background-image – фонға қойылатын бейне адресін береді;
• background-repeat – экранда бейнені  қалай  дубляждауға болатынын анықтайды; келесідей мәндерге ие:
  • repeat – бейне екі бағыттада  дубляжданады;
  • repeat-x – бейне горизонталь бойынша дубляжданады;
  • repeat-y –бейне вертикаль бойынша дубляжданады;
  • no-repeat – нақты өлшемді бір бейне шығарылады;
• background-attachment – фонның мінез-құлығын береді, ол фиксирленеді (fixed) немесе картинкамен бірге айналдырылады(scroll) . ос ы қасиеті арқылы  жақсы эффект құруға болады;
• background-position – бастапқы каринканың экранда орнамласуын анықтайды. Мәндері ретінде  келесідей командалар болуы мүмкін LEFT, RIGHT, CENTER,   пиксельдік немесе пунктік түрдегі координаталар, сонымен қатар пайыздық. Екі координатаныда көрсетуге болады біруін немесе ешқайсысын. Жоқ координата орталықтандыру мәнімен ауыстырылады.

Қысқаша түрде фонның барлық қасиеттерін ортақ background  атрибутында сипаттауға болады:

background: transparent|color url repeat scroll position

Мысалдар:

p { background: gray url(fon.gif) no-repeat fixed 50% 30px; }
body { background-image: http://www.eidos.ru/logo.gif; background-repeat:repeat-x; background?attachment:fixed;}

фонда тек бір бейнені пайдалану қандай байлық мүмкіндіктеріне ие! Қаншалықты мүмкіндіктер көп болсада олармен қиянат етуге болмайды. 7.2.4. тапсырма. Екінші бөлімді оқығанда логотип құрып оны vizitka-family.htm файылында веб бетке орналастырғансыз. Логотипті беттің жоғарғы бір бөлігінде  бекіту арқылы  фондық бейне қылыңыз. Бұл бейнені дубляждалуын және айналдыруын  өшіріп тастаңыз.

 

3. Беттің бөлігіне кестелік стильді қолдану.

 

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

Алдыңғы матиралды оқып үйрену рақылы сіз глобальді түрде ойлауды үйренесіз. Тегтердің түрлі комбинацияларын ескере отырып.Кесте стиліне қосылған барлық беттердегі  тегтер қасиетін ауыстыра аласыз.

Кейде оданда нақтырақ нәрсе қажет. Мысалы, мәтінді түгелдей  кіші өлшемді ширифтпен және сұр түсті ету. Әр бір мәтінге барлық атрибуттарды көрсету- тиімді емес. Немесе сіз мәттінің кейбір элементтерін стандартты емес рамкамен белгілегіңіз келсе, бірақ рамка түрін таңдамай кейінге қалдырсаңыз. Кейін осы  мәтіннің элеметтерін іздеп тауып атрибуттарын өзгерту қажет болады? Дәл осылай рамка түрін өзгерткіңіз келген жағдайда жасауға боладыма? Енді мүмкін емес. Болашақта біз осындай тапсырмаларды CSS арқылы қалай орындауға болатынын қарастырамыз.

 

3.1. Классытар 

 

Жоғарыда қойлған тапсырма оңай шешіледі. Сіз жаңа класс құрмақсыз. 7.3.1. тапсырмада сіз өзіңіз құруға тырысып көріңіз. styles.css Кесте стиліне жаңа .reverse {color:white;background-color:black;} есте сақтаңыз reverse  сөзінің алдындағы нүкте  біздің жаңа класс құрып жатқанымызды және оның қасиеттерін анықтап жатқанымызды білдіреді. Класс аталуы HTML- белгі элементінің қандайда бір стандартты атауы болып табылмайды. Ол кез-келген болуы мүмкін, бірақ тек цифрамен әріптен тұруы керек.

         1.htm файылында  соңғы абзацтың бастапқы тегтары және сілтемелері сипатталған оларды келесідей етіп өзгертіңіз:
<p class="reverse"> ...
<a class="reverse"> ...алынған нәтижені көріңіз:

 

Сур .7.2. класттарды пайдалануда кейін мкез-келген  HTML- тегінде қолдануға болатын тәуелсіз стилдерді құруға  мүмкіндік береді.

 

Бір класстың барлық тегтері ақпаратты  бірдей көрсететін болады.  Мысал ретінде бір классқа бір параграф және гиппермәтіндік сілтеме ал басқасына параграф көрсетілген. Осы тегтардағы барлық ақпарат инверстік түрде мкөрсетілген. «мүмкін» деген сөз , бейне  тегіне әріптің өлшем немесе түс қаиеттерін пайдалану – дұрыс емес.  Бірегей атауға ие стильді, стилді класс немесе жай класс деп атайды. Оны мүмкін болатын    HTML-дің барлық тегтарында пайдалануға болады. Белгі элементін бір классқа орнату үшін,  CLASS атрибутын пайдалану қажет.

 

 

3.2. Өзінің жеке тегі.

 

      Ақпараттардың бір бөлігін класстармен белгілеудің алдыңғы әдісі – күшті! Бірақ біз оларды тек  стандартты  HTML-тегтарда пайдалануды үйрендік. Веб-шеберге тар! Еркін болғысы келеді. Өзінің жеке  HTML-тегін құрғысы келеді. Шынында барлығына жаңа тег құру қиын, сәйкес мекемелер оны ұзақ уақыт тексеріп қабылдайтын болады. Егер шынымен  құрғыңыз келсе, мақсатқа жетуде біршама жақындау үшін, <span> және<div> тегтарын пайдаланған ыңғайлы.

 

 

3.3. Жолдық <span> элементі.

 

<span> тегінің ешқандай қасиеті жоқ. Ол сіздің тегіңізді құрудың таза беті болып табылады. <span> тегі арқылы мәтіннің барлық бөліктерін белгілеуге болады. CLASS атрибутын қолданған кезде тек осы құжат мәтінінің бөліктеріне  кез-келген мәнді бере аласыз. Мысалы:Купание <span class=second>красного</span> коня.  Бұл жерде "красного"сөзі  SECOND классында белгіленгендей сәйкес түске ие болады. Әрине көрсетілген класстан кез-келген мөлшерде характеристика беруге болады және олардың барлығы сөзде көрінеді.
         SPAN-ды  FONT, I, B, U  элементтері алмастыра алады. Осындай сәйкестікке мысал келтірейік: 

HTML-элемент                 CSS-аналогы
<font color=red> ...</font>   <span style="color:red;">...</span>
<i>...</i>                           <span style="font-style:italic;">...</span>
<b>...</b>                         <span style="font-weight:bold;">...</span>
<u>...</u>                       <span style="text-decoration:underline;"> ... </span>      и т.п.

 

3.4. <div> блоктық элементі.

 

DIV әмбебап блоктың ролін ойнайды. DIV-ті бейнелеуде ешқандай сәйкес ережелер жоқ.  <div> тегінің жалғыз қасиеті өзінің құрамындағыдан кейін және бұрын аралқ қалдыратынында. Осы тегтің ашылатын және жабылатын элемент тегтары  бір объект ретінде қабылданады. DIV ешқандай мағынаға ие емес,  бірақ CLASS атрибутымен пайдаланған уақытта  осы құжатқа қатысты параметрлерді бере аласыз.

Теориялық жағынан  <div> тегінің орнына <p> тегін қолдануға болады.  Негізінен құжаттар көптеген абзацтарға бөлініп жазылады, сондықтан барлық браузерлер экранда <p> тегіна  <div> тегіна қарағанда нақты орын бере алмайды.

 

3.5. Блоктар қасиеті.

 

Блоктық элемент – мәтін блокы, бейне және т.б. тікбұрыш терминінің ақпаратынан реттеуге мүмкіндік береді. Сонымен қатар ақпарат блогы кесте немесе картинка сияқты қасиетке ие  беттің элемент дизайны болып келеді. <div> тегімен анықталатынг блок келесідей қасиеттерге ие:биіктік (height), ұзындығы (width), граница (border), шегініс(margin), набивки (padding), еркімен орналастыру(float), басқару(clear). 7.3.2. тапсырма. Бірінші деңгейдің барлық тақырыпнамаларын сұр фонды қара рамкаға орналастырыңыз, төменгші және  оң жақ шегарасыны 2см қалындату арқылы. Ал нақты тақырыпнама үшін,  барлық сөзің алғашқы әріптерін сұр түспен  белгілеңіз: #777777.

 

Бірінші деңгейдің тақырыпнамасы

 

7.3.Сур. идея түсініктіма? Онда өндіруге көшеміз. Бірінші әріптен бастаймыз. Барлықтарын  CLASS атрибутты SPAN тегімен белгілеу керектігін түсінген шығарсыздар. HTML-кодты тақырыпнама үшін дайындаймыз:<h1><span class="first">З</span>аголовок <span class="first">П</span>ервого<span class="first"> У</span>ровня</h1> тиімді жұмыс істегісі келетіндер бірдей кодтарды қайта-қайта терудің қажеті жоқтығын түсінген болатын шығар. Тегті бірінші әріпке дайындағаннан кейін, код компьютер буферіне көшіріледі да содан кейін әр бір бірінші әріптін орнына қойылады. Енді әріптердің өзін және қалған мәтінді қою ғана қалды.
кестелер стиліне жаңа ереже енгіземіз: .first {color: "#777777"}сақтаймыз және нәтижені тексереміз. Одан кейін бәрі оңай. Енді рамканы қалай жасау керектігімен танысамыз.

 

Шегара(border)

 

Әр бір блоктық белгілеу элементінде шекра болады. Шекарадан шегіністер есептелінеді(margin және padding). Қалқымалы блок шекра шегінде оны мәтін бөліп тұрады.

Шекара блогын сипаттау үшін, келесі атрибуттар қолданылады:

• border-width – шекара блогының ені.
• border-color – шекара блогының түсі.
• border-style – шекара блогының сызық типі.

Келесідей мәндерге ие бола алады: none, dotted, dashed, solid, double, groove, ridge, inset, outset. Сызықтардың түрін осы айтылғандарды ағылшын тілінен аудару арқылы түсінуге болады.

Internet Explorer шекараны көрсеткенде міндетті түрде оның типін анықтау қажет, әйтпесе ол бейнеленбейді! Атрибуттардың бұлай жазылуы  мүмкін тек шекараның барлық блоктарының характиристикасы бірдей болса. Бірақтан оларды барлықтары үшін бөлек-бөлек беруге болады, бірақ оны барлық браузерлер қолдамайды. Мысалы:

border-top-width: 1pt – блоектың жоғарғы шекарасының ені 1 пункке тең.
border-right-color: red – блоктың оң жақ шекарасы қызыл түсті.
border-bottom-style: solid – блоктың төменгі шекарасы біртегіс.
енді өзіңіздің нәтижеңізді 7.2 және 7.4.:.first {color: "#777777"}
h1 { border-width: 1pt; border-right-width: 2pt; border-bottom-width: 2pt; border-color: #000000; border-style: solid; background: #CCCCCC} суреттегі нәтижемен салыстырыңыз. Негізінен түгелімен сәйкеспеуі де мүмкін, өйткені фонға қандай сүр түсті және жоғарғы шекараны қандай арлықта алу керктігі көрсетілмеген.

Тек көрсетілген параметрлерді салсытырыңыздар.

7.4 суретте  1pt барлық шекарасының ендері көрсетілген, одан кейін  оң және төменгі шекараға раналған 2 pt ені көрсетілген. Осылайша жазба біршама қысқартылады. Кім тезірақ жұмыс істегенді ұнататын болса, атрибуттарды қысқартылған түрде жазуына болады. Мысалы, шекараның жоғарғы сызығын сипаттау үшін, келесідей жазба типі қолданылады:

 p { border-top:1pt solid #CCCCCC; }
тег {атрибут: ширина_линии тип_линии цвет_линии}

 

3.6. Блоктың мәтінмен бұрмалануы.

 

Біз IMG бейнелен тегіне графиканы оқып үйренгенде теңестіру атрибутын сол жақ бойынша берген болатынбыз align=left, ол бейнені мәтін оң жағымен жүргіп тұрды. Дәл солай керсінше де болды.  Қойылған жерінен картинканың мәтінмен жылжуы қарапайым орналастыру мәтіндік құжатынан ерекшелігі,  картинканың вертикалды шекарасынан  мәтіннің бір емес бірнеше жолдары орналасады.

Аналогтық түрде DIV блокты мәтініне де жылжымалықты орналастыруға болады, бірақтан LEFT  және RIGHT мәндерін FLOAT атрибутына меншіктеу керек, ол қалқымал блокты анықтайды. Ол үшін styles.css файылына келесі ережені жазу керек: div {float: right}.
бұл қасиет<img> және <table> тегті ALIGN  атрибутына аналогты болып келеді, бірақтан ол кез-келген HTML –элементіне қолданыла береді. Енді сіз өзіңіздің веб-бетінізді қызықты әрі әдемі етіп құрааласыз. 2 бөлімде сіз өзініздің веб-бетіңізге өзініздің суретінізді немесе оның орнына уақытша қойдыңыз (файл vizitka-family.htm). суретті  DIV  блогына қою арқылы құжатты өзгертініз. Блокты қалқымалы ылыңыз.
сізге өзгерту аз болып көрінуі мүмкін. Бірақ сіз фонды және көлемді кез-келген етіп құра аласыз, сөйтіп картинканы рамкадағыдай ете аласыз. 7.5 суреттен қараңыз. Екіншіден біз осы блокты беттің кез-келген жеріне қалай қоюға болатынын үйренеміз.

 

 

 

3.7. Позицияландыру

 

Браузер терезесінің жұмыс үстел  өрісіне сол пикселді өзгетпестен ақпарат блогын орналастыруға қалай қарар едіңіз. Оңтайлы қара едіңіз. Осыған орай тууға тиіс

сұрақ туындайды: беттің авторы  компаненттерін орналастыратын координаттар жүйесі қалай құрастырылған. CSS моделіндегі координаттар жүйесі безендіруден ерекшелінеді. Координата басы терезенің сол жақ жоғарғы бөлігінде орналасады. Х координатасы солдан оңға қарай өседі, ал у координатасы – жоғарыдан төмен қарай. Блоктың жағдайын анықтайтын қасиетті қарастырамыз.  POSITION тегі браузерге тегтің құрамын қай терезеге орналастыру керктігін  көрсетеді. Үш мәнді қолдана аламды: ABSOLUTE, STATIC, RELATIVE.
TOP және LEFT атрибуттары берілген коордианаталар жүйесіндегі сол жақ бұрыш блогында у және х координаталын анықтайды. Мәндері ұзындықпен, (px, pt), браузер терезесінің енінің пайыздық мөлшері арқылы берілуі мүмкін.

Ең соңыда жағымдысы. Алдынғы бөлімнен сіздерге біршама таныс Z-INDEX атрибуты бар. Ол блоктармен бірін-бірін жабуды береді. Егер блоктар жабылатын болса, онда үстінен Z-INDEX үлкен мәнге ие элементі бейнеленетін болады. Бұл параметр кез-келген оң және теріс мәнді сандармен беріле береді. Блоктарды жабу туралы әңгіме болғанда оларды  қабаттар деп атау оңай болады. Бұл осы элементтерге арналған кеңінен таралған атаудың бірі.3.7.4. тапсырма. DIV блокын кез келген экранда горизонталь бойынша орналасуын беріңіз егер оның блогының ені экраннан 20% қашықтықтаекені белгілі болса. Қарап тұрсаңыз қиын сияқты бірақ бастауыш класстың оқушысына арифметикалық тапсырма берген сияқты. DIV блогының басынан орталығына дейінгі қашықтық10%. Онда блок басы келесідей координатаға ие болуы керек LEFT экраннан 40%. CSS ережесі келесідей болады: div {position: absolute; width=20%; left:40%;}

7.3.5.тапсырма. "Мы" сөзіне ранап көленке құрыңыз. Мәтінің көленкесі беттен анық ерекшеленіп тұрады. CSS пайда болғанға дейін интернетте көленке құрудың амалы ол графиканы қолдану болды. Енді ондай қажеттілік жоқ. Кесте стилінде үш класс құрыңыз:TITLE, TEXT және SHADOW. Біріншіне кез келген жерге сыйуы үшін сәйкес координаталар бойынша берініз.  Қалған екеуін – обсалюттік координата бойынша , бір-біріне сәйкес нақты жылжыта алу үшін:

.title {position: relative; font-size: 120px}
.text {position:absolute;top:5px;left:5px;color:#ff0000;z-index:2}
.shadow {position:absolute;top:7px;left:3px;color:#990000;z-index:1}
веб-бетте мәтін қабатын немесе көленке қабатын құрамына қосатын тақырыпнама қабатын құрыңыз:

 <div class=title>
<span class=text>Мы</span>
<span class=shadow>Мы</span>
</div>            

          

 

Сур. 7.6.нәтижесін көріңіз.

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

         7.3.6.тапсырма. көленкені оданда көлемді және кеңістікте жоғалатындай етіңіз. Ол үшін бірнеше класс құрыңыз. Әр класстағы қабат жағдайын сөзбен алдынғы классқа сәйкес жоқ қылыңыз және түсін өзгертіңіз,  Сделайте тень более объемной, растворяющейся в пространстве.
ол үшін бірнеше класс құрыңыз. Әр бір класста қабат жағдайын сөзбен алдынғы классқа сәйкес жоюды сәйкесінше жүргізіңіз. Содан түсін өзгертіңіз,  біртіндеп көленке түсінен фон түсіне өтіңіз. Z-INDEX атрибуты жайлы ұмытпаңыз.жылжытуды 1 px жасаңыз сол кезде   сатылығы онша         көрінбейді
 

 

3.8. Таңдаулы беттер

 

Сідер енді сайттың барлық беттерін басқара аласыздар. Ақты төмен- қараны жоғары, немесе қараны жоғары- ақты төмен қылы аласыздар. Ал егер көңілге ерекше бір нәрсе қажет болса?

Мысалға, чатқа арналған веб-беттерді қатал түстерден гөрі түрлі түсті қызықты етіп бояуға болады. Немесе сіз өзіңіздің  веб –мастер бетіңізді басқаларға қарағанда жақсырақ қылу арқылы , сіз пайдаланушыға сайтың дизайнын жасау сіздің шегініз емесін ал  әкімшілік жағайыңыз екенін көрсете аласыз.

Кестелер стилін пайдалану  <style> элементін пайдалану болып табылады. Мұндағы идея кестелер стилінің деректерінде <style> тегінде, сонымен қатар бұл ақпарат құжатқа ол жүктелген кезде бірден қолданылады. Бұл жағадйда <head> файыл тақырыпнамасында  біз келесі синтаксисті қолданамыз:<style type=”text/css”>… стильдер жайлы ақпарат…</style> бұл әдіс қарапайым әрі түсінікті болып көрінеді бірақ оның өзінің білуге қажетті ерекшеліктері бар. Бірінші – ескі браузерлер <style> тегін қабылдамайды және стильдер жайлы ақпаратты қарапайым мәтін ретінде көрсетуге тырысады. Мұны барлық жолдарды түніктеме тегіне кіргізу арқылы жоюға болады:  <style type=”text/css”>
<!--
… информация о стилях …
-->
</style>  бұл ақпаратты тек осындай синтаксисті түсінетін браузерлер ғана қолдана алады.
екінші проблеме <style> тегін жоғарыда көрсетілгендей етіп  қолдану арқылы, біз кестелер стилін әр бір құжатқа қоюымыз қажет. Бұл құжатты құруға қажетті уақытты ғана емес, файыл өлшемін және барлық қолданылатын құжаттардың стилін толығымен өзгетуін одан да қиындата түседі. Сондықтан бұл әдіс кестелер стилін қолданудың  қасиеттерін теріске шығарады. Оны тек қажет болған жағдайда қолданыңыздар.мысалы, оригиналды беттерді құруда.

 

3.8. тегқа стилді қолдану.

Сідер енді мекемелерге де және өзініздің жеке беттеріңізге де кестелер стилін құрдыңыздар. Егер тек бір текті және бір рет өзгерту қажет болса не істеуге болады. Әрине реже жазып , оны ішкі немесе сыртқы кесте стиліне орналастыруға болады сосын қажетті тегқа класты белгілеп содан бәрі болады. Бұл бірақтан тиімді емес.  Егер сіз әжеден редиска сатып алып, ақшаны кассаға парып төлеп одан әжеге арнап жеке шот ашқанмен бірдей болады. Содан әже барады ақшаны алады соадн кейін ғана сіздерге өзінің редискасын көрсетеді...

Не істеуге болады?

 Проблеманы шешу үшін,  стильдер туралы ақпаратты тура тегте орналастыру керек,  сізге қажетті .<p style="color мәтіннінен тұратын:green">Этот абзац будет зеленым</p>  бұл әдіс әмбебап және оны қолдану оңай , бірақ оның  ең басты кемшілігі – әр бір тегқа параметірді индивидуалды түрде құру болып табылады. Кейде ол қолайлы.

 

 

 

 

4. Стильдердің өзара әрекеттесуі.

 

7.4.1.тапсырма 7.2.1. тапсырмаға оралайық. Ол жерде абзацқа және үшінші деңгейлі тақырыптарға бірдей стиль шақырылады.  Абзацтарға жаңа қасиет құрыңыз – абзацтық шегеру 20секіруден. Ол text-indent:20pt атрибуты арқылы құрылады.  
қалай болады егер абзац стилі үшінші деңгейлі тақырып стилімен бірге сипатталған болса? Абзацқа және тақырыпқа жазылу стилін бөлетін болсақ онда жазудың  кішігірімділігі жоғалып жұмыс көбейеді. Мысалы, сізге стакан чайды қыздырып оны тәтті ету қажет делік, оны бір мезгілде немесе екі бөлек жасауға болады. Тәжірибе жасап көріңіз бірақ нәтиже бірдей болады. Мұнада дәл солай. Егер атрибутты бірінші сипаттамаға қойуға болмайтын блса, онда ол бірінші тақырыпқа әсер етеді, онда жаңадан жазба құрыңыз ондағы абзацқа 20 пункт мәнін беріңіз. Әр түрлі жазбалардағы әр түрлі қасиеттер бір мезгілде элементке қолданылады. Абзац қара болады және өлшемі 14 пункті және 20пункті өлшемді қызыл жолдан тұратын болады.

 

4.1. Стилдің каскадтылығы мен артықшылықтары.

 

 

Алдында көргендеріңіздей веб-бетке кесте стилінің сыртқы және ішкі сонымен бірге тег стилі әсер ететінін көрдік. Сонымен қатар веб-бет сыртқы кесте стилінің бірнешеуіне сілтенуі мүмкін, мысалы:

<link type="text/css" rel="stylesheet" href="style.css">
<link type="text/css" rel="stylesheet" href="my_style.css"> бұл жағдайда ол бір уақытта кесте стилінің барлығын қолданады. Егер де бір стиль бірнешерет анықталған болса,  онда стилдер жан –жалы туындайды сол уақытта артықшылықтар және каскадтық ережелері келеді. Тегтің ішіне орналастырылған ішкі стилі сыртқы кестедегі сыртқы және ішкі кесте стилінде  абыройға ие болады. Осы каскадтық деп аталады.

         Каскадтық – үлкен мүмкіндік дегенді білдіреді. Соның арқасында кесте стиліміздің өлшемін минимумға дейін кішірейте аламыз. Каскадтық кесте стилін  ұзақ оқып үйренуге болады. Ол одан әрі қызығырақ болады. Біздің курста тек CSS  негіздерімен таныстыру болып табылады. Кейін қалағандар одан әрі арнайы әдебиеттерді өз бетіншще оқу арқылы үйренуіне болады. Оған қажетті базалық білімдеріңіз сіздерде енді бар. Бірақтан бұндай қызықты тақырыпты аяқтау өте қиын. Бұл әдістеменің авторлары тағы бірнеше веб-бетті құрудың тиімді түрлерін көрсеткісі келіп отыр. Дәстүрлі CSS классты стандарттан басқа тағы жалған атты кластарды анықтайды.link, active, visited, hover – бұл жалған атты класттар тек <a> тегімен қолданылады. Мысал:
a:link    { color: red }    /* непросмотренные ссылки */
a:visited { color: blue }   /* просмотренные ссылки */
a:hover { color: yellow }   /*выбранный, но не активизированный*/
/* пользователем элемент */
a:active  { color: white }  /* активные ссылки */ назар аударыңыз a:hover ережесі  a:link и a:visited ережелерінен кейін орналасуы керек, әйтпесе каскадтау  ережесі a:hover ережесінің  "color" қасиетін жасыратын болады.

a:active a:hover  кейін орналасқандықтан активті сілтеме ақ түспен бейнеленеді пайдаланушы сілтемені А элементінің үстіне қойғанда сонымен бірге ол оны активтейді. Осы класстар көмегімен беттердегі сілтемелерді безендіруге болады. Тышқанмен сілтемеген көрсеткен уақытта  ширифті өзгетпеген жөн. Ол жағдайда мәттінің сілтемеден төмен жылжытуы болып көзге зиян тигізеді.

 

4.2. ID-клaccы

 

барлық тегтар ID атрибутына жіберіледі. CSS көмегімендеректер тегіне ID мәнін беруге және кейбір стилдік ережелерді беруге болады.

Имя id-класс тег атынан # (peшeткa) белгісі арқылы бөлінеді.  #yellow {color: yellow}
h1#blue {color: blue}   7.4.4. тапсырма . <h1 id="blue">  жазуын жазу арқылы немесе ID атрибутының кез-келген тегіне  yellow  мәнін беру арқылы көк түсті тақырыпнама құрыңыз. Бұның бәрі класттарды пайдаланғанға ұқсас. Бұндай әдіспен құрылған стильдерді қолданудың кейбір кемшіліктері бар- ID мәні құжатта ерекше. Бұл динамикалық веб-беттерді бағдарлағанда әр бір тегін басқаруға мүмкіндік береді.