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

admin 2019-05-07 Қысқаша

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

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

 

 

11. border-top-left-radius

Жақтаудың жоғарғы сол жақ бұрышының айналмалы радиустарын орнатады.

шекаралық сызықтармен жәнеде фондық түспен де белгіленеді.  

 

Code:

Esten Tech
  1. <!DOCTYPE htm>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>border-top-left-radius</title>  
  6.   <style>  
  7.    .title {  
  8.     background: #000080;  
  9.     color: #ffe;  
  10.     padding: 7px;  
  11.     border-top-left-radius: 10px;  
  12.     border-top-right-radius: 10px;  
  13.    }  
  14.    .content {  
  15.     border: 1px solid #000080;  
  16.     background: #f0f0f0;  
  17.     padding: 7px;  
  18.     border-bottom-left-radius: 10px;  
  19.     border-bottom-right-radius: 10px;  
  20.    }  
  21.   </style>  
  22.  </head>   
  23.  <body>   
  24.   <div class="title">Esten Tech</div>  
  25.    <div class="content">  
  26. Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ  
  27. Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ  
  28. Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ  
  29.    </div>  
  30.  </body>   
  31. </html>  

 

Мысалға:


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

 

 

 12. background-color

Фондық түс (Артқы көрініс) .

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>background-color</title>  
  6.   <style>  
  7.    body{  
  8.     background-color: #3366CC;  
  9.    }   
  10.    h1 {  
  11.     background-color: RGB(249, 201, 16);  
  12.    }  
  13.    p {  
  14.     background-color: maroon;  
  15.     color: white;  
  16.    }  
  17.   </style>  
  18.  </head>  
  19.  <body>  
  20.   <h1>Esten Tech</h1>  
  21.   <p>Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ  
  22.   Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ  
  23.   Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ  
  24.   Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ</p>  
  25.  </body>  
  26. </html>  

 

Мысалға:


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

 

 

13. border-bottom-right-radius

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

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>border-bottom-right-radius</title>  
  6.   <style>  
  7.    .radius {  
  8.     background: #fc0;  
  9.     padding: 15px;  
  10.     margin-bottom: 10px;  
  11.    }  
  12.   </style>  
  13.  </head>   
  14.  <body>   
  15.   <div style="border-bottom-right-radius: 20px" class="radius">  
  16.    border-bottom-right-radius: 20px  
  17.   </div>  
  18.   <div style="border-bottom-right-radius: 70px 40px" class="radius">  
  19.    border-bottom-right-radius: 70px 40px  
  20.   </div>  
  21.  </body>   
  22. </html>  

 

 Мысалға:


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

 

 

14. border-radius

Жақтаудың бұрыштық радиусын орнатады. Егер рамка орнатылмаса, онда дөңгелектеу фонмен де жүреді.

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>border-radius</title>  
  6.   <style>  
  7.    .radius {  
  8.     background: #f0f0f0; /* Цвет фона */  
  9.     border: 1px solid black; /* Параметры рамки */  
  10.     padding: 15px; /* Поля вокруг текста */  
  11.     margin-bottom: 10px; /* Отступ снизу */  
  12.    }  
  13.   </style>  
  14.  </head>   
  15.  <body>   
  16.   <div style="border-radius: 50px 0 0 50px;" class="radius">  
  17.    border-radius: 50px 0 0 50px;  
  18.   </div>  
  19.   <div style="border-radius: 40px 10px" class="radius">  
  20.    border-radius: 40px 10px;  
  21.   </div>  
  22.   <div style="border-radius: 10em/1em;" class="radius">  
  23.    border-radius: 13em/3em;  
  24.   </div>  
  25.   <div style="border-radius: 13em 0.5em/1em 0.5em;" class="radius">  
  26.    border-radius: 13em 0.5em/1em 0.5em;  
  27.   </div>  
  28.   <div style="border-radius: 8px;" class="radius">  
  29.    border-radius: 8px;  
  30.   </div>  
  31.  </body>   
  32. </html>  

 

Мысалға:


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

 

 

15.border-top-right-radius

Жақтаудың жоғарғы сол жақ бұрышының айналмалы радиустарын орнатады.

шекаралық сызықтармен жәнеде фондық түспен де белгіленеді.

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>border-top-right-radius</title>  
  6.   <style>  
  7.    .radius {  
  8.     background: #f0f0f0;  
  9.     border: 1px dashed #000;  
  10.     padding: 15px;  
  11.     margin-bottom: 10px;  
  12.    }  
  13.   </style>  
  14.  </head>   
  15.  <body>   
  16.   <div style="border-top-right-radius: 10px" class="radius">  
  17.    border-top-right-radius: 10px  
  18.   </div>  
  19.   <div style="border-top-right-radius: 70px 40px" class="radius">  
  20.    border-top-right-radius: 70px 40px  
  21.   </div>  
  22.  </body>   
  23. </html>  

 

Мысалға:


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

 

 

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

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

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

CSS Кодтарының мағынасы - 2
Кері қайту