CN.moy.Su - Обзоры новостей, новинки софта, гаджетов и компьютеров

CN.moy.Su - Обзоры новостей,
новинки софта, гаджетов
и компьютеров.

Обзор статей

Главная » Статьи » Дизайн и верстка статьи

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


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>

 

Категория: Дизайн и верстка статьи | Добавил: vict (24.12.2008)
Просмотров: 5716 | Рейтинг: 0.0/0
 
Софт, который может быть интересен
Снегурочка - Многослойный шаблон Photoshop
[Графика]  23.12.2008
VA-Жажда Скорости Night Extreme (2012)
[Аудио ( файлы )]  31.01.2012
Harmonic ProMedia Carbon 3.19.1.35728 (2012)
[Видео ( софт )]  05.01.2012
NETGATE Registry Cleaner v3.0.805.0 + Rus
[Системные (Vista, Xp и т.д.)]  01.03.2012
Американский пирог: Все в сборе / American Reunion...
[Фильмы]  06.07.2012
Фантом / The Darkest Hour (2011/HDRip/1400Mb)
[Фильмы]  02.04.2012
Process Lasso 5.1.0.76 Final
[Системные (Vista, Xp и т.д.)]  21.04.2012
Dead Island: Blood Edition (2011/PC/Rus/RePack) от...
[Игры]  19.01.2012
Youtube Video Grabber v1.9.7
[Интернет и сети]  03.02.2012
VA-Vocal Trance Volume 31 (2012)
[Аудио ( файлы )]  17.05.2012
 
Интересные статьи
В наши дни закачать клипы можно во всемирной паути...
[25.11.2009]  [Фильмы музыка интересное]
На отдых в Турцию!
[18.07.2009]  [Не тематические статьи]
Обретение обеспеченности и именитости для любого ч...
[07.07.2009]  [Разное статьи]
В двух словах: ретроспектива кино К-911 Собачья ра...
[03.08.2009]  [Не тематические статьи]
Какую программу купить для упрощенки
[03.02.2010]  [Софт статьи]
Программа автоматизации и электронные замки: автом...
[27.01.2010]  [Софт статьи]
Размышления вэбмастера
[06.08.2009]  [Статьи разных авторов]
Строительство загородных домов - это перспективно.
[02.12.2009]  [Строительство монтаж стройматериалы]
Чем можно развлечь себя в Интернете
[06.07.2009]  [Статьи разных авторов]
Статусы в контакте
[07.03.2010]  [Интернет и сети статьи]
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

 

Категории каталога

Операционные системы статьи [6] Мобильные вопросы статьи [9]
Железо статьи [6] Ноутбуки статьи [0]
Софт статьи [13] Программинг статьи [5]
Дизайн и верстка статьи [7] Интернет и сети статьи [25]
Юмор развлекательные статьи [3] Статьи разных авторов [56]
Разное статьи [23] Бытовая техника [21]
Гаджеты, новинки техники [29] Не тематические статьи [17]
Авто, недвижимость и т.д. [40] Туризм спорттовары отели спорт [12]
Медицина здоровье медсайты [20] Строительство монтаж стройматериалы [44]
Дом семья дети быт [26] Фильмы музыка интересное [22]
Игры спорт разслечения досуг [20] Юриспруденция юридические вопросы [8]
Работа карьера обсуждения предложения [17] Услуги [38]
Магазины интернет и обычные [24] Мебель гарнитура дизайн [11]
Общество культура образование [16] Промышленность станки заводы мини заводы [13]

Поиск

Наш опрос

Что Вы наиболее часто ищете в интернете?
Всего ответов: 92

Статистика

ProtoPlex: программы, форум, рейтинг, рефераты, рассылки!