文章目录
一、CSS简介
1.1 CSS简介
1.2 CSS的主要作用
它主要是用来给HTML网页设置外观或样式
1.3 CSS的语法规则
注意：
- 在CSS中如果属性值为数值型数据的时候，一般情况下需要加单位，单位一般都是
px(像素)。 - 在CSS中不能出现HTML标签。
二、CSS的书写方式
2.1 行内式
将CSS代码书写在HTML标签的style属性中，style是一个通用属性，每一个标签里面都拥有这个属性。
语法格式：<标签名 style="属性:值;属性:值"></标签名>
2.2 嵌入式
将CSS代码嵌入到HTML文件中，嵌入式是通过HTML中的<style>标签将CSS代码嵌入到HTML网页中。
语法格式：
<style type="text/css">
/*书写CSS代码*/
选择器{属性:值;属性:值;}
</style>
提示：
1、如果我们使用的是HTML文档，type属性可以忽略不写。
2、html中的style标签可以放在网页中的任何地方，但是一般放在首部
2.3 外链式
外链式是指单独写一个以css为扩展名的文件，然后在<head></head>标签中使用<link></link>标签，将这个css文件链接到html文件中。
三、注释
语法格式：
/*注释内容*/
注意：
千万不要在CSS代码中使用HTML中的注释
四、选择器
什么是选择器？
选择器是指通过一定的语法规则选取到对应的HTML标签，然后给这个对应的HTML标签设置样式。
4.1 基本选择器
| 选择器 | 含义 | 举例 |
|---|---|---|
| 通用选择器 | 匹配HTML所有标签，IE6不支持，给大型网络增加负担 | *{margin:0px;} |
| 标签选择器 | 匹配对应的HTML标签 | p{font-size:14px;} |
| 类选择器 | 给拥有指定CLASS属性值的元素设置样式 | .box{width:800px;} |
| ID选择器 | 为标有ID的HTML元素指定特定的样式，只能使用一次 | #id{width:5px;} |
4.2 复合选择器
| 选择器 | 含义 | 举例 |
|---|---|---|
| 多元素选择器 | 同时匹配选择器1，选择器2，用逗号分隔 | h1,h2{margin:0px;} |
| 后代选择器 | 匹配所有属于E元素后代的F元素，用空格分隔 | E F{width:14px;} |
| 子元素选择器 | 匹配所有E元素的子元素F | E > F{width:80px;} |
| 相邻元素选择器 | 匹配所有紧随E元素之后的同级元素F | E + F{width:5px;} |
提示：
1、后代包括孙子、重孙子，子元素指的就是儿子。
2、相邻的话就是要很近的邻居才行，中间不能有其他的小三隔着。
相邻元素选择器的注意事项：
1、E元素与F元素必须是兄弟关系、平辈关系。
2、E元素与F元素必须要紧挨着，中间不能有其他任何的元素阻挡。
3、要求F元素一定位于E元素的下方。
4.3 伪类选择器
| 选择器 | 含义 |
|---|---|
| :link | 向未被访问的链接添加样式 |
| :visited | 向已被访问的链接添加样式 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| :active | 添加鼠标点击元素瞬间的样式 |
注意：
1、超链接的不同状态是有顺序的。
顺序：要遵守“爱恨准则”，link、visited、hover、active
CSS3新增的结构伪类：
| 选择器 | 功能 |
|---|---|
| E:first-child | 匹配第一个孩子 |
| E:last-child | 匹配最后一个孩子 |
| E:nit-child(n) | 匹配第n个孩子 |
| E:nth-child(2n) | 匹配偶数的孩子 |
| E:nth-child(2n+1) | 匹配奇数孩子 |
| E:only-child | 匹配有且仅有一个的孩子 |
4.4 属性选择器
| 选择器 | 含义 | 举例 |
|---|---|---|
| [attr] | 匹配所有具有attr属性的元素，不考虑它的值 | h1[align] |
| [attr = “val”] | 匹配所有attr属性值等于val的元素 | h1[align="center"] |
| [attr^=“val”] | 匹配所有attr属性值以指定值开头的所有元素 | Font[color^="#ff"] |
| [attr$=“val”] | 匹配元素中attr属性以指定值结尾的所有元素 | Font[color$="#ff"] |
| [attr*=“val”] | 匹配元素中attr属性含有指定值的所有元素 | Font[color*="#ff"] |
语法格式：
p[align]{
color:#f00;
}
提示：
不区分值的大小写。
五、尺寸样式属性
| 属性 | 值 | 含义 |
|---|---|---|
| height | auto:自动，浏览器会自动计算高度 length：使用px定义高度 %：基于包含它的块级对象的百分比高度 | 设置元素高度 |
| width同上 | 设置元素的宽度 |
问：<span></span>能够设置宽度、高度吗？
答：不可以，因为span标签是行内元素，不可以设置宽度和高度。可以使用display属性，将行内元素转化成块级元素。
六、文本与字体属性
6.1 文本属性
| 属性名 | 值 | 含义 |
|---|---|---|
| color | ##ff0000或 red 或 rgb(3,5,8) | 给文本设置颜色 |
| text-align | left（居左）、right（居右）、center（居中） | 设置文本的水平对齐方向 |
| text-decoration | none（去掉文本修饰线）、underlind（下划线）、 overline（上划线）、line-through（删除线） | 设置文本修饰线 |
| text-transform | capitalize、uppercase、lowercase | 大小写转换或者首字母大写 |
| line-height | 固定值或者百分比 | 设置行高 |
| text-indent | px 或者 em | 设置首行缩进 |
| letter-spacing | px | 设置字符间距 |
| word-spacing | px | 设置单词间距 |
提示：
1、1个em代表一个汉字的位置
2、line-height属性主要用来设置文本垂直方向居中对齐。将行高的值设置成高度的值，就可以实现文本的垂直方向居中对齐。
6.2 字体属性
| 属性名 | 值 | 功能 |
|---|---|---|
| font-style | normal（正常）、italic（斜体） | 设置文本为斜体 |
| font-weight | normal（正常）、bold（加粗） | 设置文字粗细 |
| font-size | 12px、14px | 设置文本大小 |
| font-family | 微软雅黑、楷体、宋体 | 设置文本字体 |
6.3 文本与字体属性综合案例
七、列表样式属性
这里的列表主要指的是，无序列表和有序列表
| 属性名 | 值 | 含义 |
|---|---|---|
| list-style-type | none(去掉项目符号) disc(实心圆) square(实心小方块) circle(实心圆) | 设置列表前项目符号的类型 |
| list-style-position | inside(在里面)，outside（在外面） | 设置列表项标记的放置位置 |
| list-style-image | url(图像路径) | 将图像设置为列表项标记 |
| list-style | square inside url(arrow.gif) | 在一个声明中设置所有列表属性 |
提示：
list-style：这个属性是一个简写属性，它集成了上面三个属性的功能，可以同时设置上面的三个属性，每个属性值之间使用空格分隔，它的属性值可以有一个也可以有两个也可以有三个，其属性值个数不定，位置也不定。
7.2 列表样式属性案例
八、继承性
特点
1、外层元素的样式会被内层元素所继承。
2、如果内层元素与外层元素的样式相同时，外层元素的样式会被内层元素的样式所覆盖。
问：是不是所有的样式都能够被继承呢？
答：并不是所有的样式都能够被继承。只有文本与字体样式属性能够被继承，其他的样式属性都不可以被继承。
注意：
在实际工作中，我们往往会给body标签设置字体大小以及字体颜色，因为body标签是最外层的元素，内层的元素会继承外层元素的文本与字体属性。
九、优先级
! important > 行内样式 > ID选择器 > 类选择器 > 标签选择器
一般而言，选择器指向的越准确，优先级就会越高。
十、！important属性
作用
它主要是用来提升属性的权重。
语法格式
p {
color: #f00 !important;
}
提示：
- !important只是提升了属性的权重，不是提升选择器的权重
- !important不能提升继承过来的属性的权重
十一、一个标签内可以有多个类名
基本语法
<标签名 class="类名1 类名2 类名3"></标签名>
多个类名的优点
- 减少CSS的代码量
- 多个类名的样式会叠加到当前元素上面
注意：
- 如果说一个标签内的多个类名上面设置的样式一样的话，就会出现样式冲突，那么是以CSS中的代码写在后面的为标准。
十二、背景样式属性
常用属性
| 属性名 | 值 | 含义 |
|---|---|---|
| background-color | #ff0000、red、rgb(255,0,0) | 背景颜色 |
| background-image | url(图像路径或名称) | 背景图像 |
| background-repeat | repeat、repeat-x、repeat-y、no-repeat | 背景图像是否重复 |
| background-position | center、x%或Y%、xpos或ypos | 背景图像起始位置 |
| background-attachment | scroll(滚动)、fixed(固定) | 设置背景图像是否固定或者随着页面的其余部分滚动 |
| background | url(1.jpg) no-repeat center center | 设置背景的简写形式，顺序不定 |
注意：
background-color:用于给元素设置背景颜色，但是前提是这个元素要么有内容，要么有宽度和高度才可以。
背景样式综合实例
十三、标准文档流
什么是标准文档流
我们制作的HTML网页和PS网图软件画图时有本质上的区别，HTML网页在制作的时候，都得遵循一个“流”的规则：从左到右、从上至下。
注意事项：
- 空白折叠现象:
如果要实现文章与图片之前没有空白现象，我们需要让这些元素放在同一行，让它们紧密相连。 - 高矮不齐，底部对齐
十四、浮动
介绍
浮动它是同一个属性来设置的float，这个属性有两个值：left(向左浮动)、right(向右浮动)
特性
- 浮动元素脱离了标准文档流，它不再占用空间了。
- 浮动元素的层级要比标准文档流元素的层级要高，它会覆盖标准文档流的元素。
- 浮动元素遇到父级元素的边框后就会停止浮动
- 浮动元素遇到上一个浮动元素就会停止浮动
- 元素浮动后，其父级元素就不会将其包裹
- 行内元素浮动后，就会变成块级元素
基本语法
p {
float:left;
}
清除浮动 （难点）
为什么要清除浮动？
因为经过浮动了的元素，它会影响到它下面的元素的排班布局，还有浮动元素的父级元素没有被浮动元素包裹着。
清除浮动的三个方法：
- 给浮动元素的父级元素设置一个固定的高度。
- 使用
clear属性，clear属性有三个值：left、right、both，这个属性一般放在最后，在最后一个浮动元素的最后新建一个空白的div，这个div什么都不用干，就是清除浮动。 - 使用
overflow:hidden这个属性来清除浮动。这个属性愿意是将溢出的部分进行隐藏，但是它还可以用于清除浮动。
十五、盒子模型
什么是盒子
在CSS中一个盒子的组成部分：内容(content)+内填充(padding)+边框(border)+外边距(margin)
一个盒子中的主要属性：width、height、padding、border、margin
问：如何计算一个盒子的总宽度？
答：一个盒子的总宽度 = 盒子里面内容的宽度 + 左右两边的填充 + 左右两边的边框线
padding
介绍：padding是“内填充”的意思，指的是盒子中间的内容到边框的这一段距离
小属性：
padding-top:上内填充
padding-right:右内填充
padding-bottom:下内填充
padding-left:左内填充
简写属性：
padding：这个属性是有方向的，按照顺时针顺序，分别是上、右、下、左。
padding:20px：表示上、右、下、左四个方向的内填充都是20px
padding:10px 20px：表示上下为10px，左右为20px
padding:10px 20px 30px：表示上为10px、左右为20px、下为30px
padding:10px 20px 30px 40px：表示上为10px、右为20px、下为30px、左为40px
margin
margin表示“外边距”的意思，就是指盒子与盒子之间的距离
同样地margin也是有四个方向的。
小属性：
margin-top:上外填充
margin-right:右外填充
margin-bottom:下外填充
margin-left:左外填充
简写属性：
margin：这个属性是有方向的，按照顺时针顺序，分别是上、右、下、左。
margin:20px：表示上、右、下、左四个方向的外填充都是20px
margin:10px 20px：表示上下为10px，左右为20px
margin:10px 20px 30px：表示上为10px、左右为20px、下为30px
margin:10px 20px 30px 40px：表示上为10px、右为20px、下为30px、左为40px
其他属性：
(一) margin的塌陷现象：
1、在标准的文档流中，竖直方向margin值不会叠加，它会取较大的值。
2、水平方向是没有margin的塌陷现象。
3、浮动元素是没有margin的塌陷现象的。
(二) margin的居中：
.box {
width:100px;
hegiht:100px;
background-color: #f00;
margin-left: auto;
margin-right: auto;
}
.box2 {
width:100px;
hegiht:100px;
background-color: #f00;
margin: 0px auto;
}
注意：
1、使用margin来实现水平居中时，一定要有固定的宽度。
2、只有块级元素可以实现水平居中，行内元素是不能实现居中的
3、只有标准文档流中的盒子才可以使用margin来实现水平居中
4、margin属性是用来实现盒子的水平居中，而不是文本的水平居中
善于使用父元素的padding而不是使用子元素的margin
说明：margin这个属性它本意是用来描述兄弟与兄弟元素之间的关系，不是用来描述父子元素之间的关系的。如果是父子元素的关系，最好给其父元素设置padding属性。
border属性
基本语法：border:1px solid #f00;
2、常用线型
dotted：由圆点组成的线
dashed：虚线
solid：实线
double：双线条
3、方向
border-top：上边框
border-right：右边框
border-bottom：下边框
border-left：左边框
十六、display属性
介绍
display，它是“显示”的意思。用来进行行内元素与块级元素之间的相互转换。
这个属性取值：none(无)、inline(行内)、block(块级)、flex(弹性布局)
显示与隐藏
display:none：将一个显示的元素进行隐藏
display:block：将一个隐藏的元素显示出来
综合应用
十七、position 定位
注意：
在使用定位属性时，一定要配合定位的坐标来使用
left：表示定位的元素离左边多远
right：表示定位的元素离右边多远
top：表示定位的元素离上边多远
bottom：表示定位的元素离下边多远
固定定位
1、简介
固定定位是相对浏览器窗口来进行定位，不管页面怎么滚动，固定定位元素显示的位置不会改变。
2、基本语法 position:fixed;
3、特点
- 固定定位元素它脱离了标准文档流。
- 固定定位元素的层级比标准文档流里面的元素要高，所以固定定位元素它会覆盖住标准文档流里面的元素
- 固定元素它不再占用空间
- 固定定位元素它显示的位置不会随着浏览器滚动而滚动
相对定位
语法：position:relative
特点：
- 相对定位元素它没有脱离标准文档流
- 相对定位元素如果没有设置定位的坐标，那么相对定位元素它还在原来的位置
- 相对定位元素设置了定位的坐标以后，那么它会在老家留下一个坑
- 相对定位元素它会将标准文档流中的元素覆盖
- 相对定位元素的定位坐标值可以是负数
绝对定位 (难点)
什么绝对定位：绝对定位是相对于“祖先定位元素”来进行定位
语法：position:absolute
什么是祖先定位元素：绝对定位元素它会先去找其父元素是否设置了定位的属性，如果有设置定位的属性，那么它就会相对于其父元素来进行定位；但是如果它的父元素没有设置定位属性，那么它就会去查找其父元素的上一级元素是否设置了定位的属性。如果还是没有就会继续往上一级进行查找。如果都没有设置，那么它就会相对于“浏览器窗口”来进行定位。
简短说明：绝对定位会去找父元素是否设置了定位的属性，如果没有的话，就继续找父元素的父元素，直到找到body为止。
问：如果当前元素的父元素与其爷爷元素都设置了相对定位，那么当前的绝对定位元素它会相对“谁”来进行定位？
答：父元素。只要上一级有设置定位属性，就跟着他。
特点：
- 绝对定位元素它脱了标准文档流
- 绝对定位元素它不再占用空间
- 绝对定位元素会覆盖标准文档流中的元素
- 绝对定位元素它会相对于其“祖先定位元素”定位，但是我们一般只会给其祖先定位元素设置相对定位属性，“子绝父相”，子元素设置绝对定位，父元素设置相对定位
绝对定位的案例：
十八、z-index 属性 (类似图层)
特点
- z-index表示显示的优先级，数值大的元素就会覆盖数值小的元素
- 只有设置了固定定位、相对定位、绝对定位的元素才会有z-index
- z-index的值是没有单位，值是一个正整数，默认的z-index的值是0
- 如果z-index一样，那么写在HTML后面的定位元素就会覆盖前面的定位元素
十九、border-collapse
基本语法
border-collapse:collapse;
效果：
相当于中间的表格线变细了。
二十、伪元素
常用属性
| 选择器 | 功能 |
|---|---|
| :first-letter | 操作当前元素中第一个字 |
| :fist-line | 操作当前元素中第一行 |
| ::before | 在之前插入，在一个盒子内部的最前面 |
| ::after | 在之后插入，在一个盒子内部的最后面 |
效果
基本语法：
.box::before{
content : 'Hello';
}
二十一、文本阴影
常用属性
| 值 | 描述 |
|---|---|
| x-shadow | 必填，水平阴影的位置，允许负值 |
| y-shadow | 必填，垂直阴影的位置，允许负值 |
| blur | 可选，模糊的距离 |
| color | 可选，阴影的颜色 |
描述
- 文字阴影可以有多组值，多组之间用逗号隔开
- 水平阴影正值阴影在右边，负值阴影在左边
- 垂直阴影正值在下边，负值在上边
- 模糊强度，值越大越模糊
多组阴影的写法
text-shadow:4px 2px 2px #8B8682,-4px -4px 3px #FF1493;
二十二、盒子阴影
比文本阴影的值多了2个，阴影尺寸和内/外阴影
二十三、圆角矩形
基本语法
border-radius:左上 右上 右下 左下;
上半圆：border-radius:50% 50% 0 0;
左半圆：border-radius:50% 0 0 50%;
右半圆：border-radius:0 50% 50% 0;
下半圆：border-radius:0 0 50% 50%;
圆角矩形案例
二十四、透明度
只要是颜色，都可以用透明度
基本语法
rgba(红色,绿色,蓝色,透明度)
版权声明：未经授权，禁止转载
(本笔记是根据CSS 快速掌握中的教学视频整理所得，如有侵权，请联系删除)
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
