Використання таблиць стилів у Web-дизайні

Размещено на http://www.allbest.ru

Размещено на http://www.allbest.ru

Вступ

Під терміном CSS розуміється фраза «Каскадні таблиці стилів». Вони впроваджуються в HTML-код і не вимагають ніяких спеціальних редакторів і компіляторів, адже інтерпретуються вони звичайним браузером.

Каскадні таблиці стилів являють собою описи різних HTML-елементів і створені вони для розширення властивостей останніх. Вперше стилі були запропоновані WWW Consorcium'ом в рамках розробки специфікації HTML 3.0, однак реально це стали підтримувати тільки в 1997 році. Насолодитися CSS мали можливість лише щасливі власники таких браузерів, як Netscape Navigator 4.0 і Internet Explorer 4.0.

CSS використовується творцями веб-сторінок для задання кольорів, шрифтів, розташування та інших аспектів представлення документа. Основною метою розробки CSS було розділення вмісту (написаного на HTML або іншою мовою розмітки) і представлення документа (написаного на CSS). Це розділення може збільшити доступність документа, надати велику гнучкість і можливість управління його уявленням, а також зменшити складність і повторюваність в структурному вмісті. Крім того, CSS дозволяє представляти один і той же документ в різних стилях або методи виведення, таких як екранне уявлення, друк, читання голосом (спеціальним голосовим браузером або програмою читання з екрану), або при виведенні пристроями, що використовують шрифт Брайля.

Стандарт CSS визначає пріоритети, у порядку яких застосовуються правила стилів, якщо для якогось елементу підходять властивості декількох правил одночасно (або, в окремих випадках, в одному правилі є однойменні властивості). Це називається «каскадом», в якому для властивостей розраховуються пріоритети або «ваги», що робить результати передбачуваними.

1. Відмінність CSS від HTML

Мова HTML ніколи не буде чимось більшим ніж мовою розмітки гіпертексту - набором символів або послідовностей, що вставляються в текст для передачі інформації про його вивід або будову. Ця мова мала дуже обмежені можливості, вона була створена для того, щоб визначати структуру документа для розміщення його у веб-середовищі, а не для роботи зі стилями. Стилем буде вважатися - все те що визначає зовнішній вигляд html-документу в вікні браузера.

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

· таблиці - елемент, який складається з рядків та комірок, використовуються для впорядкування і представлення даних. До появи CSS за допомогою таблиць відбувалася верстка веб-сторінок.

· фрейми - зона вікна браузера для представлення окремої веб-сторінки).

· інструменти що вирівнюють текст - інструменти, які визначають зовнішній вигляд тексту і орієнтацію меж абзацу.

· мова JavaScriptм - мова, що найчастіше використовується при створенні сценаріїв поведінки браузера, що вбудовуються у веб-сторінки.

У зв'язку з тим, що HTML не мав можливості управління зовнішнім виглядом веб-сторінок, щоб вирішити ці проблеми, консорціумом W3C була розроблена технологія Cascading Style Sheets або CSS (Каскадні таблиці стилів).

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

Каскад визначає впорядковану послідовність таблиць стилів, де правила пізніших таблиць мають перевагу перед правилами попередніх таблиць.

Мета каскаду розташувати сss-правила в таблиці стилів в певному порядку. У структурованій таблиці стилів, дуже легко знайти потрібне правило. Існує два способи розташування сss-правил в таблиці стилів.

Перший спосіб. Всі правила в таблиці стилів діляться на три групи залежно від типа селекторів. У першу потрапляють селектори по елементу, в другу - селектори по класу, а в третю - селектори по ідентифікатору.

Другий спосіб - являє собою модифікований перший. Єдиною різницею є те, що селектори по класу для кожного елементу слідують безпосередньо за селектором по цьому елементу. Такий спосіб зручніший.

В CSS надається можливість призначити усім об'єктам стиль, опис якого може зберігатися в самому HTML-файлі, або в окремому файлі.

2. Правила в CSS

CSS надає можливість створювати правила, які легко змінювати, редагувати и застосовувати до усіх визначених нами елементів. Кожне правило, складається з двох частин. У лівій частині міститься селектор (selector),а у правій блок визначення (declaration block). Блок визначення складається з набору властивостей (property) та їх значень (value).

