gpt4 book ai didi

html - CSS 和父/子、继承属性语法和可能性

转载 作者:太空宇宙 更新时间:2023-11-03 22:02:11 25 4
gpt4 key购买 nike

我有这个,它可以做我想做的一切,但在我看来,有一种方法可以做到这一点,这样我就可以独立于所有其他相同的属性来控制 div 的高度。我只是无法通过搜索找到对我有意义的方法。

请注意,我学习 html 大约需要 3 天时间,因此如果这过于复杂,我将按照我理解的步骤进行学习。我了解样式表可以简化流程,因此似乎会有更简单的方法。

谢谢

<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>

最佳答案

我看到两个选项:

  1. 创建一个包含所有常用样式的单独规则,并应用于所有类,就像这样

    .rightline1, .rightline2 (...) .rightLine12 { /* all current rules here */ } 

    然后在必要时为单个类添加单独的规则。

  2. 另一个选项(对我来说更好):因为您可以为一个元素分配任意数量的类,只需为常用样式添加一个额外的类。示例:

    HTML:

    <p class="rightline rightline1">Lorem ipsum</p>

    CSS:

    .rightline { /* all current rules here */ } 
    .rightline1 { width: 200px; }

关于html - CSS 和父/子、继承属性语法和可能性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9639540/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com