一、基础知识
CSS的层叠性、继承性、重要性
层叠性:多个样式的情况下,最后面的样式被应用。
继承性:子标签继承父标签的属性
重要性:!important拥有最高权值
CSS的优先级
内联样式(权值为1000)> id选择器(权值100)(表示为#)> class选择器(权值10)(表示为.) > html标签选择器(权值1)> *权值0
块级元素和行内元素
块级元素
<!-- 块级元素 --> <h3>3级标题</h3> <p>段落</p> <div id="id"> div </div> <div id="id"> div </div> <ul> <li>li</li> </ul>
行内元素
<!-- 行内元素 --> <a href="">百度</a> <a href="">百度</a> <a href="">百度</a> <span>span</span>
行内元素设置宽高不起作用,需要变块级元素
a{ /* 行内元素变块级元素,行内元素设置宽高不起作用 */ display: block; }
行内块,既能在一行,又能设置宽高
div{ /* 行内块,既能在一行,又能设置宽高 */ display: inline-block; background-color: #0000FF; width: 200px; height: 50px; /* 在中间 */ text-align: center; }
盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
/* 外边距 */
margin: 0px;
/* 内边距 */
padding: 0;
}
div{
background-color: #ccc;
width: 300px;
height: 100px;
/* 上右下左 */
margin: 50px 30px 20px 10px;
/* 上下50,左右30 */
margin: 50px 30px;
/* 1像素实线红色边框,没有顺序 */
border: 1px solid red;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<div id="id">
div
</div>
</body>
</html>
盒子居中:
margin:上下 auto
上下按需设置,左右auto
左右居中
text-align: center;
上下居中
/* 上下居中 把height和line-height相同*/ line-height: 50px;
去掉li前面会显示的点
li{ /* 去掉list的点 */ list-style: none; }
去掉链接a的下划线
a{ /* 去掉a的下划线 */ text-decoration:none; /* 链接显示的字是黑色 */ color: black; }
二、作业:鼠标焦点效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li:nth-child(2n+1){
background-color: #CCCCCC;
}
li:nth-child(2n){
background-color: #F0F8FF;
}
li:hover{
background-color: #7FFFD4;
color: aliceblue;
}
li{
/* display: block; */
width: 200px;
height: 50px;
text-align: center;
margin-top: 25px;
/* 上下居中 把height和line-height相同*/
line-height: 50px;
/* 去掉list的点 */
list-style: none;
}
a{
/* 去掉a的下划线 */
text-decoration:none;
/* 链接显示的字是黑色 */
color: black;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</div>
</body>
</html>