Файловый архив студентов. Файловый архив студентов.
1261 вуз, 4614 предмет.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Казахский национальный технический университет им. К. И. Сатпаева
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
INTERNET2.DOC
Скачиваний:
7
Добавлен:
09.11.2018
Размер:
505.86 Кб
Скачать
☆
►Содержание►

-Призначена для виводу значень змінних оточення і дати, формат якої визначається параметром timefmt директиви config. В echo єдиний параметр var, він визначає виведене значення.

Приклад

<!--#echo var="значення для виводу"-->.

fsize

-Відображає розмір певного файлу. Формат виводу задається за допомогою параметра sizefmt директиви config. Синтаксис використання наступний

<!--#fsize file="URL" | virtual="URL"-->.

exec

-Вставляє результат виконання команди або cgi-програми в html-документ.

Параметр cmd запускає зазначений командний рядок з використанням локального інтерпретатора. Параметр cgi Виконує CGI-програму і результат її виконання вставляє в зазначене місце. Приклад:

<body> Усього сторінку відвідало <!--#exec cgi="/cgi-bin/counter.cgi"--> людей. </body>

В даному випадку програма counter.cgi підраховує кількість відвідувачів.

5 Каскадні таблиці стилів css

CSS (Cascading Style Sheets, каскадні таблиці стилів) — це набір параметрів форматування, що застосовується до елементів веб-сторінок для керування їхнім видом і положенням. Стилі є зручним, практичним і ефективним інструментом при верстці веб-сторінок і оформленню тексту, посилань, зображень і інших елементів. Далі описані переваги, які дає CSS. Поділ оформлення та змісту Ідея про те, щоб код HTML був вільний від елементів оформлення досить ефективна. В ідеалі, веб-сторінка повинна містити тільки теги логічного форматування, а вид елементів задається через стилі. При подібному поділі формування дизайну й верстка сайту може вестися паралельно. Єдине оформлення документів Сайт це не просто набір зв'язаних між собою документів, але і єдине розташування основних блоків і їхнє оформлення. Застосування однакового оформлення заголовків, основного тексту й інших елементів створює наступність між сторінками й полегшує користувачам роботу із сайтом і його сприйняття в цілому. Розроблювачам же використання стилів істотно спрощує проектування дизайну. Централізоване зберігання Стилі, як правило, зберігаються в одному або декількох спеціальних файлах, посилання на які вказується у всіх документах сайту. Завдяки цьому зручно правити стиль в одному місці, при цьому оформлення елементів автоматично міняється на всіх сторінках, які пов'язані із зазначеним файлом. Розширені можливості На відміну від HTML стилі мають набагато більше можливостей по оформленню елементів веб-сторінок. Простими засобами можна змінити кольори тіла елемента, додати рамку, встановити шрифт, визначити розміри, положення та багато чого іншого. Швидка робота При зберіганні стилів в окремому файлі, він кешується й при повторному звертанні до нього витягається з кеша браузера. За рахунок кешування й того, що стилі зберігаються в окремому файлі, зменшується код веб-сторінки і знижується час завантаження документів. Існує три способи підключення стилів. 1. Таблиця пов’язаних стилів При використанні таблиці пов'язаних стилів опис селекторів і їхніх властивостей розташовується в окремому файлі, як правило, з розширенням css, а для зв'язування документа із цим файлом застосовується тег <LINK>. Даний тег міститься в контейнеры <HEAD>. Приклад:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="mysite.css"> </head> <body> <h1>Заголовок</h1> <p>Текст</p> </body> </html>

Як видно з даного прикладу, HTML документ містить тільки посилання на файл зі стилем mysite.css, тобто таким способом повною мірою реалізується принцип поділу вмісту й оформлення сайту. Тому використання таблиці зв'язаних стилів є найбільш універсальним і зручним методом додавання стилю на сайт. 2. Таблиця глобальних стилів Опис стилів можна також розташовувати безпосередньо в любому місці HTML документа за допомогою контейнера <style>, але по своїй гнучкості й можливостям цей спосіб додавання стилю поступається попередньому. Приклад:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> H1 {  font-size: 120%;  font-family: Verdana, Arial, Helvetica, sans-serif;  color: #336 } </style> </head> <body> <h1>Hello, world!</h1> </body> </html>

У даному прикладі визначено стиль тегу <H1>, який потім можна повсюдно використовувати на даній веб-сторінці.

3. Внутрішні стилі Внутрішній стиль є власне кажучи розширенням для одиночного тегу використовуваного на веб-сторінці. Для визначення стилю використається параметр тегу style, а його атрибути вказуються за допомогою мови таблиці стилів. Приклад:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <h1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #336">Заголовок</h1> </body> </html>

