Навіщо потрібні таблиці стилів
CSS (Cascading Style Sheets) - мова для управління стилем Web-сторінок.
Застосування CSS дозволяє значно скоротити обсяг HTML-документів, особливо якщо у вас є безліч сторінок з однотипним стилем і, в той же час, спростити роботу по створенню і додаванню нових документів. Зберігши опис різних стилів в окремих файлах, ви зможете з легкістю маніпулювати стилями.
опис CSS
В цьому випадку ви можете використовувати ці стилі для елементів, розташованих в межах WEB-сторінки. Тобто все текстові елементи, що знаходяться всередині тегів,
і на цій сторінці будуть відображатися червоним курсивом, з розміром символу в 32 пікселя.І останній варіант - опис стилю знаходиться безпосередньо всередині тега елемента до якого застосовується цей стиль, наприклад:
Даний стиль застосовується тільки до цього напису
Цей варіант не найкращий, оскільки призводить до збільшення розміру коду сторінки і втрати поділу окремо стилів і окремо даних сторінки.
Тепер розглянемо випадок, коли необхідно привласнити стилі не всім однаковим елементам сторінки, а тільки деяким - для цього використовується параметр CLASS = "ім'я класу" або ідентифікатор ID = "ім'я елемента". яке може бути присвоєно будь-якого елементу сторінки (параграф, таблиця і т.д.).
Параметр CLASS застосовується у разі, якщо необхідно створити однаковий стиль для декількох, але не всіх елементів сторінки (однакових або різних).
Наприклад, вказавши в описі стилю:
Можна зробити так, що тільки деякі елементи таблиці будуть відображатися жирним курсивом. Для цього дамо їм стиль класу bi:
Увага! Назви класів чутливі до регістру.
Присвоєння стилів за допомогою ідентифікаторів застосовується в разі, якщо цим ідентифікатором відповідає тільки один елемент на сторінці. Якщо елементів, яким необхідно присвоїти такий стиль, кілька - це вже клас.
Псевдокласи і псевдоелементи:
Псевдокласи і псевдоелементи - це особливі класи і елементи, притаманні CSS і автоматично визначаються поддержівеющімі CSS браузерами.
Псевдокласи розрізняють різні типи одного елемента, створюючи при визначенні власні стилі для кожного з них.
Псевдоелементи є частинами інших елементів, задаючи цим частинам відмінний від елемента в цілому стиль.
синтаксис:
селектор: псевдоклас <свойства>
селектор.класс: псевдоклас <свойства>
селектор: псевдоелемент <свойства>
селектор.класс: псевдоелемент <свойства>
Список псевдокласів і псевдоелементів:
В даному прикладі всі посилання будуть синіми. При натисканні (в активному стані) поміняють колір на червоний. І при підведенні курсору мишки зникне підкреслення.
Короткий опис мови CSS
Властивості шрифту • font-family це властивість визначає використовуваний елементом шрифт. Якщо вказати URL, то шрифт автоматично встановиться на комп'ютер користувача
ПРИКЛАД: font-family: Arial Black URL ( 'arialblack.ttf') • font-style (normal, italic) Стиль елемента. Курсивний або звичайний
ПРИКЛАД: font-style: italic • font-variant (normal-нормальний, small-caps-замінює усі малі літери на великі) Варіанти відображення шрифту. Нетскейп не підтримує це властивість
ПРИКЛАД: font-variant: small-caps • font-weight (normal-нормальний, bold-жирний, bolder-дуже жирний, lighter-тонкий, 100-900-точна установка) Виділення (жирність) елемента
ПРИКЛАД: font-weight: bold • font-size (XX%, XXpt, XXpx) Розмір шрифту
ПРИКЛАД: font-size: 30pt • font (family, style, variant, weight, size) Об'єднує всі вищевикладені властивості.
ПРИКЛАД: font: italic bolder Arial 12pt Властивості тексту. • text-decoration (none, underline-підкреслений, overline-надчеркнутий, line-through-перекреслений, blink-миготливий) Стиль тексту
ПРИКЛАД: text-decoration: line-through • letter-spacing (XX-число) Відстань між буквами
ПРИКЛАД: letter-spacing: 100 • vertical-align (baseline, sub, super, top-text, top, middle, bottom, bottom-text, відсоток) Розташування елементів по відношенню до інших елементів що стоять в одному ряду.
ПРИКЛАД: vertical-align: top-text • text-transform (Capitalize-кожне слово починається з великої літери, UPPERCASE - кожна буква тексту стає великої, lowercase - кожна буква тексту стає маленькою.
ПРИКЛАД: text-transform: Capitalize • text-align (left, right, center, justify) Вирівнювання тексту.
ПРИКЛАД: text-align: right • text-indent (ед.дліни або відсоток) Відступ тексту.
ПРИКЛАД: text-indent: 30 em • line-height (ед.дліни або відсоток) Відступ зверху
ПРИКЛАД: line-height: 100% Властивості кольору. • color (#RRGGBB) Колір елемента
ПРИКЛАД: color: # f00000 • backgroung-color (#RRGGBB) Колір фону елемента
ПРИКЛАД: background-color: # f00000 • background-image (URL) Фонове зображення
ПРИКЛАД: background-image: URL ( "img.gif") • background-repeat (repeat - розмножує фонове зображення у всіх напрямках, repeat-x - розмножує фонове зображення горизонтально, repeat-y - розмножує фонове зображення вертикально, no-repeat - що не повторюються зображення) Повтор фонового зображення
ПРИКЛАД: background-repeat: no-repeat • background-attachment (scroll-скролінг фонового зображення разом з документом, fixed-фіксація фонового зображення) Режим прокрутки фонового зображення.
ПРИКЛАД: background-attachment: fixed • background-position (% від ширини +% від висоти; top, middle, bottom; left, center, right; відстань від лівого краю + відстань від верхнього краю) Положення фонового зображення
ПРИКЛАД: background-position: 50% 0% • background (color, image, position, attachment, repeat) Об'єднує всі вищевикладені властивості.
ПРИКЛАД: background: no-repeat black fixed 50% 0% Властивості кордонів. • margin-top (довжина, відсоток, auto) Відступ зверху
ПРИКЛАД: margin-top: 100 • margin-right (довжина, відсоток, auto) Відступ справа
ПРИКЛАД: margin-right: 100% • margin-bottom (довжина, відсоток, auto) Відступ знизу
ПРИКЛАД: margin-bottom: 100em • margin-left (довжина, відсоток, auto) Лівий відступ
ПРИКЛАД: margin-left: 100pt • margin (top, right, left, bottom) Об'єднує всі вищевикладені властивості.
ПРИКЛАД: background: 100pt • padding-top (довжина, відсоток) Відступ від верхнього border'а
ПРИКЛАД: padding-top: 100pt • padding-right (довжина, відсоток) Відступ від правого border'а
ПРИКЛАД: padding-right: 100% • padding-bottom (довжина, відсоток) Відступ від нижнього border'а
ПРИКЛАД: padding-bottom: 100em • padding-left (довжина, відсоток) Відступ від лівого border'а
ПРИКЛАД: padding-top: 100 • padding (left, right, top, bottom) Об'єднує всі вищевикладені властивості. Можна задати кілька значень одночасно (до чотирьох) для різних сторін. Якщо встановлено одне значення - задається єдиний відступ для всіх сторін, якщо два - то задаються різні відступи для прилеглих сторін, а якщо чотири - то задаються індивідуальні відступи для всіх сторін.
ПРИКЛАД: padding: 100px • border-top-width (довжина, thin, medium, thick) товщина верхнього border'а
ПРИКЛАД: border-top-width: 100pt • border-right-width (довжина, thin, medium, thick) товщина правого border'а
ПРИКЛАД: border-right-width: thick • border-bottom-width (довжина, thin, medium, thick) товщина нижнього border'а
ПРИКЛАД: border-bottom-width: 100em • border-left-width (довжина, thin, medium, thick) товщина лівого border'а
ПРИКЛАД: border-left-width: medium • border-width (top-width, right-width, left-width, bottom-width) Об'єднує всі вищевикладені властивості. Можна задати кілька значень одночасно (до чотирьох) для різних border'ов. Якщо встановлено одне значення - задається єдина товщина для всіх сторін, якщо два - то задаються різна товщина для прилеглих сторін, а якщо чотири - то задаються індивідуальна товщина для всіх сторін
ПРИКЛАД: border-width: 15pt • border-color (колір) Колір border'а.
ПРИКЛАД: border-color: green • border-style Стиль border'ов. Можна задати кілька значень одночасно (до чотирьох) для різних border'ов. Якщо встановлено одне значення - задається єдиний стиль для всіх сторін, якщо два - то задаються різні стилі для прилеглих сторін, а якщо чотири - то задаються індивідуальні стилі для всіх сторін
ПРИКЛАД: border-style: dotted groove • border-top (width, style, color) Об'єднує всі вищевикладені властивості для верхнього border'а.
ПРИКЛАД: border-top: 100em red groove • border-right (width, style, color) Об'єднує всі вищевикладені властивості для правого border'а.
ПРИКЛАД: border-right: 5pt magenta solid • border-left (width, style, color) Об'єднує всі вищевикладені властивості для лівого border'а.
ПРИКЛАД: border-left: 15pc coral inset • border-bottom (width, style, color) Об'єднує всі вищевикладені властивості для лівого border'а.
ПРИКЛАД: border-bottom: 30 orange outset • border (width, style, color) Об'єднує всі вищевикладені властивості.
ПРИКЛАД: border: thik black double • width (довжина, відсоток) Ширина елемента
ПРИКЛАД: width: 10% • height (довжина, відсоток) Висота елемента
ПРИКЛАД: height: 100pt • float (left, right) Розташування елемента
ПРИКЛАД: float: right • clear (left, right, both) Розташування інших елементів навколо даного
ПРИКЛАД: clear: both Класифікація. • display (none-не відображається, block-розбиває рядок до і після елемента, inline-ні розбиває рядок. List-item-розбиває лінію рядок до і після елементу + додає маркер як у елементів списку) визначає, як буде відображатися елемент списку
ПРИКЛАД: display: none • white-space (normal - "стискає" кілька поспіль прогалин в один, pre - допускає відображення нескольколькіх поспіль прогалин, nowrap - не допускає перенесення рядка без тега
) Опріделяет, як будуть відображатися прогалини між елементами
ПРИКЛАД: white-space: nowrap • list-style-type (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha або upper-alpha) визначає вид маркера елемента списку.
ПРИКЛАД: list-style-type: lower-alpha • list-style-image (URL) задає вид маркера елемента списку у вигляді картинки
ПРИКЛАД: list-style-image: URL (cool.gif) • list-style-position (inside, outside) Визначає положення маркера в залежності від елемента списку
ПРИКЛАД: list-style-position: inside • list-style (type, position, image) Об'єднує всі вищевикладені властивості.
ПРИКЛАД: list-style: inside
додатки
Міри довжини (Синтаксис: "+" / "-" XX од.вимір)
ПРИКЛАД. -566pt em - ems висота використовуваного елементом шрифту ex - x-height ширина літери "x" використовуваного елементом шрифту px пікселі in дюйми cm сантиметри mm міліметри pt точки (1pt = 1 / 72in) pc picas (1pc = 12pt) Процентні заходи
ПРИКЛАД. -566% - / +% XX Зменшення / збільшення у відсотках. Кольори Назва кольору ПРИКЛАД. magenta • #rrggbb Колір в RGB, де rr, gg, bb - шестнадцатиричное число.
ПРИКЛАД. # 00cc00 • rgb (x, x, x) Колір в RGB, де "х" десяткове число від 0 до 255.
ПРИКЛАД. rgb (0,204,0) • #rgb Колір в RGB, де r, g, b - шестнадцатиричное число.
ПРИКЛАД. # 0c0 • rgb (x%, x%, x%) Колір в RGB, де де "х%" число від 0.0 до 100.0.
ПРИКЛАД. rgb (0%, 80%, 0%)
Деякі хитрості управління стилями
Вказуючи абсолютні розміри шрифтів, ви позбавляєте людей, які переглядають ваші сторінки, можливості збільшувати або зменшувати розмір шрифтів за допомогою спеціальної кнопочки в броузері відповідно до дозволу їх дисплея і зором. Шрифти будуть відображатися тільки такого розміру, який ви вказали при написанні сторінки.
Тому, бажано використовувати для цих цілей вказівка розмірів у відсотках. У цьому випадку розмір шрифту буде менше (більше) на вказане вами кількість відсотків, ніж при оформленні його за допомогою стандартного HTML-тега.
Наступний код створює заголовок, який виглядає тривимірним без використання графіки.
Вкажіть в описі стилів
Тепер перші рядки кожного нового абзацу будуть виводитися з "червоної" рядка.