Понеділок, 25.11.2024, 10:50
Головна Реєстрація RSS
Вітаю Вас, Гість
Меню сайту
Реклама
Категорії розділу
Архітектура ПК [1]
Архітектура та експлуатація персонального комп'ютера
СПЗ [12]
Системне програмне забезпечення та операційні системи
Комп'ютерна графіка [25]
КСМ [28]
Комп'ютерні системи та мережі
ІСІТО [1]
Інформаційні системи і технології обліку
Бухгалтерський облік [0]
АМтП [10]
Алгоритмічні мови та програмування
Копирайт рерайт [1]
СУБД [18]
Системи управління базами даних
ОКТ практикум [2]
Основи комп'ютерних технологій практикум
Інформатика (практ) [1]
інформатика практикум, практичні заняття
ТіОБВ [61]
Технологія і організація будівельного виробництва
ОСАПр [6]
Основи систем автоматизованого проектування, AutoCAD, ArchiCAD
ТіОБВ (заочники) [1]
Пошук
Статистика
Яндекс.Метрика
Онлайн всього: 3
Гостей: 3
Користувачів: 0
Форма входу
Календар
«  Грудень 2013  »
ПнВтСрЧтПтСбНд
      1
2345678
9101112131415
16171819202122
23242526272829
3031
Архів записів
Головна » 2013 » Грудень » 4 » Класи в CSS
15:17
Класи в CSS
Класи застосовують, коли необхідно визначити стиль для індивідуального елемента веб-сторінки або задати різні стилі для одного тега. При використанні разом з тегами синтаксис для класів буде наступний.
Тег.Імя_класу {властивість1: значення; властивість2: значення; ... }
Всередині стильової таблиці спочатку пишеться бажаний тег, а потім, через крапку користувальницьке ім'я класу. Щоб вказати в коді HTML, що тег використовується з певним стилем, до тегу додається параметр class = "Ім'я_класу" (приклад 6.1).

Приклад 6.1. Використання класів c тегами

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Класи</title>
 <style type="text/css">
 P { /* Звичайний параграф */
 text-align: justify; /* Вирівнювання тексту по ширині */ 
}
 P.cite{ /* Параграф із класом cite */ 
text-align: justify; /* Вирівнювання тексту по ширині */
 color: navy; /* Синій колір тексту */
 font-style: italic; /* Курсивний шрифт*/
 } 
</style>
 </head>
 <body> 
<p>При роботі на обчислювальній техніці необхідно сісти так, щоб руки 
з передпліччям утворювали прямий кут, очі поставити на відстань 30-40 см
 від робочої поверхні монітора. Набирати на клавіатурі слід подушечками 
пальців короткими уривчастими ударами.
 </p>
 <p class="cite">Гранично допустима довжина нігтів для жінок складає 
12-15 мм, для чоловіків 3-5 мм. При виході довжини нігтів за норми 
регламентовані ГОСТом, під уникнення ризику подряпати поверхню дорогої
техніки, оператор допускається до роботи на комп'ютері лише в верхонках.
 </p>
 </body>
 </html>
Результат даного прикладу показано на рис. 6.1.

Вид тексту, оформленого за допомогою стилів

Рис. 6.1. Вид тексту, оформленого за допомогою стилів

Перший абзац вирівняний по ширині з текстом чорного кольору, а наступний, до якої застосовано клас cite - написаний курсивом синього кольору. Імена класів обираються за бажанням, головне, щоб вони були зрозумілі і відповідали їх використання, при цьому ім'я має завжди починатися з символу. Можна, також, використовувати класи і без вказівки тега. Синтаксис у цьому випадку буде наступний.
.Ім'я_класу {властивість1: значення; властивість2: значення; ... }
При такому запису, клас можна застосовувати до будь-якого тегу (приклад 6.2).

Приклад 6.2. Використання класів

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Класи</title> 
<style type="text/css"> 
.cite { 
color: navy; /* Синій колір текста */
 font-style: italic; /* Курсивний текст*/
 }
 </style>
 </head>
 <body>

<p>Слід ретельно подбати про своє робоче місце. Освітлення в приміщенні

відрегулювати таким чином, щоб джерело світла знаходився збоку або ззаду

оператора. Для уникнення ускладнень медичних ускладнень

<b class="cite"> стілець 


рекомендується вибирати з м'яким сидінням</b>.
</p> 
</body> 
</html>
Результат застосування селектора з ім'ям cite до тегу <B> показано на рис. 6.2.

Вид тега <B>, оформленого за допомогою стилів

Рис. 6.2. Вид тега <B>, оформленого за допомогою стилів

Класи зручно використовувати, коли потрібно застосувати стиль до різних тегів веб-сторінки: клітинок таблиці, посиланням, параграфами і ін Для зміни окремих слів або навіть літер, а також блоків, що містять у собі різні елементи, вживаються теги <SPAN> і<DIV >. У прикладі 6.3 показана зміна стилю першої літери пропозиції шляхом використання класу спільно з тегом <SPAN>.

Приклад 6.3. Використання класів

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<title>Класи</title>
 <style type="text/css">
 .inicial {
 color: red; /* Червоний колір тексту */
 font-size: 200%; /* Розмір тексту */ 
} 
</style>
 </head>
 <body>
 <p>
<span class="inicial">Н</span>абрати на клавіатурі слід подушечками пальців
 короткими уривчастими ударами.</p> 
</body>
 </html>
Результат даного прикладу показано на рис. 6.3.

Результат використання класів

Рис. 6.3. Результат використання класів

Категорія: КСМ | Переглядів: 759 | Додав: Gryzley | Рейтинг: 0.0/0
Всього коментарів: 0
Ім`я *:
Email *:
Код *: