Справка:CSS: различия между версиями
AsnDen (обсуждение | вклад) Половина текста готова |
AsnDen (обсуждение | вклад) I guess that's it |
||
| Строка 16: | Строка 16: | ||
: стиль, который влияет на все элементы на вики | : стиль, который влияет на все элементы на вики | ||
К элементу могут применяться несколько одинаковых стилей сразу. В таком случае применится только один, более приоритетный, а другой будет зачёркнут, как на скриншоте: <code><s>color: # | [[Файл:СкриншотCSSСпецифичность.png|right|thumb|class=noSprite|alt=Пример перекрытия стилей|Пример перекрытия стилей]] | ||
К элементу могут применяться несколько одинаковых стилей сразу. В таком случае применится только один, более приоритетный, а другой будет зачёркнут, как на скриншоте: <code><s>color: #2a4b8d</s></code>. Приоритетность стилей определяется по принципу «от частного к общему». Таким образом параметр style имеет наивысший приоритет, за ним идут ID, классы, а затем теги с наименьшим приоритетом. Подробнее о приоритетах можно прочесть на [https://doka.guide/css/specificity/ doka.guide]. | |||
=== Использование стилей === | === Использование стилей === | ||
| Строка 23: | Строка 24: | ||
Редакторы могут изменять только параметр «style», который обычно применяется в тегах div, span или таблицах. Это не исключает возможность использования этого параметра в других тегах. Разница между div и span существенная: div делает перенос строки, тем самым стиль применяется ко всей строке, а span наоборот, не делает перенос и стиль применяется только к выделенной области разметки. Для применения стиля соблюдайте разметку:<br> <code><nowiki><div id="имяID" class="имяКласса1, имяКласса2" style="параметр1: значение; параметр2: значение...">Ваш контент здесь</div></nowiki></code>.<br>Таким образом текст «Ваш контент здесь» получит стили тега «div», затем к нему применятся стили классов «имяКласса1» и «имяКласса2», после ID «имяID» и только затем параметры в «style». | Редакторы могут изменять только параметр «style», который обычно применяется в тегах div, span или таблицах. Это не исключает возможность использования этого параметра в других тегах. Разница между div и span существенная: div делает перенос строки, тем самым стиль применяется ко всей строке, а span наоборот, не делает перенос и стиль применяется только к выделенной области разметки. Для применения стиля соблюдайте разметку:<br> <code><nowiki><div id="имяID" class="имяКласса1, имяКласса2" style="параметр1: значение; параметр2: значение...">Ваш контент здесь</div></nowiki></code>.<br>Таким образом текст «Ваш контент здесь» получит стили тега «div», затем к нему применятся стили классов «имяКласса1» и «имяКласса2», после ID «имяID» и только затем параметры в «style». | ||
В таблице разметка идентична, только тег заменяется на разметку таблицы. Стили могу применятся как ко всей таблице (первая строчка на скриншоте), так и к ячейке (со второй по четвёртую строчки на скриншоте) и ячейкам. Для применения стиля к таблице, их нужно расположить сразу после <code>{|</code>, а для | В таблице разметка идентична, только тег заменяется на разметку таблицы. Стили могу применятся как ко всей таблице (первая строчка на скриншоте), так и к ячейке (со второй по четвёртую строчки на скриншоте) и ячейкам. Для применения стиля к таблице, их нужно расположить сразу после <code>{|</code>, а для ячейки — между двумя <code>|</code> или <code>!</code> и <code>|</code>, как на скриншоте. | ||
Изображения имеют возможность применять class, для этого нужно добавить <code>|class=имяКласса</code> в параметры изображения.<!-- | |||
=== Проблемы === | === Проблемы === | ||
--> | |||
== Дальнейшее изучение == | == Дальнейшее изучение == | ||
Для развития в CSS можно найти любой обучающий материал: сайт, серию YouTube-видео, книгу, но обычно хватает поиска аналогичной реализации на других вики-страницах или поиска в браузе «как сделать N в CSS» | |||
Можно использовать сайт [https://developer.mozilla.org/ru/docs/Learn/CSS developer.mozilla.org] для дальнейшего изучения. | |||