Бизнес в интернете - подписная база

Книга:

"Как создавать эффективную базу подписчиков и увеличивать ваши продажи и прибыль!"

Чтобы получить книгу, введите имя, e-mail и нажмите кнопку

Бизнес в интернете с нуля с Сергеем Тиссеным
Smart Redirector 3.0 систематизирует множество ваших ссылок в категории и делает перенаправление (редирект) на новый адрес в зависимости от задаваемых вами условий. И весь процесс интуитивно понятен.

Таблицы стилей или что такое CSS

Таблицы стилей или что такое CSS

28/04/2007  

Cascading Style Sheets (CSS, каскадные таблицы стилей) - это набор параметров и свойств, который служит для оформления электронного документа HTML (XHTML). Каскадные таблицы стилей (CSS) преимущественно используются для задания шрифта, цвета, расположения представления документа. CSS призван увеличить доступность документа и его "гибкость"; облегчить пользователям серфинг и восприятие сайта (единообразное оформление всех страниц, преемственность между страницами), а также уменьшить сложность и повторяемость в структурном содержимом.

Иными словами, нам без CSS не обойтись

Методы использования CSS. Таблица связанных стилей.

Все стили, использующиеся на сайте (или даже на нескольких сайтах) можно хранить в одном специальном файле с расширением css, ссылка на который помещается во всех документах сайта. При изменении одного этого файла, меняется стиль на всех страницах, связанных с этим файлом.

Для подключения файла css к документу в <HEAD> прописывается тег <LINK>:

Код:

<head>

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

<link rel="stylesheet" type="text/css"

href="http://www.armadaboard.com/main.css">

</head>

Здесь href задает путь к CSS-файлу (относительный или абсолютный).

Пример файла со стилем ( style.css ):

Код:

H1 {

color: #8A2BE2;

font-family: Arial;

text-align: center

}

 

H2 {

color: #800000;

font-family: Verdana;

text-align: left

}

В документе, к которому подключен такой файл, при заключении текста в

теги H1 или H2, к нему(тексту) будет применяться соответствующее форматирование.

Таблица глобальных стилей

Кроме этого свойства CSS можно описывать не в отдельном файле, а в самом документе с помощью тега <STYLE>:
Код:

<style type="text/css">

H1 {

color: #8A2BE2;

font-family: Arial;

text-align: center

}

</style>

Здесь определен стиль тега <H1>, который можно использовать на данной веб-странице.

Внутренние стили

Можно также определять стиль только для конкретного тега:
Код:

<H1 style=" color: #8A2BE2; font-family: Arial; ">Текст</H1>

Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. При этом первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей.

Синтаксис CSS
CSS имеет следующий синтаксис:

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

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции.

Некоторые возможные свойства селекторов и их значения

Код:

font-family: Arial, Verdana (Семейство шрифта)

font-size: 80% (Размер шрифта)

font-weight: normal (Ширина шрифта)

color: #800000 (Цвет текста)

background: #FFE4E1 (Цвет фона)

text-align: justify (Выравнивание по ширине)

font-style: italic (Курсив)

Классы

Классы удобно использовать, когда хочется задать несколько стилей для одного тега.
Синтаксис задания стиля будет следующий:

тег.имя_класса { свойство1: значение; свойство2: значение; ... }

Синтаксис использования заданного стиля:

<тег class="имя_класса">Текст</тег>

Пример:
Код:

<html>

<head>

<style type="text/css">

P { color: red;

font-style: italic }

P.class1 { color: blue;

text-align: justify }

P.class2 { color: black }

</style>

</head>

<body>

<p>Текст будет написан курсивом красного цвета </p>

<p class="class1">Текст будет написан курсивом синего цвета и выровнен

по ширине</p>

<p class="class2">Текст будет написан курсивом черного цвета</p>

</body>

</html>
Можно, также создавать классы, не привязывая их к определенному тегу:
Код:

<style type="text/css">

.class3 { color: blue }

</style>

<b class="class3">Текст синего цвета</b>
Идентификаторы

Идентификатор позволяет управлять стилем элемента динамически.

Синтаксис задания стиля идентификатора:

#Имя_идентификатора { свойство1: значение; свойство2: значение; ... }

Синтаксис использования заданного стиля:

<тег id="Имя_идентификатора">Текст</тег>
Пример:
Код:

<html>

<head>

<style type="text/css">

#id1 { color: red }

</style>

</head>

<body>

<p id="id1">Текст крастого цвета</p>

</body>

</html>

Как и при использовании классов, идентификаторы также можно определять только для конкретного тега. Синтаксис при этомбудет следующий:

Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Пример:
Код:

<html>

<head>

<style type="text/css">

P { color: green }

P#id2 { color: red; }

</style>

</head>

<body>

<p> Текст зеленого цвета </p>

<p id="id2">Текст красного цвета</p>

</body>

</html>

Автор: Annita armadaboard.com

    Будьте первым комментатором, заполните форму ниже!

Обсуждение

Есть что сказать?








На какой планете мы живём (с заглавной буквы)


    Другие статьи по этой теме