Справка:CSS: различия между версиями
AsnDen (обсуждение | вклад) Доработал по рекомендациям скамейки |
AsnDen (обсуждение | вклад) м Викификация |
||
| Строка 6: | Строка 6: | ||
=== Селекторы === | === Селекторы === | ||
Селекторы — шаблоны стилей, которые применяются к элементу. Стиль может быть изменен с помощью 4 видов селекторов, а также через [[#Инлайн-стиль|инлайн-стиль]]. | |||
;Универсальный селектор <code>*</code> | ;Универсальный селектор <code>*</code> | ||
: стиль, который применяется ко всем элементам. | : стиль, который применяется ко всем элементам. | ||
;Cелектор по типу элемента <code>Элемент</code>, например <nowiki><table>, <img></nowiki> | ;Cелектор по типу элемента <code>Элемент</code>, например <nowiki><table>, <img></nowiki> | ||
: стиль, который влияет на весь тип элемента на вики. | : стиль, который влияет на весь тип элемента на вики. | ||
;Селекторы по классу <code>.имяКласса</code>, например .wikitable | ;Селекторы по классу <code>.имяКласса</code>, например .wikitable | ||
| Строка 16: | Строка 16: | ||
: стиль, который применяются к одному элементу на странице. | : стиль, который применяются к одному элементу на странице. | ||
Также существуют селекторы по атрибуту [attr=value], например a[href$=".jpg"] (выберет все ссылки, у которых адрес заканчивается на | Также существуют селекторы по атрибуту [attr=value], например a[href$=".jpg"] (выберет все ссылки, у которых адрес заканчивается на «.jpg».) | ||
[[Файл:СкриншотCSSСпецифичность.png|right|thumb|class=noSprite|alt=Пример перекрытия стилей|Пример перекрытия стилей]] | [[Файл:СкриншотCSSСпецифичность.png|right|thumb|class=noSprite|alt=Пример перекрытия стилей|Пример перекрытия стилей]] | ||
| Строка 26: | Строка 26: | ||
Редакторы могут изменять только параметр «style», который обычно применяется в тегах div, span или таблицах. Это не исключает возможность использования этого параметра в других тегах. | Редакторы могут изменять только параметр «style», который обычно применяется в тегах div, span или таблицах. Это не исключает возможность использования этого параметра в других тегах. | ||
Разница между div и span существенная: | Разница между div и span существенная: | ||
# span имеет свойство | # span имеет свойство «display: inline», оно устанавливается для них браузером по умолчанию.<br><br><!-- | ||
-->Значение display: inline используется для элементов, которые отображаются в группе слов рядом с другими элементами, например в параграфе <nowiki><p></nowiki>, такое свойство позволяет содержать несколько inline-элементов в одной строке и не переносит каждый элемент на новую строку. Размеры строчных элементов определяются содержимым, так что установить их через CSS-свойства не получится. Так же не выйдет указать для них вертикальные margin и padding.<br><br><!-- | -->Значение display: inline используется для элементов, которые отображаются в группе слов рядом с другими элементами, например в параграфе <nowiki><p></nowiki>, такое свойство позволяет содержать несколько inline-элементов в одной строке и не переносит каждый элемент на новую строку. Размеры строчных элементов определяются содержимым, так что установить их через CSS-свойства не получится. Так же не выйдет указать для них вертикальные margin и padding.<br><br><!-- | ||
--> | --> | ||
# div же имеет свойство | # div же имеет свойство «display: block», которое также устанавливается браузером по умолчанию.<br><br><!-- | ||
--> | -->block — элемент отображается как блок и занимает всю доступную ширину и минимально-возможную высоту. В одной строке может быть только один block-элемент, таким образом каждый новый div будет начинаться со следующей строки. | ||
Для применения стиля соблюдайте разметку:<br> <code><nowiki><div id="имяID" class="имяКласса1, имяКласса2" style="параметр1: значение; параметр2: значение...">Ваш контент здесь</div></nowiki></code>.<br>Таким образом текст «Ваш контент здесь» получит стили тега «div», затем к нему применятся стили классов «имяКласса1» и «имяКласса2», после ID «имяID» и только затем параметры в «style». | Для применения стиля соблюдайте разметку:<br> <code><nowiki><div id="имяID" class="имяКласса1, имяКласса2" style="параметр1: значение; параметр2: значение...">Ваш контент здесь</div></nowiki></code>.<br>Таким образом текст «Ваш контент здесь» получит стили тега «div», затем к нему применятся стили классов «имяКласса1» и «имяКласса2», после ID «имяID» и только затем параметры в «style». | ||