Полезное:
Как сделать разговор полезным и приятным
Как сделать объемную звезду своими руками
Как сделать то, что делать не хочется?
Как сделать погремушку
Как сделать так чтобы женщины сами знакомились с вами
Как сделать идею коммерческой
Как сделать хорошую растяжку ног?
Как сделать наш разум здоровым?
Как сделать, чтобы люди обманывали меньше
Вопрос 4. Как сделать так, чтобы вас уважали и ценили?
Как сделать лучше себе и другим людям
Как сделать свидание интересным?
Категории:
АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника
Короткі теоретичні відомості
Практична робота №5
Тема роботи: Розробка веб-сторінки за допомогою каскадних стилів, CSS.
Мета роботи: навчитися використувувати різні способи включення СSS, задавати колір фону, зміну шрифтів, кольору, вирівнювання, зміну стилю списків, границь, і рамок, курсорів.
Короткі теоретичні відомості
Опис способів підключення таблиць стилів.
Спосіб перший: Додавання 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. Для того щоб зробити посилання на зовнішній файл із 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>
Властивість color
Властивість color описує колір переднього елементу. Наприклад, ми бажаємо встановити зелений колір тексту абзаца, для цього у файлі style.css створимо таке правило:
p{
color: #00ff00;
}
<html>
<head>
<title>Приклад№2,1</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p> Колір тексту у цьому абзаці зелений</p>
</body>
</html>
Властивість background-color
Властивість background-color описує колір фону елемента. Для того, щоб замінити фон всієї веб-сторінки властивість background-color слід застосувати до тегу <body>. Також властивість background-color можна застосовувати до інших елементів веб-сторінки.
У файл style.css внесемо зміни, що описують фон абзацу.
p{
color: #00ff00;
background-color:#ff0000;
}
<html>
<head>
<title>Приклад№2,2</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p> Колір тексту у цьому абзаці зелений на червоному фоні.</p>
</body>
</html>
Зображення. Формати зображення
Найбільш розповсюдженими форматами для веб-графіки стали — gif та jpeg. Їх багатофункціональність, універсальність, невеликий об'єм, при достатній для сайту якості визначили їх стандартом для веб-зображень.
Властивість background-image
За допомогою властивості background-color, зображення можна не тільки помістити на задній план елементу або зробити фоном веб-сторінки, але задати його положення на веб-сторінці.
Щоб зробити зображення фоном веб-сторінки достатньо в файлі style.css застосувати параметри тега <body>
body{
background-image: url("../images/ball.jpg");
}
Нумерований список
В якості елементів нумерованого списку можуть виступати наступні значення:
- арабські числа (1, 2, 3,...);
- прописні латинські літери (A, B, C,...);
- малі латинські букви (a, b, c,...);
- римські числа у верхньому регістрі (I, II, III,...);
- римські числа у нижньому регістрі (i, ii, iii,...).
Маркірований список
Маркірований список визначається тим, що перед кожним елементом списку додається невеликий маркер. Маркери можуть приймати один з трьох видів:
- коло (за замовчуванням),
- окружність
- квадрат.
Властивість list-style-type
У файлі style.css створимо для оформлення маркірованого списку таке правило:
ul {list-style-type: circle}
<html>
<head>
<title>Приклад№3,1</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</body>
</html>
Поняття шрифт
Теоретично в веб-середовищі можна використовувати будь-який тип комп’ютерного шрифту. Комп'ютерний шрифт — це файл, що містить набір описів текстових символів і використовуваний програмою (або графічною оболонкою операційної системи) при відображенні тексту.
Шрифти у веб-середовищі
Існують кілька визначених способів відображення тексту веб-середовищі.
1. HTML-текст
2. Графічний текст
3. Векторний текст
Властивість font-family
Щоб задати сімейство шрифтів використовується властивість font-family. В цій властивості завжди вказується ряд шрифтів, розділених комою, наприкінці списку вказується сімейство шрифтів. При застосуванні шрифтів до веб-сторінки завжди задається основний шрифт, а потім альтернативний. У разі відсутності на комп’ютері користувача заданих шрифтів то веб-сторінка, як мінімум буде відображена шрифтом, що входить до цього сімейства.
Існують п’ять сімейств шрифтів:
1. serif(з засічками)
2. sans-serif (без засічок)
3. monospace (моноширинний)
4. cursive (рукописний)
5. fantasy (декоративний)
Шрифти сімейства 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>
Властивість font-weight
Властивість font-weight описує, наскільки товстим, або "важким", повинен відображуватися шрифт. Шрифт може бути normal або bold. Деякі браузери підтримують навіть числові значення 100-900 (у сотнях) для опису ваги шрифту. Іноді при значенні "500" або "600" браузери відображають "проміжну" насиченість між normal і bold.
У файлі style.css створимо таке правило:
p{
font-family: Arial, Candara, Century-Gothic, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: 600
}
<html>
<head>
<title>Приклад№3,4</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p>Товщина шрифту абзацу дорівнює 600</p>
</body>
</html>
Властивість font-size
Властивість font-size задає розмір шрифту для відображення вмісту елементу. Щоб задати розмір шрифту використовуються різні одиниці виміру (наприклад, пікселі або відсотки).
h1{
font-family: Arial, Candara, Century-Gothic, sans-serif;
font-style: normal;
font-size: 30px;
}
h2{
font-family: Times New Roman, Georgia, serif;
font-style: italic;
font-size: 100pt;
}
h3{
font-family: Times New Roman, Georgia, serif;
font-style: italic;
font-size: 120%;
}
Скорочений запис властивості font. Властивості font, що були розглянуті, можна записувати у скороченому вигляді. Розглянемо фрагмент коду оформлення абзацу:
p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Використовуючи скорочений запис, код можна спростити:
p{
font: italic bold 30px arial, sans-serif;
}
Порядок розташування властивостей такий:
font-style | font-variant | font-weight | font-size | font-family.
Властивість text-indent.
Властивість text-indent задає відступ першого рядка при відображенні блокових елементів. Відступ може бути, як позитивним так і
h{text-indent:10%;}
p{text-indent:10pt;}
Властивість text-align
Властивість text-align задає вирівнювання тексту при відображенні блокових елементів. Воно може набувати наступних значень:
p{
text-indent: 3pt;
text-align: justify;
}
Властивість text-decoration
Властивість text-decoration прикрашає текст при відображенні елементів. Воно може набувати наступних значень:
p{
text-indent: 3pt;
text-align: justify;
text-decoration: line-through;
}
Властивість letter-spacing
Властивість letter-spacing задає інтервал між буквами при відображенні тексту. Його значення задається одним з наступних способів:
p{letter-spacing: normal;}
p{letter-spacing: 2em;}
Властивість text-transform. Властивість text-transform задає перетворення тексту при відображенні елементів. Воно може набувати наступних значень:
Хід роботи
1. Розробити веб-сторінку відповідно до заданого варіанту.
2. За допомогою CSS встановіть:
- колір для фону, або фонове зображення,
- різні шрифти,
- різні кольори для тексту,
- стилі для списків, таблиць,
- стилі границь і рамок, курсорів.
3. Оформити звіт.
| <== предыдущая | | | следующая ==> |
| Тема: Визначення умов прибутковості підприємства | | | Короткі теоретичні відомості |
Date: 2016-11-17; view: 218; Нарушение авторских прав; Помощь в написании работы --> СЮДА... |