CSS тізім стилін сипаттау

18 Желтоқсан 2014

HTML сабақтарында мен таңбаланған және нөмірленген тізімдер туралы баяндап өткенмін.

Бірақ, олардың кейбірінің орналасуы код жазу барысында тізімдерді өзіміз қалаған түрге келтіруге қиындық жасайды.Мысалы, мен меню жасағанда <ul> </ul> ді қолданамын, бірақ мен менюде ешқандай таңбаның да, нөмірдің де болғанын қаламадым.Ал HTML дегі тізім үнсіздік бойынша әр меню тақырыбының алдына дөңгелек немесе араб сандарын жазады.Одан қалай құтылуға болады.Міне, осы кезде CSS көмекке келеді.

Не болмаса, мысалы таңбаның не нөмірлердің орнына сурет болғанын қалайтындар болса ше? Міне, осындай жағдай да CSS тің көмегімен шешіледі.|

Тізім стилі оның негізгі қасиеті list-style арқылы сипатталады, ал ол өз алдына 3 қасиеттен құралады:

list-style:list-style-type || list-style-position || list-style-image 

 list-style-type         таңбаның түрін сипаттайды
 list-style-position    таңбаның орнын белгілейді
 list-style-image       таңба ретінде қолданылатын суретті сипаттайды  

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

Төменгі кестеде осы стильдің 3 қасиеттері сипатталып беріліп тұр:

Қасиеті:Мәні Сипаттамалары
list-style-type:disc
list-style-type:circle
list-style-type:square
list-style-type:decimal
list-style-type:upper-roman
list-style-type:lower-roman
list-style-type:upper-alpha
list-style-type:lower-alpha
list-style-type:none
дөңгелек (үнсіздік бойынша)
шеңбер
квадрат
араб саны
жоғарғы регистрдегі рим саны
төменгі регистрдегі рим саны
латынның бас әріптері
латынның кіші әріптері
ешқандай таңба жазылмайды
list-style-position:outside
list-style-position:inside
таңба тармақтың сыртында орналасады (үнсіздік бойынша)
таңба тармақтың ішінде орналасады
list-style-image:none
list-style-image: url
ешқандай сурет болмайды
сурет қолданылады


Енді мен HTML кодында CSS ті белгілейтін тәсілдің екіншісін пайдаланып, HTML кодын екі түрде төмендегідей жазып шығайын.

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

Ал екінші код сол стильдің қасиеттерін бөлек-бөлек сипаттайды.

Екінші қасиет бойынша жазылған "таңба тармақтың сыртында не ішінде орналасады" дегенді түсіну үшін, тармақтың шекарасын CSS арқылы сипаттап тізім стилінің жанына жазып қоялық:

1.Таңба тармақтың ішінде орналасады
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>CSS арқылы таңбаланған тізім</title>
  <style type="text/css">
   ul { 
   list-style: square inside; /* Таңба квадрат түрінде тармақтың ішінде орналасады*/
       }
    li { border: 1px solid blue; /* Тармақтың шекарасын ені 1px көк түспен белгілейік*/ }
  </style>
 </head>
 <body>
   <ul>
	  <li>Қыс</li>
          <li>Көктем</li>
          <li>Жаз</li>
	  <li>Күз</li>
   </ul>
 </body>
</html>


Енді осы HTML кодының нәтижесін Денверде қаралық:


2.Таңба тармақтың сыртында орналасады
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>CSS арқылы таңбаланған тізім</title>
  <style type="text/css">
   ul { 
   list-style: square; /* Таңба квадрат түрінде белгіленеді */
   list-style-position: outside; /* Осы таңба тармақтың сыртына орналасады */
       }
    li { border: 1px solid blue;  /* Тармақтың шекарасын ені 1px көк түспен белгілейік*/}
  </style>
 </head>
 <body>
   <ul>
	  <li>Қыс</li>
          <li>Көктем</li>
          <li>Жаз</li>
	  <li>Күз</li>
    </ul>
 </body>
</html>


Енді осы HTML кодымыздың нәтижесін Денвер арқылы тамашалайық.



Енді CSS тізім стилінің үшінші қасиетін талдайық. Ол үшін HTML кодын жазып, таңба орнына өзіміз қалаған суретті орнаталық.Демек, бізге өте кішкене сурет керек.Мен ол үшін өз сайтымдағы қазақша өрнектелген суретті алып, оның мөлшерін 20х16 ге кішірейтіп алдым.Ол суретті сіздер де қаласаңыздар өздеріңізге көшіріп алыңыздар.

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>CSS арқылы суретпен таңбаланған тізім</title>
  <style type="text/css">
   UL { 
    list-style-image: url(images/cssornament.png); /* Таңба сурет түрінде белгіленеді */
     }
  </style>
 </head>
 <body>
   <ul>
          <li>Қыс</li>
          <li>Көктем</li>
          <li>Жаз</li>
	  <li>Күз</li>
   </ul>
 </body>
</html>


Енді кодтың нәтижесін көрелік:


Егер мақала көңіліңізден шықса, онда онымен төмендегі түйме арқылы достарыңызбен бөлісіңіз

Пікірлер