1. Басты бет > Website > CSS
  2. CSS Кодтарының мағынасы - 4

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

admin 2019-05-28 ℃ Қысқаша

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

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

 

 

16. background-image

Сайт парақшасына фондық суретті орнатады. Фондық түс элемент үшін бір уақытта орнатылған болса, фондық сурет толығымен көрсетіледі.

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>background-image</title>  
  6.   <style>  
  7.    body {  
  8.     background-image: url(http://www.esten.kz/skin/esten_vi/images/logo.png);  
  9.    }  
  10.   </style>  
  11.    </head>  
  12.  <body>  
  13.   <p>...</p>  
  14.  </body>  
  15. </html>  

 

Мысалға:


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

 

 

17. border-bottom-style

Элементтің төменгі жағындағы шекара мәнерін орнатады.

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>border-bottom-style</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">Text</p>  
  27.   <p>Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text  
  28.   Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text</p>  
  29.   </div>  
  30.   
  31.  </body>  
  32. </html>  

 

Мысалға:


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

 

 

 18. border-right

Элементтің оң жақ шекарасының қалыңдығын, мәнерін және түсін бір уақытта орнатуға мүмкіндік береді.

 

 Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>border-right</title>  
  6.   <style>  
  7.    .line {  
  8.     border-left: 1px solid red;  
  9.     border-right: 1px solid red;  
  10.     padding: 0 10px;  
  11.     margin: 0 10%;  
  12.    }  
  13.   </style>  
  14.  </head>  
  15.  <body>   
  16.   <div class="line">  
  17.  Test,Test,Test,Test,Test,Test,Test,Test,Test,Test,Test,Test,Test,Test,Test  
  18.  Test,Test,Test,Test,Test,Test,Test,Test,Test,Test,Test,Test,Test,Test,Test  
  19.  Test,Test,Test,Test,Test,Test,Test,Test,Test,Test,Test,Test,Test,Test,Test  
  20.  Test,Test,Test,Test,Test,Test.  
  21.   </div>  
  22.  </body>  
  23. </html>  

 

Мысалға:


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

 

 

19. border-top-style

 Элементтің үстіне жиек стилін орнатады.

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8" />  
  5.   <title>border-top-style</title>  
  6.   <style>  
  7.    h1 {  
  8.     border-top-color: #800000;  
  9.     border-top-style: double;  
  10.     border-top-width: 7px;  
  11.     border-left-color: #bd0000;  
  12.     border-left-style: solid;  
  13.     border-left-width: 2px;  
  14.     padding: 7px;  
  15.    }  
  16.   </style>  
  17.  </head>  
  18.  <body>   
  19.     
  20.   <h1>Text,Text,Text,Text,Text,Text,Text</h1>  
  21.   <p>Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text  
  22.   Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text  
  23.   Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text  
  24.   Text,Text,Text,Text,Text,Text,Text</p>  
  25.     
  26.  </body>  
  27. </html>  

 

Мысалға:


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

 

 

 20. background-origin

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

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>background-origin</title>  
  6.   <style>  
  7.    .example {  
  8.     border: 20px solid #fc0;  
  9.     padding: 20px;  
  10.     height: 200px;  
  11.     background: url(http://www.esten.kz/skin/esten_vi/images/logo.png) no-repeat;  
  12.     background-origin: content-box;  
  13.    }  
  14.   </style>  
  15.  </head>  
  16.  <body>  
  17.   <div class="example">...</div>  
  18.  </body>  
  19. </html>  

 

Мысалға:


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

 

 

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

 

 

Esten Tech： CSS Кодтарының мағынасы - 4

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

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

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

Қызғынды

Көп
Жалпыламалық сұрақ-жауаптар 900 - 1000
Жалпыламалық сұрақ-жауаптар 900 - 1000
Жалпыламалық сұрақ-жауаптар 400 - 500
Жалпыламалық сұрақ-жауаптар 400 - 500
Жалпыламалық сұрақ-жауаптар 1- 40
Жалпыламалық сұрақ-жауаптар 1- 40
Қазақ-ағылшын, ағылшын-қазақ тілдеріндегі онлайн-тілашар
Қазақ-ағылшын, ағылшын-қазақ тілдеріндегі онлайн-тілашар
MIT App Inventor
MIT App Inventor

TAG

Көп
  • HTML (13)
  • HTML5 (13)
  • JS (12)
  • CSS3 (12)
  • Youtube (6)
  • Android (3)
  • iOS (3)
  • Design (3)
  • Photographer (3)
  • Software (1)
  • PS (1)
  • Invention (1)
  • Game (1)
    • Esten Tech

    Терең білім – тәуелсіздігіміздің тірегі, ақыл-ой – азаттығымыздың алдаспаны _ Н. Ә. Назарбаев

    Санат

    APP Website Software Design

    Санат

    Invention VIP Сабақтар Байланыс

    TAG

    Біз туралы Байланыс
    2016-2017 © Esten Tech. Жасаған: Естен Ербол