Використання каскадних таблиць стилів (CSS)

Категорії статей: CSS ; 29.04.2010

Є декілька способів використання каскадних таблиць стилів в документі HTML

  1. Опис в розділі <head> (заголовка) HTML-документа;
  2. Опис у зовнішньому файлі;
  3. Вбудовування (inline-опис).
Давайте ознайомимося з цими варіантами по порядку.

Опис каскадних таблиць стилів в розділі заголовка HTML-документа

В цьому випадку вміст каскадних таблиць стилів має бути розташований між тегами <style type="text/css"> і </style> у заголовку HTML-документа. Наприклад

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Анекдот</title>
<style type="text/css">
body { color:red; }
</style>

</head>
<body>
<h1>Анекдот</h1>
<p> На колгоспних зборах голова говорить:<br>
-Торік ми засіяли п'ять гектарів конопель, і її всю пожерла тля. Цього року ми засіємо п'ятнадцять гектарів. Нехай ця зараза подавиться!</p>
продовження слідує.
</body>
</html>

Якщо проглянути даний код в браузері, то текст відображуватимться червоним кольором. Як ми цього досягнули? Ви, напевно, вже здогадалися, що провиною всьому рядок body {color:red;} .Теперь настав час познайомитися з написанням CSS-правил. Правило в CSS складається з двох частин: селектора і опису. У вищенаведеному прикладі селектором буде body, а описом буде color:red. Якщо буде декілька описів, то вони записуються через крапку з комою (";"). Опис у свою чергу має дві частини: властивість і значення. У нашому прикладі властивістю буде color, а його значенням буде red. Якщо не все зрозуміло, то розшифрую даний приклад: при відображенні вмісту тега <body> (а це вся сторінка) потрібно текст (властивість color) браузеру виводити червоним кольором (значення Red властивості color).
Тепер додамо нашій сторінці цікавіше оформлення: синім кольором буде заголовок "Анекдот" і чорним кольором зробимо сам текст анекдота

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Анекдот</title>
<style type="text/css">
body { color:red; }
h1 { color:blue; }
p { color:black; }
</style>

</head>
<body>
<h1>Анекдот</h1>
<p> На колгоспних зборах голова говорит:<br>
-Торік ми засіяли п'ять гектарів конопель, і її всієї пожерла тля. Цього року ми засіємо п'ятнадцять гектарів. Нехай ця зараза пригнітитися!</p>
продовження слідує.
</body>
</html>

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

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Анекдот</title>
<style type="text/css">
body { color:red; }
h1 { color:blue; }
p { color:black; }
</style>

</head>
<body>
<h1>Анекдот</h1>
<p> На колгоспних зборах голова говорит:<br>
-Торік ми засіяли п'ять гектарів конопель, і її всієї пожерла тля. Цього року ми засіємо п'ятнадцять гектарів. Нехай ця зараза пригнітитися!</p>
<h1>Веселая история</h1>
<p>
Щоденник космонавтів. 13 січня прилетіли на МКС, дві години чекали видачі багажу. Недолічилися декількох валіз і поліетиленового пакету з ящиком горілки. Не треба було його здавати в багаж! Узяли інший ящик, пішли знайомитися з американцями. Ті ніяк не могли зрозуміти вираження «старий Новий рік». Довелося розповісти їм про обертання Землі довкола Сонця. Загалом, нормально повисіли! 25 січня Проапгрейділі бортовий комп'ютер - вставили круту відеокарту. Тепер на нім все літає - і «Тетріс», і «Вольфенштайн». 11 лютого Весь день проводили наукові експерименти з дрозофилами. З'ясувалося, що нічого не їх берет - ні липучки, ні мухобойки. Розповіли американцям. Ті запропонували спробувати точкові удари.
.
</p>
продовження слідує.
</body>
</html>

Припустимо заголовок історії потрібно зробити яким-небудь іншим кольором, і текст історії теж потрібно зробити яким-небудь іншим кольором. Якщо вказати колір тексту для елементу h1, то зміниться колір тексту у всіх елементах h1 що знаходяться в поточному документі. Для завдання різних значень властивостям певних елементів можна використовувати класи. Задати клас для елементу HTML-кода можна атрибутом class, значенням якого має бути ім'я класу (придумувати потрібно самостійно). Наприклад

