html文档结构及元素样式定义

html文档结构

<html>
<head>
<meta charset='UTF-8'>
<title>网页文档标题</title>
</head>
<body>
    网页内容
</body>
</html>

html元素的三大通用属性

id相当于身份证，用来唯一标示网页元素
class相当于标签的类属性，用于元素分类
style属性是用来描述元素样式

例子:

<h1 id="abc" class="ab" style="color:red;">example</h1>

元素，类，id不同级别的样式规则

id 用#来定义样式,例如:

<style>
    #example{
         background-color: blue;
    }
</style>
<div id="example">示例</div>

类class 用.来定义样式,例如:

<style>
   .example{
         background-color: blue;
    }
</style>
<div class="example">示例</div>

元素用标签来定义样式,例如:

<style>
    p{
         background-color: red;
    }
</style>
<p>示例</p>

样式优先级style>id>class ，内联式css样式表,优先级最高的样式表，会覆盖元素，类，id中相同的样式,下例中内联样式的绿色背景色会覆盖id,class中定义的背景色

<style>
   #example{
         background-color: blue;
    }
     .example{
         background-color: yellow;
    }
    p{
         background-color: red;
    }
</style>
<p id="example" class="example"  style="background-color: green;">示例</p>

html文档结构

html元素的三大通用属性

元素，类，id不同级别的样式规则

相关文章