CSS和父母/孩子，继承属性的语法和可能性

问题描述：

我有这个，它做我想要的一切，但在我看来，有一种方法可以做到这一点，以便我可以单独控制div的高度从所有其他相同的属性。我只是无法通过我的搜索找到一种对我有意义的方式。CSS和父母/孩子，继承属性的语法和可能性

注意我大约3天到html，所以如果这是复杂的，我会在我明白的步骤学习。我理解了样式表来简化这个过程，所以看起来会有一个更简单的方法。

感谢

<style type="text/css"> 
    body 
    { 

     width:1240px; 
     border:solid 1px black 
    } 

    .rightline1{float:right;width:618px;height:80px;border:solid 1px black;} 
    .rightline2{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline3{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline4{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline5{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline6{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline7{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline8{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline9{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline10{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline11{float:right;width:618px;height:20px;border:solid 1px black;} 
    .rightline12{float:right;width:618px;height:20px;border:solid 1px black;} 
    .leftline1{float:left;width:618px;height:80px;border:solid 1px black;} 
    .leftline2{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline3{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline4{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline5{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline6{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline7{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline8{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline9{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline10{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline11{float:left;width:618px;height:20px;border:solid 1px black;} 
    .leftline12{float:left;width:618px;height:20px;border:solid 1px black;} 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
    <div class="leftline1"></div> 
    <div class="rightline1"></div> 
    <div class="leftline2"></div> 
    <div class="rightline2"></div> 
    <div class="leftline3"></div> 
    <div class="rightline3"></div> 
    <div class="leftline4"></div> 
    <div class="rightline4"></div> 
    <div class="leftline5"></div> 
    <div class="rightline5"></div> 
    <div class="leftline6"></div> 
    <div class="rightline6"></div> 
    <div class="leftline7"></div> 
    <div class="rightline7"></div> 
    <div class="leftline8"></div> 
    <div class="rightline8"></div> 
    <div class="leftline9"></div> 
    <div class="rightline9"></div> 
    <div class="leftline10"></div> 
    <div class="rightline10"></div> 
    <div class="leftline11"></div> 
    <div class="rightline11"></div> 
    <div class="leftline12"></div> 
    <div class="rightline12"></div> 
</div> 
</form> 
</body>

答

我看到两个选项：

创建了所有常见的样式单独的规则，并适用于所有的类，像这样
```
.rightline1, .rightline2 (...) .rightLine12 { /* all current rules here */ } 
```
然后在必要时为单个课程添加单独的规则。
另一种选择（对我来说更好）：因为您可以将任意数量的类分配给元素，只需为常用样式添加额外的类即可。例如：

HTML：
```
<p class="rightline rightline1">Lorem ipsum</p> 
```
CSS：
```
.rightline { /* all current rules here */ } 
.rightline1 { width: 200px; } 
```

OK先谢谢大家了惊人的快速反应和第二，我不知道你可以分配多个类的元素。再次感谢您解答我所有的问题。 – 2012-03-09 19:08:23

答

可以不止一个HTML元素上重用CSS类。例如，这两个CSS类是完全一样的：

.rightline2{float:right;width:618px;height:20px;border:solid 1px black;} 
.rightline3{float:right;width:618px;height:20px;border:solid 1px black;}

所以这个类只能使用一次定义和使用，无论你需要它。（在两个div使用相同的CSS类）类的重用

例子：

<div class="rightline2"></div> 
<div class="rightline2"></div>

是的，我很抱歉，我应该更好地澄清这个建立一个单元格的布局，我要调整每个单元格单独创建我需要的页面布局谢谢你的回应 – 2012-03-09 19:11:53

答

首先，你可以写相同的CSS是这样的：

body { 
    width:1240px; 
    border:solid 1px black 
} 

.rightline1, .rightline2, .rightline3, .rightline4, .rightline5, .rightline6, .rightline7, .rightline8, .rightline9, .rightline10, .rightline11, .rightline12{ 
    float:right; 
    width:618px; 
    height:20px; 
    border:solid 1px black; 
} 
.leftline1, .leftline2, .leftline3, .leftline4, .leftline5, .leftline6, .leftline7, .leftline8, .leftline9, .leftline10, .leftline11, .leftline12 { 
    float:left; 
    width:618px; 
    height:20px; 
    border:solid 1px black; 
}

所以这是一个有点清洁。但是，这听起来像你想巩固所有这些右边和左边。所以这会更好：

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     body { 
      width:1240px; 
      border:solid 1px black 
     } 

     .rightline, .leftline { 
      width:618px; 
      height:20px; 
      border:solid 1px black; 
     } 

     .rightline { 
      float:right; 
     } 
     .leftline { 
      float:left; 
     } 
</style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
      <div class="leftline"></div> 
      <div class="rightline"></div> 
     </div> 
    </form> 
</body>

在你原来的代码中，你使用的类更像是Ids。如果你有类似<div id='abc'></div>的东西，那么这意味着页面上不会有（不应该是）任何其他元素，其ID为abc。 Ids是独一无二的。

另一方面，类用于标识元素组。所以不要给每一个独特的课程，而应该给他们类似的课程。在我的最后一个例子中，我给出.rightline和.leftline共享样式。因为，除了浮动方向，它们是相同的。然后，我只是给他们各自的浮动方向。

编辑我更新了最后的例子有适当的缩进:)

CSS和父母/孩子，继承属性的语法和可能性

相关推荐