Код
<p class="anekdot">.</p>
<p class="history">.</p>Соответственно селектор в каскадних таблицях стилів для даних елементів із заданими іменами класів набере вигляду Кодp.anekdot { color:black; }
p.history { color:#408080; }Тепер можна змінити наш приклад таким чином Код<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Анекдот</title>
<style type="text/css">
body { color:red; }
h1.zagol_anekdot { color:blue; background-color:#00FF80; }
p.anekdot { color:black; }
h1.zagol_history {color: #B5930B; background-color:#00FFFF;}
p.history {color: #408080; }
</style>

</head>
<body>
<h1 class="zagol_anekdot">Анекдот</h1>
<p class="anekdot"> На колгоспних зборах голова говорит:<br>
-Торік ми засіяли п'ять гектарів конопель, і її всієї пожерла тля. Цього року ми засіємо п'ятнадцять гектарів. Нехай ця зараза пригнітитися!</p>
<h1 class="zagol_history">Веселая история</h1>
<p class="history">
Щоденник космонавтів. 13 січня прилетіли на МКС, дві години чекали видачі багажу. Недолічилися декількох валіз і поліетиленового пакету з ящиком горілки. Не треба було його здавати в багаж! Узяли інший ящик, пішли знайомитися з американцями. Ті ніяк не могли зрозуміти вираження «старий Новий рік». Довелося розповісти їм про обертання Землі довкола Сонця. Загалом, нормально повисіли! 25 січня Проапгрейділі бортовий комп'ютер - вставили круту відеокарту. Тепер на нім все літає - і «Тетріс», і «Вольфенштайн». 11 лютого Весь день проводили наукові експерименти з дрозофилами. З'ясувалося, що нічого не їх берет - ні липучки, ні мухобойки. Розповіли американцям. Ті запропонували спробувати точкові удари.
.
</p>
продовження слідує.
</body>
</html>

В даному прикладі використана також властивість background-color, яке задає колір фону відповідного елементу.
Тепер, аби змінити відображення документа в браузері (наприклад, колір тексту або фону), потрібно змінити лише відповідну властивість каскадних таблиць стилів, не міняючи при цьому код HTML. При цьому підбирати імена класів потрібно так, щоб було зрозуміле, який логічний сенс несе елемент з даним ім'ям. Якщо дати якому-небудь елементу ім'я "asdf", то зрозуміти, що саме містить даний елемент практично не можливо. А якщо дати ім'я, наприклад "zagol_history", то вже не треба лізти в HTML-код, аби передбачити що даний елемент містить заголовок якої-небудь історії.

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

Опис каскадних таблиць стилів в зовнішньому файлі

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

Підключити ж файл CSS (наприклад, назвемо його mystyle.css) можна за допомогою тега <link> таким чином

Код
<link rel="stylesheet" type="text/css" href="mystyle.css">

Этот тег повинен знаходитися в заголовку HTML-документа.
Сам файл CSS містить лише список правил каскадних таблиць стилів необхідних для даного сайту. Наприклад, для вище наведеного прикладу зовнішній файл CSS (mystyle.css) буде наступний

Код
body { color:red; }
h1.zagol_anekdot { color:blue; background-color:#00FF80; }
p.anekdot { color:black; }
h1.zagol_history {color: #B5930B; background-color:#00FFFF;}
p.history {color: #408080; }

Відповідно HTML-код набере наступного вигляду

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Анекдот</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" >

</head>
<body>
<h1 class="zagol_anekdot">Анекдот</h1>
<p class="anekdot"> На колгоспних зборах голова говорит:<br>
-Торік ми засіяли п'ять гектарів конопель, і її всієї пожерла тля. Цього року ми засіємо п'ятнадцять гектарів. Нехай ця зараза пригнітитися!</p>
<h1 class="zagol_history">Веселая история</h1>
<p class="history">
Щоденник космонавтів. 13 січня прилетіли на МКС, дві години чекали видачі багажу. Недолічилися декількох валіз і поліетиленового пакету з ящиком горілки. Не треба було його здавати в багаж! Узяли інший ящик, пішли знайомитися з американцями. Ті ніяк не могли зрозуміти вираження «старий Новий рік». Довелося розповісти їм про обертання Землі довкола Сонця. Загалом, нормально повисіли! 25 січня Проапгрейділі бортовий комп'ютер - вставили круту відеокарту. Тепер на нім все літає - і «Тетріс», і «Вольфенштайн». 11 лютого Весь день проводили наукові експерименти з дрозофилами. З'ясувалося, що нічого не їх берет - ні липучки, ні мухобойки. Розповіли американцям. Ті запропонували спробувати точкові удари.
.
</p>
продовження слідує.
</body>
</html>

Вбудовування (inline-опис) стилів

Задати певний зовнішній вигляд за допомогою стилів окремому елементу HTML-кода можна атрибутом style. Тегу style потрібно буде привласнити список необхідних правил CSS, наприклад

Код
<p style=" color:blue; background-color:white; "> Текст абзаца</p>
<div style="background:#808080;">Содержимое блоку div</div>

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

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Анекдот</title>
<style type="text/css">
body { color:red; }
h1.zagol_anekdot { color:blue; background-color:#00FF80; }
p.anekdot { color:black; }
h1.zagol_history {color: #B5930B; background-color:#00FFFF;}
p.history {color: #408080; }
</style>

</head>
<body>
<h1 class="zagol_anekdot">Анекдот</h1>
<p class="anekdot"> На колгоспних зборах голова говорит:<br>
-Торік ми засіяли п'ять гектарів конопель, і її всієї пожерла тля. Цього року ми засіємо п'ятнадцять гектарів. Нехай ця зараза пригнітитися!</p>
<h1 class="zagol_anekdot">Анекдот</h1>
<p class="anekdot" style="font-style:italic;">
Фільм «Брат 2». Данило Багрів (граючи пістолетом перед носом в мужика) говорит:<br>
-Ось скажи мені, мужик, а в чому сила?<br>
Мужик, трясучись від страха:<br>
-У деньгах<br>
Даніла:<br>
-Ось і мій брат говорить, що в грошах. А сила те в Ньютонах!
</p>
<h1 class="zagol_history">Веселая история</h1>
<p class="history">
Щоденник космонавтів. 13 січня прилетіли на МКС, дві години чекали видачі багажу. Недолічилися декількох валіз і поліетиленового пакету з ящиком горілки. Не треба було його здавати в багаж! Узяли інший ящик, пішли знайомитися з американцями. Ті ніяк не могли зрозуміти вираження «старий Новий рік». Довелося розповісти їм про обертання Землі довкола Сонця. Загалом, нормально повисіли! 25 січня Проапгрейділі бортовий комп'ютер - вставили круту відеокарту. Тепер на нім все літає - і «Тетріс», і «Вольфенштайн». 11 лютого Весь день проводили наукові експерименти з дрозофилами. З'ясувалося, що нічого не їх берет - ні липучки, ні мухобойки. Розповіли американцям. Ті запропонували спробувати точкові удари.
.
</p>
<p style="color:#5C49DE;">Данные матеріали узяті з сайту www.veclife.com</p>
продовження слідує.
</body>

</html>

Застосовувати даний варіант підключення стилів, для задання певного відображення частини тексту, зручно спільно з тегом <span>. Як Ви вже, напевно, знаєте, цей тег <span> сам по собі нічого не робить, на відміну від подібних тегов <div> і <p>. Наприклад, потрібно виділити декілька слів в тексті напівжирним зображенням шрифту (для цього потрібно використовувати властивість font-weight із значенням Bold).

Цей текст не відображуватиметься напівжирним шрифтом.

Код
<span style="font-weight:bold;">Этот текст відображуватиме напівжирним зображенням шрифту за допомогою тега SPAN і каскадних таблиць стилів.</span> Цей текст не відображуватиме напівжирним зображенням шрифту.

На закінчення статті хочу звернути Вашу увагу на те, що всі ці 3 способи використання каскадних таблиць стилів можна одночасно використовувати в одному HTML-документі.

По зовнішнім джерелам

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 2.51MB | 0.02Sec ad Google