Справка:CSS - История изменений

AsnDen: Ещё рекомендация скамейки

2024-06-17T20:54:39Z

Ещё рекомендация скамейки

← Предыдущая версия		Версия от 23:54, 17 июня 2024
Строка 6:		Строка 6:

	=== Селекторы ===		=== Селекторы ===
	Селекторы — ~~шаблоны стилей~~, которые ~~применяются~~ к элементу. Стиль может быть изменен с помощью 4 видов селекторов, а также через [[#Инлайн-стиль\|инлайн-стиль]].		Селекторы — это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля. Стиль может быть изменен с помощью 4 видов селекторов, а также через [[#Инлайн-стиль\|инлайн-стиль]].
	;Универсальный селектор <code>*</code>		;Универсальный селектор <code>*</code>
	: стиль, который применяется ко всем элементам.		: стиль, который применяется ко всем элементам.

AsnDen: Викификация

2024-06-17T20:51:09Z

Викификация

AsnDen: Доработал по рекомендациям скамейки

2024-06-17T20:48:25Z

Доработал по рекомендациям скамейки

← Предыдущая версия		Версия от 23:48, 17 июня 2024
Строка 5:		Строка 5:
	Нажмите клавишу {{key press\|F12}} на клавиатуре, откроются инструменты разработчика. Выберите режимы «Элементы» и «Стили» (на скриншоте сверху и снизу соответственно). Вам понадобятся две кнопки: «Выбрать элемент на странице для проверки» и «Показать или скрыть панель инструментов устройства» (обе кнопки на скриншоте расположены в левом верхнем углу). Первая кнопка позволяет быстро выбрать нужный элемент, вторая позволяет посмотреть, как будет выглядеть страница на разных экранах. В блоке «Элементы» можно увидеть, как выглядит преобразованная в HTML вики-разметка.		Нажмите клавишу {{key press\|F12}} на клавиатуре, откроются инструменты разработчика. Выберите режимы «Элементы» и «Стили» (на скриншоте сверху и снизу соответственно). Вам понадобятся две кнопки: «Выбрать элемент на странице для проверки» и «Показать или скрыть панель инструментов устройства» (обе кнопки на скриншоте расположены в левом верхнем углу). Первая кнопка позволяет быстро выбрать нужный элемент, вторая позволяет посмотреть, как будет выглядеть страница на разных экранах. В блоке «Элементы» можно увидеть, как выглядит преобразованная в HTML вики-разметка.

	=== ~~Стили~~ ===		=== Селекторы ===
	Стиль ~~элемента получается из четырёх элементов:~~		Селекторы - шаблоны стилей, которые применяются к элементу. Стиль может быть изменен с помощью 4 видов селекторов, а также через [[#Инлайн-стиль\|инлайн-стиль]].
	;~~параметр «style»~~		;Универсальный селектор <code>*</code>
	: стиль, который применяется ~~только к одному элементу~~		: стиль, который применяется ко всем элементам.
	;ID		;Cелектор по типу элемента <code>Элемент</code>, например <nowiki><table>, <img></nowiki>
	: стиль, который ~~применяются к одному элементу~~ на ~~странице~~		: стиль, который влияет на весь тип элемента на вики.
	;~~класс (он же class)~~		;Селекторы по классу <code>.имяКласса</code>, например .wikitable
	: стиль, который может применяться к нескольким элементам на странице		: стиль, который может применяться к нескольким элементам на странице.
	;~~тег~~		;Селекторы по идентификатору <code>#имяИдентификатора</code>, например #toc
	: стиль, который ~~влияет~~ на все ~~элементы~~ на ~~вики~~		: стиль, который применяются к одному элементу на странице.

			Также существуют селекторы по атрибуту [attr=value], например a[href$=".jpg"] (выберет все ссылки, у которых адрес заканчивается на ".jpg".)

	[[Файл:СкриншотCSSСпецифичность.png\|right\|thumb\|class=noSprite\|alt=Пример перекрытия стилей\|Пример перекрытия стилей]]		[[Файл:СкриншотCSSСпецифичность.png\|right\|thumb\|class=noSprite\|alt=Пример перекрытия стилей\|Пример перекрытия стилей]]
	К элементу могут применяться несколько одинаковых стилей сразу. В таком случае применится только один, более приоритетный, а другой будет зачёркнут, как на скриншоте: <code><s>color: #2a4b8d</s></code>. Приоритетность стилей определяется по принципу «от частного к общему». Таким образом параметр style имеет наивысший приоритет, за ним идут ID, классы, а затем теги с наименьшим приоритетом. Подробнее о приоритетах можно прочесть на [https://doka.guide/css/specificity/ doka.guide].		К элементу могут применяться несколько одинаковых стилей сразу. В таком случае применится только один, более приоритетный, а другой будет зачёркнут, как на скриншоте: <code><s>color: #2a4b8d</s></code>. Приоритетность стилей определяется по принципу «от частного к общему». Таким образом параметр style имеет наивысший приоритет, за ним идут ID, классы, а затем теги с наименьшим приоритетом. Подробнее о приоритетах можно прочесть на [https://doka.guide/css/specificity/ doka.guide].

	=== ~~Использование стилей~~ ===		=== Инлайн-стиль ===
	[[Файл:СкриншотВикиРазметкаСтили.png\|right\|thumb\|class=noSprite\|alt=Скриншот разметки стилей\|Скриншот разметки стилей]]		[[Файл:СкриншотВикиРазметкаСтили.png\|right\|thumb\|class=noSprite\|alt=Скриншот разметки стилей\|Скриншот разметки стилей]]
	[[Файл:СкриншотВикиРазметкаТаблица.png\|right\|thumb\|class=noSprite\|alt=Скриншот разметки таблицы\|Скриншот разметки таблицы (прим. показана не вся таблица)]]		[[Файл:СкриншотВикиРазметкаТаблица.png\|right\|thumb\|class=noSprite\|alt=Скриншот разметки таблицы\|Скриншот разметки таблицы (прим. показана не вся таблица)]]
	Редакторы могут изменять только параметр «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 существенная:
			# span имеет свойство "display:inline", оно устанавливается для них браузером по умолчанию.<br><br><!--

			-->Значение display: inline используется для элементов, которые отображаются в группе слов рядом с другими элементами, например в параграфе <nowiki><p></nowiki>, такое свойство позволяет содержать несколько inline-элементов в одной строке и не переносит каждый элемент на новую строку. Размеры строчных элементов определяются содержимым, так что установить их через CSS-свойства не получится. Так же не выйдет указать для них вертикальные margin и padding.<br><br><!--
			-->
			# 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».

	В таблице разметка идентична, только тег заменяется на разметку таблицы. Стили могу применятся как ко всей таблице (первая строчка на скриншоте), так и к ячейке (со второй по четвёртую строчки на скриншоте) и ячейкам. Для применения стиля к таблице, их нужно расположить сразу после <code>{\|</code>, а для ячейки — между двумя <code>\|</code> или <code>!</code> и <code>\|</code>, как на скриншоте.		В таблице разметка идентична, только тег заменяется на разметку таблицы. Стили могу применятся как ко всей таблице (первая строчка на скриншоте), так и к ячейке (со второй по четвёртую строчки на скриншоте) и ячейкам. Для применения стиля к таблице, их нужно расположить сразу после <code>{\|</code>, а для ячейки — между двумя <code>\|</code> или <code>!</code> и <code>\|</code>, как на скриншоте.

KindSoft: правочки ✏️

2024-06-17T12:48:22Z

правочки ✏️

← Предыдущая версия		Версия от 15:48, 17 июня 2024
Строка 2:		Строка 2:
	[[Файл:СкриншотРежимРазработчикаБраузер.png\|right\|thumb\|class=noSprite\|alt=Скриншот режима разработчика\|Скриншот режима разработчика, может отличаться в зависимости от браузера]]		[[Файл:СкриншотРежимРазработчикаБраузер.png\|right\|thumb\|class=noSprite\|alt=Скриншот режима разработчика\|Скриншот режима разработчика, может отличаться в зависимости от браузера]]

	== ~~Как всё устроено~~ ==		== Принципы работы ==
	Нажмите клавишу {{key press\|F12}} на клавиатуре, откроются инструменты разработчика. Выберите режимы «Элементы» и «Стили» (на скриншоте сверху и снизу соответственно). Вам понадобятся две кнопки: «Выбрать элемент на странице для проверки» и «Показать или скрыть панель инструментов устройства» (обе кнопки на скриншоте расположены в левом верхнем углу). Первая кнопка позволяет быстро выбрать нужный элемент, вторая позволяет посмотреть, как будет выглядеть страница на разных экранах. В блоке «Элементы» можно увидеть, как выглядит преобразованная в HTML вики-разметка.		Нажмите клавишу {{key press\|F12}} на клавиатуре, откроются инструменты разработчика. Выберите режимы «Элементы» и «Стили» (на скриншоте сверху и снизу соответственно). Вам понадобятся две кнопки: «Выбрать элемент на странице для проверки» и «Показать или скрыть панель инструментов устройства» (обе кнопки на скриншоте расположены в левом верхнем углу). Первая кнопка позволяет быстро выбрать нужный элемент, вторая позволяет посмотреть, как будет выглядеть страница на разных экранах. В блоке «Элементы» можно увидеть, как выглядит преобразованная в HTML вики-разметка.

AsnDen: I guess that's it

2024-06-17T12:44:38Z

I guess that's it

← Предыдущая версия		Версия от 15:44, 17 июня 2024
Строка 16:		Строка 16:
	: стиль, который влияет на все элементы на вики		: стиль, который влияет на все элементы на вики

	К элементу могут применяться несколько одинаковых стилей сразу. В таком случае применится только один, более приоритетный, а другой будет зачёркнут, как на скриншоте: <code><s>color: #~~000000~~</s></code>. Приоритетность стилей определяется по принципу «от частного к общему». Таким образом параметр style имеет наивысший приоритет, за ним идут ID, классы, а затем теги с наименьшим приоритетом. Подробнее о приоритетах можно прочесть на [https://doka.guide/css/specificity/ doka.guide].		[[Файл:Скриншот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>, а для ячейки — между двумя <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] для дальнейшего изучения.

AsnDen: Половина текста готова

2024-06-17T12:23:56Z

Половина текста готова

Новая страница

'''CSS''' (англ. ''Cascading Style Sheets'') — язык, предназначенный для изменения внешнего вида веб-страницы. Все стандартные для вики параметры стилей находятся на странице [[Mediawiki:Common.css|Common.css]].
[[Файл:СкриншотРежимРазработчикаБраузер.png|right|thumb|class=noSprite|alt=Скриншот режима разработчика|Скриншот режима разработчика, может отличаться в зависимости от браузера]]

== Как всё устроено ==
Нажмите клавишу {{key press|F12}} на клавиатуре, откроются инструменты разработчика. Выберите режимы «Элементы» и «Стили» (на скриншоте сверху и снизу соответственно). Вам понадобятся две кнопки: «Выбрать элемент на странице для проверки» и «Показать или скрыть панель инструментов устройства» (обе кнопки на скриншоте расположены в левом верхнем углу). Первая кнопка позволяет быстро выбрать нужный элемент, вторая позволяет посмотреть, как будет выглядеть страница на разных экранах. В блоке «Элементы» можно увидеть, как выглядит преобразованная в HTML вики-разметка.

=== Стили ===
Стиль элемента получается из четырёх элементов:
;параметр «style»
: стиль, который применяется только к одному элементу
;ID
: стиль, который применяются к одному элементу на странице
;класс (он же class)
: стиль, который может применяться к нескольким элементам на странице
;тег
: стиль, который влияет на все элементы на вики

К элементу могут применяться несколько одинаковых стилей сразу. В таком случае применится только один, более приоритетный, а другой будет зачёркнут, как на скриншоте: <code><s>color: #000000</s></code>. Приоритетность стилей определяется по принципу «от частного к общему». Таким образом параметр style имеет наивысший приоритет, за ним идут ID, классы, а затем теги с наименьшим приоритетом. Подробнее о приоритетах можно прочесть на [https://doka.guide/css/specificity/ doka.guide].

=== Использование стилей ===
[[Файл:СкриншотВикиРазметкаСтили.png|right|thumb|class=noSprite|alt=Скриншот разметки стилей|Скриншот разметки стилей]]
[[Файл:СкриншотВикиРазметкаТаблица.png|right|thumb|class=noSprite|alt=Скриншот разметки таблицы|Скриншот разметки таблицы (прим. показана не вся таблица)]]
Редакторы могут изменять только параметр «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>, как на скриншоте.

=== Проблемы ===
При редактировании

== Дальнейшее изучение ==

← Предыдущая версия		Версия от 23:51, 17 июня 2024
Строка 6:		Строка 6:

	=== Селекторы ===		=== Селекторы ===
	~~Селекторы -~~ шаблоны стилей, которые применяются к элементу. Стиль может быть изменен с помощью 4 видов селекторов, а также через [[#Инлайн-стиль\|инлайн-стиль]].		Селекторы — шаблоны стилей, которые применяются к элементу. Стиль может быть изменен с помощью 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"] (выберет все ссылки, у которых адрес заканчивается на ".~~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 имеет свойство ~~"display~~:~~inline"~~, оно устанавливается для них браузером по умолчанию.<br><br><!--		# 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 же имеет свойство ~~"display~~:~~block"~~, которое также устанавливается браузером по умолчанию.<br><br><!--		# div же имеет свойство «display: block», которое также устанавливается браузером по умолчанию.<br><br><!--

	-->~~block —~~ элемент отображается как блок и занимает всю доступную ширину и минимально-возможную высоту. В одной строке может быть только один block-элемент, таким образом каждый новый div будет начинаться со следующей строки.		-->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».