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

admin 2019-07-18 ℃ Қысқаша

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

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

21. border-bottom-width

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

Code:

Esten Tech

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-bottom-width</title>
<style>
h1 {
border-color: #ccc;
border-style: double;
border-bottom-width: 7px;
border-right-width: 7px;
padding-left: 5px;
}
</style>
</head>
<body>
<h1>Text,Text,Text,Text,Text,Text,Text</h1>
<p>Text,Text,Text,Text,Text,Text,Text
Text,Text,Text,Text,Text,Text,Text</p>
</body>
</html>

Мысалға:

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

22. border-right-color

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

Code:

Esten Tech

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-right-color</title>
<style>
.line {
border-right-color: navy;
border-right-style: dotted;
border-right-width: 3px;
padding-right: 10px;
margin-right: 100px;
}
</style>
</head>
<body>
<div class="line">
Text,Text,Text,Text,Text,Text,Text
Text,Text,Text,Text,Text,Text,Text
Text,Text,Text,Text,Text,Text,Text
Text,Text,Text,Text,Text,Text,Text
</div>
</body>
</html>

Мысалға:

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

23. border-top-width

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

Code:

Esten Tech

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>border-top-width</title>
<style>
h1 {
border-top-color: green;
border-top-style: double;
border-top-width: 7px;
border-right-color: green;
border-right-style: double;
border-right-width: 5px;
padding: 7px;
color: #f9b61c;
}
</style>
</head>
<body>
<h1>Text,Text,Text,Text,Text,Text,Text</h1>
<p>Text,Text,Text,Text,Text,Text,Text
Text,Text,Text,Text,Text,Text,Text
Text,Text,Text,Text,Text,Text,Text
Text,Text,Text,Text,Text,Text,Text
Text,Text,Text,Text,Text,Text,Text</p>
</body>
</html>

Мысалға:

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

24. background-position

Background-image сипатын пайдаланып, өңдік сурет жинағының бастапқы орнын орнатады. CSS3-де әрбір фон үшін бірнеше мәндерді көрсетуге болады

Code:

Esten Tech

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-position</title>
<style>
body {
background-image: url(images/pattern-left.png), url(images/pattern-right.png);
background-repeat: repeat-y, repeat-y;
background-position: left, right;
}
</style>
</head>
<body>
<div style="height:2000px">
</div>
</body>
</html>

25. border-collapse

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

Code:

Esten Tech

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-collapse</title>
<style>
table {
width: 100%; /* Ширина таблицы */
border: 4px double black; /* Рамка вокруг таблицы */
border-collapse: collapse; /* Отображать только одинарные линии */
}
th {
text-align: left; /* Выравнивание по левому краю */
background: #ccc; /* Цвет фона ячеек */
padding: 5px; /* Поля вокруг содержимого ячеек */
border: 1px solid black; /* Граница вокруг ячеек */
}
td {
padding: 5px; /* Поля вокруг содержимого ячеек */
border: 1px solid black; /* Граница вокруг ячеек */
}
</style>
</head>
<body>
<table>
<tr>
<th> </th><th>2013</th>
<th>2014</th><th>2015</th>
</tr>
<tr>
<td>Нефть</td><td>43</td>
<td>51</td><td>79</td>
</tr>
<tr>
<td>Золото</td><td>29</td>
<td>34</td><td>48</td>
</tr>
<tr>
<td>Дерево</td><td>38</td>
<td>57</td><td>36</td>
</tr>
</table>
</body>
</html>

Мысалға:

<!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title>border-collapse</title>   <style>    table {      width: 100%; /* Ширина таблицы */     border: 4px double black; /* Рамка вокруг таблицы */     border-collapse: collapse; /* Отображать только одинарные линии */    }    th {      text-align: left; /* Выравнивание по левому краю */     background: #ccc; /* Цвет фона ячеек */     padding: 5px; /* Поля вокруг содержимого ячеек */     border: 1px solid black; /* Граница вокруг ячеек */    }    td {      padding: 5px; /* Поля вокруг содержимого ячеек */     border: 1px solid black; /* Граница вокруг ячеек */    }   </style>  </head>  <body>      <table>    <tr>      <th> </th><th>2013</th>     <th>2014</th><th>2015</th>    </tr>    <tr>      <td>Нефть</td><td>43</td>     <td>51</td><td>79</td>    </tr>    <tr>      <td>Золото</td><td>29</td>     <td>34</td><td>48</td>    </tr>    <tr>      <td>Дерево</td><td>38</td>     <td>57</td><td>36</td>    </tr>   </table>   </body> </html>

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

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