day02
2017-08-22 本文已影响0人
孔子曰_f425
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今天我没掌握的
没有
