下面是看了林海峰老师的视频的学习笔记来与大家分享
一、 伪类选择器
伪类选择器这里主要是为大家介绍a标签与input标签的CSS样式，下面用简单的案例加注解为大家介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{
color: #f6c4d7;/*访问之前的状态*/
}
a:hover{
color: #2b99ff;/*鼠标悬浮态*/
}
a:active{
color: #0000cc;/*鼠标点击不松开的状态 激活态*/
}
a:visited{
color: #626675;/*访问之后的状态*/
}
input:focus{/*input框获取焦点（鼠标点了input框）*/
background: #fe6676;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<input type="text">
</body>
</html>二、伪元素选择器
伪元素选择器的内容比较少，下面用代码加图为大家介绍
1、first-letter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-letter{/*第一个文字*/
font-size: 48px;
color: orange;
}
</style>
</head>
<body>
<p>装备差进任何本都是血赚</p>
</body>
</html>
2、before与after通常都是用来清除浮动带来的影响：父标签塌陷的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:before{/*在文本开头用css添加内容，这个内容选不中*/
content: '你说的对';
color: #fe6676;
}
p:after{/*在文本末尾用css添加内容，这个内容选不中*/
content: '?';
color: #2b99ff;
}
/*before与after通常都是用来清除浮动带来的影响：父标签塌陷的问题*/
</style>
</head>
<body>
<p>装备差进任何本都是血赚</p>
</body>
</html>
三、选择器优先级
下面用案例加注释的方式来为大家简单介绍它们的优先级顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <link rel="stylesheet" href="选择器优先级需要的css.css">/*html从上往下运行，先运行了这里面css的样式效果p变为蓝色*/-->
<style>
/*
1、选择器相同 书写顺序不同(html是从上往下依次运行的)
就近原则，谁离标签更近就听谁的
2、选择器不同
行内>id选择器>类选择器>标签选择器
精确度越高越有效
*/
#d1{
color: blue;
}
.c1{
color: pink;
}
p{/*html从上往下运行，运行到此处p变为红色*/
color: red;
}
</style>
</head>
<body>
<!--第一种情形-->
<!--<!–最后显示的是行内式的效果–>-->
<!--<p style="color: #222222">tz最棒！！！！</p>-->
<!--第一种情形-->
<!--第二种情形-->
<p id="d1" class="c1" style="color: black">tz最棒！！！！</p>
<!--第二种情形-->
</body>
</html>需要的css样式文件
p{
color: #2b99ff;
}总结：
行内>id选择器>类选择器>标签选择器
四、分组与嵌套
1、分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
如：
div, p { color: red; }
2、嵌套
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。
如：
.c1 p { color: red; }
下面接着用案例的模式为大家简单介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,p,span{/*逗号表示并列关系*/
color: #f6c4d7;
}
#d1,.c1,span{/*也是并列关系*/
color: #f6c4d7;
}
#d1 .c2 span{/*id="d1"下class="c2"下的所有span标签*/
color: #2b99ff;
}
</style>
</head>
<body>
<div id="d1">div
<p class="c2">div>p
<span id="d3">div>p>span1</span>
<span id="d4">div>p>span2</span>
</p>
<p class="c3">
hahahha
</p>
</div>
<p class="c1">p</p>
<span>span</span>
</body>
</html>五、基本属性介绍（下面基本都是以案例+注解的方式为大家介绍）
1、字体属性即文本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*字体属性*/
/*p{!*如果浏览器不支持第一个字体，则会尝试下一个*!*/
/* font-family: arial, 'Microsoft Yahei', '微软雅黑','....';*/
/*font-size: 24px;!*字体大小*!*/
/*font-weight: bolder;!*字重（粗细）bolder更粗 lighter更细 100~900设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值*!*/
/*文本颜色*/
/*color: pink;!*直接写颜色英文*!*/
/*color: #0000cc;!*颜色编号*!*/
/*color: rgb(20,20,20);!*三原色 数字 范围都是0-255*!*/
/*color: rgba(20,20,20,0.2);!*第四个参数是颜色的透明度 范围0-1*!*/
/*}*/
/*文本属性*/
p{
/*text-align: center;!*居中*!*/
/*text-align: right;!*右对齐*!*/
/*text-align: left;!*左对齐*!*/
/*text-align: justify;!*两端对齐*!*/
/*text-decoration: underline;!*下划线*!*/
/*text-decoration: overline;!*上划线*!*/
/*text-decoration: line-through;!*删除线*!*/
/*text-decoration: none;*/
font-size: 16px;
text-indent: 32px;/*首行缩进32px*/
}
/*a{*/
/* text-decoration: none;!*主要用于给a标签去掉自带下划线*!*/
/*}*/
</style>
</head>
<body>
<!--<p>哈哈哈哈哈哈哈哈哈,你过来呀？</p>-->
<!--<a href="#">点我</a>-->
<p>嘿！你看外面，过不了多久阳光就会出来了，风雨都会停止，所有不好的东西都会变得美好起来，你也是。</p>
</body>
</html>注意：font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
font-weight用来设置字体的字重（粗细）。
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
text-align 属性规定元素中的文本的水平对齐方式。
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
text-decoration 属性用来给文字添加特殊效果。
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
2、长宽属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background: pink;
height: 200px;
width: 400px;
}
span{
background: orange;
height: 200px;
width: 400px;
}
/*行内标签无法设置长宽，就算写了也不会生效*/
</style>
</head>
<body>
<p>pp</p>
<span>span</span>
</body>
</html>3、边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
p{
background-color: pink;
border-width: 5px;
border-style: solid;
border-color: #7a77c8;
}
div{
/*border-left-width:5px ;*/
/*border-left-style: solid;*/
/*border-left-color:blueviolet ;*/
/*border-right-width:10px ;*/
/*border-right-style:dotted;*/
/*border-right-color:plum ;*/
/*border-top-width:15px ;*/
/*border-top-style: dashed;*/
/*border-top-color:yellowgreen ;*/
/*border-bottom-width:20px ;*/
/*border-bottom-style:solid;*/
/*border-bottom-color:blanchedalmond ;*/
border:solid plum 5px;/*可简写*/
}
#d1{/*画圆*/
background: #f6c4d7;
height: 200px;
width: 200px;
border-radius: 50%;/*直接写50% 长宽一致就是圆，不一致就是椭圆*/
}
</style>
<body>
<p>加油 努力 积极向上！！！！！</p>
<div>hahahahahahha,你打不过我吧？，没有想到我会这强大！！！！</div>
<div id="d1"></div>
</body>
</html>边框样式
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
4、背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
p{
background-color: pink;
border-width: 5px;
border-style: solid;
border-color: #7a77c8;
}
div{
/*border-left-width:5px ;*/
/*border-left-style: solid;*/
/*border-left-color:blueviolet ;*/
/*border-right-width:10px ;*/
/*border-right-style:dotted;*/
/*border-right-color:plum ;*/
/*border-top-width:15px ;*/
/*border-top-style: dashed;*/
/*border-top-color:yellowgreen ;*/
/*border-bottom-width:20px ;*/
/*border-bottom-style:solid;*/
/*border-bottom-color:blanchedalmond ;*/
border:solid plum 5px;/*可简写*/
}
#d1{/*画圆*/
background: #f6c4d7;
height: 200px;
width: 200px;
border-radius: 50%;/*直接写50% 长宽一致就是圆，不一致就是椭圆*/
}
</style>
<body>
<p>加油 努力 积极向上！！！！！</p>
<div>hahahahahahha,你打不过我吧？，没有想到我会这强大！！！！</div>
<div id="d1"></div>
</body>
</html>5、display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*#d1{*/
/* !*display: none;!*隐藏标签不展示到前端页面上并且原来的位置也不占有了，但是还是存在于文档上*!*!*/
/* !*display: inline;!*将标签设置为行内标签的特点*!*!*/
/* display: block;!*将标签设置为块儿标签的特点*!*/
/*}*/
/*#d2{*/
/* !*display: inline;*!*/
/* display: block;*/
/*}*/
/*#d1{*/
/* !*display: inline-block;!*将标签设置成块儿级标签的特点*!*!*/
/*}*/
#d1{
display: inline-block;
}
#d2{
display: inline-block;/*标签即可以在一行显示又可以设置长宽*/
}
</style>
</head>
<body>
<!--<div id="d1" style="height: 100px;width: 100px;background-color:plum ">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color:hotpink ">02</div>-->
<!--<span id="d1" style="height: 100px;width: 100px;background-color:plum ">-->
<!-- span-->
<!--</span>-->
<!--<span id="d2" style="height: 100px;width: 100px;background-color:hotpink ">-->
<!-- span-->
<!--</span>-->
<!--<div id="d1" style="height: 100px; width: 100px; background-color: #7a77c8"></div>-->
<!--<div id="d2" style="height: 100px; width: 100px; background-color: blueviolet"></div>-->
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility: hidden">div3</div>/*单纯的隐藏，位置还在*/
<div>div4</div>
</body>
</html>display属性
用于控制HTML元素的显示效果。
| 值 | 意义 |
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
注意：
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
5、盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;/*上下左右全为零*/
/*margin: 10px 20px;!*第一个上下 第二个左右*!*/
/*margin: 10px 20px 30px;!*第一个上 第二个左右 第三个下*!*/
/*margin: 10px 20px 30px 40px;!*上 右 下 左*!*/
}
#d1{
margin-bottom: 20px;
}
#d2{
margin-top: 50px;/*不叠加，只取大的*/
}
#dd{
margin: 0px auto;/*只能做到标签的水平居中*/
}
p{
border: 2px solid plum;
/*padding: 10px;*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px;*/
/*padding: 10px 20px 30px 40px;*//*规律和margin一模一样*/
background: ;
}
</style>
</head>
<body>
<!--<p style="border: solid 2px rebeccapurple" id="d1">pp</p>-->
<!--<p style="border: solid 2px orange" id="d2">pp</p>-->
<!--<div style="border: blueviolet solid 2px; width: 400px;height: 400px">-->
<!--<div id="dd" style="border: blue solid 1px;width: 50px;height: 50px;background-color: #2b99ff;margin-top: 50px">-->
<p>pp</p>
</div>
</div>
</body>
</html>| margin: | 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 |
| padding: | 用于控制内容与边框之间的距离； |
| Border(边框): | 围绕在内边距和内容外的边框。 |
| Content(内容): | 盒子的内容，显示文本和图像。 |
6、浮动
在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
1、浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2、由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值
left：向左浮动
right：向右浮动
none：默认值，不浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
#d1{
height: 200px;
width: 200px;
background-color: purple;
float: left;/*浮动 移到空中往左飘*/
}
#d2{
height: 200px;
width: 200px;
background-color: orange;
float:right;/*浮动 移到空中往右飘*/
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>效果展示：
5873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
