Как в CSS2 задать что-то типа переменных (идентификаторов)?

retk213 · October 22, 2008

Никак не могу понять как это делается (и делается ли вообще). Т.е. например, можно ли задать переменную color01 = "#e00", а затем при описаниия стиля использовать идентификатор color01 вместо цвета?

Или как можно сделать (может через наследование) что-то вроде этого:

.t1 { background-color: #e00; border: 1px solid #fff}

а затем каким-то образом "подключить" уже описанный ранее стиль, чтобы вместо кода:

.t2 { background-color: #e00; border: 1px solid #fff; width = 20%}

написать что-то вроде:

.t2 {style="t1"; width=20% }

Читал спецификацию по CSS2, так и не понял принципов наследования. Помогите кто-нибудь или дайте хотя бы ссылку на нормальную книжку про CSS!

user · October 22, 2008

.t1,.t2{ background-color: #e00; border: 1px solid #fff}
.t2{width=20%;}

Почему бы не так.

А переменных там нет.

retk213 · October 22, 2008

.t1,.t2{ background-color: #e00; border: 1px solid #fff}
.t2{width=20%;}
Почему бы не так.
А переменных там нет.

Понял, спасибо. Так все же лучше, чем дублировать одно и тоже.

rus · October 22, 2008

to Автор:

если вы хотели использовать именно наследование, то это будет выглядеть несколько иначе,

к примеру есть два дива (один в другом), у родительского дива класс t1 а у дочернего или дочерних,

вообще нет стилевого описания, то дочерние элементы будут наследовать от родителя.

Но можно и перелпредилить стиль для дочернего, будет выглядеть так:

.t1 .t2 {}

.t1 .t2 a {}

.t1 .t2 p {}

.t1 .t2 h1 {}

и т.д...

А то что User привел - это если у разных классов одинаковый стиль, но тогда какой смысл (если id то конечно есть смысл, ну или теги разные),

а если речь о теге див и о классе, то смысла в этой записи нет, можно им сразу всем .t1 если стиль одинаковый.

retk213 · October 23, 2008

to Автор:
если вы хотели использовать именно наследование, то это будет выглядеть несколько иначе,
к примеру есть два дива (один в другом), у родительского дива класс t1 а у дочернего или дочерних,
вообще нет стилевого описания, то дочерние элементы будут наследовать от родителя.
Но можно и перелпредилить стиль для дочернего, будет выглядеть так:
.t1 .t2 {}
.t1 .t2 a {}
.t1 .t2 p {}
.t1 .t2 h1 {}
и т.д...
А то что User привел - это если у разных классов одинаковый стиль, но тогда какой смысл (если id то конечно есть смысл, ну или теги разные),
а если речь о теге див и о классе, то смысла в этой записи нет, можно им сразу всем .t1 если стиль одинаковый.

Честно говоря, недопонял. Т.е. как правильно написать код?

<style type="text/css">
  .t1 { background-color: #e00; border: 1px solid #fff}
  .t2.t1 {width: 20px}
  .t3.t1 {width: 50px}
  .t4.t1 {width:100px}
</style>

</head>
<body>

<table>
  <tr>
	<td class = "t2"> </td>
	<td class = "t3"> </td>
	<td class = "t4"> </td>
  </tr>
</table>

</body>

user · October 23, 2008

<style type="text/css">
.t1 { background-color: #e00; border: 1px solid #fff}
.t2.t1 {width: 20px}
.t3.t1 {width: 50px}
.t4.t1 {width:100px}
</style>

Это неправильно,правильно будет вот так.

<style type="text/css">
.t1,.t2,.t3,.t4{background-color: #e00; border: 1px solid #fff}
.t2{width: 20px}
.t3{width: 50px}
.t4{width:100px}
</style>

А еще лучше так.

<style type="text/css">
.t1 td{background-color:#e00;border:1px solid #fff;}
.t2{width:20px;}
.t3{width:50px;}
.t4{width:100px;}
</style>
<body>
<table>
<tr class="t1">
	<td class = "t2"> </td>
	<td class = "t3"> </td>
	<td class = "t4"> </td>
</tr>
</table>
</body>

rus · October 23, 2008

Тут все просто:

#left_nav {
какието стили...
}
#left_nav li {
какието стили...
}
#left_nav LI a {
какието стили...
}
#left_nav LI a:hover {
какието стили...
}

Тут получается что есть один див с id #left_nav в него вложены такие теги как ul li a, для них идет переопределение, но,

если внутри этого дива будет скажем еще пара - тройка дивов, то тут надо будет делать вот так:

#left_nav #test1 {
какието стили...
}
#left_nav #test2 {
какието стили...
}
#left_nav #test3 {
какието стили...
}
#left_nav #test4 {
какието стили...
}

