CSS Кодтарының мағынасы - 1

admin 2019-04-15 Қысқаша

CSS Кодтарының мағынасы...

Сайттағы барлық жобалар тегін қолданысқа берілген, жоба авторы Естен Ербол

 

 

1. border-bottom

Астыңғы аралықтың өлшемін белгілеу, цифрылар артқан сайын екі аралықтың арасы ашыла береді .

жәнеде түс белгілеп сызық қалыптастыруға болады .

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>border-bottom</title>  
  6.   <style>  
  7.    .panel {  
  8.     background#ccc/* Цвет фона */  
  9.    }   
  10.    .panel P.content {  
  11.     padding5px/* Добавляем поля */  
  12.     margin: 0; /* Убираем отступы у параграфа */  
  13.     border-top2px dotted white/* Параметры линии вверху */  
  14.    }  
  15.    .panel P.title {  
  16.     font-familysans-serif/* Рубленый шрифт */  
  17.     font-weightbold/* Жирное начертание */  
  18.     font-size: 90%; /* Размер шрифта */  
  19.     padding5px/* Добавляем поля */  
  20.     margin: 0; /* Убираем отступы у параграфа */  
  21.     backgroundmaroon/* Цвет фона */  
  22.     colorwhite/* Цвет текста */  
  23.     border-bottom2px solid white/* Параметры линии внизу */  
  24.    }  
  25.   </style>  
  26.  </head>  
  27.  <body>   
  28.   <div class="panel">  
  29.   <p class="title">Test</p>  
  30.   <p class="content">TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>  
  31.   </div>  
  32.  </body>  
  33. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

 

2.border-left-color

Сол жақ шекеаралық түс

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>border-left-color</title>  
  6.   <style>  
  7.    .line {  
  8.     border-left-color: #fc0; /* Цвет линии слева */  
  9.     border-left-style: solid; /* Стиль линии */  
  10.     border-left-width: 7px; /* Толщина линии */  
  11.     padding-left: 10px; /* Расстояние между линией и текстом */  
  12.    }  
  13.   </style>  
  14.  </head>  
  15.  <body>   
  16.   <div class="line">  
  17. Сынақ,СынаСынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,  
  18.   </div>  
  19.  </body>  
  20. </html>  

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

 3.border-top

 Астыңғы аралықтың өлшемін белгілеу, цифрылар артқан сайын екі аралықтың арасы ашыла береді .

жәнеде түс белгілеп сызық қалыптастыруға болады .

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>border-top</title>  
  6.   <style>  
  7.    .line {  
  8.     border-top: 1px solid red; /* Линия сверху текста */  
  9.     border-bottom: 1px solid red; /* Линия снизу текста */  
  10.     padding: 5px; /* Поля вокруг текста */  
  11.    }  
  12.   </style>  
  13.  </head>  
  14.  <body>   
  15.     
  16.   <div class="line">  
  17. Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ  
  18. Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ  
  19.   </div>  
  20.     
  21.  </body>  
  22. </html>  
  23.  

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

4.background-attachment

Сайт артқы көрінісі немесе Фондық көрініс .

Фондық көрініске түс немесе суреттерді белгілеуге болады , барлық браузер қолдайды.   

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>background-attachment</title>  
  6.   <style>  
  7.    body {  
  8.     background-imageurl(images/help.png);  
  9.     background-attachmentfixed;  
  10.    }  
  11.   </style>  
  12.  </head>  
  13.  <body>  
  14.   <div style="height:2000px">  
  15.     Сайт мазмұны  
  16.   </div>  
  17.  </body>  
  18. </html>  

 

5. border-bottom-color

Астыңғы аралықтық өлшемге сызық қалыптастырып түс белгілеу .

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>border-bottom-color</title>  
  6.   <style>  
  7.    #panel {  
  8.     background: #ccc; /* Фондық түс */  
  9.    }   
  10.    #panel p {  
  11.     padding: 5px;  
  12.     margin: 0;  
  13.    }  
  14.    #title {  
  15.     background: navy; /* Фондық түс */  
  16.     color: white; /* Мәтіннің түсі */  
  17.     border-bottom-width: 2px;  
  18.     border-bottom-style: solid;  
  19.     border-bottom-color: white;  
  20.    }  
  21.   </style>  
  22.  </head>  
  23.  <body>  
  24.   
  25.   <div id="panel">  
  26.   <p id="title">Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ  
  27.   Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ</p>  
  28.   </div>  
  29.  </body>  
  30. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

Дайындаған: Естен Ербол

Esten TechCSS Кодтарының мағынасы - 1

Барлық құқықтар қорғалған

Кері қайту
Кері қайту

Ұқсас тақырыптар