 Гостей: 2
Користувачів: 0
Всього користувачів: 72
Новий користувач: joachimg
|
|
17. Каскадні таблиці стилів.
Отже, ми переконалися, що задаючи стиль (клас, селектор) для кожного елементу Ви можете достатньо оперативно міняти стиль (дизайн) свого сайту. Причому всі ці стилі, як Ви встигли відмітити, заносяться в один перелік, одну таблицю і дозволяють зекономити на об'ємі сторінки, збільшуючи швидкість завантаження. Міняти дизайн, налаштування сторінки можна, змінюючи дизайн елементів цієї самої таблиці.
Але залишився ще один недолік. Необхідно прописувати стилі в тілі <head> кожного HTML-документу. Цей недолік легко усувається прописуючи всі оформлення стилів в окремому файлі. Це файл з розширенням *.css. CSS (Cascading Style Sheets) - означає каскадна таблиця стилів. Наприклад Ви можете створити файл styles.css і помістити в нього все те, що Ви поміщали в тіло тега <head>, але тільки сам тег <style (що як відкриває, так і закриває) там вже указувати не потрібно.
У будь-якому текстовому редакторові створюємо файл styles.css або з будь-якою іншою назвою (не забувши при цьому, що розширення повинне бути *.css) з першого ж рядка відразу можна записувати оформлення для елементів по вже звичній для нас схемі:
ім'я_тега { параметр_тега1: значення; ... }
ім'я_тега.класс { параметр_тега1: значення; ... }
.класс { параметр_тега1: значення; ... }
А як же включити цей окремий файл у Вашу HTML-сторінку? Та дуже просто. Для цього достатньо в тілі тега <head> помістити наступний код:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
Цією єдиною строчкою Ви підключите до свого HTML-документу любу кількість стилів, класів і ін. Причому всі стилі записані в одному файлі, а підключатися можуть до багатьох HTML-сторінок. Таким чином, крім економії на об'ємі сторінок, Ви створюєте єдиний дизайн для всіх сторінок.
У випадку ж якщо Ви хочете для деяких сторінок застосовувати декілька відмінний дизайн, то Ви можете створити ще один *.css файл і підключити його. До однієї і тієї ж сторінки можна підключати декілька *.css файлів. Можливий і змішаний запис:
<head>
<LINK href="../styles.css" type=text/css rel=stylesheet>
<style type="text/css">
TD { text-align: center }
TD.left { text-align: left }
P { text-align: left; color: black}
P.cursive { text-align: left; color: black; font-style: italic; }
.myclass { text-align: left; color: red; font-style: bold; }
#myid { position:relative; left:160px; top:10px; width:350px; height:100px;}
</style>
</head>
В таблиці приведемо найбільш часто вживані елементи стилів:
| text-align | Вирівнювання тексту по горизонталі | | color | Колір елементу тексту | | background-color | Колір фону | | font-family | Сімейство шрифтів (Verdana, Geneva, Arial, Helvetica, sans-serif та ін.) | | font-size | Розмір шрифту | | margin | Відступ: (margin-bottom - знизу, margin-top - зверху, margin-left - зліва, margin-right - зправа) | | border | Стиль рамки | | padding | Заповнювання |
Є непоганий візуальний редактор стилів - Css Magic, зкачати який можна за адресою ds-webevent.com. |
|
Будь-ласка, залогіньтеся для додавання коментарів
|
|
Рейтинг доступний лише для користувачів.
Будь-ласка, залогіньтеся або зареєструйтеся для голосування.
Немає даних для оцінки.
|
|
| Пн |
Вт |
Ср |
Чт |
Пт |
Сб |
Нд |
| |
|
1 |
2 |
3 |
4 |
5 |
| 6 |
7 |
8 |
9 |
10 |
11 |
12 |
| 13 |
14 |
15 |
16 |
17 |
18 |
19 |
| 20 |
21 |
22 |
23 |
24 |
25 |
26 |
| 27 |
28 |
29 |
30 |
|
|
|
|
admin24/08/2010 15:48Вітаю з Днем Незалежності!
admin27/05/2010 10:50Привіт! Настрій чудовий. 
Dessar26/05/2010 16:02Привет Баштанка как там у вас настроение. 
admin29/04/2010 00:54То що, ніхто не знає відповідь на загадку.
admin08/03/2010 10:07Вітаю зі святом 8 Березня 
Архів чату Для участі в міні-чаті Ви повинні залогінитися
|
|
