Огляд властивостей CSS 2 Огляд властивостей CSS Довідник

Огляд властивостей CSS

2 Огляд властивостей CSS Довідник спирається на актуальну зараз специфікацію CSS 2.1. Відповідно, наведений нижче список css-властивостей обмежений рамками специфікації.

3 Фон background Скорочений варіант запису для background-attachment Встановлює, чи повинна фонова картинка скролитися або повинна бути зафіксована у вікні браузера. background-color Встановлює колір фону для елементу. background-image Встановлює фонову картинку для елемента. background-position Встановлює початкове положення для фонової картинки. background-repeat Управляє циклічним повторенням фонової картинки.

4 Рамка (кордон, бордюр) Впливають на всі чотири рамки border Короткий варіант запису для властивостей border-width , border-style і border-color .Впливає на всі чотири межі елементу. border-color Встановлює колір рамки з усіх сторін елемента. border-width Встановлює товщину рамки з усіх сторін елемента. border-style Визначає стиль оформлення рамки навколо елементу. border-collapse Вказує клітинкам таблиці, чи мати власний бордюр або спільний з сусідньою коміркою. border-spacing Встановлює відстань між осередками таблиці.

5 Верхня рамка border-top Короткий варіант доступу до властивостей border-top-width , border-top-style і border-top-color . border-top-color Встановлює колір верхнього бордюру. border-top-style Встановлює стиль лінії верхнього бордюру. border-top-width Встановлює ширину верхнього бордюру.

6 Нижня рамка border-bottom Короткий варіант доступу до властивостей border-bottom-width , border-bottom-style і border-bottom-color . border-bottom-color Встановлює колір нижньої бордюру. border-bottom-style Встановлює стиль лінії нижньої бордюру. border-bottom-width Встановлює ширину нижнього бордюру.

7 Ліва рамка border-left Короткий варіант доступу до властивостей border-left-width , border-left-Style і Border-left-color . border-left-color Встановлює колір лівого бордюру. border-left-style Встановлює стиль лінії лівого бордюру. border-left-width Встановлює ширину лівого бордюру.

8 Права рамка border-right Короткий варіант доступу до властивостей border-right-width , border-right-style і border-right-color . border-right-color Встановлює колір правого бордюру. border-right-style Встановлює стиль лінії правого бордюру. border-right-width Встановлює ширину правого бордюру.

9 Шрифт font Короткий варіант запису властивостей font-style , font-variant , font-weight , font-size ,line-height і font-family . font-family Визначає шрифт (и) для відображення тексту. font-size Управляє розміром шрифту. font-style Управляє нахилом шрифту (курсив). font-variant Управляє зовнішнім виглядом малих літер (рядкові як прописні, "капітель"). font-weight Управляє товщиною (насиченістю) шрифту. line-height Властивість line-height використовується для того, щоб змінити розмір міжрядкового інтервалу.

10 Позиціонування position Визначає порядок, відповідно до якого елемент відображається на веб-сторінці. bottom Зрушує елемент щодо нижнього краю. Використовується спільно з властивістю position . left Зрушує елемент відносно лівого краю. Використовується спільно з властивістю position . page-break-before Зрушує елемент щодо верхнього краю. Використовується спільно з властивістю position . right Зрушує елемент щодо правого краю. Використовується спільно з властивістю position . z-index Визначає порядок, відповідно до якого елементи накладаються один на одного, якщо необхідно відобразити їх на одному місці.

11 Форматування clear Забороняє / дозволяє елементу обтікати "floated" об'єкти. clip Визначає область елемента, яка повинна відображатися на сторінці. display Змінює базові властивості елементів. float Зрушує елемент до правого або лівого краю. height Визначає висоту прямокутної області навколо елементу. overflow Визначає як відображати блоковий елемент у випадку, якщо його вміст виходить за рамки батьківського елемента. visibility Управляє налаштуванням видимості елемента. width Визначає ширину прямокутної області навколо елементу.

