|
1. Внутренние - могут быть объявлены в любом месте внутри действительного кода, с помощью атрибута style. Определяет свойства конкретного элемента.
Синтаксис:
<элементы STYLE= «Стилевое свойство1: значение1; стилевое свойство2:значение2;»>
Например, вместо
<body dgcolor= «# BABAAO»TEXT= «#1D1D18»>
<body STYLE = «background-color; # BABAAO; color: # 1D1D16»;>
Пример_1
<p align= «right»> <font size= «-1»> Ну погоди!...
<br>
<i> (Из мультфильма) </i> </font> </p>
Заменится на:
<p style= «text-align: right; font-size; smaller»;>
Ну, погоди...
<span style= «font-style:italic»;>
(Из мультфильма) </span> </p>
2. Встроенные - указывают свойство в пределах <style> и </style>, которые находятся внутри заголовка документа.
Используются, когда встречаются повторяющиеся свойства. Их можно определять для любого тега HTML заранее, и они будут впоследствии применяться к нему автоматически.
Синтаксис таблиц стилей таков: пишется имя элемента HTML, для которого определяется стиль, а после следует блок определения стиля заключенный в фигурные скобки.
Пример_2
<style>
body {background-color: # BABAAO; color:rgb(29,29,24);}
</style>
После этого в самом тексте HTML-документа достаточно указать тег <body>, и к нему автоматически будет применены данные цвета фона и текста.
Например, вместо выравнивания заголовков по центу 3 раза можно написать в таблице стилей; h1,h2 {text-align: center;} и после этого просто указать в документе теги <h1> и <h2>, содержимое которых будет автоматически центрироваться.
Замечание:в таблицах стилей, чтобы определять стиль сразу для нескольких элементов, мы перечисляем их через запятую.
Пример_3
<body link= « # 634438» v link= «# 634438» alink=black> заменяется на:
a: link, a: visited {color: # 634438;}
a: active {color: black;}
Иногда в первом HTML-документе определяется один и тот же стиль для текста эпиграфа, а другой стиль для подписи к эпиграфу и все они расположены внутри элемента <div>.
В этом случае необходимо определить несколько различных стилей для первого элемента, то есть у нас должно быть три различных стилевых варианта для элемента <div>.
В CSS они называются классами.
Чтобы отличить эти элементы друг от друга, у них придется установить атрибут class=, приблизительно так:
<div class= «epig»>….</div>
<div class= «pdps»>….</div>
<div class= «ab»>……</div>
В таблице стилей эти классы можно определить так:
div epig {text-align: justify;
font-size: smaller;
width :130;}
div pdps {font-style: italic;
text-align=right;}
div ab {text-align: justify;
text- indent: 2em;}
Замечание1:практически все другие элементы также могут иметь атрибут class;
Замечание2: если необходимо, чтобы определение класса было доступно всем элементам, его можно определить так:
.pdps {font-style: italic;
text-align; right ;}
Замечание3:кроме стилевых свойств элементов HTML и классов можно определить свойства так называемых идентификаторов (это связано с тем, что у любого элемента HTML может быть атрибут id - его уникальное имя в данном документе). Для определения в таблице стилей свойств для элемента, имеющие определяемый идентификатор id=, это можно сделать так:
.cool {color: white;
background-color: black ;}
Тогда элемент под именем cool (# <div id= «cool»>) будет найден указанными свойствами.
3. Внешние - вся таблица стилей (без <style>, </style>) пишется в отдельном файле с расширением .css, а затем ее подключают во все HTML- документы, которые должны ее исполнять.
Например, если файл таблицы стилей - m.css, то в <head> каждого из использующих HTML-документов необходимо вписывать фразу:
<link rel= «stylesheet» hret= «m.css» type= «text/css»>
Существует и другой способ «подключения» стилевой таблицы из внешнего файла - директива @import
Пример_4
<style type= «text/css»>
@import url(m.css);
</style>
|
.png)