Всі описані методи використання CSS можуть застосовуватися як самостійно, так і в сполученні один з одним. У цьому випадку необхідно пам'ятати про їхню ієрархію. Першим завжди застосовується внутрішній стиль, потім таблиця глобальних стилів і в останню чергу зовнішня таблиця зв'язаних стилів. Існує також метод імпорту стилів в поточну таблицю стилів за допомогою команди @import. Наприклад: <head> <style type="text/css"> @import url("/style/header.css"); H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green } </style> </head>

Спосіб запису CSS відрізняється від форми використання тегів HTML і в загальному виді має наступний синтаксис:

Селектор{властивість1: значення; властивість2: значення; ... }

Селектором називається ім'я стилю, у якому зазначені параметри форматування. Селектори діляться на кілька типів: селектори тегів, ідентифікатори та класи, вони докладно описані далі. Після вказівки селектора йдуть фігурні дужки, у яких записується необхідна стильова властивість, а її значення вказується після двокрапки. Селектором може бути будь-який тег HTML для якого визначаються правила форматування, такі як: кольори, фон, розмір і т.д. Наприклад:

<style type="text/css"> P {  text-align: justify; /* Вирівнювання по ширині */  color: green /* Зелений колір тексту */ } </style>

Класи Класи застосовують, коли необхідно визначити стиль для індивідуального елемента веб-сторінки або задати різні стилі для одного тегу. При використанні разом з тегами синтаксис для класів буде наступний

Тег.Ім'я класу { властивість1: значення; властивість2: значення; ... }.

Наприклад

<style type="text/css"> P.zv { /* Звичайний параграф */  text-align: justify /* Вирівнювання по ширині */ } P.cite { /* Параграф з класом cite */  text-align: justify; /* Вирівнювання по ширині */  color: navy; /* Синій колір тексту */  font-style: italic /* Курсивне накреслення */ } </style>

Якщо тепер в HTML документі присутні записи

<p class="zv"> Текст 1 </p>

……………………………

<p class="cite"> Текст 2 </p>,

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

.Ім'я класу{властивість1: значення; властивість2: значення; ... }

Прилад:

<style type="text/css"> .cite {  color: navy; /* Синій колір тексту */  font-style: italic /* Курсивне накреслення */ } </style>

Тепер оформлення класу .cite можна застосовувати до різних тегів

<p class="cite"> Текст </p> ...................................................... <h1 class=”cite”> Заголовок </h1>

Ідентифікатори Ідентифікатор (називаний також «ID селектор») визначає унікальне ім'я елемента, що використається для зміни його стилю й звертання до нього через скрипти, що дозволяє управляти стилем елемента динамічно. Синтаксис використання ідентифікатора наступний.

#ім’я ідентифікатора { властивість1: значення; властивість2: значення; }

Звертання до ідентифікатора відбувається аналогічно класам, але як ключове слово в тегу використовується параметр id, значенням якого виступає ім'я ідентифікатора. Наприклад:

<style type="text/css"> #help{  left: 160px; /* Положення елемента від лівого краю */  top: 120px; /* Положення від верхнього краю */  width: 225px; /* Ширина блоку */  height: 180px /* Висота блоку */ } </style> </head> <body> <div id="help"> Текст .... </div> </body>

Ще один приклад використання ідентифікаторів:

<style type="text/css >

.blue {color:blue; font-style:italic}

#boldunderline {text-decoration:underline; font-weight:bold}

</style>

<body>

<p class="blue"> Текст 1</p>

<p class="blue" id="boldunderline">Текст 2 </p>

<p id="boldunderline"> Текст 3 </p>

</body>

У наведеному прикладі Текст 1 відобразиться синім кольором і курсивом, Текст 2 – синім кольором, курсивом, жирним і підкресленим шрифтом, Текст 3 – жирним та підкресленим шрифтом. Групування При створенні стилю для сайту, коли одночасно використовується безліч селекторів, можлива поява параметрів, що повторюються. Щоб не повторювати двічі ті самі елементи, їх можна згрупувати для зручності подання й скорочення коду

H1, H2, H3 {font-family: Arial, Helvetica, sans-serif }

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

Розберемо спадкування на прикладі таблиці. Особливістю таблиць можна вважати строгу ієрархічну структуру тегів. Спочатку йде контейнер <TABLE> усередині якого додаються теги <TR>, а потім іде тег <TD>. Якщо в стилях для селектора TABLE задати кольори тексту, то він автоматично встановлюється для вмісту клітин

