Наследовать CSS свойства - PullRequest
Новая
       9

Наследовать CSS свойства

7 голосов
/ 14 октября 2008

У меня есть только базовые знания о CSS, возможно ли наследовать свойство из одного стиля в другой. Так, например, я мог наследовать размер шрифта, указанный в моих настройках тега paragrah по умолчанию, в мои теги гиперссылки.

Причина, по которой я хочу это сделать, состоит в том, чтобы упростить поддержку нескольких стилей.

Ответы [ 5 ]

6 голосов
/ 14 октября 2008

Вы можете определить общие стили для двух элементов одновременно так: 

p, a {
    font-size: 1em;
}

А затем расширяйте каждый с их индивидуальными свойствами, как вы хотите: 

p {
   color: red;
}

a {
   font-weight: bold;
}

Имейте в виду: Стили, определенные позже в таблице стилей, обычно переопределяют свойства, определенные ранее.

Дополнительно: Если вы этого еще не сделали, я рекомендую получить расширение Firebug Firefox, чтобы вы могли видеть, какие стили получают элементы на вашей странице и откуда они наследуются .

2 голосов
/ 14 октября 2008

Нет CSS не имеет никакого способа наследовать стили. Но есть несколько способов поделиться стилями. Вот несколько примеров:

Использование нескольких классов 

<p class="first all">Some text</p>
<p class="all">More text</p>
<p class="last all">Yet more text</p>

p.all { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }

Используйте оператор запятой в ваших стилях 

<p class="first">Some text</p>
<p class="middle">More text</p>
<p class="last">Yet more text</p>

p.first, p.middle, p.last { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }

Использование элементов контейнера 

<div class="container">
  <p class="first">Some text</p>
  <p class="middle">More text</p>
  <p class="last">Yet more text</p>
</div>

div p { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }

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

Если вы хотите использовать серверный код для предварительной обработки вашего CSS, вы можете получить тот тип наследования CSS, который вы ищете.

1 голос
/ 14 октября 2008

Да.

Вы должны понимать, как работает каскад в CSS, а также понимать, как работает наследование. Некоторые стили будут наследовать (например, шрифт), а некоторые стили не будут (например, граница). Однако вы также можете указать стилям наследовать от своих родительских элементов в DOM.

Здесь вам помогут знания о том, как заданы правила стиля. Этот сайт о CSS Specifity Wars может помочь (Примечание: этот сайт в настоящее время не работает, но, надеюсь, скоро вернется).

Кроме того, иногда мне удается перегрузить стили, например: 

h1, h2, h3, h4, h5 h6 { font-weight: normal; border: 1px solid #ff0; }
h1 { font-size: 300%; }
... etc ...
0 голосов
/ 14 октября 2008

"... возможно ли наследовать свойство из одного стиля в другой стиль. Так, например, я мог наследовать размер шрифта, указанный в моих настройках тега paragrah по умолчанию, в теги гиперссылки."

Теги ссылок будут автоматически использовать шрифты из абзаца, если и только если они в пределах абзаца. Если они находятся за пределами абзаца (скажем, в списке), они не будут использовать один и тот же шрифт и т. Д.

Например, это css: 

* {
margin: 0 10px;
padding:0;
font-size: 1 em;
}
p, a { font-size: 75%; }

создаст ссылки и абзацы размером 0,75em. Но он будет отображать ссылки внутри абзацев на расстоянии примерно .56em (.75 ​​* .75).

В дополнение к справочнику по специфичности, на который ссылается Джонатан Аркелл, я рекомендую CSS Tutorial в W3Schools.

0 голосов
/ 14 октября 2008

CSS будет автоматически наследоваться от родительского стиля. Например, если вы говорите в своем стиле тела, что весь текст должен быть #EEE, а фон должен быть #000, тогда весь текст, будь то в div или span, всегда будет #EEE.

Было довольно много разговоров о добавлении наследования, как вы описываете в CSS3, но эта спецификация еще не вышла, поэтому сейчас мы застряли, повторяя себя совсем немного.

...