Как избежать дублирования стилей в CSS - PullRequest
Новая
       1

Как избежать дублирования стилей в CSS

5 голосов
/ 15 августа 2010

Я пытаюсь научить себя CSS и имею следующую разметку: 

<style type="text/css">
#content { display: block; width: 250px; height: 50px; background-color: #330000; }

/* pink */
#one { height: 25px; width: 25px; background-color: #FFCCCC; float: left; margin: 10px; }
/* hot pink */
#two { height: 25px; width: 25px; background-color: #FF0099; float: left; margin: 10px; }
/* tan */
#three { height: 25px; width: 25px; background-color: #CC9900; float: left; margin: 10px; }
/* aqua blue */
#four { height: 25px; width: 25px; background-color: #33FFFF; float: left; margin: 10px; }
/* yellow */
#five { height: 25px; width: 25px; background-color: #FFFF00; float: right; margin: 10px; }

</style>
</head>
<body>

<div id="content">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <div id="five"></div>
</div>

Страница работает правильно, но я заинтересован в удалении дублирующегося кода внутри самого CSS. То есть иметь все height, width, float all в одном определении, затем переопределить цвет фона для каждого из значений #id

Когда я пытался: 

#content { height: 25px; width: 25px; float: left; margin: 10px }

затем положить: 

#one { background-color: #FFCCCC; }
#five { background-color: #FFFF00; float: right; }

это не сработало.

В основном я пытаюсь удалить количество дублирующейся разметки.

Чего мне не хватает?

Ответы [ 7 ]

4 голосов
/ 15 августа 2010

Вы должны указать узел после #content: 

#content div { SAME RULES }
#one { INDIVIDUAL }
#five { INDIVIDUAL }

или вы можете сделать это: 

#one, #two, #five { SAME RULES }
#one { INDIVIDUAL }

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

.divs { SAME RULES }
#one { INDIVIDUAL }
3 голосов
/ 15 августа 2010

Вы хотите: 

#content div {

т.е. "Все элементы div, которые происходят от элемента с идентификатором 'content'"

Я рекомендую прочитать http://css.maxdesign.com.au/selectutorial/.

1 голос
/ 15 августа 2010

Вы можете использовать классы. Определите базовый класс, который содержит общие свойства: 

/* Generic class for all four elements */
div.button {  height: 25px; width: 25px; float: left; margin: 10px; }

и затем определите 1-4 (здесь я также использую классы, так как во многих случаях это лучший метод, но вы можете продолжить использовать идентификаторы, если хотите): 

div.one { background-color: #FFCCCC; ... }
div.two { background-color: #FF0099; ... }

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

 <div id="one" class="button one"></div>

часть "кнопка одна" позволит свойствам обоих классов применяться к элементу.

0 голосов
/ 15 августа 2010

У вас есть два варианта, первый - использовать родительский контейнер (в данном случае div #content), чтобы установить атрибуты по умолчанию для каждого из его вложенных div, для этого вы можете использовать код, подобный этому: 

#content div {
repeat-attributes-here;
}

Это установит атрибуты для каждого div внутри # content.

Второй вариант - использовать классы для определения общих атрибутов. Преимущество этого заключается в том, что у вас все еще могут быть другие элементы div с другими параметрами стиля (если вы добавляете что-то новое, если вам не нужны повторяющиеся функции.

Для этого вам нужно сделать следующее: 

#one {
unique-functionality-here
}

.layout-block {
repeat functionality here
}

Затем определите div в CSS следующим образом: 

<div id="one" class="layout-block"></div>

Надеюсь, это поможет!

0 голосов
/ 15 августа 2010

Здесь вы можете использовать классы. Идентификаторы отлично подходят для случаев, когда у вас есть определенный элемент, который уникален для страницы. Но классы, вы можете определить набор атрибутов (даже установить атрибут более важный, чем другой). Furthormore, элемент может иметь более одного класса, где они не могут идентификаторы

Итак, что бы я сделал, это 

#pink { background-color: #FFCCCC; }
#hotpink { background-color: #FF0099; }
#tan{ background-color: #CC9900; }
#aquablue { background-color: #33FFFF; }
#yellow { background-color: #FFFF00; }

.box {
  height: 25px;
  width: 25px;
  float: left;
  margin: 10px;
}

И укажите их в своем HTML, как это 

<div id='pink' class='box'></div>

Мне больше нравится эта версия, потому что если вам когда-нибудь понадобится явно выбрать этот элемент в DOM, он будет выглядеть как 

#pink.box {
   height: a different height;
}
0 голосов
/ 15 августа 2010

Вот, пожалуйста, #content div - это то, что вы хотите. Вы можете пойти глубже, если вам нужно, то есть #content div span a будет ссылаться на якорь, вложенный в промежуток, вложенный в div, вложенный во что-то с идентификатором # content.

http://jsfiddle.net/eDhXs/

#content { display: block; width: 250px; height: 50px; background-color: #330000; }

#content div { height: 25px; width: 25px; float: left; margin: 10px; }
/* pink */
#one { background-color: #FFCCCC; }
/* hot pink */
#two { background-color: #FF0099; }
/* tan */
#three {background-color: #CC9900; }
/* aqua blue */
#four { background-color: #33FFFF; }
/* yellow */
#five { background-color: #FFFF00; }
0 голосов
/ 15 августа 2010

На самом деле есть три альтернативных решения вашей проблемы

Первое решение

Первое очень близко к тому, что вы написали самостоятельно, за исключением того, что оно должно определять CSS для любого DIVпод одним с id="content": 

#content div { height: 25px; width: 25px; float: left; margin: 10px }

Второе решение

Я должен отметить, что это, вероятно, более распространено и дает больше гибкости, особенно если вы хотите, чтобы subDIV не имели общегоклассы (в вашем случае проклейка).Это немного меняет вашу разметку, потому что вы можете определить несколько CSS-классов для одного HTML-элемента: 

<div>
    <div class="content one"></div>
    <div class="content two"></div>
    <div class="content three"></div>
    <div class="content four"></div>
    <div class="content five"></div>
</div>

Таким образом, ваши CSS-классы немного изменяются.Вы должны заменить # на . (точка): 

.content { height: 25px; width: 25px; float: left; margin: 10px }
.one { background-color: #FFCCCC; }
...
.five { background-color: #FFFF00; float: right; }

Третье решение

Это очень похоже на второе, за исключением того, что оно сохраняет идентификаторыsub DIVs: 

<div>
    <div id="one" class="content"></div>
    <div id="two" class="content"></div>
    <div id="three" class="content"></div>
    <div id="four" class="content"></div>
    <div id="five" class="content"></div>
</div>

И CSS: 

.content { height: 25px; width: 25px; float: left; margin: 10px }
#one { background-color: #FFCCCC; }
...
#five { background-color: #FFFF00; float: right; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...