A我今天學到了什么
一.html的分類
分為：塊標簽，內聯標簽，內聯塊標簽
1.塊標簽
特點：獨占一行，能夠設置寬高
常用的塊標簽;div,h1-h6,p,ul,li,dl,dt,dd.
默認的display：block
2.內聯標簽
特點：并排顯示，不能設置寬高，不能設置margin-top，margin-bottom
常用的內聯標簽：a，span，em，strong
默認的display：inline
3.內聯塊標簽
特點：并排顯示，能設置寬高
常用的內聯塊標簽:img,button,input
默認的display：inline-block
二.讓內聯元素和內聯塊元素水平居中的兩種方法
1.將display改為block，在設置margin-left:auto;
margin-right:auto;
列： <title></title>
<style>
button{display: block;margin-left: auto;margin-right: auto;}
</style>
</head>
<body>
<button>百度一下</button>
</body>
2.在父級前加text-align：center
列： <title></title>
<style>
body{text-align: center}
</style>
</head>
<body>
<button>百度一下</button>
</body>
三.css選擇器
1.css元素選擇器
列;p{color: #01aef0}
2.class選擇器
列：.one{color: #01aef0}
3.id選擇器
列：#one{color: #01aef0}
4.分組選擇器
列： <title></title>
<style>
p,h1{color: red}
</style>
</head>
<body>
<p>我是段落標簽</p>
<h1>222</h1>
</body>
5.后代選擇器
列1： <title></title>
<style>
div>h1{color: red}
</style>
</head>
<body>
<div>
<p>121
<h2>222</h2></p>
<h2>333</h2>
<h1>222
<h2>6666</h2></h1>
</div>
</body> (其中變顏色的是h1，其余不變。)
列2： <title></title>
<style>
div h2{color: red}
</style>
</head>
<body>
<div>
<p>121
<h2>222</h2></p>
<h3>333</h3>
<h1>222
<h2>6666</h2></h1>
</div>
</body> (其中變顏色的是所有h2標簽)
6.兄弟選擇器
列1： <title></title>
<style>
div+p{color: red}
</style>
</head>
<body>
<div>111</div>
<p>121
<h2>222</h2></p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
</body> [其中變顏色的是靠近div的第一個p標簽{要是同等級的}]
列2： <style>
div~p{color: red}
</style>
</head>
<body>
<div>111</div>
<p>121
<h2>222</h2></p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
</body> [其中變顏色的是div以下的所有p標簽{要是同等級的}]
7.偽類選擇器
列1： <style>
p:hover{color: red}
</style>
</head>
<body>
<p>121
</body>
列2： <title></title>
<style>
input:focus{color: red;background-color: red}
</style>
</head>
<body>
<input type="text"/>
</body>
8.偽元素
列1： <title></title>
<style>
p:before{content:"233"}
</style>
</head>
<body>
<p>我是段落標簽</p>
</body>
列2： <title></title>
<style>
p:before{content:"233"}
</style>
</head>
<body>
<p>我是段落標簽</p>
</body>
9.屬性選擇
列： <title></title>
<style>
p[class="box"]{color: red}
</style>
</head>
<body>
<p class="box">2122</p>
<h1 class="box">333</h1>
</body> 其中變顏色的是p標簽
10.選擇器的優先級排序
元素選擇器<class選擇器<ID選擇器<!important
b我今天掌握了什么
一.html的分類
分為：塊標簽，內聯標簽，內聯塊標簽
1.塊標簽
特點：獨占一行，能夠設置寬高
常用的塊標簽;div,h1-h6,p,ul,li,dl,dt,dd.
默認的display：block
2.內聯標簽
特點：并排顯示，不能設置寬高，不能設置margin-top，margin-bottom
常用的內聯標簽：a，span，em，strong
默認的display：inline
3.內聯塊標簽
特點：并排顯示，能設置寬高
常用的內聯塊標簽:img,button,input
默認的display：inline-block
二.讓內聯元素和內聯塊元素水平居中的兩種方法
1.將display改為block，在設置margin-left:auto;
margin-right:auto;
列： <title></title>
<style>
button{display: block;margin-left: auto;margin-right: auto;}
</style>
</head>
<body>
<button>百度一下</button>
</body>
2.在父級前加text-align：center
列： <title></title>
<style>
body{text-align: center}
</style>
</head>
<body>
<button>百度一下</button>
</body>
三.css選擇器
1.css元素選擇器
列;p{color: #01aef0}
2.class選擇器
列：.one{color: #01aef0}
3.id選擇器
列：#one{color: #01aef0}
4.分組選擇器
列： <title></title>
<style>
p,h1{color: red}
</style>
</head>
<body>
<p>我是段落標簽</p>
<h1>222</h1>
</body>
5.后代選擇器
列1： <title></title>
<style>
div>h1{color: red}
</style>
</head>
<body>
<div>
<p>121
<h2>222</h2></p>
<h2>333</h2>
<h1>222
<h2>6666</h2></h1>
</div>
</body> (其中變顏色的是h1，其余不變。)
列2： <title></title>
<style>
div h2{color: red}
</style>
</head>
<body>
<div>
<p>121
<h2>222</h2></p>
<h3>333</h3>
<h1>222
<h2>6666</h2></h1>
</div>
</body> (其中變顏色的是所有h2標簽)
6.兄弟選擇器
列1： <title></title>
<style>
div+p{color: red}
</style>
</head>
<body>
<div>111</div>
<p>121
<h2>222</h2></p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
</body> [其中變顏色的是靠近div的第一個p標簽{要是同等級的}]
列2： <style>
div~p{color: red}
</style>
</head>
<body>
<div>111</div>
<p>121
<h2>222</h2></p>
<p>333</p>
<p>333</p>
<p>333</p>
<p>333</p>
</body> [其中變顏色的是div以下的所有p標簽{要是同等級的}]
7.偽類選擇器
列1： <style>
p:hover{color: red}
</style>
</head>
<body>
<p>121
</body>
列2： <title></title>
<style>
input:focus{color: red;background-color: red}
</style>
</head>
<body>
<input type="text"/>
</body>
8.偽元素
列1： <title></title>
<style>
p:before{content:"233"}
</style>
</head>
<body>
<p>我是段落標簽</p>
</body>
列2： <title></title>
<style>
p:before{content:"233"}
</style>
</head>
<body>
<p>我是段落標簽</p>
</body>
9.屬性選擇
列： <title></title>
<style>
p[class="box"]{color: red}
</style>
</head>
<body>
<p class="box">2122</p>
<h1 class="box">333</h1>
</body> 其中變顏色的是p標簽
10.選擇器的優先級排序
元素選擇器<class選擇器<ID選擇器<!important
c今天我沒掌握的
沒有
