Включення стилів до документа.

Завдання стилів всередині документа.

Перший і найпростіший спосіб – задати стиль безпосередньо в самому тезі. Для цього використовується атрибут style зі списком властивостей і їх значень:

<p style="color:#005500; margin-left:30px; font-style:italic">
Зелений текст
...
</p>

Цей стиль буде діяти тільки на утримання даного тега. Таке включення стилів використовується дуже рідко, тому що для зміни дизайну доведеться редагувати вміст сторінки.

Ще один спосіб завдання стилів – використання тегу <style>. Ці стильові правила будуть діяти на весь документ. Тег <style> повинен знаходитися усередині тегу <head>.

<html>
<head>
<title>CSS</title>
<style>
H1
{
  text-align:center;
}

H2
{
  color:green
}
</style>
</head>

<body>
<h1> Текст розташований в центрі рядка </ h1>
<h2> Зелений текст </ h2>
</body>
</html>

Підключення стилів із зовнішніх файлів.

Це дуже зручний і найбільш поширений спосіб. Його переваги очевидні. При такому підході немає необхідності при зміні дизайну окремо редагувати кожну сторінку сайту. Підключити зовнішню таблицю стилів можна двома способами.

Перший – використання тегу <link> в нутрії тега <head>:

<link rel="stylesheet" type="text/css" href="style.css">

Другий – застосування директиви @import внутpи тeгa <style>. Вона повинна застосовуватися до будь-яких стильових правил. Приклад:

<style>
@import url(style.css)
H1 
{
  color:red
}

P 
{
  margin-left:30px; 
  border:none
}

...

</style>

Другий спосіб має один недолік: директива @import (Не підтримується старими браузерами).

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*