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

Перехід до торгівельного партнера Binance

Каскадні

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

ВУЗ:

Інші

Інститут:

Не вказано

Факультет:

Не вказано

Кафедра:

Не вказано

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

Рік:

2024

Тип роботи:

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

Предмет:

Інші

Завантажити

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

Лабораторна робота №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:05-

Коментарі

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

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

Маєш корисні навчальні матеріали, які припадають пилом на твоєму комп'ютері? Розрахункові, лабораторні, практичні чи контрольні роботи — завантажуй їх прямо зараз і одразу отримуй бали на свій рахунок! Заархівуй всі файли в один .zip (до 100 МБ) або завантажуй кожен файл окремо. Внесок у спільноту – це легкий спосіб допомогти іншим та отримати додаткові можливості на сайті. Твої старі роботи можуть приносити тобі нові нагороди!

поділитись