<head> <style type="text/css"> TABLE {  color: red; /* Кольори тексту */  background: #333; /* Кольори фону таблиці */  border: 2px solid red /* Червона рамка навколо таблиці */ } </style> </head> <body> <table cellpadding="4" cellspacing="0">  <tr>   <td>Клітина 1</td><td> Клітина 2</td>  </tr>  <tr>   <td> Клітина 3</td><td> Клітина 4</td>  </tr> </table> </body>

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

Елемент:Псевдокласс { Опис правил стилю }

Наступні псевдокласи визначають поточний стан елемента й застосовують стиль до нього тільки в цьому випадку. Active - відбувається при активації користувачем елемента. Наприклад, при наведенні курсору на посилання й натисканні лівої кнопки миші. Link - застосовується до невідвідуваних посилань, тобто посилань, на які користувач ще не натискав. Hover - активізується, коли курсор миші перебуває в межах елемента, але щиглика по ньому не відбувається. Visited - даний псевдоклас застосовується до відвідуваних посилань. Звичайно таке посилання міняє свої кольори за замовчуванням на фіолетовий, але за допомогою стилів кольори й інші параметри можна задати самостійно

<style type="text/css"> A:link {  color: #036 /* Колір невідвіданих посилань */} A:visited { color: #606 /* Колір відвіданих посилань */} A:hover {  color: #f00 /* Колір посилань при наведенні на них курсору миші*/} A:active { color: #ff0 /* Колір активних посилань */} </style> </head> <body> <a href="link1.html">Посилання 1</a> </body>

Наведемо далі деякі властивості та їх допустимі значення.

  • font-family - властивість визначає використовуваний шрифт. Приклад: font-family:Arial Black

  • font-style -стиль шрифту. Курсивний або звичайний. Приклад: font-style:italic

  • font-variant - варіанти відображення шрифту. Можливі значення: normal - без змін small-caps - заміняє всі маленькі букви на великі Приклад:font-variant:small-caps

  • font-weight - виділення (жирність) елемента. Можливі значення: normal - без змін bold - жирний bolder - дуже жирний lighter - тонкий (не відрізняється від normal) Приклад: font-weight:bold

  • font-size - розмір шрифту. Можливі значення: xx-small, x-small, small, medium, large, x-large, xx-large , smaller, larger або абсолютний розмір. Приклад: font-size:30pt

  • font - узагальнює перераховані вище властивості. Приклад: font: italic bolder Arial 12pt

  • text-decoration - "прикраса" тексту. Можливі значення: none - немає underline – підкреслений overline - надчеркнутый (не підтримується в Нетскейп) line-through - перекреслений blink - миготливий (не підтримується в IE) Приклад: text-decoration:line-through

  • vertical-align - позиціювання елементів стосовно інших елементів. Можливі значення: baseline, sub, super, top-text top, middle, bottom, bottom-text, відсоток. Приклад: vertical-align:top-text

  • text-align - положення тексту Можливі значення: left - текст ліворуч right - текст праворуч center - текст по центрі justify - текст "розтягнуть" Приклад: text-align:right

  • text-indent – відступ Можливі значення: довжина, відсоток. Приклад: text-indent:30 em

  • color – кольори. Можливі значення: код кольору. Приклад: color:#f00000

  • backgroung-color - кольори фону елемента. Приклад:background-color:#f00000

  • background-image - фонове зображення. Можливі значення: none – ні, URL. Приклад: background-image:URL(cool.gif)

  • background-repeat - повторення фонового зображення. Можливі значення: repeat - розмножує фонове зображення у всіх напрямках repeat-x - розмножує фонове зображення горизонтально repeat-y - розмножує фонове зображення вертикально no-repeat - не повторюване зображення Приклад: background-repeat:no-repeat

  • background-attachment Можливі значення: scroll - фонове зображення скроллится разом зі змістом документа fixed - фіксується в одному місці. Приклад: background-attachment:fixed

  • background-position - положення фонового зображення (працює з background-repeat рівним repeat-x, repeat-y або no-repeat) Можливі значення: відсоток від ширини, відсоток від висоти, top, middle, bottom, left, center, right Приклад: background-position:50%0%

  • background - узагальнює перераховані вище властивості Можливі значення: background-color, background-image, backgroun-position, background-attachment, background-repeat Приклад: background:no-repeat black fixed 50%0%

  • margin-top - визначає відступ зверху. Приклад: margin-top:100

  • margin-right - визначає відступ праворуч.

  • margin-bottom - визначає відступ знизу.

  • margin-left - визначає відступ ліворуч.

  • padding-top - відступ від верхнього border'а. Приклад: padding-top:100pt

  • padding-right - відступ від правого border'а.

  • padding-bottom - відступ від нижнього border'а.

  • padding-left - відступ від лівого border'а.

  • border-width - товщина border'ов Приклад: border-width: 15pt

  • list-style-type - визначає вид маркера для списку. Можливі значення: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha або upper-alpha Приклад:list-style-type: circle

  • list-style-image - задає вид маркера у вигляді картинки. Приклад: list-style-image:URL(cool.gif)

  • Міри довжини: ex - x-height, ширина букви "x" використовуваного шрифту. px - pixels, пикселы in - inches, дюйми cm - centimeters, сантиметри mm - millimeters, міліметри pt - points, крапка (1pt = 1/72in)

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности