CSS/Селекторы: различия между версиями
Содержимое удалено Содержимое добавлено
DannyS712 (обсуждение | вклад) м <source> -> <syntaxhighlight> (phab:T237267) |
|||
Строка 3:
Пример:
<
body {
background-image: url("image.gif");
font-size: 18px;
}
</syntaxhighlight>
Где <code>body</code> — это селектор, <code>background-image</code> и <code>font-size</code> — это свойства, а <code>url("image.gif")</code> и <code>18px</code> — значения.
Строка 38:
<meta charset="utf-8" />
<style type="text/css">
<
p.ask {
font-style: italic;
Строка 52:
color: black;
}
</syntaxhighlight>
<
</style>
</head>
Строка 65:
</body>
</html>
</syntaxhighlight>
В приведённом примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным курсивом, размером 10 пунктов с отступом 15 пикселов от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов чёрного цвета. Вы можете создавать любое количество классов для любых элементов страницы.
Строка 72:
== Селектор id ==
Возьмём следующий пример. Например, вы хотите создать на странице какие-либо уникальные элементы, к которым в будущем захотите вернуться из программ [[Книга JavaScript|JavaScript]]. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление с помощью CSS. На этот случай в таблицах стилей есть возможность присваивать уникальным элементам идентификатор (id). Вот пример назначения идентификатора и правило CSS для таких элементов. Пример:
<
<!DOCTYPE html>
<html>
Строка 81:
<meta charset="utf-8" />
<style type="text/css">
</syntaxhighlight>
<
#onlyThisOne {
font-family: Courier;
}
</syntaxhighlight>
<
</style>
</head>
Строка 96:
</body>
</html>
</syntaxhighlight>
Отобразится как:
{{CSS:rendered|1=<p style="font-family: Courier; ">Courier</p>}}
Строка 102:
Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов на странице:
<
<!DOCTYPE html>
<html>
Строка 111:
<meta charset="utf-8" />
<style type="text/css">
</syntaxhighlight>
<
input#green {
color: green;
Строка 119:
color: red;
}
</syntaxhighlight>
<
</style>
</head>
Строка 137:
</body>
</html>
</syntaxhighlight>
{{BookCat}}
| |||