12 Списки list-style дозволяє одночасно задати три параметри для маркерів пунктів списку: list-style-type , list-style-position та / або list-style-image . list-style-image Встановлює зображення, яке буде використовуватися для маркування елементів списку. list-style-position Визначає, як відобразити на сторінці маркер пункту у списку: всередині того ж прямокутника, в якому розташовується елемент списку або поза ним. list-style-type Визначає, який вигляд матиме маркер пункту в списку ..

13 Текст direction Застосовується при створенні сайтів на мовах, в яких читання сторінки йде справа наліво. letter-spacing Визначає довжину інтервалу між літерами. page-break-inside Визначає розмір міжрядкового інтервалу. text-align Вирівнює вміст блочного елемента (текст або зображення) щодо меж блоку, і також вміст комірок таблиці по горизонталі. text-decoration Визначає, який оформлювальний прийом потрібно застосувати до тексту.

14 Текст text-indent Визначає розмір відступу першого рядка в тексті. text-transform Управляє написанням прописних або рядкових букв в тексті. vertical-align Визначає висоту вмісту всередині інлайн елемента або всередині комірки таблиці. white-space Визначає як відображати прогалини, символи табуляції і порожнього рядка. word-spacing Визначає відстань між словами.

15 Друк widows Дозволяє уникнути появи висячого рядка. orphans Дозволяє уникнути появи самотньою першого рядка. page-break-after Визначає наявність або відсутність розриву сторінки після елемента при друку. page-break-before Визначає наявність або відсутність розриву сторінки перед елементом при друку. page-break-inside Визначає наявність або відсутність розриву сторінки всередині елемента при друку.

16 Поля padding Скорочений спосіб поставити такі параметри: padding-top , padding-right , padding-bottom та/або padding-left . padding-bottom Визначає ширину простору між вмістом елементу і нижнім бордюром. padding-left Визначає ширину простору між вмістом елементу і лівим бордюром. padding-right Визначає ширину зовнішнього простору між правим бордюром і невидимим кордоном прямокутника. padding-top Визначає ширину зовнішнього простору між верхнім бордюром і невидимим кордоном прямокутника.

17 Інше caption-side Визначає, де буде відображатися заголовок таблиці: над нею або під нею. color Встановлює колір тексту елемента. content Застосовується для того, щоб вставити текст або зображення до або після якого-небудь елементу. counter-increment Задає значення збільшень лічильника. counter-reset Встановлює ідентифікатор, який зберігає лічильник відображень будь-якого елементу і встановлює початкове значення цього лічильника. cursor Визначає вид курсора при наведенні мишки на якийсь елемент.

18 Інше empty-cells Визначає, чи потрібно відображати кордон і фон клітинки, якщо в ній немає вмісту. margin Скорочений спосіб поставити такі параметри: margin-top , margin-right , margin-bottom та/або margin-left margin-bottom Визначає ширину зовнішнього простору між нижнім бордюром і невидимим кордоном прямокутника. margin-left Визначає ширину зовнішнього простору між лівим бордюром і невидимим кордоном прямокутника. margin-right Визначає ширину зовнішнього простору між правим бордюром і невидимим кордоном прямокутника. margin-top Визначає ширину зовнішнього простору між верхнім бордюром і невидимим кордоном прямокутника.

19 Інше max-height Визначає максимальну висоту елемента. max-width Визначає максимальну ширину елемента. min-height Визначає мінімальну висоту елемента. min-width Визначає мінімальну ширину елемента.

20 Інше outline Це швидкий спосіб поставити такі параметри: outline-width , outline-style і/або outline-color . outline-color Визначає колір контуру навколо елементу. outline-style Визначає вид контура навколо елементу. outline-width Визначає ширину контура навколо елементу. quotes Визначає вид відкриваючих і закриваючих лапок в тексті. table-layout Визначає ширину стовпців в таблиці.

21 !important Оголошення ! important перекладається на російську як ! важливо . Якщо до пари властивість - значення приписати оголошення ! important , тоді це значення CSS-властивості отримає максимальний пріоритет в каскаді стилів. Простіше кажучи, це оголошення спрацює для елемента незалежно від наявності інших правил CSS для цього ж елемента. ! Important додається ось так: Увага! Дуже поширена помилка - розташовувати ! important після крапки з комою. Браузер ігнорує такі записи.