Селектор - елемент, який визначає правило.

Властивість описує елемент, що вводиться.

Значення визначають (природу) параметри властивостей. селектор блок визначення селектор {властивість: значення;}

Табл. 1

Переваги	Недоліки
керування відображенням багатьох документів за допомогою однієї таблиці стилів;	різне відображення верстки в різних браузерах (особливо застарілих), які по різному інтерпретують одні і ті ж дані CSS.
більш точний контроль за зовнішнім виглядом сторінок;	необхідність на практиці виправляти не лише один css-файл, але і теги html і програмний код, який часто зустрічається, і який пов'язаний з селекторами CSS, що подовжує час редагування і тестування.
різні виведення для різних носіїв інформації (екран, друк, і т. д.); складна та пророблена техніка дизайну.

3. Додавання таблиць стилів в html-документ

Коли браузер зчитує таблицю стилів, то він форматує документ згідно з цією таблицею. Існує чотири основні способи підключення таблиці стилів.

1) Додавання CSS в HTML-тег - спосіб задавання значень таблиці стилів використовується для оперативного форматування визначеного елементу документа.

2) Встановлення стилю для тегів в HTML-документі - дозволяє задавати усі правила документу в самому документі.

3) Посилання на таблицю стилів - дозволяє використовувати одну таблицю стилів для формування усіх веб-сторінок нашого веб-сайту.

4) Імпорт стилю - дозволяє використовувати таблицю стилів, що розташована на сервері.

Опис способів підключення таблиць стилів.

Спосіб перший: Додавання CSS в HTML-тег.

У цьому способі CSS додається в HTML-документ за допомогою HTML-атрибуту style у середині будь-якого HTML-тегу, що знаходиться у контейнері <body>.

<html>

<head>

<title>Приклад№1,1</title>

</head>

<body style="background-color: #FF0000;">

<p>Колір фону цієї сторінки - червоний</p>

</body>

</html>

Цей спосіб використовується у тому разі коли окремому елементу потрібно надати декілька стилів не використовуючи вбудовані або зовнішні стилі. Застосування цього способу несе за собою певні недоліки:

· збільшується об'єм файлу, що приводить до збільшення часу завантаження веб-сторінки.

· ускладнює редагування документів.

Спосіб другий: Установка стилю для тегів в HTML-документі.

CSS додається в HTML-документ за допомогою HTML-тегу <style> в середині контейнеру <head>. В ньому описуються всі стилі, що будуть використані.

<html>

<head>

<title>Приклад№1,2</title>

<style type="text/css">

