普遍CSS与HTML应用误区详解

2020-10-16 21:48 jianzhan

误区1.多div症 

<div class="nav">
    <ul>
       <li><a href="/home/">Home</a></li>
       <li><a href="/about/">About</a></li>
       <li><a href="/concact/">Concact</a></li>
    </ul>
</div>

上述应用应用过剩的div标识现况,就称为“多div症”,理当简化成下

<ul class="nav">
      <li><a href="/home/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/concact/">Concact</a></li>
</ul>

误区2.多类class症  留意点class能够运用于网页页面随意好几个元素,十分合适标志內容种类或别的类似的条目

1段新闻(新闻题目、新闻详细信息內容)

<h1 class="news-head">Elastic Layout Example—View Source for the HTML and CSS</h1>
<p class="news-head">Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

上述类名应用news-head与news-text 就称为"多类症"主要表现,不必须这么多的类区别元素款式

最好是应用div(division)意味着一部分而并不是沒有词义(大多数数人误会div无词义!!!),具体上div能够将文本文档区划为几个成心义的地区.

类名news从而鉴别全部新闻条目。随后可使用堆叠(cascade)款式鉴别新闻题目、文字,理当改动以下

<div class="news">
    <h1>Elastic Layout Example—View Source for the HTML and CSS</h1>
    <p>Lorem ipsum dolor sit amet.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>   

span 对行内元素开展排序或标志

<h2> Andy wins an Oscar for his cameo in Iron Man</h2>
<p>Public and on <span class="date">Februray 22nd, 2009</span>
    By <span class="author">Harry Knowles</span>
</p>

误区3.id应用误区 用于标志网页页面上特殊元素(例如站点导航栏、页眉、页脚)并且务必唯1; 还可以用来标志长久构造性元素(如主导航栏、內容地区)

/*很多的应用id,很难寻找唯1名字错乱*/
#andy, #rich, #jeremy, #james-box, #sophie {
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #ccc;
}
/*只需1个一般类取代它*/
.staff {
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #ccc;
}

用于标志网页页面上特殊元素(例如站点导航栏、页眉、页脚)并且务必唯1; 还可以用来标志长久构造性元素(如主导航栏、內容地区)

以上便是本文的所有內容,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,另外也期待多多适用脚本制作之家!