A我今天學(xué)到了什么
一.html的分類
分為：塊標(biāo)簽，內(nèi)聯(lián)標(biāo)簽，內(nèi)聯(lián)塊標(biāo)簽
1.塊標(biāo)簽
特點(diǎn)：獨(dú)占一行，能夠設(shè)置寬高
常用的塊標(biāo)簽;div,h1-h6,p,ul,li,dl,dt,dd.
默認(rèn)的display：block
2.內(nèi)聯(lián)標(biāo)簽
特點(diǎn)：并排顯示，不能設(shè)置寬高，不能設(shè)置margin-top，margin-bottom
常用的內(nèi)聯(lián)標(biāo)簽：a，span，em，strong
默認(rèn)的display：inline
3.內(nèi)聯(lián)塊標(biāo)簽
特點(diǎn)：并排顯示，能設(shè)置寬高
常用的內(nèi)聯(lián)塊標(biāo)簽:img,button,input
默認(rèn)的display：inline-block
二.讓內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居中的兩種方法
1.將display改為block，在設(shè)置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.在父級(jí)前加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>我是段落標(biāo)簽</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標(biāo)簽)
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的第一個(gè)p標(biāo)簽{要是同等級(jí)的}]
列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標(biāo)簽{要是同等級(jí)的}]
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>我是段落標(biāo)簽</p>
</body>
列2： <title></title>
<style>
p:before{content:"233"}
</style>
</head>
<body>
<p>我是段落標(biāo)簽</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標(biāo)簽
10.選擇器的優(yōu)先級(jí)排序
元素選擇器<class選擇器<ID選擇器<!important
b我今天掌握了什么
一.html的分類
分為：塊標(biāo)簽，內(nèi)聯(lián)標(biāo)簽，內(nèi)聯(lián)塊標(biāo)簽
1.塊標(biāo)簽
特點(diǎn)：獨(dú)占一行，能夠設(shè)置寬高
常用的塊標(biāo)簽;div,h1-h6,p,ul,li,dl,dt,dd.
默認(rèn)的display：block
2.內(nèi)聯(lián)標(biāo)簽
特點(diǎn)：并排顯示，不能設(shè)置寬高，不能設(shè)置margin-top，margin-bottom
常用的內(nèi)聯(lián)標(biāo)簽：a，span，em，strong
默認(rèn)的display：inline
3.內(nèi)聯(lián)塊標(biāo)簽
特點(diǎn)：并排顯示，能設(shè)置寬高
常用的內(nèi)聯(lián)塊標(biāo)簽:img,button,input
默認(rèn)的display：inline-block
二.讓內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居中的兩種方法
1.將display改為block，在設(shè)置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.在父級(jí)前加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>我是段落標(biāo)簽</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標(biāo)簽)
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的第一個(gè)p標(biāo)簽{要是同等級(jí)的}]
列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標(biāo)簽{要是同等級(jí)的}]
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>我是段落標(biāo)簽</p>
</body>
列2： <title></title>
<style>
p:before{content:"233"}
</style>
</head>
<body>
<p>我是段落標(biāo)簽</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標(biāo)簽
10.選擇器的優(yōu)先級(jí)排序
元素選擇器<class選擇器<ID選擇器<!important
c今天我沒掌握的
沒有