22 Як задати колір в CSS CSS пропонує нам чотири зручних способи вказати колір. На ім'я. Використовуються англомовні назви кольорів, наприклад blue або red. У шістнадцятковому RGB (наприклад, #71C354 або #3C9). Цей спосіб широко використовується в HTML. У десятковому форматі RGB (наприклад, rgb (126, 6, 9) ), де значення кожної компоненти кольору може варіюватися від 0 до 255. У форматі RGB із зазначенням величин у відсотках, наприклад, rgb (30%, 40%, 70%) ), де значення кожної компоненти кольору може варіюватися від 0 до 100.

23 Як задати колір в CSS / * Кілька способів зробити параграфи зеленими: * / p { color : lime } p { color : rgb ( 0 , 255 , 0 ) } p { color : # 0f0 } p { color : # 00ff00 } p { color : rgb ( 0 % , 100 % , 0 % ) } У цьому прикладі всі способи задання кольору рівнозначні і приведуть до одного й того ж результату - колір параграфів стане яскраво-зеленим.

24 Іменовані кольори Це базові кольори, використовувані в CSS . У старі добрі часи вони використовувалися дизайнерами для створення сторінок пошукових систем, а також в дизайні сайтів з величезною аудиторією, тобто там, де потрібна максимальна сумісність. Всі вони прекрасно відображаються навіть в 256-кольоровому режимі роботи відеокарти. Безсумнівно, для оригінального колірного дизайну звичайних сайтів їх замало. Для старих 256-кольорових відеокарт рекомендується використовувати так звані безпечні кольори . Зараз це не дуже актуально, тому ви можете визначити в RGB-форматі будь-який з більш ніж 16 млн. відтінків.

25 Іменовані кольори

26 Безпечні (browser-safe) кольору в CSS Для отримання будь-якого відтінку застосовуються комбінації RGB -значень кольору, записані в шістнадцятковому форматі. Наведені нижче кольори вважаються "безпечними" (browser-safe). Це означає, що навіть на старому моніторі в 256-кольоровому режимі вони повинні виглядати рівно і красиво.

27

28 Як задаються розміри в CSS? Розмір можна встановлювати точний у сантиметрах, пунктах і т.п. і відносний у відсотках та інших хитрих одиницях виміру. Властивість font - size може бути задане в будь-яких одиницях вимірювання довжини. Розміри можуть задаватися як в негативних, так і позитивних числових значеннях. Так само припустимі десяткові дроби. Дрібна частина пишеться через знак ".". Відразу після числа необхідно вказати одиницю виміру.

29 Одиниці виміру em Ширина букви m у цьому шрифті. Наприклад, p {text-indent: 3em} задасть новий рядок абзацу шириною в три букви m. ex Висота літери x в цьому шрифт. Застосовується аналогічно em. px Розмір у пікселях. in Розмір в дюймах. Один дюйм = 2.54 сантиметра. cm Розмір в сантиметрах. mm Розмір в міліметрах. pt Розмір в пунктах. Один пункт = 1 / 72 дюйма. pc Розмір в піках. (12 пунктів).

30 Приклади: body { margin : 1in } {table padding : 1.5cm } p { text-indent : -2pt } img.logo { height : 12px } p { text-indent : 3em } blockquote { padding-bottom : 2ex } {table border- width : 7.5pc }

31 Відносні значення: xx – small 9px x –small 11px Small 13px Medium 16px Large 19px x – large 23px xx – large 28px

32 Вставка коментарів у CSS код Щоб створити коментар у CSS, достатньо укласти ділянку тексту між /* і */ . Коментарі використовуються як для корисних анотацій до CSS-стилів, так і для тимчасового відключення частини коду. /* Це коментар */ p { margin : 0 1em ; } /* Це більш довгий коментар, який займає більше одного рядка */ h1 { color : # 900 ; } /* Червоний заголовок */ h2 { color : # 009 ; } /* Синій заголовок другого рівня */ /* h3 {padding: 0.5em 0} /* Стиль для заголовків h3 застосований не буде, бо є частиною комменаря */