Відмінності між версіями «4 Посилання та прив’язки»
(Створена сторінка: Посилання є частиною Web-сайту (створеного зазвичай за допомогою HTML, але не завжди), які в...) |
|||
| Рядок 29: | Рядок 29: | ||
[[Прив'язка CSS до HTML-коду]] | [[Прив'язка CSS до HTML-коду]] | ||
| − | + | Існує кілька способів прив'язки CSS в документі HTML. Найбільш кращим є спосіб прикріплення каскадних списків стилів окремим файлом з розширенням. Css. Так-же властивості можна прописувати всередині документа у вигляді класів і застосовувати класи стилів до елементів сторінки, або прописувати css-властивості для елементів сторінки всередині тегів за допомогою властивості style = "". Далі розглянемо кожен з цих способів. | |
Винести опис стилів і класів CSS в файл | Винести опис стилів і класів CSS в файл | ||
| Рядок 67: | Рядок 67: | ||
Перевага цього способу полягає в тому що один файл списку стилів можна прикріпити до наесколькім документам html, і для зміни стилів цих сторінок не доведеться редагувати код кожної сторінки, достатньо буде змінити опис стилів в одному файлі. Css, що дуже зручно при редагуванні сайту з десятками і сотнями сторінок. | Перевага цього способу полягає в тому що один файл списку стилів можна прикріпити до наесколькім документам html, і для зміни стилів цих сторінок не доведеться редагувати код кожної сторінки, достатньо буде змінити опис стилів в одному файлі. Css, що дуже зручно при редагуванні сайту з десятками і сотнями сторінок. | ||
| + | |||
Розмістити опис стилів CSS всередині HTML | Розмістити опис стилів CSS всередині HTML | ||
| − | + | При розміщенні опису стилів всередині документа використовується тег <style type="text/css"> </ style>. Цей тег зазвичай розміщується всередині <head> </ head>, але це не обов'язково, головне, опис стилю повинно стояти вище місця його застосування в коді. | |
Розмістити опис стилів CSS всередині HTML При розміщенні опису стилів всередині документа використовується тег <style type="text/css"> </ style>. Цей тег зазвичай розміщується всередині <head> </ head>, але це не обов'язково, головне, опис стилю повинно стояти вище місця його застосування в коді. Приклад: <style type="text/css">. Moj2 {color: # 6633FF;} </ style> <p class="moj2"> текст </ p> | Розмістити опис стилів CSS всередині HTML При розміщенні опису стилів всередині документа використовується тег <style type="text/css"> </ style>. Цей тег зазвичай розміщується всередині <head> </ head>, але це не обов'язково, головне, опис стилю повинно стояти вище місця його застосування в коді. Приклад: <style type="text/css">. Moj2 {color: # 6633FF;} </ style> <p class="moj2"> текст </ p> | ||
Версія за 15:05, 21 грудня 2011
Посилання є частиною Web-сайту (створеного зазвичай за допомогою HTML, але не завжди), які вказують на інші ресурси – інші документи HTML, текстові файли, файли PDF, і т.д. Існують посилання, по яким браузер має переходити автоматично, створені за допомогою елементів link (ви вже зустрічали деякі з них у попередніх лекціях – вони використовуються для імпорту файлів CSS в документ HTML), та існують також посилання, які користувач не зобов’язаний активувати. Вони називаються анкерами, і їх можна додавати в документ за допомогою елемента a. Анатомія анкерного посилання
Будь-який рядковий елемент у документі можна перетворити на анкерне посилання, додаючи навколо нього елемент a. Наприклад, в наступному документі HTML текст Yahoo Developer Network перетворений на посилання (linkexample.html).01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Link Example</title> <link rel="stylesheet" href="styles.css"> </head> <body>
A link to the YDN
<a href="http://developer.yahoo.com">Yahoo Developer Network</a>
</body> </html>
Анкер має декілька атрибутів, які можна використовувати:
href – ресурс, на який вказує анкер (зовнішній файл або ID анкера).
id – ID анкера, якщо анкер є метою, а не посиланням.
title – додаткова інформація про зовнішній ресурс.
Давайте розглянемо спочатку найбільш важливі атрибути, а потім поговоримо про те, що можна зробити, щоб полегшити відвідувачам сприйняття посилань. Зовнішні й внутрішні посилання
Один з найбільших страхів керівників компаній, коли мова йде про Web-сайти компанії, полягає в тому, що люди покидають сайт передчасно. Це часто є причиною відсутності посилань на сторонні сайти (якщо тільки власники цих сайтів не платять гроші за право отримання направленого ним Web-трафіку). Я повернуся до цього помилкового розв’язування пізніше; поки давайте поговоримо про те, що роблять люди, щоб уникнути відходу відвідувачів зі свого сайту, і як ці заходи впливають на успіх сайту.
<a href="http://htmlbook.at.ua/">Це посилання на htmlbook.at.ua</a>
Прив'язка CSS до HTML-коду
Існує кілька способів прив'язки CSS в документі HTML. Найбільш кращим є спосіб прикріплення каскадних списків стилів окремим файлом з розширенням. Css. Так-же властивості можна прописувати всередині документа у вигляді класів і застосовувати класи стилів до елементів сторінки, або прописувати css-властивості для елементів сторінки всередині тегів за допомогою властивості style = "". Далі розглянемо кожен з цих способів.
Винести опис стилів і класів CSS в файл
В html таблиця стилів css прив'язується в теге <head> у вигляді:
<head> <link href="" type="text/css" rel="stylesheet"> </head>
href = ""-шлях до таблиці стилів css, указ-ся URL або просто ім'я CSS док-та, якщо він нах-ся в тому-ж каталозі, що і html док-т. type = "text / css"-тип завжди text / css rel = "stylesheet"-даний атрибут вкаже, що цей файл явл-ся таблицею стилів для html.
Запишемо в блокноті код: <head> <link href="stil.css" type="text/css" rel="stylesheet"> </head> <body> <a href="http:// брелок./">голвна сторінка</a> <a class="moj"href="http:// брелок /skript.html">готові скріпти і інструкції</a> </body> і збережемо його з ім'ям index.html
Створимо в блокноті новий документ, запишемо код: a: link {color: green; / * змінюємо колір всіх невідвіданих посилань на сторінці, докладніше "ефекти посилань на css брелок" * /}
a.moj {color: red / * створюємо новий клас для посилань * /}
Збережемо його в ту-ж дерікторію де лежить записаний вище index.html з ім'ям stil.css.
Ми прикріпили файл списку стилів stil.css до документа index.html, вміст index.html буде виглядати як посилання нижче головна сторінка
готові скрипти та інструкції
У цьому прикладі всі посилання на сторінці index.html будуть мати червоний колір, це зазначено у властивості a: link, до заслання "готові скрипти та інструкції" прикріплений клас moj, тому вона зелена.
Перевага цього способу полягає в тому що один файл списку стилів можна прикріпити до наесколькім документам html, і для зміни стилів цих сторінок не доведеться редагувати код кожної сторінки, достатньо буде змінити опис стилів в одному файлі. Css, що дуже зручно при редагуванні сайту з десятками і сотнями сторінок.
Розмістити опис стилів CSS всередині HTML При розміщенні опису стилів всередині документа використовується тег <style type="text/css"> </ style>. Цей тег зазвичай розміщується всередині <head> </ head>, але це не обов'язково, головне, опис стилю повинно стояти вище місця його застосування в коді.
Розмістити опис стилів CSS всередині HTML При розміщенні опису стилів всередині документа використовується тег <style type="text/css"> </ style>. Цей тег зазвичай розміщується всередині <head> </ head>, але це не обов'язково, головне, опис стилю повинно стояти вище місця його застосування в коді. Приклад: <style type="text/css">. Moj2 {color: # 6633FF;} </ style>текст </ p>
