Каскадні. Лабораторна робота з Інші. Робота № 523863

Каскадні

Інформація про навчальний заклад

ВУЗ:

Інші

Інститут:

Не вказано

Факультет:

Не вказано

Кафедра:

Не вказано

Інформація про роботу

Рік:

2013

Тип роботи:

Лабораторна робота

Предмет:

Інші

Завантажити

Частина тексту файла (без зображень, графіків і формул):

Лабораторна робота №1 Тема: Каскадні листи стилів (CSS) Мета роботи: Навчитися опрацьовувати і практично впровадити реалізацію каскадних листів стилів (CSS) Порядок виконання лабораторної роботи Ознайомитись з теоретичними відомостями. Створити web-сторінку. Створити лист стилів, де задайте колір фону, спосіб вирівнювання рисунків і шрифтові ефекти заголовків.. Приєднати його до WEB сторінки. Використовуючи внутрішній стиль, задайте характеристики ссилок, і основного тексту. За допомогою вбудованого стилю виокремте деякі абзаци слова, символи від основного тексту, надавши їм іншого шрифту, кольору, нахилу, чи жирності. Проекспериментувати з різними видами шрифтів. Удосконалити дизайн. Продемонструвати викладачу. Підготовити звіт. Теоретичні відомості Каскадні листи стилів (Cascading Style Sheets - CSS) – Широкий термін, який означає використання до документу засоби представлення. Основним поняттям CSS є стиль – тобто набір правил оформлення і форматування, який може бути застосований до різних елементів сторінки. У стандартному HTML для присвоєння якому-небудь елементу певних властивостей (таких, як колір, розмір, розміщення на сторінці і т. п.) доводилося кожного разу описувати ці властивості, навіть якщо на одній сторіночці повинні розташовуватися 10 або 110 таких елементів, нічим не відмінних один від одного. Таким чином збільшувався розмір файлу і час завантаження. CSS діє іншим, зручнішим і економнішим способом. Для присвоєння якому-небудь елементу певних характеристик ви повинні один раз описати цей елемент і визначити цей опис як стиль, а надалі просто вказувати, що елемент, який ви хочете оформити відповідним чином, повинен прийняти властивості стилю, описаного вами. Крім того, CSS дозволяє працювати з шрифтовим оформленням сторінок на набагато вищому рівні, ніж стандартний HTML, уникаючи ускладнення сторінок зайвою графікою. Можливості листів CSS відчутно розширюються завдяки ієрархічним відношенням стилів. Термін „каскадування ” означає послідовне використання стилів до деякого елементу, тобто до одного і того ж елементу можуть бути використанні багато листів стилів послідовно один за одним. Іншими словами каскадування – це ієрархія використання листів стилів. Таким чином, для управління компонентами сторінки автор може використовувати будь-яке співвідношення вбудованих, внутрішніх і зв’язних, або будь-яка кількість листів стилів одного типу. Броузер в першу чергу шукає і застосовує до документа внутрішні стилі. Потім в зв’язаних листах стилів броузер шукає все, що не визначено внутрішніми стилями. Ці два стилі (внутрішній і зв’язний) можуть бути заглушені вбудованим стилем. Якщо використані всі три типи стилів то броузер спочатку шукає і виконує вбудовані потім внутрішні а потім зв’язані. Ось ще один приклад каскадування – підключення декількох листів стилів З останнього в списку листа броузер використає стилі, які не описані в попередніх двох. Аналогічно броузер поступить з другим листом стилів, використає всі стилі що не описані в першому. Вбудований метод дозволяє використовувати стиль до будь-якого дескриптора. Вбудовування забезпечує автора повним контролем над кожним елементом. Наприклад, для того, щоб визначити зовнішній вигляд одного окремого абзаца потрібно добавити в дескриптор <p> Style=”x”, в результаті броузер виведе абзац використовуючи задані параметри стилю. Внутрішній метод дозволяє керувати стилями всього документу. В розділі head розташовується елемент style. В ньому описуються всі стилі, які використовуються до елементів всього документу. Зв’язний метод передбачає можливість зберігати опис стилю не в тексті сторінки, а в окремому файлі з розширенням .css – це дозволяє використовувати опис стилю на будь-якій кількості Web сторінок. І ще одна перевага – можливість змінити оформлення всіх сторінок, виправивши лише опис стилю в файлі .css. Вбудований стиль Вбудовані стилі можна застосовувати до будь-якого елементу: абзацу, заголовку, горизонтальної лінійки, комірки таблиці і т.д. Лістинг програми: У вікні броузера будемо мати: Існує два елементи: div і span, за допомогою яких можна використовувати вбудовані стилі до розділів документа. Але елементи div і span найбільш корисні при поєднанні листів стилів з динамічними подіями за допомогою засобів DHTML Елементи div і span дозволяють визначати стиль заданого фрагмента тексту, що розташований між відкриваючими і закриваючими дескрипторами div або span. Різниця між div і span в тому, що div елемент блочного рівня. А span – елемент текстового рівня і не може містити елементи блочного рівня. Наприклад, за допомогою div можна вирівняти таблицю, але елемент span цього не може. Також div, як елемент блочного рівня створює розрив рядка, в той час як span не створює його. Тому div використовують для означення великих фрагментів документу, які містять абзаци, заголовки, списки, вкладені елементи і т.д. Приклад використання елемента div: Внутрішній стиль Цей метод дозволяє керувати стилями всього документу. В розділі head розташовується елемент style. В ньому описуються всі стилі, які використовуються до елементів всього документу. Лістинг програми: У вікні броузера будемо мати: Зв’язний стиль Зв’язний стиль має ще іншу назву “зовнішній”. Як вам вже відомо, інформація про стилі може розташовуватися або в окремому файлі, або безпосередньо в коді Web-сторінки. Розташування опису стилів в окремому файлі має сенс у випадку, коли ви плануєте застосовувати ці стилі до більш ніж одної сторінки. Для цього потрібно створити звичайний текстовий файл, описати за допомогою мови CSS необхідні стилі, розмістити цей файл на Web-сервері, а в коді Web-сторінки, яка використовуватиме стилі з цього файлу, потрібно буде зробити посилання на нього. Робиться це за допомогою тега <link>, розташованого всередині тега <BODY> всіх сторінок: <link rel=”stylesheet” href=”url” type=”text/css” /> Перші два параметри цього тега є зарезервованими іменами, потрібними для того, щоб повідомити броузера, що на цій сторінці використовуватиметься CSS. Третій параметр – href = «url» – вказує на файл, який містить описи стилів. Цей параметр повинен містити або відносний шлях до файлу – у випадку, якщо він знаходиться на тому ж сервері, що і документ, з якого до нього звертаються, – або повний URL («http://...») у випадку, якщо файл стилів знаходиться на іншому сервері. Приклад використання зв’язного стилю: Лістинг програми сss файлу: Лістинг програми: У вікні броузера будемо мати: Властивості елементів,керованих за допомогою CSS В даний час мова CSS налічує досить велику кількість властивостей елементів HTML, якими він може управляти. Але через те, що цей стандарт ще дуже молодий, в повному об'ємі його поки не підтримують найпопулярніші броузери (Netscape Navigator і Microsoft Internet Explorer). оскільки, при використанні CSS для форматування елементів сторінки і перегляданні її за допомогою броузера версії нижче 4й, є велика вірогідність побачити щось таке, що вам не сподобається. Тому буде розумнішим утриматися від використання CSS для форматування основної структури сторінок до загального переходу на останні версії броузерів. В той же час, застосовуючи «безпечні», тобто сумісні з максимальною кількістю броузерів елементи CSS, ви можете сильно полегшити собі життя і зробити ваші Web-сторінки привабливішими в плані шрифтового оформлення, а користувачі, застарілі броузери, просто цього не побачать, але також вони не побачать і тих кошмарів, які з'являються при використанні CSS для верстки сторінок. ВЛАСТИВОСТІ ШРИФТУ font-family Використовується для вказівки шрифту або шрифтового сімейства, яким відображатиметься елемент.P {font-family: Times New Roman, sans-serif;} font-weight Визначає ступінь жирності шрифту за допомогою трьох параметрів: lighter, bold, bolderB {font-weight: bolder;} font-size Встановлює розмір шрифту. Параметр може вказуватися як у відносніх (відсотки), так і абсолютніх величинах (пункти, пікселі, сантиметри)H2 {font-size: 150px;}H3 {font-size: 400pt;} font-size Встановлює розмір шрифту. Параметр може вказуватися як у відносніх (відсотки), так і абсолютніх величинах (пункти, пікселі, сантиметри)H2 {font-size: 150px;}H3 {font-size: 400pt;} КОЛІР ЕЛЕМЕНТУ І КОЛІР ФОНУ color Визначає колір елементуI {color: yellow;} background-color Встановлює колір фону для елементу – саме для елементу, а не для сторінки. Зверніть увагу, що броузери відображають цю властивість по-різному: Microsoft IE відводить під фон елементу всю доступну ширину сторінки, а Netscape Navigator – лише ширину, займану цим елементом. Подивіться приклад (мал. 3, 4 ), ось його початковий код: <HTML><HEAD><TITLE> Приклад використання CSS</TITLE> <STYLE type=”text/css”>H1 {font-size: 300%;}</STYLE></HEAD> <BODY bgcolor=white><center><BR><H1 style=”background-color: teal; color: white;”>Cascading</H1><H1 style=”background-color: navy; color: yellow;”>Style</H1><H1 style=”background-color: gold; color: brown;”>Sheets</H1></BODY></HTML> В даному прикладі в розділі <STYLE> всім елементам <Н1> на цій сторінці був встановлений розмір 300 % від норми. Потім кожному з елементів <H1> були присвоєні власні значення кольору фону і кольору символів. ВЛАСТИВОСТІ ТЕКСТУ text-decoration Встановлює ефекти оформлення шрифту, такі, як підкреслення або закреслюваний текст H4 {text-decoration: underline;}А {text-decoration: none;}.wrong {text-decoration: line-through;} text-align Визначає вирівнювання елементу.P {text-align: justify}H1 {text-align: center} text-indent Встановлює відступ першого рядка тексту. Найчастіше використовується для створення параграфів з табульованим першим рядком. line-height Управляє інтервалами між рядками тексту.P {line-height: 50 %} ВЛАСТИВОСТІ МЕЖ margin-left Встановлюють значення відступів навколо елементу.IMG { margin-right: 20pt}P { margin-left: 2cm} margin-rightmargin-rightmargin-top Встановлюють значення відступів навколо елементу.IMG { margin-right: 20pt}P { margin-left: 2cm} ОДИНИЦІ ВИМІРЮВАННЯ px Пікселі cm Сантиметри mm Міліметри pt Пункти (друкар.) % Відсотки Є одна невелика, але дуже корисна хитрість – це спосіб приховати від застарілих броузерів описи стилів, розташованих в тезі <STYLE>, усередині розділу <HEAD>. Оскільки броузер був написаний кілька років тому, коли ніякого CSS ще і в планах не було, він просто не зрозуміє, що це таке написано всередині <STYLE>…</STYLE>, і видасть всі описи стилів на сторінку, як звичний текст. Для того, щоб запобігти цьому, необхідно укласти описи стилів в тег коментарів. Робиться це дуже просто. <HEAD> <STYLE type="text/css"> <!-- описи стилів -- > </STYLE> </HEAD> де <!-- – тег, відкриваючий коментар, > – закриваючий. Контрольні запитання Дайте означення терміну Каскадні листи стилів. Скільки є способів підключення CSS до WEB сторінки? Назвіть їх. Що означає ”каскадування”? Опишіть внутрішній спосіб підключення CSS. Як підключити зовнішній лист стилів? Де і як використовуються елементи div і span? Як приховати від застарілих броузерів описи стилів? Які дескриптори відповідають за властивості шрифту, колір елементу і колір фону, властивості тексту, властивості меж, одиниці вимірювання?

Лабораторна робота Інші

daniel

01.05.2013 22:17

Коментарі

Ви не можете залишити коментар. Для цього, будь ласка, або зареєструйтесь.

Ділись своїми роботами та отримуй миттєві бонуси!

поділитись