- •Каскадные Таблицы Стилей
- •Изменение ширины элемента с «шагом» в несколько пикселей из песочницы
- •В чем суть?
- •Как это работает?
- •Еще чуть-чуть о круглых аватарках на css3 и маленькой тайне Оперы из песочницы
- •6 Декабря 2011, 06:01
- •Круглые аватарки средствами css 3
- •2 Декабря 2011, 01:49
- •Свойство «text-size-adjust» становится более кроссбраузерным
- •Реалистичные тени при помощи css3 без использования изображений
- •InstaCss: удобный поиск по справочнику css
- •Тултипы на css3 и html5 из песочницы
- •Создаем анимированные кнопки при помощи css3
- •Создаем оригинальные hover-эффекты при помощи css3
- •Селекторы css
- •Это заголовок первого уровня
- •Это заголовок второго уровня
- •Это заголовок первого уровня
- •Это заголовок второго уровня
- •Внешние таблицы стилей
- •Пример кода
- •Пример кода
- •Встроенные стили
- •Образец кода
- •Каскадные таблицы стилей: язык css
- •Глава 2.1. Введение в таблицы стилей
- •2.1.1. Что такое css?
- •Моя домашняя страница
- •2.1.2. Включение таблиц стилей в html-документ
- •2.1.2.1. Внешние таблицы стилей
- •2.1.2.2. Внутренние таблицы стилей
- •2.1.2.3. Таблицы стилей элементов
- •2.1.3. Синтаксис css
- •2.1.3.1. Кодировка символов
- •2.1.3.2. Директива @charset
- •2.1.3.3. Операторы, директивы и правила
- •2.1.4. Типы данных css
- •Целые и действительные числа
- •Размеры
- •Процентные значения
- •Счетчики
- •Угловые величины
- •Времена
- •Частоты
- •2.1.5. Типы устройств отображения
- •2.1.6. Директива @media
Внешние таблицы стилей
Переклад українською: Зовнішні таблиці стилів
Мы создаем внешние каскадные таблицы стилей в отдельных документах, давая им расширение «.css». Внешняя каскадная таблица стилей представляет собой простой список правил. Она не содержит HTML-тегов. CrashCourse/Demos/Stylesheet.css — пример внешней таблицы стилей.
Пример кода
|
1 |
.warning {color:#ff0000} |
|
|
2 |
h1.warning {text-decoration:underline} |
|
|
3 |
p.warning {font-weight:bold} |
Мы можем подключить указанный CSS-файл к любому количеству страниц HTML. Тег <link>, который размещается в верхней части HTML-страницы, ссылается на внешнюю каскадную таблицу стилей.
Пример кода
|
01 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|
|
02 |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en"> |
|
|
03 |
<head> |
|
|
04 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
|
05 |
<title>External Style Sheet</title> |
|
|
|
06 |
<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> |
||
|
07 |
</head> |
|
|
08 |
<body> |
|
|
09 |
<h1 class="warning">WARNING</h1> |
|
|
10 |
<p class="warning">Don't go there!</p> |
|
|
11 |
</body> |
|||
|
12 |
</html> |
|||
|
|
Атрибуты |
Описание |
|
|
|
|
|
указывает на местонахождение внешней каскадной таблицы стилей |
|
|
|
|
|
атрибут должен устанавливать значение “stylesheet” для ссылки на таблицу стилей |
|
|
|
|
|
должно быть установлено “text/css” для ссылки на таблицу стилей |
|
|
|
|
Атрибуты <link> |
|
||
Количество внешних каскадных таблиц стилей, которые может использовать страница HTML, неограниченно. Более, того, мы можем объединять внешние таблицы стилей, используя технику внедрения стилевых таблиц.
Встроенные стили
Мы создаем встроенные стили, добавляя тегам атрибуты стиля. Так же как и в случае с классом или атрибутами идентификатора (id), большинство элементов могут иметь стилевые атрибуты. Значения атрибута стиля разделяются точкой с запятой. Образец кода ниже демонстрирует применение встроенного стиля:
Образец кода
view source
print?
|
01 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|
|
02 |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en"> |
|
|
03 |
<head> |
|
|
04 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
|
05 |
<title>Inline Styles</title> |
|
|
06 |
</head> |
|
|
07 |
<body> |
|
|
08 |
<p style="color:blue; font-weight:bold; font-size:12pt">Common Greetings</p> |
|
|
09 |
<ul style="margin-top:-20px; font-size:10pt"> |
|
10 |
<li style="list-style-type:square">Hello</li> |
|
11 |
<li style="list-style-type:circle">Hi</li> |
|
|
12 |
<li style="list-style-type:disc">Howdy</li> |
|
|
13 |
</ul> |
|
|
14 |
</body> |
|
|
15 |
</html> |