将此转换为css样式表

我在css样式表语法上有些遗憾。我的困境是，我有四个<div>标签与ROUGHLY相同的风格，除了颜色不同或可能float: left但其他标签可能没有。将此转换为css样式表

所以我想我可以将id添加到所有这些，以便我可以将这些样式语句移动到样式表中。

我将如何解决样式表中的每个单独的ID？我在想像div#id什么的。假设基本div已经不可用，但我想要一些抽象样式表标签，它至少包含display:block和font-size:11px，然后是一个更具体的样式表标签，通过其标识或类或名称来标识每个<div>标签。

<div style="display:block; color:steelblue; float:left; font-size:11px;">Open Requests&nbsp;</div> 
<div id="openNumber" style="display:block; color:steelblue; font-size:11px; clear:right;">13</div> 

<div style="display:block; color:green; float:left; font-size:11px;">Completed Requests&nbsp;</div> 
<div id="completeNumber" style="display:block; color:green; float:left; font-size:11px;">13</div>

我得到一点点关于语法的不同类型的选择

感谢任何见解

来源

2013-01-15 CQM

'id'必须是唯一的（应该不会在你的html代码中是两个具有相同id的元素）所以大多数情况下，你不需要样式表中的'div＃id''＃id'是足够的，并且允许您稍后使用另一个标签而不是'div'，而无需更改样式表。 –

你可以尝试以下方法：

CSS：

.floatLeft { float: left; } 
.clearRight { clear: right; } 
.open { color: steelblue; font-size: 11px; } 
.complete { color: green; font-size: 11px; }

HTML：

<div id="openRequests" class="open floatLeft">Open Requests&nbsp;</div> 
<div id="openNumber" class="open clearRight">13</div> 

<div id="completeRequests" class="complete floatLeft">Completed Requests&nbsp;</div> 
<div id="completeNumber" class="complete floatLeft">13</div>

一个<div>已经是一个块级元素，所以你并不需要它指定display: block。

来源

2013-01-15 16:41:37 boz

我没意识到你可以像这样连锁类 – CQM

这是一个CSS的有用功能 - 我发现自己经常使用它:) – boz

您可以创建一个类.numbers转头（或什么最能描述你的div群）举行共享样式，并将该类添加到相关的div中。然后，针对个人div与他们的id来调整颜色。

像这样的东西可能会有所帮助：

CSS

.numbers { 
/* shared styles */ 
} 

#one { 
/* unique styles */ 
} 

#two { 

/* unique styles */ 
} 

#three { 

/* unique styles */ 
}

整理您的风格，在语义和有意义的方式，可以是具有挑战性的，但你节省维护你的代码的时间是非常值得它。有关如何做到这一点的更好的总结，您可以阅读this文章。

来源

2013-01-15 16:37:34

您可以使用一个类的相似性，和一个id的差异。

<div class="common" id="some-id"><!-- ... --></div>

CSS：

.common { 
    display: block; 
    float: left; 
    font-size: 11px; 
} 

#completeNumber { 
    color: green  
}

来源

2013-01-15 16:40:07

因为ID的必须是唯一的，你可以一个ID添加到这些，然后使用：

#openRegistration{display:block; color:steelblue; float:left; font-size:11px;} 
#openNumber{display:block; color:steelblue; font-size:11px; clear:right;} 
#completedRequests{display:block; color:green; float:left; font-size:11px;} 
#completeNumber{display:block; color:green; float:left; font-size:11px;}

NOW，鉴于以上，我们可以简化为：

#openRegistration,#openNumber,#completedRequests,#completeNumber{display:block;font-size:11px;} 
#openRegistration{ color:steelblue; float:left; } 
#openNumber{color:steelblue; clear:right;} 
#completedRequests{ color:green; float:left;} 
#completeNumber{ color:green; float:left; }

，或者如果你希望，给他们一个类，并使用：

.myClass{display:block;font-size:11px;} 
#openRegistration{ color:steelblue; float:left; } 
#openNumber{color:steelblue; clear:right;} 
#completedRequests{ color:green; float:left;} 
#completeNumber{ color:green; float:left; }

编辑：或者如果你愿意，给他们一个以上的类和使用：

.myClass{display:block;font-size:11px;} 
.complete{ color:green;} 
.open{ color:steelblue;} 
#openRegistration{ float:left;} 
#openNumber{clear:right;} 
#completedRequests{ float:left;} 
#completeNumber{ float:left; } 


<div class="myClass complete" ...

来源

2013-01-15 16:40:47

您可以根据需要定义一些CSS类并将它们分配给您的元素。只是一个例子：

CSS：

.myDiv { 
    display: block; 
    font-size: 11px; 
} 

.left { float: left; } 
.clear-both { clear: both; } 
.steelblue { color: steelblue; } 
.green { color: green; }

HTML：

<div class="myDiv left steelblue">Open Requests&nbsp;</div> 
<div class="clear-both"></div> 
<div id="openNumber" class="myDiv steelblue">13</div> 

<div class="myDiv green left">Completed Requests&nbsp;</div> 
<div id="completeNumber" class="myDiv green left">13</div>

这样你可以单独的课程和使用它们只有当你真正需要它。

来源

2013-01-15 16:43:26 Ragnarokkr

我会用多个类将silimar样式组合在一起。尝试提取语义：

事情是这样的：

CSS：

.block11 { display:block; font-size:11px; } 
.left { float:left; } 
.clear-right { clear:right; } 
.steelblue { color: steelblue; } 
.green { color: green; }

HTML：

<div class="block11 steelblue left">Open Requests&nbsp;</div> 
<div class="block11 steelblue clear-right" id="openNumber">13</div> 

<div class="block11 green left">Completed Requests&nbsp;</div> 
<div class="block11 green left" id="completeNumber">13</div>

来源

2013-01-15 16:46:20

将此转换为css样式表

回答

相关问题