CSS
HTML - мова розмітки документа.CSS расшифровывается Cascading Style Sheets (Каскадные Документы Стилей). С помощью CSS Вы можете оформлять HTML документы.
Селекторы тэгов
p
{
color:green;
}
h2
{
color:red;
}
Идентификатор для элемента задается с помощью атрибута id(<p id="идентификатор">текст</p>).
Для того, чтобы затем оформить данный элемент необходимо обратиться к идентификатору в таблицах стилей добавив перед ним символ "#" (#идентификатор {color:red}).
С помощью атрибута class можно задать, что элемент относится к группе
(<p class="имя_группы">текст</p>).
Для того, чтобы затем оформить эту группу необходимо в таблицах стилей обратится к имени группы добавив перед ней символ "." (.имя_группы {color:red}).
/* Свойства будут применены только к тем элементам с class="test1", которые являются заголовками */
h2.test1
{
color:green;
font-family:verdana;
font-size:1.2em;
}
/* Свойства будут применены только к тем элементам p, которые находятся внутри элементов div */
div p
{
color:green;
font-family:verdana;
font-size:1.2em;
}
/* Свойства будут применены только к тем элементам p, которые идут сразу после элементов div */
div+p
{
color:green;
font-family:verdana;
font-size:1.2em;
}
h1,h2,p
{
font-family:verdana;
color:green;
}
Существует несколько
способов включения CSS в HTML документы.
1. Внешнее объявление стилей
Внешнее объявление стилей используется в случаях, когда
оформление задается для группы связанных HTML документов (например для целого
веб-сайта).В этом случае все оформление выносится в один внешний файл, на который должны ссылаться все документы веб-сайта.
Внешнее объявление стилей очень удобно так как позволяет редактируя лишь один файл изменять оформление целого веб-сайта.
Для того, чтобы подключить внешний файл стилей необходимо в секции head каждой страницы веб-сайта указать ссылку на него с помощью элемента <link>:
<head>
<link rel="stylesheet" type="text/css" href="адрес_внешнего_файла_стилей" />
</head>
Внешний файл стилей
является обычным текстовым файлом с расширением .css.
Пример содержимого внешнего файла стилей: h1 {color:red;}
p {margin-right:38px;}
div {float:left;}
2. Внутреннее объявление стилей
Внутреннее объявление стилей используются в случаях, когда
стиль нужно задать только для одного отдельного HTML документа. <head>
<style type='text/css'>
h1 {color:red;}
p {margin-right:38px;}
div {float:left;}
</style>
</head>
3. Строковое объявление стилей
<p style="font-size:1.3em"> Абзац оформленный с помощью CSS.</pСтили подключенные разным способом имеют разный приоритет.
- Строковые стили - найвищий пріоритет
- Внутренние стили - нижчий
- Внешние стили - найнижчий
Немає коментарів:
Дописати коментар