body {background-color: #FF0000;}

</style>

<p>Колір фону цієї сторінки - червоний</p>

</body>

</html>

Спосіб третій: Посилання на таблицю стилів.

Зовнішня таблиця стилів являє собою звичайний текстовий файл з розширенням css.

Рис. 1

Для того щоб зробити посилання на зовнішній файл із HTML-документа (index.htm) на файл таблиці стилів (style.css) треба у контейнері <head> вставити наступний рядок:

<link rel="stylesheet" type="text/css"

href="style/style.css" />

Це посилання вказує браузеру, що він повинен використовувати правила відображення HTML-файлу з CSS-файлу.

<html>

<head>

<title>Приклад№1,3</title>

<link rel="stylesheet" type="text/css"

href="style/style.css" />

</head>

<body>

</body>

</html>

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

Рис. 2

4. Шрифти у веб-середовищі

Для привласнення якому-небудь елементу певних характеристик потрібно один раз описати цей елемент і визначити цей опис як стиль, а надалі просто вказувати, що елемент, який користувач хоче оформити відповідним чином, повинен прийняти властивості стилю, описаного вами.

В даний час мова CSS налічує досить велику кількість властивостей елементів HTML, якими вона може управляти.

Існують кілька визначених способів відображення тексту веб-середовищі.

1. HTML-текст;

2. Графічний текст;

3. Векторний текст.

HTML-текст практично не відрізняється від тексту набраного в будь-якому текстовому редакторі.

У векторних (або контурних) шрифтах символами є криволінійні контури, що описуються математичними формулами. Кожен знак описаний за допомогою векторів, що визначають координати опорних точок які сполучені прямими або кривими і утворюють контур знаку без прив'язки до абсолютного розміру або дозволу. Такий опис дозволяє легко змінювати масштаб зображення без втрати якості, що неможливе у випадку з растровими шрифтами. В старих версіях HTML шрифт оформлявся за допомогою тегу <font> але цей тег треба було додавати кожного разу, коли було необхідно встановити шрифт, від цього збільшувався розмір веб-сторінки, незручно було змінювати властивість шрифту.

Властивість font-family.

Щоб задати сімейство шрифтів використовується властивість font-family.

В цій властивості завжди вказується ряд шрифтів, розділених комою, наприкінці списку вказується сімейство шрифтів. При застосуванні шрифтів до веб-сторінки завжди задається основний шрифт, а потім альтернативний. У разі відсутності на комп'ютері користувача заданих шрифтів то веб-сторінка, як мінімум буде відображена шрифтом, що входить до цього сімейства.

Існують п'ять сімейств шрифтів.

1. serif (з засічками);

2. sans-serif (без засічок);

3. monospace (моноширинний);

4. cursive (рукописний);

5. fantasy (декоративний).

Рис. 3

веб векторний каскадний криволінійний

Шрифти сімейства serif найкраще підходять для основного тексту сторінки. Засічки допомагають направляти увагу читача уздовж рядка Шрифти сімейства sans-serif використовуються для оформлення заголовків, панелей посилань та посилань. Шрифти без засічок звертають на себе більше уваги, але погано підходять для довгого читання.

У моношириних шрифтах усі символи мають однакову ширину. Слід зазначити, що у моноширинних шрифтах збільшується між символьний інтервал, як зліва так і з права символу (цей інтервал є невід'ємною частиною символу).

Моноширинні шрифти допускаються тільки для створення якихось особливих ефектів оформлення - наприклад, фрагменти коду HTML та CSS.

У моноширинному шрифті всякий символ має одну і ту ж ширину. У файлі style.css створити для оформлення абзацу таке правило (для прикладу):

p{font-family: Arial, Candara, Century-Gothic,

sans-serif}

<html>

<head>

<title>Приклад№3,1</title>

<link rel="stylesheet" type="text/css"

href="style/style.css" />

</head>

<body>

<p> Шрифт цього абзацу відноситься до сімейства sans-serif</p>

</body>

</html>

У цьому прикладі основним шрифтом абзацу є шрифт Arial у раз його відсутності буде загружено наступний, у разі відсутності усіх шрифтів абзац буде оформлено шрифтом сімейства sans-serif.

Властивість font-style.

Властивість font-style визначає стиль шрифту з обраного сімейства може мати наступні значення:

· normal - звичайний шрифт;

· italic - курсивний шрифт (більш декоративний шрифт з нахилом вправо);

· oblique - нахилений шрифт (звичайний шрифт нахилений в право).

У файлі style.css створю таке правило:

h1{

font-family: Arial, Candara, Century-Gothic,

sans-serif;

font-style: normal;

}

h2{

font-family: Times New Roman, Georgia, serif;

font-style: italic;

}

p{

font-family: Times New Roman, Georgia, serif;

font-style: oblique;

}

<html>

<head>

<title>Приклад№3,2</title>

<link rel="stylesheet" type="text/css"

href="style/style.css" />

</head>

<body>

<h1>Шрифт цього заголовку звичайний</h1>

<h2>Шрифт цього заголовку курсив</h2>

<p> Шрифт цього абзацу нахилено вправо</p>

</body>

</html>

Властивість font-variant.

Властивість font-variant використовується для вибору між варіантами normal і small-caps. Параметр normal задає звичайні літери. Параметр small-caps задає малі заголовні букви (upper case) замість букв нижнього регістру.

У файлі style.css створити таке правило:

p{

font-family: Arial, Candara, Century-Gothic,

sans-serif;

font-style: normal;

font-variant: small-caps;

}

<html>

<head>

<title>Приклад№3,3</title>

<link rel="stylesheet" type="text/css"

href="style/style.css" />

</head>

<body>

<p>Абзац оформлено малими прописними

літерами</p>

</body>

</html>

5. Властивості елементів

Табл. 2

Властивості шрифту
font-family	Використовується для вказівки шрифту, яким відображатиметься елемент. P {font-family: Times New Roman, serif;}
font-weight	Визначає ступінь жирності шрифту за допомогою трьох параметрів: lighter, bold, bolder B {font-weight: bolder;}
font-size	Встановлює розмір шрифту. Параметр може вказуватися як у відносній (відсотки), так і абсолютній величині (пункти, пікселі, сантиметри) H2 {font-size: 150px;}, H3 {font-size: 400pt;}
Колір елемента і колір фону
color	Визначає колір елемента I {color: yellow;}
background-color	Встановлює колір фону для елемента - саме для елемента, а не для сторінки. <H1 style="background-color: gold; color: brown;">Sheets</H1>
Властивості тексту
text-decoration	Встановлює ефекти оформлення шрифту, такі, як підкреслення або закреслюваний текст H4 {text-decoration: underline;} А {text-decoration: none;} .wrong {text-decoration: line-through;}
text-align	Визначає вирівнювання елемента. P {text-align: justify} H1 {text-align: сеnter}
text-indent	Встановлює відступ першого рядка тексту. Частіше за все використовується для створення параграфів з табульованим першим рядком.
line-height	Управляє інтервалами між рядками тексту. P {line-height: 50 %}
Властивості меж
margin-left	Встановлюють значення відступів навкруги елемента. IMG {margin-right: 20pt} P {margin-left: 2cm}
margin-right margin-bottommargin-top	Встановлюють значення відступів навкруги елемента. IMG {margin-right: 20pt} P {margin-left: 2cm}
Одиниці вимірювання
px	Піксели
cm	Сантиметри
mm	Міліметри
pt	Пункти (друкар.)
%	Відсотки

Способи застосування стилів.

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

· перевизначення стилю в елементі розмітки;

· розміщення опису стилю в заголовку документа в елементі STYLE;

· розміщення посилання на зовнішній опис через елемент LINK;

· імпорт опису стилю в документ.

Перевизначення стилю.

Атрибут (style) можна застосувати усередині будь-якого елемента розмітки.

Очевидно, що не всякі параметри стилю можна встановити для конкретного елемента розмітки.

Тут же слід зазначити наступне: стилі розроблені в першу чергу для управління відображенням тексту. Не слід захоплюватися стилями при управлінні відображенням не текстових елементів HTML-розмітки .

Елемент STYLE.

Застосування елемента STYLE - це основний спосіб упровадження каскадних таблиць стилів. Окрім управління відображенням елементів розмітки елемент STYLE дозволяє описувати стильові властивості елементів, які можна змінювати при програмуванні на JavaScript.

Елемент STYLE дозволяє визначити стиль відображення для:

· стандартних елементів HTML-розмітки4

· довільних класів (селектор class);

· HTML-об'єктів (селектор id).

Тепер всі параграфи документа відображатимуться стилем з елемента STYLE, якщо тільки стиль не буде перевизначений яким-небудь чином. В STYLE можна визначити стиль будь-якого елемента розмітки.

Посилання на зовнішній опис.

Посилання на опис стилю, розташований за межами документа, здійснюється за допомогою елемента LINK, який розміщують в елементі HEAD. Зовнішній опис може представляти з себе файл, зміст якого - опис стилів. Опис стилів в цьому файлі по синтаксису в точності співпадатиме зі змістом елемента STYLE.

Атрибут href задає універсальний локатор ресурсу (URL) для зовнішнього файлу опису стилів. Це може бути посилання на файл з будь-яким ім'ям, а не тільки на файл з розширенням *.css.

Імпорт опису стилів.

Імпорт описувачів стилів - це в деякому розумінні конкурент описаному вище вказівці на зовнішній описувач стилю.

Імпортувати стиль можна або всередину елемента STYLE, або всередину зовнішнього файлу, яким є описувач стилю. Оператор імпорту стилю повинен передувати всім іншим описувачам стилів:

6. Групування селекторів та скорочений запис селекторів

При розробці стилю сайту виникає ситуація, коли використовуються параметри, що повторюються. Для того щоб ці параметри не повторювалися використовується групування селекторів за певними властивостями.

Деякі властивості мають власний синтаксис, який складається з селектору, його значення та переліку властивостей, які не розділені комами. селектор(и){значення: властивість1 властивість2 властивість3}.

Якщо якась властивість з переліку відсутня, то вона автоматично отримує значення за замовчуванням.

Рис. 4

7. Управління елементами веб-сторінки

Кожна веб-сторінка складається з html-тегів. У свою чергу кожен тег являє собою окремий самостійний елемент. Елемент може бути створений за допомогою одного html-тегу, або являти собою набор вкладених html-тегів, кожен з яких є окремим елементом. У середині елементу знаходиться його зміст, до якого застосовуються css-властивості. Зміст складається з тексту, малюнків, списків та ін. Якщо роздивлятися html-елемент, як об'єкт то в нього є:

1. ширина та висота (width, height);

2. поле (margin);

3. внутрішній відступ (padding);

4. рамки (border).

Рис. 5

З вищевикладеного, можна побачити, що кожен html-елемент має оточення з чотирьох сторін, саме це називається боксова модель.

Установка ширини width.

Властивість width визначає ширину елементу. Висота цього елементу буде залежною від змісту елементу.

div{

color: blue;

width: 200px;

}

Установка висоти height.

Властивість height визначає висоту елементу. Висота цього елементу не буде залежною від змісту елементу.

div{

color: blue;

width: 200px;

height: 50%;

}

Значення властивостей що задають ширину та висоту елемента можна задавати одиницями розміру, відсотками, або щоб ці параметри задавалис автоматично браузером, для цього використовується значення auto.

Властивість margin.

За допомогою властивості margin визначається простір між елементом та сусідніми елементами. Щоб визначити цей простір необхідно вказати від одної до чотирьох величин, які відповідають усім сторонам елемента одночасно.

p{

margin-top: 100px;

margin-right: 40px;

margin-bottom: 10px;

margin-left: 70px;

}

Скорочений запис, що задає поля буде виглядати так.

p{ margin: 100px 40px 10px 70px;}

Властивість padding. Заповнення не впливає на відстань елементу до інших елементів, а лише визначає внутрішню відстань між рамкою і вмістом елементу. Коли визначається заповнення для елементів, то встановлюється поле довкола кожного елементу:

h1 {

background: green;

padding: 10px 10px 10px 60px;

}

img {

padding-left: 120px;

}

Установлення рамок елементу.

Рамки у веб-дизайні можна вживати, наприклад, як елемент декору або для того, щоб виділити важливий елемент. CSS надає багато варіантів використання рамок. Будуть розглянуті наступні CSS-властивості:

· border-width;

· border-color;

· border-style.

Властивість border-radius.

Властивість border-radius дозволяє задати радіус округлених кутів елементу. Дозволяється використовувати одне, два, три або чотири значення, перераховуючи їх через пробіл. Також допустимо писати два значення через слеш (/). Як значення зазначаються числа в будь-якому допустимому для CSS форматі (числа не можуть бути від'ємні). У разі застосування відсотків,відлік ведеться щодо ширини блоку.

Таблиця значень border-radius.

1. Радіус вказується для всіх чотирьох кутів.

2. Перше значення задає радіус верхнього лівого і правого нижнього кутка, друге значення - верхнього правого і нижнього лівого кутка.

3. Перше значення задає радіус для верхнього лівого кутка, друге - одночасно для верхнього правого і нижнього лівого, а третє - для нижнього правого кутка.

4. По черзі встановлює радіус для верхнього лівого, верхнього правого, нижнього правого і нижнього лівого кутка.

У випадку, коли задаються два параметри через слеш, то перший задає радіус по горизонталі, а другий по вертикалі (еліптичні куточки). Погляну на приклад - кілька елементів з різними округленими кутами.

radius {

border-radius: 50px 0 0 50px;

background: #36648b;

border: 1px dotted black;

padding: 15px;

margin-bottom: 10px;

color: #fff;

}

.radius1 {

border-radius: 50px 10px;

background: #36648b;

border: 1px dashed black;

padding: 15px;

margin-bottom: 10px;

color: #fff;

}

.radius2 {

border-radius: 35em/5em;

background: #36648b;

border: 1px solid black;

padding: 15px;

margin-bottom: 10px;

color: #fff;

}

radius3 {

border-radius: 10em 0.5em/5em 0.5em;

background: #36648b;

border: 1px solid black;

padding: 15px;

margin-bottom: 10px;

color: #fff;

}

radius4 {

border-radius: 10px;

background: #36648b;

border: 1px solid black;

padding: 15px;

margin-bottom: 10px;

color: #fff;

}

<html>

<head>

<title>Приклад№3,1</title>

<link rel="stylesheet" type="text/css"

href="style/style.css" />

</head>

<body>

<div class="radius">border-radius: 50px 0 0

50px;</div>

<div class="radius1">border-radius: 50px

10px;</div>

<div class="radius2">border-radius:

35em/5em;</div>

<div class="radius3">border-radius: 10em

0.5em/5em 0.5em;</div>

<div class="radius4">border-radius: 10px;</div>

</body>

</html>

</div>

</body>

</html>

8. Таблиці та їх будова

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

Будова таблиць в CSS заснована на будові таблиць в HTML і успадковує всі їх складові. Кожна таблиця містить в собі заголовок, в якому міститься короткий опис змісту таблиці. Крім того, до структури таблиці можуть входити такі елементи, як надзаголовок і підзаголовок. Тіло таблиці складається з рядків, які у свою чергу складаються з комірок. Стовпці таблиць визначаються будовою рядків: перша комірка кожного рядка відноситься до першого стовпця, друга до другого і так далі. Рядки і стовпці можуть об'єднуватися в групи. Таблиця у веб-середовищі складається з наступних елементів:

Елемент властивість.

сaption - задає стиль заголовку.

table - описує властивості атрибутів таблиці.

th - задає стиль заголовкам рядків та стовпцям.

td - задає стиль комірки таблиці.

tr - задає стиль рядка таблиці.

thead - задає стиль елементів у верхньому рядку.

tbody - задає стиль елементів у тілі таблиці.

tr.alternate - задає колір усього рядку.

tr.alternate th - задає колір окремого елемента рядка.

Розміщувати елементи на сторінці можна не лише за допомогою фреймів і таблиць - каскадні стилі надають для цього додаткові цікаві можливості.

Зокрема, можна обирати один із трьох типів позиціювання елементів на сторінці: статичне, відносне та абсолютне позиціювання.

Тег визначається атрибутом POSITION, який може набувати таких значень:

* static - статичне; задане за замовчуванням і передбачає розміщення чергового об'єкта на вільному місці після попереднього;

* relative - відносне; визначає розташування об'єкта відносно того місця, яке б він зайняв, якби для нього було використане статичне позиціювання;

* absolute - абсолютне; передбачає розміщення об'єкта шляхом задавання точного місця його розташування на сторінці.

Для відносного та абсолютного позиціювання використовують чотири властивості - left (ліворуч) та right (праворуч), які задають відступи для розміщення об'єкта по горизонталі, і top (згори) та bottom (знизу) - по вертикалі. Необхідно задавати по одному значенню позиції по горизонталі та вертикалі. При цьому елементи можуть накладатися один на інший: нижче буде розташований об'єкт, описаний першим, а зверху - той, який описали останнім.

Якщо потрібна зміна стандартного порядку накладання, застосовують шари. Шар об'єкта задають за допомогою властивості Z-index, значенням якої можуть бути лише ціле число та auto (за замовчуванням). Об'єкт із більшим значенням z-index розміститься поверх об'єкта з меншим значенням цієї властивості, перекриваючи його. Якщо ж об'єкти матимуть однакові її значення, то зверху розташується об'єкт, описаний нижче за текстом у HTML-документі.

9. Псевдокласи

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

Псевдоклас дозволяє враховувати різні стани або події при визначенні властивостей html-тега. У гіперпосилання є декілька станів та подій.

Псевдоклас: link.

Псевдоклас: link використовується для посилань на сторінки, які користувач ще не відвідував.

a: link{

color: #0000ff;

font-weight: normal;

}

Псевдоклас: active.

Псевдоклас: active використовується для активних посилань.

a: active {

color: #00bfff;

background-color:ffd700;

{

У цьому прикладі у посилання буде змінено колір шрифту та колір фону.

Псевдоклас: visited.

Псевдоклас: visited використовується для посилань на сторінки, які відвідав користувач.

a: visited {

color: #0000ff;

font-weight: 400;

}

Псевдоклас: hover.

Псевдоклас: hover використовується для посилань, над якими знаходиться вказівник миші.

a: hover{

font-weight: normal;

text-trasform: uppercase;

letter-spacing: 10px;

}

У цьому прикладі шрифт посилання буде нормальної товщини, текст буде відображатися прописними літерами, відстань між літерами буде складати 10px.

Видалення підкреслювання посилань.

Видалити підкреслювання посилань дуже просто. Для видалення підкреслювання достатньо встановити властивість text-decoration зі значенням none.

a: link{

color: #0000ff;

font-weight: normal;

text-decoration: none;

}

Висновки

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

Основною метою розробки CSS було розділення вмісту (написаного на HTML або іншою мовою розмітки) і представлення документа (написаного на CSS).

Це розділення може збільшити доступність документа, надати велику гнучкість і можливість управління його уявленням, а також зменшити складність і повторюваність в структурному вмісті. Крім того, CSS дозволяє представляти один і той же документ в різних стилях або методи виведення, таких як екранне уявлення, друк, читання голосом (спеціальним голосовим браузером або програмою читання з екрану), або при виведенні пристроями, що використовують шрифт Брайля.

Стандарт CSS визначає пріоритети, у порядку яких застосовуються правила стилів, якщо для якогось елементу підходять кілька правил одночасно.

Це називається «каскадом», в якому для правил розраховуються пріоритети або «ваги», що робить результати передбачуваними. CSS (англ. Cascading Style Sheets - каскадні таблиці стилів) - формальна мова опису зовнішнього вигляду документа, написаного з використанням мови розмітки.

Переважно використовується як засіб опису, оформлення зовнішнього вигляду веб-сторінок, написаних за допомогою мов розмітки HTML і XHTML, але може також застосовуватися до будь XML-документів, наприклад, до SVG або XUL.

Крім того, CSS дозволяє працювати зі шрифтовим оформленням сторінок на набагато вищому рівні, ніж стандартний HTML, уникаючи зайвого обважнення сторінок графікою.

Література

1. Глинський Я.М., Ряжська В.А. Інтернет: Навч. Посіб. - Львів: Деол, 2002. - 168с.

2. Леонтьев В.П. Новейшая енциклопедия Интернет. - М.: ОЛМА-ПРЕСС, 2002. - 607с.

3. Денисов А., Вихарев И., Белов А. Интернет. Самоучитель. - СПб.: Питер, 2002. - 464с.

4. Симонович С., Евсеев Г. Страна Интернетия. - М.: ДЕССКОМ, 2002. - 304с.

5. Ед Тіттел, Джефф Ноубл HTML, XHTML і CSS для чайників, 7 - е видання = HTML, XHTML & CSS For Dummies, 7th Edition. - М .: «Діалектика», 2011, - 582с.

6. Стівен Шафер HTML, XHTML і CSS. Біблія користувача, 5 - е видання - HTML, XHTML, and CSS Bible, 5th Edition. - М .: «Діалектика», 2010. - 689с.

7. Енді Бадд, Камерон Молл, Саймон Коллізон CSS: професійне застосування Web - стандартів = CSS Mastery: Advanced Web Standards Solutions. М .: «Вільямс», 2008. - 485с.

8. Ерік А. Мейєр. CSS - каскадні таблиці стилів: докладне керівництво = Cascading Style Sheets: The definitive Guide. - М .: Символ, 2006, -786с.

Размещено на Allbest.ru