Викиучебник

CSS/Справочник: различия между версиями

Интерактивная навигация по истории
← Предыдущая правкаСледующая правка →
Содержимое удалено Содержимое добавлено
ВизуальныйВики-текст
категория, викификация
Строка 2:
{{Википедия|CSS}}
{{Викиверситет|CSS}}
 
== Введение ==
'''[[w:Каскадные таблицы стилей | CSS]]''' ({{lang-en|Cascading Style Sheets}}  — '''каскадные таблицы стилей''')  — [[w:формальный язык | формальный язык]] описания внешнего вида документа, написанного с использованием [[w:Язык разметки|языка разметки]].
 
=== Цель создания CSS ===
CSS используется создателями [[w:веб-страница|веб-страниц]] для задания [[w:цвет | цветов]], [[w:шрифт | шрифтов]], расположения отдельных блоков и других аспектов представления внешнего вида этих [[w:веб-страница | веб-страниц]]. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью [[w:HTML | HTML]] или других [[w:язык разметки|языков разметки]]) от описания внешнего вида этой [[w:веб-страница | веб-страницы]] (которое теперь производится с помощью [[w:формальный язык|формального языка]] CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или [[w:метод | методметодах]]ах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым [[w:Браузер | браузером]] или программой чтения с экрана), или при выводе устройствами, использующими [[w:шрифт Брайля | шрифт Брайля]].
 
=== Обзорная история CSS ===
 
==== CSS1 ====
Первая версия CSS1 была принята как рекомендация W3C 17 декабря [[w:1996 | 1996]] года. Она предоставляет пользователю следующие возможности:
Строка 20 ⟶ 23 :
* возможность задавать в качестве фона элемента изображения, а также позиционирование и повторение этого изображения в фоне;
* управление параметрами [[w:Шрифт | шрифта]]: название шрифта, размер, курсив и жирность;
* управление свойствами текста: выравнивание, отступ первой строки, оформление (подчеркивание, курсив и  т. д.). Также предусмотрена возможность изменения регистра текста;
* управление междустрочным интервалом, а также расстоянием между словами и между буквами.
 
Строка 31 ⟶ 34 :
* генерировать контент до и после элемента, в том числе и автоматическая нумерация;
* управлять внешним видом курсора;
* управлять положением элементов по оси z (т.е.то есть возможность располагать один элемент поверх другого);
* показывать вместо элемента пустое место;
* задавать минимально возможные и максимально возможные размеры элемента;
Строка 39 ⟶ 42 :
* задавать фиксированные размеры элементам таблицы;
* управлять внешним видом кавычек, в которые оборачиваются цитаты;
* задавать таблицы стилей для не визуальных носителей: управлять контентом при печати, а также задавать звуковое оформление контента (силу, громкость голоса, длину пауз и  т. д. ) для голосовых браузеров.
 
==== CSS2.1 ====
8 сентября 2009 года была утверждена CSS2.1. Эта версия формировалась в течение более 10-ти лет. Создание CSS2.1  — это попытка привести спецификацию в соответствие со сложившимися реалиями:
* исправлен ряд ошибок CSS2;
* изменились некоторые моменты, реализация которых в подавляющем большинстве браузеров отличается от спецификации CSS2;
Строка 50 ⟶ 53 :
Будущее, которое стало реальностью
На момент написания статьи активно разрабатывается спецификация CSS3. Возможности, которые сулит нам CSS3 значительно превосходят предыдущие версии. Это и анимация, которая ранее ложилась на плечи скриптов, и различные скругления, тени, множественные фоны и прочие вещи, для реализации которых в CSS2 приходилось прилагать значительные усилия.
 
=== Преимущества CSS ===
# правление отображением множества документов с помощью одной таблицы стилей;
# более точный контроль над внешним видом страниц;
# различные представления для разных носителей информации (экран, печать, и  т.  д.);
# сложная и проработанная техника дизайна.
 
=== Кроссбраузерность ===
 
=== Программное обеспечение для создания CSS ===
 
