Web-Programming.in.ua

CSS

CSS - каскадні таблиці стилів. Це технологія опису зовнішнього вигляду сторінок, написаних на HTML.

Головне завдання CSS - розділити код сторінок і їхній зовнішній вигляд.

CSS використовується  для того, щоб описати кольори, шрифти , положення блоків, їх розміри на веб-сторінці.

CSS має простий синтаксис.

Статті:

Одиниці виміру в CSS

Привіт, в цій статті буде розглянута тема одиниць виміру в CSS. Зазвичай використовують 2-3 одиниці, але бути знайомими з усіма все таки варто. В цьому допоможе ця стаття. Давайте напишимо деякий CSS код, в якому задамо розмір шрифу параграфу в 14 пунктів: p { font-size: 14pt; } Саме pt -…

Псевдо-елементи і класи в CSS

Привіт, в цій статті буде розказано, що ж таке псевдо-класи і псевдо-елементи в CSS. Що ж почнемо... Вони використовуються для оформлення різних станів елементів. Найчастіше це використовують для оформлення різних станів посиляннь (наведений, натиснутий, відвіданий, і т.д.). Тому почнемо саме з цього. :link – звичайний стан посилань. :visited – посилання,…

Заокруглені кути CSS3

Всім привіт, в цій статті я розкажу Вам, як зробити заокруглені кути в CSS3 через властивість "border-radius". Зараз створимо просту сторінку з розміткою. Одразу наведу приклад: <html> <head> <meta charset="utf-8"> <style> </style> </head> <body> <div class="container"></div> </body> </html> Тепер пропишемо стилі: .container { width: 150px; height: 150px; background-color: gray; }…

CSS хаки для браузерів

Привіт, напевно кожен, хто займався Web-дизайном стикався з проблемою, коли дизайн сайту "ламався" при перегляді сайту на старих браузерах( Наприклад Internet Explorer). CSS хаки - синтаксис CSS, який розуміє тільки певний браузер. CSS хаки можуть бути застосовані не тільки для різних браузерів, але й для різних версій одного браузера. Приклад,…

Як зробити анімований фон на сторінці за допомогою CSS

Привіт, Ви напевно задумувались, як зробити анімований фон на сторінці без використання JavaScript? Виявляється це дуже просто. Достатньо використати зображення у форматі gif. Приклад: <html> <head> <style> body { background-image: url(bg.gif) no-repeat; height: 100%; } </style> </head> <body> <div style="margin: 25%; width: 200px; height: 100px; background-color: white;">           …

Зміна зовнішнього виду першої букви через CSS

Дуже часто хочеться виділити кольором, розміром першу букву абзаців, і т.д... Для того, щоб задати стиль для першої букви потрібно прописати в CSS: p:first-letter { font-size: 150%; color: red; } В HTML: <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Aenean commodo ligula eget dolor.</p> Ось таким не хитрим способом…

Відступ параграфу через CSS

Читаючи якийсь журнал, книгу або журнал, Ви помічали багато параграфів... В цій статті я покажу Вам, як задати відступ параграфу на CSS. Параграф створюється за допомогою тегу <p>. Кожен параграф повинен бути оформлений цим тегом. Для того, щоб зробити відступ достатньо написати такий CSS код: p { text-indent: 11px; }…

Види курсорів в CSS

Привіт, в цій статті ми розглянемо тему курсорів в CSS. Давайте відразу ж розглянемо, як задавати курсор: img { cursor: pointer; } В цьому прикладі ми встановили для селектора "img" параметр "cursor" із значенням "pointer". Ось таблиця із базовими значеннями: Cursors CSS Вид курсора Значение свойства cursor default help move…

Вступ в CSS. Синтаксис. Селектори

Привіт, в цій статті ми розберемо наступні питання: Синтаксис CSS. Як задати CSS стиль? Які є селектори CSS? Синтаксис CSS: CSS стилі складаються із списку правил. Кожне правило має один або багато селекторів. Синтаксис такий: спочатку пишеться селектор, потім в фігурних дужках вказуються всі його властивості і через двокрапку їх…
Нагору