CSS/Селекторы: различия между версиями
Содержимое удалено Содержимое добавлено
Новая страница: «== Селектор class == Допустим, мы хотим сделать страницу, на которой будет два вида абзацев <now...» |
Oleg4280 (обсуждение | вклад) Нет описания правки |
||
Строка 1:
Селектор выбирает элементы, для которых применяются пары свойство и значение.
Пример:
<source lang="css">
body{
background-image: url("image.gif");
font-size: 18px;
}
</source>
Где body — это селектор, background-image и font-size — это свойства, а url("image.gif") и 18px — значения.
== Селектор class ==
Допустим, мы хотим сделать страницу, на которой будет два вида абзацев <nowiki> <p> </nowiki>, причем оба вида будут постоянно чередоваться и часто повторяться.▼
▲Допустим, мы хотим сделать страницу, на которой будет два вида абзацев <nowiki> <p> </nowiki>,
Пример такой страницы - интервью, в котором чередуется вопросы журналиста и ответы человека. Конечно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга. Если бы нам пришлось это делать возможностями CSS, которые мы рассмотрели выше, то нам Пришлось бы создавать две разные таблицы стилей. К счастью, это нам не нужно. Мы можем создать в одной таблице стилей два различных класса абзаце с помощью селектора класса. Это будет выглядеть так:▼
▲Пример такой страницы - интервью, в котором
<source lang="html4strict">
<html>
Строка 10 ⟶ 24 :
...
p.ask {
font-style: italic;
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 10pt;
color: gray;
margin-left: 15px;
}
p.answer {
font-family: 'Times New Roman', serif;
font-size: 12 pt; color: black;
}
...
Строка 34 ⟶ 48 :
</source>
В
Вы можете создавать любое количество классов для любых элементов страницы.
== Селектор id ==
Возьмем следующий пример. Например вы хотите создать на странице какие-либо уникальные предметы, к которым в будущем хотите вернуться из программ [[JavaScript]]. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление с помощью CSS. На этот случай в таблицах стилей есть возможность присваивать уникальным элементам идентификаторов (id). Вот пример назначенный идентификатор и правило CSS таким элементам:▼
▲
<source lang="css">
#onlyThisOne {
font-family:courier;
}
</source>
В HTML к нужному тегу добавляется атрибут id с именем селектора:
<source lang="html4strict">
<p id="onlyThisOne">Courier</p>
</source>
Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов на странице.
<source lang="html4strict">
<html>
Строка 45 ⟶ 74 :
...
<style>
input#green {
color: green; } input#red {
color: red; } ...
</style>
| |||