| Сайттағы барлық жобалар тегін қолданысқа берілген, жоба авторы Естен Ербол |
1. border-bottom
Үстіңгі аралықтың өлшемін белгілеу, цифрылар артқан сайын екі аралықтың арасы ашыла береді .
жәнеде түс белгілеп сызық қалыптастыруға болады .
Code:
Esten Tech
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>border-bottom</title>
- <style>
- .panel {
- background: #ccc; /* Цвет фона */
- }
- .panel P.content {
- padding: 5px; /* Добавляем поля */
- margin: 0; /* Убираем отступы у параграфа */
- border-top: 2px dotted white; /* Параметры линии вверху */
- }
- .panel P.title {
- font-family: sans-serif; /* Рубленый шрифт */
- font-weight: bold; /* Жирное начертание */
- font-size: 90%; /* Размер шрифта */
- padding: 5px; /* Добавляем поля */
- margin: 0; /* Убираем отступы у параграфа */
- background: maroon; /* Цвет фона */
- color: white; /* Цвет текста */
- border-bottom: 2px solid white; /* Параметры линии внизу */
- }
- </style>
- </head>
- <body>
- <div class="panel">
- <p class="title">Test</p>
- <p class="content">TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
- </div>
- </body>
- </html>
Мысалға:
Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз
2.border-left-color
Сол жақ шекеаралық түс
Code:
Esten Tech
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>border-left-color</title>
- <style>
- .line {
- border-left-color: #fc0; /* Цвет линии слева */
- border-left-style: solid; /* Стиль линии */
- border-left-width: 7px; /* Толщина линии */
- padding-left: 10px; /* Расстояние между линией и текстом */
- }
- </style>
- </head>
- <body>
- <div class="line">
- Сынақ,СынаСынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,
- </div>
- </body>
- </html>
Мысалға:
Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз
3.border-top
Астыңғы аралықтың өлшемін белгілеу, цифрылар артқан сайын екі аралықтың арасы ашыла береді .
жәнеде түс белгілеп сызық қалыптастыруға болады .
Code:
Esten Tech
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>border-top</title>
- <style>
- .line {
- border-top: 1px solid red; /* Линия сверху текста */
- border-bottom: 1px solid red; /* Линия снизу текста */
- padding: 5px; /* Поля вокруг текста */
- }
- </style>
- </head>
- <body>
- <div class="line">
- Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
- Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
- </div>
- </body>
- </html>
Мысалға:
Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз
4.background-attachment
Сайт артқы көрінісі немесе Фондық көрініс .
Фондық көрініске түс немесе суреттерді белгілеуге болады , барлық браузер қолдайды.
Code:
Esten Tech
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>background-attachment</title>
- <style>
- body {
- background-image: url(images/help.png);
- background-attachment: fixed;
- }
- </style>
- </head>
- <body>
- <div style="height:2000px">
- Сайт мазмұны
- </div>
- </body>
- </html>
5. border-bottom-color
Астыңғы аралықтық өлшемге сызық қалыптастырып түс белгілеу .
Code:
Esten Tech
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>border-bottom-color</title>
- <style>
- #panel {
- background: #ccc; /* Фондық түс */
- }
- #panel p {
- padding: 5px;
- margin: 0;
- }
- #title {
- background: navy; /* Фондық түс */
- color: white; /* Мәтіннің түсі */
- border-bottom-width: 2px;
- border-bottom-style: solid;
- border-bottom-color: white;
- }
- </style>
- </head>
- <body>
- <div id="panel">
- <p id="title">Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ
- Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ,Сынақ</p>
- </div>
- </body>
- </html>
Мысалға:
Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз
Дайындаған: Естен Ербол
Esten Tech： CSS Кодтарының мағынасы - 1
