Поточний час:
Сьогодні 21 листопада, вівторокк 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 2 дня

Ваш ip адрес:54.198.210.67

Доброї ночі!
Ви обновили сторінку в 4 : 32
Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

Post_41aДо того як появилось CSS всі документи HTML  були відформатовані всередені себе. Всередині такого документу були  визначені всі можливі команди і атрибути, включаючи шрифти, розмір, колір.

Якщо у нас би був сайт на HTML без CSS то кожну сторінку прийшлось би форматувати окремо. 

Роль  CSS така що веб– дизайнери можуть створити єдину таблицю стилей (stylesheet) для обслуговування всього веб–сайту. Всі сторінки HTML будуть виконувати єдиний набір інструкцій CSS, а код HTML при цьому не буде перегружений інформацією про форматуванню.

Для того щоб таблиця стилей впливала на форматування документа, необхідно якось вказати браузеру про те що вона існує, і де вона розташована. CSS може бути збережена в виді окремого документу і привязана належним чином до документу HTML, або вбудована в HTML–документ.

Крім того допускається одночасно використання декількох способів включення таблиць стилей в HTML–документ.

Існує чотири способи включення таблиць  стилей в HTML–документ.

Зв’язування (використання зовнішніх таблиць стилей) — приміняється для форматування декількох веб–сторінок одного проекту за допомогою одної таблиці стилей. Для цього використовують тег <Link>

Для того щоб реалізувати цей спосб необхідно помістити вказаний тег з посиланням в таблицю стилей в заголовок <head> нашого документу. Таблиця стилей представляє собою  окремий файл

<link href= “style.css” rel= “stylesheet”  type= “text/css” >

<link href= "style.css" rel= "stylesheet"  type= "text/css" >

Впровадження (використання внутрішніх таблиць стилей) — використовується для того щоб задати правило форматування в самому документі, при чому ці правила приміняються тільки для тої сторінки, для якої прописані

Для цього використовують тег <STYLE>

Для того щоб реалізувати цей спосіб потрібно прописати всі правила форматування, і заключити іх в теги <style type=”text/css”> і </style> і помістити в розділ <head>

<style type=”text/css”>

H1 {

      font–family:Tunga;

      font–size:10 Px;

      color: Blue

      text–align: center;

}

H2{

      font–family:Arial;

      font–size:20 Px;

      color: Red

}

BODY{

         font–family:Times New Roman;

         font–size:12 Px;

         color: Black

         font–style: italic;

}

</style>

В даному випадку необхідно вставляти в таблицю стилей кожен документ веб–проекта, що приведе до збільшення обєму, і збільшення часу загрузки документу. Тут таблиця стилів, не є єдиним файлом форматування описаного в розділі <head> безпосередньо в HTML–документі.

Імпортування— використовується для того щоб вбудувати в документ таблицю стилей, розташовану на сервері.

 Для того щоб реалізувати цей спосіб використовують @import 

<style type= “text/css” >

@import URL(“style.css”);

</style>

 

Цей запис дає браузеру команду  найти таблицю стилей style.css (таблиця стилей при цьому являє окремий файл) в наявному каталозі сайту. В даному випадку крім імпортованої таблиці стилей в блоці можна прописати любі інші правила CSS які на вашу думку будуть доповнювати і коректувати правила.

Вбудовування в теги документа (використання локальних стилей)— приміняється для форматування конкретних елементів документа, форматування всередині HTML–документа без використання файлу сss

Для того щоб реалізувати цей спосіб потрібно застосувати тег <STYLE> до частини документу.

<p style = “” font–size: 14pt; color: yellou; font–weight: bold “” >Текст</p>

Даний спосіб достатньо універсальний і простий в використанні, але його не рекомендують застосовувати, так як в такому разі необхідно прописувати правила форматування для кожного тегу що значно збільшує обєм документа.

Потрібно також зауважити що можна використовувати всі перечислені способи в одному веб–документі, а щоб не виник конфлікт стилей, існують правила пріорітетності. Всі таблиці стилей які використовуються вистроюються каскадом, де найвищим приорітетом мають локальні стилі, потім внутрішнуі а потім зовнішні.

Існує також поняття користувацького стилю, коли за допомогою налаштувань браузера можна визначити для себе персональний стиль форматування веб–документів.

Якщо користувачу краще читати наприклад текст з шрифтом Arial, розмір 12, полужирний, без проблем: він може визначити для себе таблицю стилей з цим атрибутом, який буде використовуватись для всіх сторінок, які він відвідує. 

 

Leave a Reply

Your email address will not be published. Required fields are marked *