12.12.2017 21:41:03   
Навігація
Погода
Баштанка

Опитування
Ви потрапили сюди шукаючи:

Інформацію про Баштанку
Інформацію про Баштанку
33% [5 голосів]

Друзів з м. Баштанки
Друзів з м. Баштанки
27% [4 голосів]

Випадково потрапив
Випадково потрапив
7% [1 голос]

Фото Баштанщини
Фото Баштанщини
20% [3 голосів]

Товариш розповів
Товариш розповів
13% [2 голосів]

Всього голосів: 15
Для участі в опитуваннях Ви повинні авторизуватися
Розпочато: 30.12.2008 12:07
Зараз на сайті
Гостей: 4

Користувачів: 0

Всього користувачів: 119
Новий користувач: getdallcalmuzz1978
Останні оголошення
Распродажа! Каждому ...
Распродажа! Каждому ...
Кованая подставка дл...
Держатель для балкон...
Подставка для нового...
На правах реклами


Структура статей
Усі статті » WEB-Майстру » Основи HTML (Розділ 5)
Основи HTML (Розділ 5)
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.
Коментарі
Коментарі відсутні
Додати коментар
Щоб отримати можливість додавання коментарів, будь ласка, спочатку авторизуйтесь на сайті через власний обліковий запис.
Оцінки
Доступ до оцінювання мають лише зареєстровані користувачі.

Будь ласка, авторизуйтесь , щоб отримати можливість оцінювати.

Оцінки відсутні
Авторизація
Ім`я

Пароль



Не пам`ятаєте
ім`я/пароль?

 Відновлення 
Випадковий анекдот
Один викладач - іншому:
- Сьогодні на лекції пояснював студентам, шо не існує більшої чи меншої половини, половини дві рівні.
- І шо?
- Все рівно більша половина не зрозуміла. Rolf
Переглянути всі »
Календар
<< Грудень 2017 >>
Пн Вт Ср Чт Пт Сб Нд
        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 31
Міні-чат
Для спілкування Ви маєте авторизуватися.

01-01-2011 16:04
Вітаю З Новим роком!

24-08-2010 14:48
Вітаю з Днем Незалежності!

27-05-2010 09:50
Привіт! Настрій чудовий. Great

26-05-2010 15:02
Привет Баштанка как там у вас настроение. Задоволення

28-04-2010 23:54
То що, ніхто не знає відповідь на загадку.

Лічильники
SmartTop.info

Корисні посилання

© 2008-2017 "БіРіП"


  Завантажено за 0.04 сек.

4,087,533 відвідувачів