Таблиці стилів
Сутність, значення та принципи таблиць стилів, методи їх визначення. Способи включення стилів у веб-документ. Атрибут зміни властивостей одного-двох конкретних елементів. Створення спеціальних класів. Елемент поділу усього веб-документа на секції.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | методичка |
| Язык | украинский |
| Дата добавления | 19.07.2017 |
| Размер файла | 165,4 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru
ТАБЛИЦІ СТИЛІВ
Мета: навчитися використовувати та створювати таблиці стилів.
Теоретичні відомості
Таблиці стилів дають змогу спростити процес створення сторінок і поліпшити їхній зовнішній вигляд. Концепція стилів подібна до ідеї стилів, яка реалізована в сучасних текстових редакторах - текст спочатку вводять, а потім форматують, користуючись стилями. Застосування стилів дає змогу вводити на сторінку потрібні тексти та інші елементи, не задумуючись над їхнім зовнішнім виглядом і розташуванням.
За допомогою стилів можна змінити відстань між рядками, словами чи навіть символами, задати всі допустимі? відступи для елементів, змінити розміри, вигляд та інші атрибути шрифтів, створити рамки, задати тло, створити ефекти ти накладання текстів, управляти порожнім простором тощо.
Усі ці можливості відкриті перед вами. Тепер варто задуматися над тим, як саме реалізовувати таблиці стилів. Існують два шляхи. Перший: можна включати інформацію про стилі усередину веб-сторінки (визначаючи їхній або в секції <head>, або усередині кожного конкретного елемента). Другий: можна просто зв'язати сторінку з окремим файлом, у якому містяться винятково визначення стилів. При цьому та сама таблиця стилів може використовуватися необмежене число раз. Обидві можливості ми обговоримо далі.
Атрибут style таблиця стиль веб-документ клас
Почнемо з найпростішого: обговоримо, яким образом можна включати стилі у веб-документ. Для цього знадобиться атрибут style. З його допомогою можна повідомити практично будь-якому елементу HTML: «Гей, приятелю! Я збираюся застосувати до тебе такий-то стиль. Слухай мою команду!» І елементи будуть слухатися. У наступному прикладі зроблений маленький фокус: у гіперпосилання вкрадене підкреслення.
<а href="index.html" style="text-decoration:none">Клацніть тут! Онлайновий магазин на відстані одного щиглика мишкою!</а>
Чи от приклад того, як можна змінити колір тла обраного осередку таблиці:
<table>
<tr><td style="background: yellow">100</td><td>200</td>
<td style="background: red">300</td></tr>
</table>
Вийшла різнобарвна таблиця.
Якщо хочете задати відразу кілька властивостей, розділяйте їх крапкою з комою:
<р style="align: right; font-style: italic; font-weight: bold; background: yellow">Хм... жирний, похилий шрифт на жовтому тлі? Оригінально...</р>
Отже, якщо вам захотілося змінити стиль парочки елементів сторінки, простіше всього це зробити, включивши атрибут style у їхніх визначеннях. Однак це не є визначення стилю елемента взагалі. Для зазначеної дії служить елемент <style>.
Елемент <style>
Атрибут style застосовується лише тоді, коли потрібно змінити властивості одного-двох конкретних елементів, розташованих у конкретному місці сторінки. Це, узагалі ж, не дуже серйозна зміна стилю. Якщо вам дійсно хочеться створити щось однакове, зверніть увагу на елемент <style>. Саме з його допомогою в сторінку включається таблиця стилів. А сам він при цьому повинний бути розташований у секції <head>. Формат наступний:
<head><style type="text/css"> р {font-style: italic} </style></head>
<style type="text/css"> ЕЛЕМЕНТ {властивість: значення} </style> </head>
Ну от бачите, як усе просто? Наприклад, ви хочете оформити всі абзаци на своїй сторінці капітелями. Для цього вам буде потрібно написати наступний код у розділі <head>
<sty1e type="text/css"> р {font-style: small-caps} </style>
Обраний елемент (у даному випадку <р>) у термінах CSS називається селектором, а усе, що розташовується між фігурними дужками, -- визначенням. Усе разом називається правилом.
Селектори вам уже повинні бути знайомі: це ті букви, з яких складаються визначення елементів XHTML: p, h1, ul і т.д. При створенні правила ви зіставляєте обраному елементу визначення стилю. Наприклад: ul {list-style: disc}
Елемент <style> може містити і кілька правил. Кожне з них закінчується закриваючою дужкою, тому навіть на одному рядку ви можете розмістити більш одного правила. Але це не кращий стиль програмування.
<style type="text/css">
p {font-style: small-caps}
h1 {color: blue}
ul {list-type: disc}
</style>
Далі, кожне визначення може містити в собі кілька властивостей. Вони відокремлюються друг від друга крапкою з комою.
<style type="text/css">
p { font-style: small-caps;
background: yellow;
padding-left: 12 px
}
</style>.
Ще раз уточню, що таке розташування вихідного тексту не є обов'язковим, але в програмуванні це бонтон.
Те саме визначення можна застосувати відразу до декількох елементів. Для цього треба написати кілька селекторів підряд, розділяючи їхніми комами. Наприклад:
<style type="text/css">
p, h1, h2, h3, blockquote, ul, ol {font-family: Arial, Helvetica}
</style>
Такий підхід дозволяє зробити елементи выглядяючими однорідно. Принаймні, відразу стає зрозуміло, що автор попрацював над стилем своєї сторінки.
Нарешті, ще один аспект. Недарма CSS містить слово «Cascading» (каскадний). Напевно, таблиці стилів мають деяку властивість, що нагадує спадкування. Наприклад, якщо який-небудь стиль привласнений елементу <table>, те вхідні в нього елементи (тобто рядки й осередки) будуть мати саме цей стиль. Це, з одного боку, природно, з іншого боку, не так уже і очевидно з технічної точки зору. Те ж саме правило стосується, наприклад, елемента <body>, і узагалі всіх елементів, усередині яких є інші. Дія стилю поширюється на них без обмежень (доти, поки не зустрінеться інший стиль). Наприклад, що випливає визначення (задане сімейство шрифтів Arial, Helvetica) діє на все тіло сторінки, але не застосовується до маркірованого списку (ul), оскільки для нього заданий свій стиль (шрифт Times чи Times New Roman):
<style>
body {font-family. Arial, Helvetica; font-size: 12 pt }
ul {font-family: Times New Roman, Times } </style>
Створення спеціальних класів
Таблиці стилів дозволяють не тільки задавати властивості окремих елементів, але і створювати цілі класи. По суті, ці класи дозволяють варіювати характеристики елементів! Познайомтеся з наступним прикладом:
<head>
<style>
h1.krasota {color: red}
</style>
</head>
<body>
<h1>Звичайний такий заголовок</h1>
<h1 class="krasota">Незвичайний такий, червоний заголовок</h1>
</body>
У даному прикладі ми використовуємо селектор h1.krasota замість звичайного h1. Зазначений стиль буде застосовуватися до h1 тільки там, де ви вкажете атрибут class. Такий підхід застосовується дуже широко. Чудовим образом можна визначати різні класи для того самого елемента. У результаті ми одержали витончений код:
<style>
p.body { font-family: Arial, Helvetica: font-size: 15 pt }
p.footnote { font-family: Times New Roman, Times, font-size: 13 pt }
</style>
Тепер, змінюючи в тілі сторінки значення атрибута class, ви зміните зовнішній вигляд елемента <р> відповідно до визначеного вище стилем.
Ми можемо створити універсальний клас. Його можна в тілі сторінки прив'язати до будь-якого елемента, і він буде використовувати зазначений стиль. Наприклад:
<style>
.small { font-family: Arial. Helvetica; font-size: 15 pt }
</style>
Тепер пишіть на сторінці що хочете, тільки встигайте вказувати значення class: <ul class-"small"> чи от <blockquote< class="small"> і т.д.
Елемент <div>
Розглянемо ще один елемент, що має відношення до стилів. Він називається <div> (скорочення від «division», що означає «поділ») і застосовується для поділу усього веб-документа на секції. Це, зрозуміло, контейнер, він може містити практично будь-які елементи, а до них може бути застосоване практично будь-яке форматування. <div> можна розглядати як деякий користувальницький елемент, по своїй значимості й області дії він порівнянний з <body> чи <head>. (У специфікаціях він називається елементом блокового рівня, це означає, що браузер автоматично залишає довкола нього порожній простір, як навколо <р> чи <blockquote>.)
Елемент <div> може використовуватися приблизно так само, як <span>. Для нього можуть бути визначені правила таблиць стилів, він може мати атрибут class. Приклад:
<html>
<head>
<title>Стилі</title>
</head>
<body>
<h1>Як пообідати поза будинком</h1>
<div style="background-color: yellow" align="justify">
<р>От деякі ради на тему того, як добре пообідати поза своїм будинком:</р>
<ul>
<li>3аздалегідь обзвонить ресторани, щоб довідатися, чи можна ще зарезервувати столик</li>
<li>Якщо ви збираєтеся йти вшістьох чи більшою компанією, зробіть спеціальне замовлення:
наприклад, у тихому куточку, банкетному чи залі біля вікна з гарним видом</li>
<li>Якщо подзвоните досить рано (хоча б до початку обіднього часу), можливо, вам
удасться одержати коротку інформацію про те що являє собою даний ресторан і якіблюда і вина є його гордістю. Якщо ви одержали задовольняючі вас зведення, до того ж чули непогані рекомендації щодо закладу, у яке ви подзвонили, можете розраховувати на його</li>
<li>Довідайтеся. чи може ресторан запропонувати вегетаріанські, кошерні, диабетичні чи інші специфічні блюда, особливо якщо ви не знайомі з усіма своїми гістьми, запрошеними до обіду.</li>
<li>Продумайте заздалегідь, які ще специфічні вимоги повинні бути задоволені. Наприклад, чи можливо комфортне розміщення людей на інвалідних колясках</li> <li>Обережно передайте свою кредитну картку старшому чи офіціанту повідомите йому про те, що ви збираєтеся розплачуватися чеком. Це запобіжить можливим непорозумінням наприкінці обіду</li>
<li>Варто дати на чай усьому персоналу, що обслуговує вас, особливо якщо ви стоїте в очікуванні звільнення столика</li> </ul> </div>
</body>
</html>
Як видно з приведеного і з малюнка, елемент <div> може містити в собі зовсім різні типи контейнерів, наприклад, такі, як <р> і <ul>. Саме для цього він і призначений -- для штучного поділу сторінки на секції, виконані в єдиному стилі. «div> може мати навіть такий атрибут, як align, що розпізнається більшістю браузерів, навіть якщо вони орієнтовані на підтримку таблиць стилів. Наприклад, <div align="center">...</div> розмістить усе, що знаходиться між відкриваючим і закриваючим тегом контейнера, -- будь то текст, гіперпосилання, зображення, мультимедиа -- посередині веб-сторінки. Такий підхід більш кращий у порівнянні з використанням елемента <center>, тому що останній не входить у рекомендації зі стандарту XHTML.
Чи зв'язування, чи впровадження?
Розглянемо ще одне питання, що нам потрібно обговорити перед тим, як ми підемо далі. Виявляється, існує два різних методи визначення таблиць стилів. Ви вже бачили багато прикладів одного з підходів: упровадження за допомогою контейнера <style>, включеного в заголовок документа. Він звичайно застосовується тоді, коли таблиця стилів поширює свою дію тільки на ту сторінку, у яку вона включена.
Звичайно, далеко не усі розробляють веб-сайти саме в такий спосіб. Досить часто дизайнери працюють саме над тим, щоб якнайбільше сторінок (а те й усі) були оформлені в одному стилі. Упроваджувати ту саму таблицю багато разів, погодитеся, незручно, та й нерозумно. Набагато розумніше було б мати деяку універсальну таблицю і зв'язувати з нею всі необхідні сторінки.
Зв'язування має дві очевидних переваги. По-перше, зрозуміло, що вам не потрібний при такому підході <style> на початку кожної сторінки. По-друге, якщо ви зберігаєте набір правил для усього сайта в одній таблиці, те дуже сильно спрощується процес редагування стилів. Крім того, це дозволяє нормально взаємодіяти декільком веб-дизайнерам, що працює над тим самим проектом.
Звичайно, навіть якщо у вас мається визначений стиль, ви завжди можете обійти його, використовуючи <span>, <div> чи атрибут style усередині іншого потрібного елемента.
Отже, яким образом можна зв'язати сторінку з таблицею стилів? По-перше, для цього потрібно створити окремий документ, у якому ви будете описувати тільки стилі. Там не повинно бути нічого, що прямо відображається в браузері. Тільки правила таблиць стилів. Цей документ має сенс зберегти для подальшого використання з расширенням.css, наприклад styles.css. Усередині нього можна використовувати спеціальні теги для вставки коментарів. Вони виглядають трохи специфічно: /* і */. Будь-який текст, укладений між ними, ігнорується. От невеликий приклад таблиці стилів:
/* Початок опису правил для заголовків */
h1 {
font-family: Arial, Helvetica;
font-size: 24pt;
font-weight: bold;
word-spacing: 2pt; }
Тепер потрібно підключити цей файл до веб-документу. Для цього існує елемент <link>, що повинний бути поміщений у заголовок (між <head> і </ head>).
<head>
<title>Головна сторінка</title>
<link rel="stylesheet" HREF ="адреса таблиці стилів">
</head>
Значення стилів наведені у таблиці
|
Властивість |
Значення |
Пояснення |
|
|
Background-attachment |
fixed scroll |
Тло фіксоване Тло прокручується |
|
|
Background-color |
red, green, #ffcc55 |
Колір тла |
|
|
Background-image |
URL("адреса графічного файлу для тла") |
||
|
Background-repeat |
repeat, repeat-x, repeat-y, no-repeat |
Повторює зображення |
|
|
Border-color |
red, green, #ffcc55 |
Колір рамки |
|
|
Border-style |
none, dotted, dashed, solid, double, groove, ridge, inset, outset |
Стиль рамки |
|
|
Border-width |
2mm, 3mm |
Товщина рамки |
|
|
Font-family |
“Arial”, “Times New Roman”, “Serif” |
Назва шрифта |
|
|
Font-size |
12pt, 16pt |
Розмір шрифта |
|
|
Font-style |
normal, oblique, italic |
Вигляд курсивів |
|
|
Font-variant |
normal, small-caps |
Вигляд шрифта |
|
|
Font-weight |
normal, bold, bolder |
Жирність шрифта |
|
|
Word-spacing |
1mm, 2mm |
Відстань між словами |
|
|
Letter-spacing |
1 mm |
Відстань між символами |
|
|
Line-height |
2mm, 4mm |
Відстань між рядками |
|
|
Text-align |
Left, right, center, justify |
Вирівнювання тексту |
|
|
Text-decorate |
none, underline, overline, line-through, blink |
Оформлення тексту |
|
|
Text-indent |
2cm |
Абзацний відступ |
|
|
Margin-top |
4mm |
Відступ зверху |
|
|
Margin-right |
4mm |
Відступ справа |
|
|
Margin-bottom |
4mm |
Відступ знизу |
|
|
Margin-left |
4mm |
Відступ зліва |
|
|
Padding-top |
2mm |
Величина вільного простору між стороною рамки і елементом у рамці |
|
|
Padding-right |
2mm |
||
|
Padding-bottom |
2mm |
||
|
Padding-left |
2mm |
||
|
Height |
4cm |
Висота елемента |
|
|
Width |
14cm |
Ширина елемента |
|
|
Float |
none, left, right |
Обтікання об'єкта текстом |
|
|
Color |
red, green, #ffcc55 |
Колір елемента |
|
|
Vertical-allign |
top, super, middle, sub, bottom |
Вертикальне вирівнювання |
|
|
List-style-image |
URL(“адреса графічного маркера списку”) |
||
|
I List-style-position |
inside, outside |
Позиція маркера |
|
|
List-style-type |
disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none |
Вигляд маркера (диск, круг, квадрат, арабські цифри, малі чи великі римські тощо) |
Хід роботи
Створити дві рекламних веб-сторінки, використовуючи наведений матеріал щодо стилів. Першу виконати методом зв'язування, другу - методом впровадження.
Размещено на Allbest.ru
...Подобные документы
Автоматична побудова змісту багатосторінкового документа, що можлива лише за умови використання для заголовків стилів. Оновлення змісту після внесення змін. Значення довідкової системи та автоматичного створення змісту. Значення ключових слів в пошуку.
презентация [486,0 K], добавлен 17.05.2019Особливості експлуатації протоколу HTML (гіпертексту). Засоби обміну інформацією у ньому і підготовка даних у форматі HTML з використанням розширених засобів форматування даних. Основи використання таблиць каскадних стилів і активних елементів JavaScript.
реферат [32,4 K], добавлен 26.04.2011Використання стилів при оформленні документа. Призначення поєднання клавіш стилю. Видалення атрибутів форматування. Зміна рівня і переміщення, нумерація заголовка, фрагмента тексту. Поєднання клавіш для роботи з документом в режимі структури, його друк.
реферат [758,4 K], добавлен 20.01.2016Мова розмітки гіпертекстових сторінок HTML. Каскадні таблиці стилів CSS. Розробка інформаційного Web-сайту: меню навігації, структура та інтерфейс сайту. Тестування, впровадження та тестування розробленого проекту. Безпека умов праці при використанні ПК.
дипломная работа [1,3 M], добавлен 20.05.2012Програмування JavaScript на прикладі створення меню. Обробник подій onMouseOver. Використовування властивостей і методів об'єкту document. Масив та прапорці (bolean) для визначення зміни кольору. Робота з властивостями та індивідуальними елементами меню.
лабораторная работа [18,1 K], добавлен 20.03.2011Сканер: призначення та принцип дії. Операційні оболонки. Шрифти та оформлення. Використання стилів. Форматування елементів діаграм. Послідовність команд запуску програми Калькулятор і операції додавання в ній. Аналіз продажу устаткування у магазинах.
контрольная работа [52,2 K], добавлен 03.10.2008Методи створення книги MS Excel для розподілу заробітної плати між членами комплексної бригади та аналізу результатів розподілу згідно кваліфікації та відпрацьованого часу. Створення таблиці розподілу, нарахувань та утримань. Побудова графіків та діаграм.
контрольная работа [1,1 M], добавлен 02.05.2010Вступ в мову HTML. Структура HTML-документа. Встановлення кольору фону та тексту, створення заголовка. Графіка і посилання на WEB-сторінці, вставка малюнків. Оформлення таблиць та форматування комірок. Комплексна лабораторна робота "Створення HTML-файла".
методичка [147,3 K], добавлен 15.06.2009Порядок обробки матриць. Обчислювання, надрукування елементів матриці С, кожен елемент якої дорівнює сумі відповідних елементів матриць А і В. Знаходження середнього значення серед усіх елементів масиву С. Розрахунок значень функцій на заданому інтервалі.
контрольная работа [215,4 K], добавлен 12.09.2010Циклічний зсув на одну позицію елементів першої половини послідовності. Вилучення з послідовності елементів кратних заданій величині. Обмін між собою елементів двох послідовностей та слідуючих за ними елементів. Копіювання однієї послідовності в іншу.
лабораторная работа [1,7 M], добавлен 26.04.2021Характеристика методів створення таблиць і роботи з ними у програмі Microsoft Excel: розробка таблиці з прізвищами співробітників, розміщених у алфавітному порядку та сумами отримуваних ними заробітних плат. Створення таблиці в програмі Microsoft Access.
контрольная работа [2,0 M], добавлен 15.05.2010Оператори визначення даних. Створення таблиць. Вилучення таблиць. Додавання записів. Модифікація даних. Видалення даних. Пошук даних. Database Desktop. Компонент TQuery.
реферат [165,8 K], добавлен 13.06.2007Верстка видання тематично спрямованого журналу для рибалок-любителів за допомогою професійної видавничої системи Adobe InDesign. Обробка графічних зображень та підготовка макету календаря. Створення стилів форматування. Верстка публікації в PDF-формат.
дипломная работа [1,7 M], добавлен 15.06.2016Створення баз даних і введення даних. Створення бази даних за допомогою майстра. Створення таблиць. Створення таблиці в режимі конструктора. Створення запитів за допомогою майстра. Додавання полів у бланк запиту. Зміна порядку полів.
реферат [17,1 K], добавлен 07.10.2004Створення інформаційних таблиць бази даних. Створення екранних форм як засобу організації інтерфейсу користувача. Створення запитів для вибору, сортування і обчислення з використанням даних однієї таблиці. Оформлення звітів за допомогою команд MS Access.
лабораторная работа [397,7 K], добавлен 09.09.2010Microsoft Excel 2000 - табличний процесор, програма для створення і обробки електронних таблиць. Загальні відомості про таблиці Excel. Методика ознайомлення з таблицями Excel. Можливості використання табличного процесора. Форматування електронної таблиці.
курсовая работа [1,7 M], добавлен 29.01.2010Робота з текстовим редактором Word для створення документів, що містять текст, маркіровані та нумеровані списки, малюнки, схеми, таблиці, графіки. Використання "художніх" шрифтів, об'єктів WordArt, автофігур. Етапи створення структурованих документів.
лабораторная работа [326,6 K], добавлен 21.12.2011Створення документа "Запрошення". Запуск і настроювання редактора. Виправлення орфографічних помилок. Збереження документа у файлі. Оформлення документа: настроювання полів сторінки; виділення фрагментів тексту; оформлення тексту. Малюнок Microsoft Draw.
методичка [475,8 K], добавлен 11.05.2011Порядок створення нового документа в текстовому редакторі. Виділення окремих елементів документу( слова, рядка, тощо). Використання програми Блокнот. Переваги редактора Google Documents. Значення та можливості створення документів та текстових редакторів.
презентация [434,9 K], добавлен 17.05.2019Створення малої рекламної продукції в програмі PageMaker. Розробка шаблонів сторінок і модульної сітки. Опис документа в діалоговому вікні Document Setup. Створення публікації на базі шаблону. Зміна параметрів документа. Автоматичне налаштування макета.
курсовая работа [491,9 K], добавлен 29.10.2014
