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>

來源

2012-03-09 Michael Cole

我看到兩個選項：

創建了所有常見的樣式單獨的規則，並適用於所有的類，像這樣
```
.rightline1, .rightline2 (...) .rightLine12 { /* all current rules here */ } 
```
然後在必要時爲單個課程添加單獨的規則。
另一種選擇（對我來說更好）：因爲您可以將任意數量的類分配給元素，只需爲常用樣式添加額外的類即可。例如：

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

來源

2012-03-09 19:06:24 bfavaretto

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:07:49

是的，我很抱歉，我應該更好地澄清這個建立一個單元格的佈局，我要調整每個單元格單獨創建我需要的頁面佈局謝謝你的迴應 – 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共享樣式。因爲，除了浮動方向，它們是相同的。然後，我只是給他們各自的浮動方向。

編輯我更新了最後的例子有適當的縮進:)

來源

2012-03-09 19:11:12 Marshall

CSS和父母/孩子，繼承屬性的語法和可能性

回答

相關問題