== Способы подключения CSS к документу ==
Правила CSS пишутся на [[w:формальный язык|формальном языке]] CSS и располагаются в таблицах стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом [[w:веб-документ | веб-документе]], внешний вид которого они описывают, так и в отдельных [[w:файл | файлах]], имеющих [[w:формат файла|формат]] CSS. (По сути, формат CSS  — это обычный [[w:текстовый файл | текстовый файл]]. В файле .css не содержится ничего, кроме перечня правил CSS и комментариев к ним.)<br />
То есть, эти таблицы стилей могут быть подключены, внедрены в описываемый ими [[w:веб-документ | веб-документ]] четырьмя различными способами:
* когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством [[w:Элементы HTML|тега]] <link>, располагающегося в этом документе между тегами <head> и </head>. (Тег <link> будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;
Строка 90 ⟶ 96 :
</source>
 
В первых двух случаях говорят, что к документу применены ''внешние таблицы стилей'', а во вторых двух случаях  — ''внутренние таблицы стилей''.
 
Для добавления CSS к [[XML|XML-документу]], последний должен содержать специальную ссылку на таблицу стилей. Например:
Строка 96 ⟶ 102 :
<?xml-stylesheet type="text/css" href="style.css"?>
</source>
 
== Структура CSS ==
 
Строка 113 ⟶ 120 :
<source lang="css">p.note > b {color: green;}</source>
* селекторами сестринских элементов;
<source lang="css">h1 + p {font-size: 24pt;} </source>
* селекторами псевдоклассов;
<source lang="css">a:active {color:yellow;}</source>
* селекторами псевдоэлементов.
<source lang="css">p::first-letter {font-size: 32px;}</source>
* Также в CSS существует так называемый ''универсальный селектор'', обозначающий любой элемент, встречающийся в документе. Например, <code>*</code> {color: red;}. Перед любым селектором, задающим класс или идентификатор, можно поставить знак универсального селектора, в результате получится эквивалентное выражение, например, .first {...…} и <code>*</code>.first {...…} имеют один и тот же смысл.
 
== Свойство селекторов ==
 
=== Свойство background ===
Характеристики фона элемента [[w:Веб-страница | веб-страницы]]
 
==== Свойство background-attachment ====
<small>'''''Примечание:'''проверить работоспособность.''[[Участник:VasjaMirnyj|VasjaMirnyj]] ([[Обсуждение участника:VasjaMirnyj|обсуждение]]) 17:19, 11 августа 2012 (UTC)</small>
Строка 128 ⟶ 138 :
 
'''Значения:'''
* '''fixed''' – — фоновое изображение остается неподвижным на экране монитора во время [[w:Скроллинг | скроллинга]].
* '''scroll''' – — фоновое изображение перемещается по веб-странице вместе с другими элементами.('''Значение по умолчанию''')
* '''inherit''' – — заимствует свойство родителей.
* '''local''' - — фоновое изображение прокручивается вместе с содержимым элемента, если для элемента доступна прокрутка.
 
'''Синтаксис'''
Строка 141 ⟶ 151 :
'''Версия CSS'''
 
[[ИзображениеФайл:Symbol confirmed.svg|20px]] CSS1
 
[[ИзображениеФайл:Symbol confirmed.svg|20px]] CSS2
 
[[ИзображениеФайл:Symbol confirmed.svg|20px]] CSS2.1
 
[[ИзображениеФайл:Symbol confirmed.svg|20px]] CSS3
 
===== Значение fixed =====
Строка 233 ⟶ 243 :
 
'''Значения:'''
* '''padding-box''' – — фон или фоновое изображение внутри границ элемента веб-страницы.(Значение по умолчанию)
* '''border-box''' – — фон или фоновое изображение занимают внутреннее пространство и границы элемента.
* '''content-box''' – — фон внутри элемента.
 
'''Синтаксис'''
Строка 243 ⟶ 253 :
'''Версия CSS'''
 
[[ИзображениеФайл:Symbol_oppose_vote.svg|20px]] CSS1
 
[[ИзображениеФайл:Symbol_oppose_vote.svg|20px]] CSS2
 
[[ИзображениеФайл:Symbol_oppose_vote.svg|20px]] CSS2.1
 
[[ИзображениеФайл:Symbol confirmed.svg|20px]] CSS3▼
 
▲[[Изображение:Symbol confirmed.svg|20px]] CSS3
===== Значение padding-box =====
{{Рамка}}<source lang="css">
Строка 326 ⟶ 337 :
 
'''Значения:'''
* '''transparent''' – — задаёт прозрачный фон. (Значение по умолчанию)
* '''inherit''' –  — наследует значение у родителя.
* '''#006699''' - — значение цвета в [[w:Шестнадцатеричная система счисления | шестнадцатеричной системе исчисления]].
* '''red''' - — по названию.
* '''rgb(214,86,43)''' - — при помощи [[w:RGB | RGB]].
* '''rgba(255,255,255,.9)''' - — при помощи [[w:RGBA | RGBA]].
* '''hsl(60,100 %,25 %)''' - — при помощи [[w:HSL | HSL]].
* '''hsla(120,100 %,50 %,0.1)''' - — при помощи [[w:HSLA | HSLA]].
 
'''Синтаксис'''
Строка 341 ⟶ 352 :
'''Версия CSS'''
 
[[ИзображениеФайл:Symbol confirmed.svg|20px]] CSS1
 
[[ИзображениеФайл:Symbol confirmed.svg|20px]] CSS2
 
[[ИзображениеФайл:Symbol confirmed.svg|20px]] CSS2.1
 
[[ИзображениеФайл:Symbol confirmed.svg|20px]] CSS3
 
==== Свойство background-image ====
Строка 355 ⟶ 366 :
 
'''Значения:'''
* '''url()''' – — в скобках указывают путь к файлу.
* '''none''' –  — элемент не содержит фонового изображения. (Значение по умолчанию)
* '''inherit''' - — наследует значение у родителя.
 
'''Синтаксис'''
Строка 367 ⟶ 378 :
'''Версия CSS'''
 
[[ИзображениеФайл:Symbol confirmed.svg|20px]] CSS1
 
[[ИзображениеФайл:Symbol confirmed.svg|20px]] CSS2
 
[[ИзображениеФайл:Symbol confirmed.svg|20px]] CSS2.1
 
[[ИзображениеФайл:Symbol confirmed.svg|20px]] CSS3
 
==== Свойство background-origin ====
 
==== Свойство background-position ====
 
==== Свойство background-repeat ====
 
==== Свойство background-size ====
 
=== Свойство border ===
 
=== Свойство bottom ===
 
=== Свойство box-shadow ===
 
=== Свойство box-sizing ===
 
=== Свойство caption-side ===
 
=== Свойство clear ===
 
=== Свойство clip ===
 
=== Свойство color ===
 
=== Свойство columns ===
 
=== Свойство cursor ===
 
=== Свойство direction ===
 
=== Свойство display ===
 
=== Свойство empty-cells ===
 
=== Свойство float ===
 
=== Свойство font ===
 
=== Свойство height ===
 
=== Свойство left ===
 
=== Свойство letter-spacing ===
 
=== Свойство line-height ===
 
=== Свойство list-style ===
 
=== Свойство margin ===
 
=== Свойство max-height ===
 
=== Свойство max-width ===
 
=== Свойство min-height ===
 
=== Свойство min-width ===
 
=== Свойство opacity ===
 
=== Свойство orphans ===
 
=== Свойство outline ===
 
=== Свойство overflow ===
 
=== Свойство padding ===
 
=== Свойство page-break-after ===
 
=== Свойство page-break-before ===
 
=== Свойство page-break-inside ===
 
=== Свойство position ===
 
=== Свойство quotes ===
 
=== Свойство resize ===
 
=== Свойство right ===
 
=== Свойство tab-size ===
 
=== Свойство table-layout ===
 
=== Свойство text-align ===
 
=== Свойство text-decoration ===
 
=== Свойство text-indent ===
 
=== Свойство text-overflow ===
 
=== Свойство text-shadow ===
 
=== Свойство text-transform ===
 
=== Свойство top ===
 
=== Свойство transform ===
 
=== Свойство unicode-bidi ===
 
=== Свойство vertical-align ===
 
=== Свойство visibility ===
 
=== Свойство white-space ===
 
=== Свойство widows ===
 
=== Свойство width ===
 
=== Свойство word-spacing ===
 
=== Свойство word-wrap ===
 
=== Свойство writing-mode ===
 
=== Свойство z-index ===
 
== Вёрстка ==
 
== Приложение ==
 
=== Валидация ===
 
=== Сервисы ===
[[Категория:Справочники]]
Источник — https://ru.wikibooks.org/wiki/CSS/Справочник