Если у дива с id #test1 2 3 4 есть еще какие то теги, то для них будет переопределение так:

#left_nav #test1 a {
какието стили...
}
#left_nav #test2 p {
какието стили...
}
#left_nav #test3 span {
какието стили...
}
#left_nav #test4  h1{
какието стили...
}

Хотя я видел и другой вариант записи, но не знаю на сколько это правильно:

#left_nav div {
какието стили...
}
#left_nav div div {
какието стили...
}
#left_nav div div div {
какието стили...
}
#left_nav div div div {
какието стили...
}

Это если они один вложен в другой по моему...

retk213 · October 29, 2008

Спасибо за ответы. Буду разбираться, хотя вариант от User все-таки попроще.

retk213 · October 30, 2008

Короче я понял, наконец, как это сделать для моего примера. Так правильно:

<style type="text/css">
  .t1 { background-color: #e00; border: 1px solid #fff}
  .t2 {width: 20px}
  .t3 {width: 50px}
  .t4 {width:100px}
</style>

</head>
<body>

<table>
  <tr>
	<td class = "t1 t2"> </td>
	<td class = "t1 t3"> </td>
	<td class = "t1 t4"> </td>
  </tr>
</table>

</body>

Anami · October 30, 2008

Ровно как и это правильно и коротко.

<style type="text/css">
  .t1 td { background-color: #e00; border: 1px solid #fff}
  .t2 {width: 20px}
  .t3 {width: 50px}
  .t4 {width:100px}
</style>

</head>
<body>

<table class = "t1">
  <tr>
	<td class = "t2"> </td>
	<td class = "t3"> </td>
	<td class = "t4"> </td>
  </tr>
</table>

</body>

Edited October 30, 2008 by Anami

rus · October 30, 2008

Автор, вы себе специально усложняете задачу? Или легких путей не ищешь?

retk213 · November 3, 2008

<td class = "t1 t2"> </td>
Автор, вы себе специально усложняете задачу? Или легких путей не ищешь?

Уважаемый Rus, если не трудно, не могли бы Вы просто показать как это сделать можно проще на конкретном примере (в том коде, что я привел)?

Просто я хотел бы все параметры таблицы (в том числе и ширину столбцов и их стиль) вынести в отдельный файл (*.css) и так, чтобы один и тот же стиль был написан один раз. Т.е. если я хочу изменить фон какой-то группы ячеек таблиц (условно говоря ячейки - "новости сайта") и, скажем, шрифт в них, то я хотел бы поменять только один параметр, а не менять стиль для каждой ячейки отдельно. Я привык, что в языках программирования для этих целей используются переменные, соответственно везде где значения одинаковые вместо конкретных значений подставляется значение переменной. Как оказалось в CSS все немного по-другому...

rus · November 3, 2008

Уважаемый Rus, если не трудно, не могли бы Вы просто показать как это сделать можно проще на конкретном примере (в том коде, что я привел)?

Мне не трудно, но просто выше все на столько уже разжевано, что стыдно задавать подобные вопросы.

Searcher · November 5, 2008

Такое впечатление, что вы не поняли суть цсс.

Собственно цсс и есть описание переменных. Класс - и есть переменная в которой хранится ряд значений. Не нужно создавать для каждой ячейки Вашей таблицы отдельный класс. Если параметры ячеек одинаковые, так и класс у них будет один и тот же. Опишите все, что касается ячейки в одном классе и присваивайте этот класс всем соответствующим ячейкам.

Sign In

Как в CSS2 задать что-то типа переменных (идентификаторов)?

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information