Викиучебник

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

Интерактивная навигация по истории
← Предыдущая правка
Содержимое удалено Содержимое добавлено
ВизуальныйВики-текст
м <source> -> <syntaxhighlight> (phab:T237267)
 
Строка 80:
* когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством [[w:Элементы HTML|тега]] <link>, располагающегося в этом документе между тегами <head> и </head>. (Тег <link> будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа;
 
<sourcesyntaxhighlight lang="xml">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</syntaxhighlight>
</source>
 
* когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>) сразу после тега <style>, которая также указывает (в своих скобках, после слова url) на адрес этой таблицы стилей. Все правила этой таблицы действуют на протяжении всего документа;
 
<sourcesyntaxhighlight lang="xml">
<head>
<style type="text/css" media="all">
Строка 94:
</style>
</head>
</syntaxhighlight>
</source>
 
* когда таблица стилей описана в самом документе, она может располагаться в нём между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>). Все правила этой таблицы действуют на протяжении всего документа;
 
<sourcesyntaxhighlight lang="xml">
<head>
<style type="text/css">
Строка 106:
</style>
</head>
</syntaxhighlight>
</source>
 
* когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.
 
<sourcesyntaxhighlight lang="xml">
<p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>
</syntaxhighlight>
</source>
 
В первых двух случаях говорят, что к документу применены ''внешние таблицы стилей'', а во вторых двух случаях — ''внутренние таблицы стилей''.
Строка 118:
Для добавления CSS к [[XML|XML-документу]], последний должен содержать специальную ссылку на таблицу стилей. Например:
 
<sourcesyntaxhighlight lang="xml">
<?xml-stylesheet type="text/css" href="style.css"?>
</syntaxhighlight>
</source>
 
== Структура CSS ==
Строка 130:
* селекторами элементов;
 
<sourcesyntaxhighlight lang="css">p {font-family: Garamond, serif;}</sourcesyntaxhighlight>
 
* селекторами классов;
 
<sourcesyntaxhighlight lang="css">.note {color: red; background: yellow; font-weight: bold;}</sourcesyntaxhighlight>
 
* селекторами идентификаторов;
 
<sourcesyntaxhighlight lang="css">#paragraph1 {margin: 0;} </sourcesyntaxhighlight>
 
* селекторами атрибутов;
 
<sourcesyntaxhighlight lang="css"> a[href="http://www.somesite.com"]{font-weight:bold;} </sourcesyntaxhighlight>
 
* селекторами потомков (контекстными селекторами);
 
<sourcesyntaxhighlight lang="css">div#paragraph1 p.note {color: red;}</sourcesyntaxhighlight>
 
* селекторами дочерних элементов;
 
<sourcesyntaxhighlight lang="css">p.note > b {color: green;}</sourcesyntaxhighlight>
 
* селекторами сестринских элементов;
 
<sourcesyntaxhighlight lang="css">h1 + p {font-size: 24pt;} </sourcesyntaxhighlight>
 
* селекторами псевдоклассов;
 
<sourcesyntaxhighlight lang="css">a:active {color:yellow;}</sourcesyntaxhighlight>
 
* селекторами псевдоэлементов.
 
<sourcesyntaxhighlight lang="css">p::first-letter {font-size: 32px;}</sourcesyntaxhighlight>
 
* Также в CSS существует так называемый ''универсальный селектор'', обозначающий любой элемент, встречающийся в документе. Например, <code>*</code> {color: red;}. Перед любым селектором, задающим класс или идентификатор, можно поставить знак универсального селектора, в результате получится эквивалентное выражение, например, .first {…} и <code>*</code>.first {…} имеют один и тот же смысл.
Строка 202:
===== Значение fixed =====
 
<sourcesyntaxhighlight lang="css">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
Строка 222:
</body>
</html>
</syntaxhighlight>
</source>
 
===== Значение scroll =====
 
<sourcesyntaxhighlight lang="css">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
Строка 246:
</body>
</html>
</syntaxhighlight>
</source>
 
===== Значение inherit =====
 
<sourcesyntaxhighlight lang="css">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
Строка 279:
</body>
</html>
</syntaxhighlight>
</source>
 
===== Значение local =====
Строка 308:
===== Значение padding-box =====
 
{{Рамка}}<sourcesyntaxhighlight lang="css">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
Строка 328:
</body>
</html>
</syntaxhighlight>
</source>
<p style="background-clip:padding-box; background-color:#006699; padding: 20px;border-width: 3px; border-style:dashed;">Пространство занимаемое фоном.</p>{{Акмар}}
 
===== Значение border-box =====
 
{{Рамка}}<sourcesyntaxhighlight lang="css">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
Строка 353:
</body>
</html>
</syntaxhighlight>
</source>
<p style="background-clip:border-box; background-color:#006699; padding: 20px;border-width: 3px; border-style:dashed;">Пространство занимаемое фоном.</p>{{Акмар}}
 
===== Значение content-box =====
 
{{Рамка}}<sourcesyntaxhighlight lang="css">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
Строка 378:
</body>
</html>
</syntaxhighlight>
</source>
<p style="background-clip:content-box; background-color:#006699; padding: 20px;border-width: 3px; border-style:dashed;">Пространство занимаемое фоном.</p>{{Акмар}}
 
Источник — https://ru.wikibooks.org/wiki/CSS/Справочник