CSS
1、用途：
用来定义HTML内容在浏览器内容的显示样式。(文字大小，颜色，字体加粗等)
2、构成：
CSS由选择符和声明组成，而声明又由属性和值组成。
例如：
p {
color:blue;
}
这里p就是选择符，大括号中的就是声明，color为属性，blue为值，属性和值之间用冒号分隔。
当有多条声明时用分号分隔，通常为了美观，我们一行写一个属性。
p {
font-size:12px;
color:red;
}
3、span的使用
span可以更改字体的颜色。
在使用span前要先在style中定义，
<head>
<style>
span {
color:red;
}
</style>
</head>
<body>
<span>这颜色是红塞的</span>
</body>
写在记事本上并且后缀换成html的时候，这时输出的字体是红色的。
4、CSS代码插入的形式
内联式：
<p style = "color:red;">这里文字是红色</p>
如果有多条CSS样式代码，就要用分号分隔。比如：
<p style="color:red;font-size:12px">这里文字是红色。</p>
嵌入式：
嵌入式就是第三点那样，在style中定义，在body中使用。不一定非要是body，在其它地方也可以使用。
外部式：
外部式也称为外联式，就是把CSS代码与HTML代码分开，单独写在一个外部文件中，这个外部文件是以css为扩展名。
在使用这个CSS时，只需要用<link>标签将CSS文件链接到HTML中，注意是链接到HTML中
例如：
这是以css为后缀名的文件
span{
color:red;
font-size:20px;
}
下面这是html文件,我们用<link>标签将css代码链接到这里,<link>标签一般放在<head>中,其中的rel="stylesheet" type="text/css"是固定写法。stylesheet就是定义一个外部加载的样式表。这里type就是说明这个引用进来的是个CSS样式。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>嵌入式css样式</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <span>超酷的互联网</span>、IT技术免费学习平台，创新>的网络 一站式学习、实践体验； <span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。 </body> </html>
5、三种插入形式的优先级
内联式<嵌入式<外部式
但在嵌入式<外部式 这里，嵌入式的定义必须放在外部式的后面，否则还是会输出外部式的格式。可以理解为后一个定义的把前一个定义的覆盖了。所以谁定义的迟就是谁的格式。
简单来说就是就近原则
6、选择器
每一条CSS样式声明由两部分组成：选择器和样式。
选择器 {
样式;
}
- 选择器指明样式的作用对象，作用的元素
- 样式就是对文本定义的格式
选择器有标签选择器，标签选择器就是HTML中的标签，例如<html>、
<body>、<p>等。在这里用body举个例子:
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
body {
color:blue;
font-size:20px; /*字体大小设置为20px*/
line-height:1.6em; /*行间距设置为1.6em*/
}
</style>
</head>
<body>
<h1>选择器</h1> /*文章小标题*/
<p style = "color:red;">第一段内容</p> /*将这里设置为红色，看是否遵从就近原则*/
<p>第二段内容</p>
</body>
这样body中的文字输出的都是上面设置过的格式。同样这里也遵循就近原则。运行如下：
类选择器：
语法：
.类选器名称{css样式代码;}
以英文句号开头，类选择器可以任意起名，但不要起中文名称。
1、设置类选择器的样式，也就是文本的格式。
2、使用合适的标签把修饰的内容标记。
3、在上面2那个标签中插入 class=“类选择器的名称”
举例：
<head>
.stress{
color:blue;
font-size=20px;
}
</head>
<body>
<span class="stress">内容内容内容内容内容内容</span>
</body>
ID选择器
ID选择器和类选择器差不多。
语法上的区别，就是把类选择器的点改成#，class改成id。
7、类选择器和ID选择器作用上的区别：
① 类选择器可以多次使用，而ID选择器只能使用一次。
注意ID选择器只能使用一次的意思是ID名称只能使用一次，一个ID定义过后使用了一次就不要再用了，虽然还能用，但如果用了第二次其底层就被破坏了。
例如下面这个代码就使用了一次：
<head>
#stress {
color:blue;
font-size=20px;
}
</head>
<body>
<span id="stress">内容内容</span>
</body>
下面这是使用两次的代码，注意这是错误的，错误的原因是使用了两次stress。
<head>
#stress {
color:blue;
font-size=20px;
}
</head>
<body>
<p><span id="stress">内容内容</span>两只老虎，两只老虎。</p>
<p id = "stress">跑得快，跑得快</p>
</body>
下面这个就是正确的：
与上面的不同之处就再于新定义了一个ID选择器。
<head>
#stress1 { //一个ID选择器
color:blue;
font-size=20px;
}
#stress2 { //两个ID选择器
color:blue;
font-size=20px;
}
</head>
<body>
<p><span id="stress1">内容内容</span>两只老虎，两只老虎。</p>
<p id = "stress2">跑得快，跑得快</p>
</body>
② ID选择器不能为一个元素设置多重样式
下面这个就是错误的：
<head>
#stress1 {
color:blue;
}
#stress2 {
font-size=20px;
}
</head>
<body>
<p>
<span id="stress1 stress2">内容内容</span>两只老虎，两只老虎。
</p>
</body>
当要为一个元素设置多重样式时，就需要用类选择器。如下：
<head>
.stress1 {
color:blue;
}
.stress2 {
font-size=20px;
}
</head>
<body>
<p>
<span class="stress1 stress2">内容内容</span>两只老虎，两只老虎。
</p>
</body>
在这里我觉得为一个元素设置多重样式时，使用ID选择器可以将多个样式写在同一个定义中。如下：
<head>
#stress {
color:blue; //这是一个样式
font-size=20px; //这里又是一个样式
}
</head>
<body>
<p><span class="stress">内容内容</span>两只老虎，两只老虎。</p>
</body>
这样就OK了，但有些情况这样写就不方便了，写CSS时最好都用类选择器了，ID选择器就留给JS的人来写。
8、子选择器
大于符号（>）用于选择指定标签元素的第一代子元素：
<head><style>
.stress>li { //这儿就是用大于号，标记了li
border:1px solid red;
}
</style></head>
<body>
<ul class="stress">
<li>水果 //第一代
<ul>
<li>香蕉</li> //第二代
<li>苹果</li> //第二代
<li>梨</li> //第二代
</ul>
</li>
<li>蔬菜 //第一代
<ul>
<li>白菜</li> //第二代
<li>油菜</li> //第二代
<li>卷心菜</li> //第二代
</ul>
</li>
</ul>
<body>
运行结果：
9、后代选择器
后代选择器与子选择器的不同之处在于，后代选择器作用于自己想指定的子后代元素。像下面的代码，就是只作用于stress这个选择器下面的li标签中的元素。
例如：
.stress li { //与子选择器的不同之处是这儿用空格不用大于号。
color:red;
}
将第八点的代码，用后代选择器来实现如下：
<head><style>
.stress li { /*这儿就是用大于号，标记了li*/
border:1px solid red;
}
</style></head>
<body>
<ul class="stress">
<li>水果 //第一代
<ul>
<li>香蕉</li> //第二代
<li>苹果</li> //第二代
<li>梨</li> //第二代
</ul>
</li>
<li>蔬菜 //第一代
<ul>
<li>白菜</li> //第二代
<li>油菜</li> //第二代
<li>卷心菜</li> //第二代
</ul>
</li>
</ul>
<body>
运行结果：
由此可知后代选择器作用于所有的被标识的标签。
10、通用选择器
这个选择器最强大，但是最简单，识别html文件中的全部标签。用（*）号指定。
语法：
- {
color:red;
}
举例：
<head>
<title>选择器</title>
<style>
*{
color:green;
font-size:12px;
}
</style>
</head>
<body>
<h2>通用选择器</h2>
<p>什么是通用选择器</p>
<通用选择器通俗点说就是将html的整个文本都选中来修改>
</body>
运行结果如下：
11、伪类选择器
为什么叫伪类呢？
是因为它可以给html不存在的标签设置样式，举例，鼠标滑过某段文字时，文字的状态的改变。
语法：
a:hover{color:red;}
这里也并不是一定要a开头，主要是因为用a的兼容性比较强，用p的话也可以。
来段代码：
<head>
<title>浏览器标题</title>
<style type="text/css">
a:hover {
color:green;
font-size:20;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">我会变色的欧，还会变大小,但是不要点我，我是个超链接，会指向百度的</a>
</body>
运行结果：
//这里的运行结果不知道在这个界面会怎么样，在记事本中写的时候是可以的。
12、分组选择器
为什么需要这份分组选择器呢？
当我们需要将两个或者多个标签设置为同一个属性，这时候就需要分组选择器了。
语法举例：
h1,span{color:red;}
在这里h1和span所标识的都被设置为了红色。
代码：
<head>
<title>分组选择器</title>
<style>
h1,span,#first {
color:red;
}
.second {
color:blue;
}
</style>
</head>
<body>
<h1>小标题</h1> //这儿是h1
<p>第一段，曾梦想仗剑走<span>天涯</span>，看一看世界的繁华。</p> //这儿是span
<p id="first">年少的心总有些轻狂，如今已四海为家。</p> //这儿first
<p class="second">第三段dilidilidilidilidengda</p> //这儿second
</body>
运行结果：
13、样式的继承
所谓继承就是被作用的标签的子标签也适用。举个例子：
<p>标签中放<span>标签，<p>标签用选择器设置字体颜色。那么在<p>标签中的子标签<span>也同样会被设置为和p一样的颜色。
注意：有些格式不会被继承，比如设置边框 //border:1px solid red;这样。
14、选择器的优先级
这点没什么好说的，当多种不同的选择器作用于同一元素时，会按这样的顺序来选择：
内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
权值
有时候我们为一个元素设置不同CSS格式，元素会被设置为哪一种形式呢？
有种规定，按照他们的权值大小来判断。
- 标签的权值为1
- 类选择符的权值为10
- ID选择符的权值最高为100。
15、选择器最高级层!important
用法举例：
<p> {
color:red!important;
}
<p> {
color:blue;
}
这时候输出的颜色为红色。
16、设置字体
body{font-family:"宋体";}
现在的网页一般用微软雅黑，即
body{font-family:"Microsoft Yahei";}
设置字体大小：font-size:20px;
设置字体粗细程度：font-weight:bold;
font-weight属性：
normal：正常字体；
bold：粗体
bolder：特粗体
lighter：细体
设置为数字时，只能设置为：100、200、300这个顺序下去一直到900。
设置字体样式：
normal 正常字体
italic 斜体
oblique为设置倾斜的字体，强制将字体倾斜。
设置字体颜色：
color属性可以设置颜色
color的三种设置方式
- 英文字母
- RGB颜色
- 十六进制颜色
这里就不多说了。
简写形式：
body{
font-style:italic;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
这么多行的代码其实可以缩写为一句，他们的顺序可以改变，但字体大小和行高之间要用/号隔开：
body{
font:italic bold 12px/1.5em "宋体",sans-serif;
}
17、text-decoration添加文本修饰
overline：添加下划线
underline：添加上划线
line-through：穿过文本的线
具体见下面的代码和图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本修饰</title>
<style type="text/css">
.stress1 {
text-decoration: overline;
color:blue;
}
.stress2 {
text-decoration: line-through;
color:red;
}
.stress3 {
text-decoration: underline;
color:green;
}
</style>
</head>
<body>
<p class="stress1">李白 <span>一剑天涯</span></p>
<p class="stress2">妲己 <span>让妲己看看你的心</span></p>
<p class="stress3">猴子 <span>超出三界之外，不在五行之中</span></p>
</body>
</html>
运行后：
18、对文本的设置
开头空两行：text-indent:2em;
设置行间距：line-height:1.5em;
设置两个字母之间的间距：letter-spacing:50px;
设置单词之间的间距：word-spacing:50px;
将文本居中：text-align:center;
center改为left、right都可以
px(像素)
em：如果在本文件中font-size设置为12px，那么1em就等于12px，也就是说，如果font-size设置为a，那么1em的大小就为a
19、元素的分类及使用特点
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。内联块状元素，顾名思义是将内联元素和块状元素的特点都继承了下来。
将内联元素转换为块状元素：
span {display:block;}
块状元素转换为内联元素：
display:inline;
将元素设置为内联块状元素：
display:inline-block
-
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 -
块级元素的特点：独占一行
-
内联块状元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联块状元素有：
<img>、<input>
行内元素还是块状元素都可以给它设置一个背景色。
background-color:颜色值;
20、盒子模型
css内定义的宽（width）和高（height），指的是填充以里的内容范围。
边框：
1、border-style（边框样式）常见样式有：
dashed（虚线）、dotted（点线）、solid（实线）。
2、border-color（边框颜色）可设置为十六进制颜色，如:
border-color:#888;
3、border-width（边框宽度）中的宽度也可以设置为：
thin、medium、thick
4、简写：
div{
border-width:2px;
border-style:solid;
border-color:red;
}可以简写为：
div{
border:2px solid red;
}
5、使用border为盒子添加边框，若想单独设置下边框，或左右上边框。
下边框：div{border-bottom:1px solid red;}
上边框：border-top:1px solid red;
右边框：border-right:1px solid red;
左边框：border-left:1px solid red;
6、我们有时候看到的边框都是圆角的，这里也可以设置圆角。
div{border-radius: 20px 10px 15px 30px;}
设置的顺序从左上开始，顺时针下来，左上，右上，右下，左下。
可以分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
7、盒子的内边距：内容与边框之间的距离。
按上右下左的顺序，仍然是顺时针。
div{padding:20px 10px 15px 30px;}
可以分开写：padding-top、padding-right…
8、盒子的外边距：元素与元素间的距离。
div{margin:20px 10px 15px 30px;}
顺序仍然为：上右下左，可以分开写margin-top、margin-right、margin-bottom、margin-left。
21、CSS网页布局模型
元素的三种布局类型：Flow、Layer、Float、
将元素设置为浮动，比如：
div {
border:2px blue solid;
width:200px;
height:400px;
}
#s1 {
float:left;
}
#s2 {
float:right;
}
实现效果：
上面没有一个横杠，截图的时候截上去的。
22、层模型
- 绝对定位：position: absolute
- 相对定位：position: relative
- 固定定位：position: fixed
1、绝对定位
将元素从文档中拿出，使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在就对body元素设置。
例如：
<head>
<meta charset="UTF-8">
<title>absolute样式</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
border: 2px red solid;
position:absolute;
right:500px;
top:200px;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
运行如下：
2、相对定位
相对于正常文档的位置：position:relative;
#div1 {
width: 200px;
height: 200px;
border: 2px red solid;
position:relative;
left:100px;
top:100px;
}
代码：
#div1 {
width: 200px;
height: 200px;
border: 2px red solid;
position:relative;
left:100px;
top:100px;
}
#div2 {
border:3px blue solid;
width:100px;
height:300px;
position:relative;
left:100px;
}
运行结果：
注意：偏移前的位置保持不动，这句话是什么意思？？？就是说曾今的位置还在，只是没有格式，没有文本。那个元素还在。
3、固定定位
在页面的某一处地方不动，比如我们的页面，在鼠标滑动的时候右上角的点赞就没有动，这就是固定定位。👀
position:fixed;
23、Relative与Absolute组合使用
绝对定位是相对于浏览器的，那么我们是不是可以设置相对于其它元素来进行设置呢？当然是可以的。
1、参照元素必须是相对定位元素的前辈元素
2、参照定位的元素必须加上position:relative;
3、定位元素加入position:absolute;，便可以使用top、bottom、left、right来进行偏移定位了。
代码举例：
<head>
<meta charset="UTF-8">
<title>absolute样式</title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
position:relative;
}
#div2 {
position:absolute;
top:0px;
}
</style>
</head>
<body>
<img id="div1" src="https://img1.mukewang.com/user/533e52b90001456f02000200-40-40.jpg">
<div id="div2">我是小狗头像</div>
</body>
这里将文字放在图像的顶部。
运行结果：
24、弹性盒模型之flex属性
1、设置display: flex属性可以把块级元素在一排显示。
2、flex需要添加在父元素上，改变子元素的排列顺序。
3、默认为从左往右依次排列,且和父元素左边没有间隙。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>absolute样式</title>
<style type="text/css">
.box {
background: white;
display: flex;
}
.box1 {
background: red;
width:100px;
height:50px;
}
.box2 {
background: orange;
width:100px;
height:50px;
}
.box3 {
background: yellow;
width:100px;
height:50px;
}
.box4 {
background: green;
width:100px;
height:50px;
}
.box5 {
background: blue;
width:100px;
height:50px;
}
.box6 {
background: indigo;
width:100px;
height:50px;
}
.box7 {
background: purple;
width:100px;
height:50px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
</div>
</body>
</html>
运行结果：
justify-content属性设置对其方式：
flex-start：起点对齐
flex-end：右对齐
center：居中
space-between：两端对其
space-around：每两个元素之间的距离相等
flex属性设置占比：
.box {
background: white;
display: flex;
}
.box1 {
flex:1; //这里设置了
background: red;
width:100px;
height:50px;
}
.box2 {
flex:4; //这儿
background: yellow;
width:100px;
height:50px;
}
.box3 {
flex:2; //这儿
background: blue;
width:100px;
height:50px;
}
运行效果：
25、纵轴排列方式
align-items的属性：
flex-start 默认值左对齐
flex-end：交叉轴终点对齐
center：交叉轴中点对齐
baseline：第一行文字基线对齐
stretch：如果项目未设置高度或设为auto，那么将占用整个容器的高度
424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
