Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Информатика экзамен.doc
Скачиваний:
69
Добавлен:
17.03.2016
Размер:
498.18 Кб
Скачать

36.Каскадні таблиці стилів.

Стиль – це набір правил оформлення та форматування, який можна застосовувати до різних елементів веб-документа. У разі використання стандартної мови HTML для надання кільком елементам певних властивостей (наприклад, призначення стилю шрифту) доводиться здавати ці властивості для кожного елемента. Використання таблиць стилів дає змогу уникнути цього, оптимізувавши розробку веб-сайтів. Стилі дають змогу позиціювати елементи сторінки (наприклад, тексти і графіку), задаючи координати. Крім того, таблиці стилів часто використовують під час створення так званих динамічних сторінок.

CSS (CascadingStyleSheets) — це технологія опису зовнішнього вигляду документа, що створено засобами HTML, XML і XHTML. CSS використовується для завдання кольорів, шрифтів, розташування елементів сторінки тощо. До появи CSS оформлення веб-сторінок вказувалося безпосередньо в HTML-коді сторінки. Проте, з появою CSS стало можливим принципове розділення змісту і представлення документа. За рахунок такого нововведення стало можливим легке застосування єдиного стилю оформлення для кількох сторінок сайту, а також швидка зміна цього оформлення.

Переваги:

^ Застосування кількох варіантів дизайну сторінки для різних пристроїв перегляду. Наприклад, для відображення на екрані монітора - дизайн буде розраховано на велику ширину. У разі друкування документу не буде роздруковане меню сайту, а у разі перегляду у мобільному комп’ютері чи телефоні, меню буде виведено після вмісту сторінки.

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

^ Простота подальшої зміни дизайну. Не потрібно виправляти кожну сторінку, достатньо лише змінити кілька правил у CSS-файлі.

Додаткові можливості оформлення. Наприклад, за допомогою CSS-правил можна застосувати обтікання певного блоку текстом або зробити так, щоб меню фіксовано знаходилося в певному місці при перегортанні сторінки.

Недоліки:

Різні браузери можуть в різний спосіб інтерпретувати правила CSS, і відповідно, по різному відображати одні і ті ж фрагменти сторінки.

Таблиці каскадних стилів (CSS, CascadingStyleSheets) містять параметри форматування частини або всього тексту веб-сторінки. Якщо таку таблицю підключено, то у тегах можна просто вказувати посилання на неї, а не задавати велику кількість атрибутів. У цьому випадку стилі названі каскадними тому, що в одному документі їх можна описати кілька, і браузер використовуватиме їх каскадом відповідно до їхнього пріоритету. Таблиця стилів – це шаблон, який керує формуванням тегів веб-сторінки.

Таблиці каскадних стилів – це передусім набори параметрів, що змінюють властивості тегів HTML. Такі набори називають ще визначенням тегів. Наприклад:

P {font-size: 40pt; color: green; font-family: “ComicSansMS”}

Тут задано параметри для тегу абзацу <P>, які встановлюють розмір шрифту 40 пунктів, колір шрифту – зелений, гарнітуру - ComicSansMS. У документі достатньо ввести теги <P> … </P> із текстом абзацу, щоб автоматично адати йому зазначеного оформлення.

Застосування каскадних стилів у HTML-документах. Є чотири способи зв’язку каскадних стилів із HTML-документом:

Зв’язувальний – дозволяє використовувати 1 таблицю стилів для форматування багатьох сторінок.

Впровадження – дозволяє задавати всі правила таблиці стилів в документі

Імпортування – дозволяє вбудовувати таблицю стилів розташованих на сервері

Вбудовується таблиця в теги Підключення зовнішньої таблиці стилів. Зовнішня таблиця стилів (ExternalStyleSheet) – це текстовий файл із розширенням .css. Його підключають до HTML-документа за допомогою тегу <LINK>, який записують у розділі <HEAD>, наприклад: <LINKREL=”stylesheet” TYPE=”text/css” HREF=”mystyle.css”>

АтрибутиREL та TYPEвказують браузеру на те, щосторінкавикористовуєтаблицікаскаднихстилів. Атрибут HREF задає адресу файлу (mystyle.css).

Оформимо веб-сторінку за допомогою зовнішньої таблиці стилів.

Відкрийте текстовий редактор Блокнот і введіть таке визначення тегу <P>:

P {font-size: 40pt; color: green; font-family: “ComicSansMS”}

Збережіть файл з іменем mystyle.css. Створіть у Блокноті файл такого змісту:

<HTML><HEAD>

<LINK REL=”stylesheet” TYPE=”text/css” HREF=”mystyle.css”>

<TITLE>Прикладвикористання CSS</TITLE></HEAD>

<BODY><P>Цей текст оформлено відповідно до таблиці стилів, яка міститься у файлі mystyle.css: розмір шрифту - 40 пунктів, колір шрифту – зелений, а гарнітура - ComicSansMS. </P></BODY><HTML>

  1. Збережіть цей файл з іменем pryklad1.htmlутійсамійпапці, щоіmystyle.css.

  2. Відкрийте файл pryklad1.html у вікні браузера. Як бачите, хоча в цьому докуметі не задано жодних параметрів для тегу <P> …</P>, текст абзацу набувновихвластивостей, якіописані в зовнішнійтаблицістилівmystyle.css.

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

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]