Каскадні таблиці стилів

Каскадні таблиці стилів (CSS — Cascading Style Sheets) дозволяють розширити можливості мови HTML за рахунок більш гнучкого форматування Web-сторінки.

До документу стилі можна додати трьома способами:

• додати стиль в тег,
• описати стилі в технічній частині документу,
• творити спеціальну таблицю стилів в окремому документі. Познайомимось з кожним зі способів.

При додаванні стилю до тегу потрібно вказати параметр style та далі описати потрібні команди з їх значеннями:

При додаванні стилю до тегу потрібно вказати параметр style та далі описати потрібні команди з їх значеннями:

Таким способом можна описати окремі класи стилів (вони розпочинаються з крапки), теги та теги з класами. По прикладу ми бачимо, що клас .text1 матиме розмір в 12 пунктів, червоний колір та шрифт “Arial”. Весь текст взятий в тег font буде розміром 12 пунктів, зеленого кольору та зі шрифтом “Arial”. Теги ж <font> з класом .text2 будуть розміром 12 пунктів, синього кольору та шрифт “Arial”. Зверніть увагу, що коли ви до будь-якого іншого тегу додасте клас .text2 він діяти не буде бо описаний лише для тегу <font>.

Існують також ідентифікатори котрі виступають в заміну класів та в тегу описуються як id, а при описі стилю потрібно назву розпочати з #.

CSS дуже зручний тим, що декільком тегам можна надавати однакових стилів просто перерахувавши їх через кому.

Щоб створити окрему таблицю стилів потрібно створити документ за довільною назвою (але зазвичай між програмістами обумовлено, що назва буде style з розширенням css). Після чого за вивченими правилами просто описують стилі без додавання сторонніх програмних кодів:

А щоб вказати в html документі, що існують окремі стилі та будуть ним керувати в технічну частину додаємо код:

Основні параметри стилів та значення, яких вони можуть набувати:

1. font-family

• p { font-family: "Arial" }

2. font-style

• normal — нормальний шрифт: p { font-family: "Arial"; font-style: normal }
• italic — курсивний шрифт: p { font-family: "Arial"; font-style: italic }
• oblique — похилений шрифт: p { font-family: "Arial"; font-style: oblique }

3. font-size

• Атрибут font-size дозволяє задати розмір шрифта: .text1 { font-size: 12pt; font-family: "Arial" }
• Можна вказати абсолютну величину або одну із констант — xx-small, x-small, small, medium, large, x-large або xx-large: .text1 { font-size: large; font-family: "Arial" } .text1 { font-size: 150%; font-family: "Arial" }

4. color

• .text1 { font-size: 12pt; font-family: "Arial"; color: red }
• .text2 { font-size: 12pt; font-family: "Arial"; color: #00FF00 }
• .text3 { font-size: 12pt; font-family: "Arial"; color: rgb(255, 0, 0) }

5. font-weight

• 100, 200, 300, 400, 500, 600, 700, 800, 900 — значення 100 співвідноситься до більш блідого, а 900 — найбільш жирному: p { font-family: "Arial"; font-style: italic; font-weight: 700 }
• normal — нормальний шрифт. Дорівнює значенню 400: p { font-family: "Arial"; font-style: italic; font-weight: normal }
• bold — напівжирний шрифт. Дорівнює значенню 700: p { font-family: "Arial"; font-style: italic; font-weight: bold }