目录
如何使用
- 第一种 内联样式
<p style="color:rgb(86, 231, 98); font-size: 50px;">hello world</p>不常用，因为样式只对一个标签生效
- 第二种 内部样式表
<style>
p{
color:blue;
font-size: large;
}
</style>
<p>hello wolrd</p>在一网页可重复使用,对接下来的p标签进行重载 ，但不可跨网页
- 第三种 外部样式表
<link rel="stylesheet" href="./style.css">在style.css文件中设计标签的样式
通过引用可在多网页上使用，nice。同时可以使用浏览器的缓存机制，加快网页的加载速度
css基本语法
选择器+声明块
选择器为选中的元素
声明块为选中的元素设计样式
声明块格式：样式名 ：值；
选择器
常用选择器
1.id选择器
语法：#id名{}
<style>
#r{
color:aqua;
}
</style>
<p id="r">今天星期五</p>注：不可重复使用，发现用数字为id名有些问题
2. class选择器
与id类似，但它可重复使用，同时它也可定义多个
语法 ：.+class名{ }
<style>
.blue{
color: blue;
}
.size{
font-size: 100px;
}
</style>
<p class="blue size">今天课很少</p>
<p class="blue">今天和同学去聚餐</p>复合选择器
选中同时多个复合条件的元素
注：需同时满足所有条件
1.交集选择器
<style>
.red{
color: red;
}
div.red{
font-size: 40px;
}
</style>
<div class="red">hello</div>
<p class="red">world</p> 
2.并集选择器
<style>
h2,span{
color:rgb(3, 102, 102);
}
</style>
<h2>bit</h2>
<span>b</span>注：#h1,.p1,span，div.red{}也可
关系选择器
1.子元素选择器
语法：父元素 > 子元素
作用于子元素
2.后代选择器
语法：祖先 后代
作用于后代元素
3.
兄弟选择器
语法：前一个 + 后一个
作用于后一个
语法：前一个~后边所有
作用于下边所有
<style>
div > p{
color:blueviolet;
}
div > p > span{
color:chartreuse;
}
div span{
font-size:x-large ;
}
p + span{
color:coral;
}
p ~ span{
color:cornflowerblue;
}
</style>
<div>
div
<p>
div.p
<span>div.p.span</span>
</p>
<span>div.span</span>
</p>
<span>div.span</span>
</p>
<span>div.span</span>
</div>
区分
前者是选中h1中所有的strong标签
伪类选择器
伪类（特殊的类）
伪类用于描述一个元素的特殊状态
如：第一个子元素，被点击的元素
<style>
ul > li:first-child{
color:red;
}
ul > li:first-of-type{
color:red;
}
/*
nth-of-type(n)
区别：后者多了类别限制，全为相同元素
如上例，前者在找ul的第一个子元素，但其不为li，所以无法标记
而后者便可
*/
</style>
<ul>
<span>span</span>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul><style>
ul > li:first-child{
color:red;
}
/*
nth-child(n) 为n个
nth-child(2n) 为偶数个
*/
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<style>
：not() 否定伪类 剔除部分元素
ul > li:not(li:nth-of-type(3)){
color:blue;
}
</style>
<ul>
<span>span</span>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<style>
a:link{
color: red;
}
a:visited{
color:green;
font-size:50px;
}
/*
link表示未点击过的链接
由于隐私，visited只能用来改颜色
：hover用来表示鼠标移入的状态
：active用来表示鼠标点击
前两个是超链接可用
后两个所有元素都可用*/
a:hover{
color:blueviolet;
}
</style>
<a href="https://so.lenovo.com.cn/">访问过</a>
<br>
<a href="https://www.baidu.com/?tn=15007414_5_dg ">未访问</a>伪元素
不存在的元素
语法 ::开头
(1)::first-letter
(2)::first-line
(3)::selection 表示选中的内容
(4)::before 元素的开始
(5)::after 元素的最后
(4)(5)是需用content来添加内容，然后会在页面中显示出来
<style>
p::before{
content:'“';
color:red;
}
p::after{
content: '”';
color: red;
}
/*css中添加的元素也会被逮捕*/
</style>
<p>hello</p>
注：虽然是css中添加的，但是在如：：first-letter种还是属于p中的元素，会把 “ 修改
继承
为一个元素设置的样式也会被后代继承
但背景相关，布局相关等都不会被继承
<style>
p{
color: crimson;
background-color: darkgray;
}
</style>
<p>
p
<br>
<span>p.span</span>
</p>
按理来讲p中的span背景不应变，但是我这是p的背景，所以它会包含p在内的所有元素，但这不是span继承了p的背景
选择器的权重
内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
继承的样式 没有优先级
比较优先级，需要将所有选择器的优先级进行相加计算，最后优先级越高，则越优先显示
注： 分组选择器分别计算
选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
如果优先级计算后相同，则优先使用靠下的样式
可以再某个样式后添加 ！important，则则该样式为最高级，甚至超过内联样式
<style>
.red{
color:red;
!important;
}
</style>
基础单位
1.长度单位
像素，屏幕有一个小点点构成
em
是相对于元素字体大小来计算的
1em= 1font-size（默认为16px像素）
em会根据字体的大小的改变而改变
rem
是根据根元素字体的大小的改变而改变
根元素指html中的
百分比
可以设置属性相对于其父元素的百分比
(不知道为什么在box2中显示不出来)
<style>
html{
font-size: 100px;
}
.box1{
width:200px;
height:200px;
background-color:red;
}
.box2{
width: 50%;
height: 50%;
background-color:blue;
}
</style>
<body>
<p class="box1">
<div class="box2"></div>
</p>2. 颜色单位
在css中可以直接使用颜色的名字来设置
RGB值
R red，G green，B blue
RGB通过颜色的不同浓度来调配不同颜色
每一种颜色的范围在0-255之间
语法：rgb
RGBA
就是在rgb的基础上增加了一个a表示不透明度
0表示完全透明，.5表示半透明
十六进制的RGB值
语法：#红色绿色蓝色
颜色浓度 00-ff
如果颜色两位两位重复可以进行简写
#aabbcc->#abc
#aabbcd->#abcd
HSL值
H 色相（0-360）
S饱和度 0%-100%
L亮度 0%-100%
<style>
html{
font-size: 100px;
color: rgb(80, 90, 70);
background-color: rgb(80, 90, 70,0.5);
background-color: #ff0000;
background-color:#aabbcd;
background-color:#bfa;/*护眼*/
background-color:hsl(3, 52%, 59%)
}
</style>盒模型
css将页面中所有元素都设置为矩形的盒子
将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子放在不同的位置
大小box-sizing
默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定
1.content-box 默认值，宽度高度用来设置内容区的大小
2.border-box 宽度和高度用来设置整个盒子可见框的大小
每一个盒子由以下部分组成：内容区(content)，内边距(padding)，边框(border)，外边距(margin)
1.内容区
元素中所有的子元素和文本内容都在内容区中排列
内容区的大小由width和height来设置
2.边框
边框属于盒子边缘
边框的大小会影响到整个盒子的大小
设置边框时，需至少设置三个样式：
宽度 border-width， 颜色 border-color， 样式 border-style
（1）border-width默认一般为三个像素
可以用来指定四个方向的边框的宽度
四个值:上 右 下 左
三个值:上 左右 下
两个值 上下 左右
如：border-width:10px 20px 30px 40px;
还有一组单独指定某边的样式
border-xxx-width（xxx可为top right bottom left）
（2） border-color
也可分别指定不同边的颜色，语法同border-width
3.内边距
内容区和边框之间的距离是内边距
内边距的设置会影响盒子的大小
背景颜色会延伸到内边距上
padding-top，padding-right，padding-bottom，padding-left
padding:3px
语法同border-width
4.外边距
不会影响盒子可见框的大小
会影响盒子的位置，即影响盒子实际占用空间
margin-top，margin-right，margin-bottom，margin-left
语法同border-width
注意：正负值的选取
<style>
.box1{
width: 200px;
height:200px;
border: solid;
background-color: chartreuse;
border-width:10px 20px 30px 40px;
border-color: red;
padding:100px;
margin: 100px;
}
</style>
<div class="box1">div1</div>
盒模型的水平和垂直布局
水平布局
一个元素在其父元素中，水平布局必须满足以下等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
=其父元素内容区的宽度
若未达到，则会自动auto设置， 可令这特性是元素水平居中
垂直布局
visible 默认值
若子元素height>父元素，子元素会从父元素溢出，在父元素外部显示
可使用overflow来解决高度溢出的问题，放在父元素里
hidden 溢出内容会被裁剪，但若是文字溢出则也会被裁掉
scroll 生成滚动条，可通过滚动条来查看完整内容
auto 根据需要需要生成滚动条，不会像scroll一样把水平和垂直都生成
<style>
.outer{
width: 500px;
height: 200px;
border: red solid;
overflow:hidden;
}
.inner{
width: 200px;
height: 400px;
margin: 0 auto;
background-color: #bfa;
/*要标明大小，来显示背景的颜色
/*display: flex;
实现文字的内容
align-items: center; 实现水平居中
justify-content: center; 实现垂直居中
line-height：高度 也可
实现块元素在页面中水平居中
margin:0 auto
*/
}
</style>
<div class="outer">
<div class="inner"> </div>
</div>
垂直外边距的折叠
兄弟元素
都为正/负：相邻的垂直方向外边距会取两者间的最大的绝对值值
一正一负：取和
父子元素
父子元素间的相邻外边距，子元素的会传递给父元素
会影响到页面的布局
解决途径：不让它们相邻，再设置一个伪元素
<style>
.outer{
width: 500px;
height: 200px;
background-color: red;
}
.inner{
width: 200px;
height: 200px;
margin-top: 100px;
background-color: #bfa;
}
</style>
<div class="outer">
<table></table>
<div class="inner"> </div>
</div>
可使上图变为下图
行内元素的盒模型
不能通过width，height来设置大小
解决方案
1.dispaly 用来设置元素显示的类型
可选值
inline 将元素设置行内元素
block 将元素设置块元素
inline-block 将元素设置行内块元素（行内块既可以设置宽度和高度，又不会独占一行）
table 就元素设置为一个表格
none 元素不在页面中显示
区别
visibility 用来设置元素的显示状态
visible 默认值，元素再页面中正常显示
hidden 元素在页面中隐藏不显示，但是依然占据页面的位置
2.改变font-size的值
<style>
.box1{
width:100px;
height:100px;
display: block;
background-color: #bfa;
}
.box2{
width: 100px;
height:100px;
background-color: red;
}
</style>
<span class="box1">span</span>
<div class="box2"></div>
行内元素垂直方向不改变页面布局
<style>
.box1{
width:100px;
height:100px;
padding: 100px;
background-color: #bfa;
}
.box2{
width: 200px;
height:200px;
background-color: red;
}
</style>
<span class="box1">span</span>
<div class="box2"></div> 
如果上面也显示出来，那么整体就会被顶下去，相当于影响了下面那个div盒子的布局，而垂直方向不改变页面布局，所以上面的不显示，下面显示了是覆盖了下边元素，总体布局没有改变
去除浏览器的默认样式
1.
<style>
*{
margin:0;
padding: 0;
}
/*
ul{
margin: 0;
padding:0;
list-style: none;
可去除ul的符号
}
a {
text-decoration: none;
去除下划线
font-weight:bold
加粗字体
*/
</style> 2.插入外部样式表
<link rel="stylesheet" href="reset.css">
<!--
<link rel="stylesheet" href="normalize.css">
-->
轮廓阴影圆角
1.轮廓
<style>
.box1{
width: 200px;
height:200px;
background-color: #bfa;
outline: red solid 10px;
}
.box2{
width: 200px;
height:200px;
background-color: #bfa;
border: red solid 10px;
}
</style>
<div class="box1"></div>
<br>
<div class="box2"></div>
2.阴影
box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
第一个值 水平偏移量 正值向右移动，负值向左移动
第二个值 垂直偏移量 正值向下移动，负值向上移动
第三个值 阴影的模糊半径
第四个值 阴影的颜色
<style>
.box1{
width: 200px;
height:200px;
background-color: #bfa;
box-shadow: 10px 10px 50px ;
}
</style>
<div class="box1"></div>3.圆角
border-radius
border-top-left-radius border-bottom-left-radius
border-top-right-radius border-bottom-right-radius
<style>
.box1{
width: 200px;
height:200px;
background-color: #bfa;
border-radius:10px 20px ;
border-radius:10px /50px;
border-radius:80% 20%;
box-shadow: 10px 10px 50px ;
}
</style>
<div class="box1"></div> 
浮动
通过浮动可以使一个元素向其父元素的左侧或右侧移动
可选值 none 不浮动 left right
设置浮动后，水平布局的等式便不需要强制成立
同时，元素会完全从文档脱离出来，不再占用文档流
浮动元素不会盖住文字，文字会自动环绕其周围
元素脱离后：
块元素
1.块元素不再占页面的一行
2.宽度高度会变为内容的宽高（比如会变成文字的大小）
行内元素
行内元素会变为块元素，可以设置宽高
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
.box2{
width: 300px;
height: 300px;
background-color: #fba;
}
</style>
<div class="box1"></div>
<div class="box2"></div> 
box1不再占用文档流，所以下边的元素往上飘，但上边的元素会盖住下边的
浮动不了？
如果在一行上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。这时候可能你就会发现显示与你的预期效果不符。
高度塌陷
在浮动布局中，父元素默认是被子元素撑开的
所以当子元素脱离文档流时，无法撑起父元素的高度，导致父元素高度的丢失
解决途径
一.开启BFC
1.设置元素的浮动（都浮起来，不好）
（1）会影响下面的布局
2.将元素设置为行内块元素(不好）
（1）行内块元素不适合作为外部容器使用
（2）父元素的宽度消失了
3.将overflow设置为非visible的值 （oh快捷键overflow: hidden;）
4.利用伪类
<style>
.box1{
border: 10px red solid;
/* float: left;*/
}
.box2{
width: 500px;
height: 100px;
background-color: #bfa;
float: left;
}
.box1::after{
content: '';
display:block;/*默认为行内元素*/
clear: both;/*清除掉box2浮动带来的影响*/
}
</style>
<div class="box1">
<div class="box2"></div>
</div> 
二.clear
clear可清除由浮动所带来的影响
clear: both;/left/right/none
clearfix这个样式可以同时解决高度塌陷和外边距重叠的问题
<style>
.box3{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box4{
width: 100px;
height: 100px;
background-color: rgb(39, 98, 206);
margin-top: 100px;/*设置外边距后，由于“坑爹”属性，box3
也会继承*/
}
.clearfix::before,.clearfix::after{
content: '';
display: table;
clear: both;
}
/*clearfix这个样式可以同时解决高度塌陷和外边距重叠的问题*/
</style>
<div class="box3 clearfix">
<div class="box4"></div>
</div>
元素的定位
position
通过定位可以将元素摆放到页面的任意位置（也可通过调margin来改变位置）
可选值：
static 默认值，未开启
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启固定地位
sticky 开启粘滞定位
top 上边和上边的距离，bottom，left，right
1. 相对定位
开启定位后，通过偏移量来设置元素的位置
不会脱离文档流,参考自己的位置
2.绝对定位
开启定位后，通过偏移量来设置元素的位置
会脱离文档流
会改变元素的性质，行内变成块，块的宽高被内容撑开
使元素提高层级
绝对元素使相对于其包含块进行定位的
包含块
正常情况：离它最近的祖先元素
开启定位后：离它最近的开启了定位的祖先元素，若都未开启，则是根元素
3.固定定位
也是绝对定位
区别，固定定位永远参照浏览器视口进行定位，元素不会移动
4.粘滞定位
相对定位，但到了一定距离后不会随着滚动条移动
to be continue
1583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
