一、css基本介绍
CSS全称Cascading Style Sheet层叠样式表，是专用用来为HTML标签添加样式的。
# 注释
/*单行注释*/
/*
多行注释
多行注释
*/
...
二、css基本语法
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
三、css四种引入方式
# 行内式
<p style="color：red">你好<p>
# 嵌入式
<head>
<sttyle>
p {
color：red;
}
</sttyle>
</head>
# 外链式
<link rel="stylesheet" herf="css/mycss.css">
# 导入式
<head>
<style>
/*形式一：*/
@import "css/mystyle.css";
/*形式二：*/
@import url("css/mystyle.css");
</style>
</head>
四、css选择器
1、基本选择器
<id选择器>
<class选择器>
<标签选择器>
<通配选择器>
<style>
#d1 {
color：red;
} 找到id是d1的标签
.p1 {
color：red;
} 找到class值里面包含p1的标签
div {
background-color：red;
} 找到所有的div标签
* {
color：red；
} 将html页面上所有的标签全部找到!
</style>
2、组合选择器
<后代选择器>
<儿子选择器>
<毗邻选择器>
<弟弟选择器>
<style>
div span {
color: red;
}
div>span {
color: red;
}
div+span {
color: red;
} 同级别紧挨着的下面的第一个
div~span {
color: red;
} 同级别下面所有的
</style>
3、属性选择器
1、含有某个属性
2、含有某个属性并且有某个值
3、含有某个属性并且有某个值的某个标签
<!--属性选择器是以[]为标志的-->
<style>
[username] {
color: blue;
} 将所有含有属性名是username的标签背景色改为蓝色
[username='niuniu'] {
color: blue;
} 找到所有属性名是username并且属性值是niuniu的标签,背景色改为蓝色
iniput[username='niuniu'] {
background-color:blue;
} 找到所有属性名是username并且属性值是niuniu的input标签,背景色改为蓝色
[^]:以什么为开头匹配[username^=n]
[$]:以什么为结尾匹配[username$=u]
[*]:包含匹配[username*=i]
</style>
4、交集与并集选择器
<style>
中间有空格，表示包含的关系
div .box1 {
color: red;
}
逗号表示的同级别的或者的关系
div,h1 {
color: red;
}
</style>
5、序列选择器
<style>
--同级别的第一个标签得是p才生效
p:first-child {
color: red;
}
--同级别的最后一个标签得是p才生效
p:last-child{
color: red;
}
--同级别的第3个标签得是p才生效
p:nth-child(3) {
color: red;
}
--同级别的，同类的，第一个标签得是p才生效
p:first-of-type{
color: red;
}
--同级别的，同类的，最后一个标签得是p才生效
p:last-of-type{
color: red;
}
--同级别的，同类的，第3个标签得是p才生效
p:nth-of-type(3){
color: red;
}
--同级别的只有一个标签的，得是p才生效
p:only-child {
color: red;
}
--同级别的，同类的，只有一个标签的，得是p才生效
p:only-of-type {
color: red;
}
</style>
五、伪类选择器
<style>
a:link {
color: red;
} 点击前
a:hover {
color: blue;
} 悬浮
a:active {
color: yellow;
} 点击不松开
a:visited {
color: green;
} 点击后
input:foucs {
background-color: pink;
outline: none;
} input框获取焦点
p {
color: darkgray;
font-size: 48px;
}
p:hover {
color: white;
}
</style>
六、伪元素选择器
<style>
p:first-letter {
font-size: 50px;
color: orange;
}
p:before {
content: '你好呀';
color: blue;
}
p:after {
content: '再见喽';
color: yellow;
}
</style>
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)
七、css的三大特性
1、继承
#1、定义：给某一个元素设置一些属性，该元素的后代也可以使用，这个我们就称之为继承性
#2、注意：
1、只有以color、font-、text-、line-开头的属性才可以继承
2、a标签的文字颜色和下划线是不能继承别人的
3、h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大
ps:打开浏览器审查元素可以看到一些inherited from。。。的属性
#3、应用场景：
通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式
2、层叠
#1、定义：CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果
#2、注意：
1、层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，才会发生层叠性
ps：通过谷歌浏览器可以查看到，一些属性被划掉了
3、优先级
#1、定义：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定
#2、优先级
整体优先级从高到底：行内样式>嵌入样式>外部样式
行内样式并不推荐使用，所以我们以嵌入为例来介绍优先级
1、大前提：直接选中 > 间接选中(即继承而来的)
2、如果都是间接选中，那么谁离目标标签比较近，就听谁的
3、如果都是直接选中，并且都是同类型的选择器，那么就是谁写的在后面就听谁的
4、如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠
id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）
5、优先级之!important
.p1 {
color: red !important;
font-size: 20px !important;
}
#1、作用：还有一种不讲道理的!important方式来强制指定的属性的优先级提升为最高，但是不推荐使用。因为大量使用!!important的代码是无法维护的。
#2、注意：
1、!important只能用于直接选中，不能用于间接选中
2、!important只能用于提升被指定的属性的优先级，其他属性的优先级不会被提升
3、!important必须写在属性值分号的前面
6、权重计算
#1、强调
如果都是直接选中，并且混杂了一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级
#2、计算方式
#1、id数多的优先级高
#2、id数相同，则判定类数多的优先级高
#3、id数、class数均相同，则判定标签数多的优先级高
#4、若id数、class数、标签数均相同，则无需继续往下计算了，谁写在后面谁的优先级高
css属性相关
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，行内标签的宽度由内容来决定。
一、字体属性
<style>
p {
font-weight: normal; 默认
font-weight: bord; 粗体
font-weight: lighter; 细体
font-weight: 100~900; 设置数值
font-weight: inherit; 继承父元素字体的值
}
p {
font-style: normal; 默认
font-style: italic; 斜体
}
p {
font-size: 1px;
font-size: inherit;
}
p {
font-family: 字体家族
}
p {
font: bolder italic 3px '隶书' 支持简写
}
p {
color: red;
color: rgb(0, 0, 0);
color: rgba(0,0,0,0.5);
color: #0000ff;
}
</style>
二、文本属性
<style>
div {
text-align: left right center justify; 文字水平方向对齐方式
text-decoration: none underline overline line-through inherit; 文字装饰
text-indent: 2px; 文字首行缩进
line-height: 10px; 文字的行高
}
</style>
三、背景属性
<!--块级标签、行内块级标签有宽高，行内标签没有-->
<style>
div {
background-color: red;
background-img: url("文件路径、URL地址");
background-size: 100px 100px / 100% 100%;
background-repeat: repeat/ no-repeat/ repeat-x/ repeat-y;
background-position: center center/ 50% 50%/ 30px 50px;
background-attachment: scroll/ fixed; 默认值，图片随滚动条滚动/ 不滚动
background: inherit;
支持简写
}
</style>
<!--背景图片和插入图片的区别
#1、
背景图片仅仅只是一个装饰，不会占用位置，
插入图片会占用位置
#2、
背景图片有定位属性，可以很方便地控制图片的位置，
而插入图片则不可以
#3、
插入图片语义比背景图片的语义要强，所以在企业开发中如果你的图片
想被搜索引擎收录，那么推荐使用插入图片
-->
ps:rgba只能给背景图片设置透明度，opacity则是给整个标签加上透明度
四、盒子模型
<!--
HTML文档中的每个元素都被比喻成矩形盒子， 盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如果把一个盒子比喻成一个壁挂相片，那么
#外边距margin ===== 一个相框与另外一个相框之间的距离
#边框border ====== 边框指的就是相框
#内边距padding ===== 内容/相片与边框的距离
#宽度width/高度height ===== 指定可以存放内容/相片的区域
提示：可以通过谷歌开发者工具查看盒子的各部分属性
#如图所示：
-->
1、盒子模型的宽度和高度
#1、内容的宽度和高度
通过标签的width和height属性设置
#2、元素/盒子模型的宽度和高度
宽度= 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度
高度= 。。。。
#3、元素/盒子模型空间的宽度和高度
宽度= 左外边距 + 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度 + 右外边距
高度= 。。。。
<style>
* {
margin: 0 ;
padding: 0 ;
}
div {
display: inline-block;
weight: 100px;
height: 100px;
border-width: 1px 2px 3px 4px; 上 右 下 左
border-style: solid dotted dashed double;
border-radius: 50%;
border-radius: 25% 50%; 椭圆
padding: 10px; 内边距
box-sizing: border-box; 避免因为盒子的内边距变动，导致盒子大小变形
margin: 10px; 外边距，水平方向上会叠加，垂直和方向上取较大的值
word-break: break-all; 防止文字溢出
}
</style>
text-align center；只能让盒子中存储的文字、图片水平居中
如果想让盒子自己相对于父元素水平居中，需要用到
margin: 0 auto;
2、行内标签和块标签
"""
在HTML中HTML将所有标签分为两类，分别是容器级和文本级
在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素
#1、HTML中容器级与文本级
容器级标签：可以嵌套其他的所有标签
div、h、ul>li、ol>li、dl>dt+dd
文本级标签：只能嵌套文字、图片、超链接
span、p、buis、strong、em、ins、del
#2、CSS中块级与行内
块级：块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级
div、h、ul、ol、dl、li、dt、dd 还有标签p
行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内
span、buis、strong、em、ins、del
#3、块级元素与行内元素的区别
1、块级元素block
独占一行
可以设置宽高
若没有设置宽度，那么默认和父元素一样宽（比如下例中的div的父元素是body，默认div的宽就是body的宽）
若没有设置宽高，那么就按照设置的来显示
2、行内元素inline
不会独占一行
不可以设置宽高
盒子宽高默认和内容一样
3、行内块级元素inline-block
不会独占一行
可以设置宽高
"""
"""
布局都是用块级元素，而行内元素是控制内容显示的。
1、div标签
一般用于配合css完成网页的基本布局
2、span标签
一般用于配合css修改网页中的一些局部信息，比如一行文字我们只为一部分加颜色<p>我是<span>egon</span></p>
3、div和span有什么区别？
div一般用于排版，而span一般用于局部文字的样式
1、站在HTML的角度：div是一个块级元素、独占一行，而span是一个行内元素、不会单独占一行
2、站在CSS的角度：div是一个容器级标签，而span是一个文本级标签
"""
3、css显示模式转换
<style>
div {
display: none/ block/ inline/ inline-block; 隐藏不占位
visibility: hidden; 隐藏占位
}
</style>
CSS页面布局
一、页面布局的方式
1、标准流
2、浮动流
3、定位流
二、标准流
# 1、标准流是浏览器默认的排版方式
# 2、标准流的排版方式有两种，垂直和水平
三、浮动流
1、什么是脱离文档流
"""
标签悬浮起来，可以理解为Z坐标增大，不再受到平面的制约，可以设置大小，原来所在的文档位置空了出来，会被垂直方向上的其他标签占据。
悬浮以后，只能一直向左或者向右，直到遇到另一个标签停下，无法设置具体的位置，意味着此，如果改标签有父标签，之前设置的margin: 0 auto(自动居中)将会失效。
"""
2、什么是半脱离文档流
"""
标签浮动后的位置取决于他之前在文档中的位置：
1、同一方向上，谁先浮动，谁在前面
2、不同方向上，左浮动找左浮动，右浮动找右浮动
"""
3、浮动元素贴靠问题
<--
当父元素的宽度足够显示所有元素时，浮动的元素就会并列显示
当父元素的宽度不足够显示所有元素时，浮动的元素就贴前一个元素，如果还不够，就会再贴前一个元素直到贴到父元素左边，此时无论是否宽度足够都会在这一行显示了
没有浮动的文字、图片、超链接等元素会给浮动的元素让位置，并围绕在浮动元素的周围
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动贴靠</title>
<style>
.d1 {
width: 500px;
height: 500px;
background-color: red;
}
.d2 {
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
.d3 {并列的情况
width: 300px;
height: 300px;
background-color: green;
float: left;
}
.d3 {贴靠的额情况
width: 400px;
height: 400px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
<div class="d3"></div>
</div>
</body>
</html>
4、浮动造成父标签塌陷的问题
1、父标签如果没有设置大小，则其大小取决于子标签的额大小
2、如果字标签浮动，则父标签再次回到没有大小的状态
-->
<!--
1、给父标签设置大小(不灵活)
=================================================================================
2、清除浮动方式二：
clear : none | left | right | both
注意：clear这个属性必须设置在块级、并且不浮动的元素中
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许左右有浮动对象
把握住两点：
1、元素是从上到下、从左到右依次加载的。
2、clear: left;对自身起作用，而不会影响其他元素。一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。
=================================================================================
3、清除浮动的方式三：隔墙法
外墙法
在两个盒子中间添加一个额外的块级元素
给这个额外添加的块级元素设置clear：both；属性
注意：
外墙法它可以让第二个盒子使用margin-top属性
外墙法不可以让第一个盒子使用margin-bottom属性，所以我们通常用墙的高度作margin的替代品
内墙法
在第一个盒子中所有子元素最后添加一个额外的块级元素
给这个额外添加的块级元素设置clear：both；属性
注意：
内墙法它可以让第二个盒子使用margin-top属性
内墙法可以让第一个盒子使用margin-bottom属性
内墙法与外墙法的区别？
1、外墙法不可以撑起第一个盒子的高度，而内墙可以
2、在企业开发中清除浮动，内墙法与外墙法都不常用，因为添加一个无用的墙
在前端开发中推崇结构与样式分离，而隔墙法需要添加大量的没有意义的空标签div
=================================================================================
4、伪元素+clear
#通用写法
.clearfix {
*zoom:1 <----兼容ie6,否则伪类选择器只能在谷歌浏览器中生效，其余没用
}
.clearfix:before,.clearfix:after {
content: " ";
display: table
}
.clearfix:after {
clear: both
}
整段代码就相当于在浮动元素前、后面跟了个宽高为0的空table，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
=================================================================================
5、清除浮动的方式五：
overflow:hidden，但其实它除了清除浮动还有其他方面的用途
#1、可以将超出标签范围的内容裁剪掉
#2、清除浮动
#3、可以通过overflow：hidden，让里面的盒子设置margin-top属性后，外面的盒子不被顶下来，这样就不用为外边的盒子添加边框了
一、css定位
1、相对定位（relative）
div {
position: relative;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
}
相对定位是相对于原始的位置定位的，没有脱离文档流，同一方向上的属性只能出现一个，若果设置了margin属性，则是相对于原始的位置做出改动
2、绝对定位(absolute)
1、默认情况下，都是以body作为参考
2、绝对定位脱离了文档流
3、如果父级标签中有已经定位过得标签(相对、绝对、固定)，则以该标签为准，有多个父级标签都定位过得前提下，以最近的为准，进行绝对定位
4、如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点，该标签会随着页面的滚动而滚动
5、一个绝对定位的标签会忽略父级标签的padding属性
6、绝对定位后，margin：0 auto；不在生效，但是可以是使用以下方法居中
left: 50%;
margin-left: -元素宽度的一半px；
3、固定定位(fixed)
1、固定定位相对于浏览器当前页面固定，不随滚动条移动
2、固定定位脱离文档流
4、z-index
1、类似于z轴坐标，越大，离用户越近，前提是必须要定位
2、覆盖效果取决于父标签的z-index值大小，如果都一样，在比较子标签的，都相同的情况下，后面的覆盖前面的
扫一扫
901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
