简单了解css的基本使用

CSS

一、基础认知

1、CSS引入方式

1.1、内嵌式（CSS写在style标签中）

style标签虽然可以写在页面的任意位置，但是通常约定写在head标签中

2.2、外联式（CSS写在一个单独的.css文件中）

需要通过link标签在网页中引入

2.3、行内式（写在标签的style属性里）

一般配js使用（不常用）

二、基础选择器

1、标签选择器

1.1、结构

标签名 {css属性: 属性值; }

1.2、作用

通过标签名，找到页面中所有这类标签，设置样式

1.3、注意点

• 便签选择器选择的是一类标签，而不是单独的某一个
• 标签选择器无论嵌套的关系有多深，都能找到对应的标签

2、类选择器

2.1、结构

.类名 {css属性: 属性值; }

2.2、作用

通过类名，找到页面中所有带有这个类名的标签，设置样式

2.3、注意点

• 所有便签上都有class属性，calss属性的属性值称为类名
• 类名可以由数字、字母、下划线、中划线组成，但是不能以数字、中划线开头
• 一个便签可以同时有多个类名，类名之间以空格隔开
• 类名可以重复，一个类选择器可以同时选中多个标签

3、id选择器

3.1、结构

#id属性值 {css属性: 属性值;}

3.2、作用

通过id属性值，找到页面中带有这个id属性值的标签，设置样式

3.3、注意点

• 所有标签上都有id属性
• id属性值是唯一的不可以重复的
• 一个标签上只能有一个id属性值
• 一个id选择器只能选择一个标签

4、通配符选择器

4.1、结构

* {css属性名: 属性值; }

4.2、作用

找到页面中所有的标签设置样式

4.3、注意点

开发中很少用到，只会在很特殊的情况下用到

三、字体和文本样式

1、字体样式

1.1、字体大小

1.1.1、属性名：font-size

1.2、字体粗细

1.2.1、属性名：font-weight

1.2.2、取值

关键字

• 正常：normal
• 加粗：blod

纯数字

• 正常：400
• 加粗：700

1.3、字体样式（是否倾斜）

1.3.1、属性值：font-style

1.3.2、取值

• 正常：normal
• 倾斜：italic

1.4、字体类型

1.4.1、属性值：font-family

1.4.2、常见取值

具体字体1,具体字体2,具体字体3,具体字体4,具体字体5,…,字体系列

• 具体字体：微软雅黑、宋体、楷体等
• 字体系列：sans-serif、serif、monospace等…

1.4.3、渲染规则

从左往右按顺序查找如果电脑中未安装该字体，则显示下一个字体

如果都不支持，此时会更具操作系统，显示最后字体系列的默认字体

1.4.4、注意点

• 如果字体名称中存在多个单词，推荐使用引号包裹
• 最后一项字体系列不需要引号包裹
• 网页开发时尽量使用常见自带字体，保证不同的用户浏览网页都可以正常显示

注意：样式层叠问题

如果给同一个标签设置了相同的属性，此时样式会层叠，写在最下面的会生效

2、文本样式

2.1、文本缩进

2.1.1、属性名：text-index

2.1.2、取值

数字 + px

数字 + em（推荐使用1em = 当前标签的font-size的大小）

2.2、文本水平对齐方式

2.2.1、属性名：text-align

2.2.2、取值

属性值	说明
left	左对齐
center	居中对齐
right	右对齐

2.2.3、注意点

如果想文本居中对齐，text-align属性给文本所在标签（文本的父元素）设置

3、文本修饰

3.1、属性值：text-decoration

3.2、取值

属性值	效果
underline	下划线（常用）
line-through	删除线（不常用）
overline	上划线（几乎不用）
none	无装饰线

3.3、注意点

开发中会使用text-decoration: none;来给a标签清楚默认下划线

3、line-height行高

3.1、作用

控制一行的上下行距

3.2、属性名：line-height

3.3、取值

• 数字 + px
• 倍数（当前标签font-size的倍数）

3.4、应用

让单行文本垂直居中可以设置line-height：文字父元素高度

网页精准布局时，会使用line-height：1可以取消上下间距

四、选择器进阶

1、后代选择器：空格

1.1、作用

根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素

1.2、语法

选择器1 选择器2 {css}

1.3、结果

在选择器1所找到的后代中，找到满足选择器2的标签，设置样式

1.4、注意点

• 后代选择器中，选择器与选择器之间以空格隔开
• 子代包含儿子、孙子…所有后代

2、子代选择器：>

2.1、作用

根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素

2.2、语法

选择器1 > 选择器2 {css}

2.3、结果

在选择器1中找到标签的儿子中，找到满足选择器2的标签 ，设置样式

2.4、注意点

• 子代只包括：儿子
• 子代选择器中，选择器与选择器之间用>隔开

3、并集选择器：,

3,1、作用

同时选择多组标签，设置相同样式

3.2、语法

选择器1, 选择器2 {css}

3.3、结果

找到选择器1和选择器2选中的标签，设置样式

3.4、注意点

• 并集选择器中的每组选择器之间通过逗号分隔
• 并集选择器中的每组选择器可以是基础选择器或者是复合选择器
• 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

4、交集选择器

4.1、作用

选中页面中，同时满足多个选择器的标签

4.2、语法

选择器1选择器2{css}

4.3、结果

找到页面中既能被选择器1选中该的标签，又能被选择器2选中的标签，设置样式

4.4、注意点

• 交集选择器之间的选择器之间是紧挨着的，没有东西分隔
• 交集选择器如果有标签选择器，标签选择器必须写在最前面

5、hover伪类选择器

5.1、作用

选中鼠标悬停在元素上的状态，设置样式

5.2、语法

选择器:hover{css}

5.3、注意点

任何一个标签都可以添加伪类

五、背景相关属性

1、背景颜色

1.1、属性名：background-color

1.2、属性值

颜色取值：关键字、rgb表示法、rgba表示法、十六进制…

1.3、注意点

• 背景颜色默认是透明：rgba(0,0,0,0), transprent
• 背景颜色不会印象盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

2、背景图片

2.1、属性名：background-image

2.2、属性值：background-image: url(‘图片路径’);

2.3、注意点

• 背景图片中url可以省略引号
• 背景图片默认是水平和垂直方向平铺的
• 背景图片仅仅是指给盒子起到装饰效果，类似背景颜色，是不能撑开盒子的

3、背景平铺

3.1、属性名：background-repeat

3.2、属性值

取值	效果
repeat	默认值，水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向平铺
repeat-y	沿着垂直方向平铺

4、背景位置

4.1、属性名：background-position

4.2、属性值：background-position: 水平方向位置 垂直方向位置;

4.2.1、方位名词（最多只能表示九个位置）

• 水平方向：left、center、right
• 垂直方向：top、center、bottom

4.2.2、数字 + px（坐标）

坐标系（原点(0,0)，盒子左上角）

x轴：水平向右

y轴：垂直向下

4.3、注意点

方位名词取值和坐标取值可以混用，第一个取值表示水平，第二个取值表示垂直

六、元素显示模式

1、块级元素

1.1、显示特点

• 独占一行
• 宽度默认是父元素的宽度，高度默认由内容撑开
• 可以设置宽高

1.2、代表标签

div、p、h系列、ul、li、dl、dt、dd、form、header…

补充：若想去掉列表符号可以使用

list-style: none;

2、行内元素

2.1、显示特点

• 一行可以显示多个
• 宽度和高度默认由内容撑开
• 不可以设置宽高

2.2、代表标签

a、span、b、u、i、s、strong、ins、em、del…

3、行内块元素

3.1、显示特点

• 一行可以显示多个
• 可以设置宽高

3.2、代表标签

input、textarea、button、select…

4、元素显示模式转换

4.1、目的

属性	效果	使用频率
display: block	转换成块级元素	较多
display: inline-block	转换成行内块元素	较多
display: inline	转换成行内元素	极少

七、CSS特性

1、继承性

1.1、特点

• 子元素有默认继承父元素的特点
• 可以继承的常见属性（文字控制属性都可以继承）

1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height
5. …

2、层叠性

1.1、特性

• 给同一个标签设置不同的样式，此时样式会层叠叠加，会共同作用在标签上
• 给同一个标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效

1.2、注意点

当样式冲突时，只有当选择器优先级相同时，才能通过层叠判断效果

3、优先级

3.1、特性

不同的选择器有不同的优先级，优先级高的选择器会覆盖优先级低的选择器样式

3.2、优先级公式

继承<通配符选择器<标签选择器<类选择器

3,3、注意点

• !important写在属性值后面，分号前面
• !important不能提升继承的优先级，只要是继承优先级最低
• 实际开发中不建议使用!important

3.4、权重叠加计算

3.4.1、场景

如果是复合选择器，此时需要通过权重叠加计算方法，判断最终那个选择器优先级最高会生效

3.4.2、权重叠加计算

第一级：行内样式个数

第二级：id选择器个数

第三级：类选择器个数

第四级：标签选择器个数

3.4.3、比较规则

1. 先比较第一级数据，如果比较出来，之后的统统不看
2. 如果第一级数据相同，此时去比较第二级数据，如果比较出来，之后的就不用看了
3. …
4. 如果最终所用的数字都相同，表示优先级相同，则比较层叠行（谁在下面谁生效）

八、盒子模型

1、介绍

1.1、概念

页面中的每一个标签都可以看成是一个盒子，通过盒子的视角更方便进行布局

浏览器在渲染网页时，会将网页中的元素看成是一个个的矩形区域，我们也形象的称之为盒子

1.2、盒子模型

CSS中规定每个盒子由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。

2、内容的宽度和高度

2.1、作用

利用width和height属性默认设置盒子内容区域的大小

2.2、属性：width/height

2.3、常见取值：数字 + px

3、边框

3.1、属性名：border

3.2、属性值

单个取值的连写，取值之间可以空格分开

例如：

border: 10px solid orange;

solid：实线；dashed：虚线；dotted：点线

3.3、单方向设置边框

3.3.1、场景

只给盒子某个方向设置边框

3.3.2、border-方位名词

4、内边距

4.1、属性名：padding

padding属性可以当作复合属性使用表示单独设置某个方向的内边距，padding最多取4个值

四值：上、下、左、右

三值：上、左右、下

两值：上下、左右

注：内边距默认会撑大盒子，如果不想它把盒子撑大我们可以加上css3特性：

box-sizing: border-box;

5、外边距

5.1、属性名：margin

与padding一样的设置

若想让盒子居中，可以这样写：

margin:0 auto;

5.2、外边距折叠现象

5.2.1、合并现象

场景

垂直布局的块级元素上下的margin会合并，最终两者距离为margin的最大值。

解决方法

只给其中一个盒子设置margin就可以啦

5.2.2、塌陷现象

场景

互相嵌套的块级元素，子元素margin-top会作用在父元素上，最终导致父元素一起往下移动

解决方法

1. 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
2. 给父元素设置overflow: hidden
3. 转换成行内块元素
4. 设置浮动

九、CSS浮动

1、结构伪类选择器

1.1、作用与优势

作用：根据元素在HTML中的结构关系查找元素

优势：减少对于HTML中类的依赖，有利于保持代码整洁

场景：常用于查找某父级选择器中的子元素

1.2、选择器

选择器	说明
E: first-child { }	匹配父元素中的第一个子元素，并且是E元素
E: last-child { }	匹配父元素中最后一个子元素，并且是E元素
E: nth-child(n) { }	匹配父元素中第n个子元素，并且是E元素
E: nth-last-child(n) { }	匹配父元素中倒数第几个子元素，并且是E元素

其中n的取值可以是：

功能	公式
偶数	2n、even
计数	2n + 1、2n - 1、odd
找到前5个	-n + 5
找到从第5个开始	n + 5

2、伪元素

2.1、概念

伪元素：一般页面中的非主体内容可以使用伪元素

2.2、区别

1. 元素：HTML设置的标签
2. 伪元素：由CSS模拟出来的标签

2.3、种类

伪元素	作用
::before	在父元素内容的最前面添加一个伪元素
::after	在父元素内容的最后一个添加一个伪元素

2.4、注意点

必须设置content属性才能生效

伪元素默认是行内元素

3、浮动（float）

3.1、作用

网页布局、文字环绕

3.1、特点

1. 浮动元素会脱离标准流，在标准流中不占位置
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 下一个浮动元素会在上一个浮动元素的左右浮动排列
4. 浮动元素有特殊的显示效果
   • 一行可以显示多个
   • 可以设置宽高

注意：浮动元素不能通过text-align: center或者是margin: 0 auto来实现居中

4、清楚浮动

4.1、含义

清除浮动带来的影响，如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

4.2、原因

子元素浮动脱标不占位置

4.3、目的

需要父元素有高度，从而不影响其他网页的布局

4.4、方法

4.4.1、直接设置父元素高度

特点

优点：简单方便

缺点：有些布局中不能固定父元素高度

4.4.2、额外标签法

操作

1. 在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置：clear:both

特点

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

4.4.3、单伪元素消除法

操作

用伪元素代替了额外标签

基本写法

.clearfix::after {
	content: '';
	display: block;
	clear: both;
}

补充写法

.clearfix::after {
	content: '';
	display: block;
	clear: both;
	/*在网页中看不到伪元素*/
	height: 0;
	visibility: hidden;
}

特点

优点：项目中使用，直接给标签加类即可清除

4.4.4、双伪元素清除法

操作

.clearfix::before, .clearfix::after {
	content: '';
	display: table;
}
.clearfix::after {
	clear: both;
}

特点

优点：项目中使用，直接给标签加类即可清除

4.4.5、给父元素设置overflow:hidden

操作

直接给父元素设置 overflow:hidden

特点

优点：方便快捷

十、CSS定位装饰

1、定位

1.1、网页常见布局方式

1.1.1、标准流

1. 块级元素独占一行，垂直布局
2. 行内元素/行内块元素一行显示多个，水平布局

1.1.2、浮动

可以让原来垂直布局的块级元素变成水平布局

1.1.3、定位

1. 可以让元素自由的摆放在网页的任意位置
2. 一般用于盒子之间的层叠情况

2、使用定位步骤

2.1、设置定位方式

属性值：position

常见属性值：

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

2.2、设置偏移值

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

选择的原则一般是就近原则（离哪边近用哪个）

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

2.3、相对定位

2.3.1、相对于自己之前的位置进行移动

2.3.2、代码

position:relative

2.3.3、特点

1. 需要配合方位属性实现移动
2. 相对于自己原来位置进行移动
3. 在页面中占位置，没有脱标

2.3.4、应用场景

• 配合绝对定位组合使用
• 用于小范围移动

2.4、绝对定位

2.4.1、介绍

相对于非静态的父元素进行定位移动

2.4.2、代码

position: absolute;

2.4.3、特点

1. 需要配合方位属性进行移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置（已经托标）

2.5、固定定位

2.5.1、介绍

相对于浏览器进行定位移动

2.5.2、代码

position: fixed;

2.5.3、特点

1. 需要配合方位属性进行移动
2. 相对于浏览器可视区域进行移动
3. 在页面中不占位置（已经脱标）

十一、装饰

1、光标类型

1.1、场景

设置鼠标光标在元素上时显示的样式

1.2、属性名：cursor

1.3、常见属性值

属性值	效果
default	默认值通常是箭头
pointer	小手效果，提示用户可以点击
text	工字形，提示用户可以选择文字
move	十字光标，提示用户可以移动

2、边框圆角

2.1、场景

让盒子四个交变得圆润，增加页面细节，提升用户体验

2.2、属性名：border-radius

2.3、常见取值

数字 + px； 百分比

3、overflow

3.1、溢出部分

指的是盒子内容部分所超出盒子范围的区域

3.2、场景

控制内容溢出部分的效果显示

3.3、属性名：overflow

3.4、常见属性值

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出都显示滚动条
auto	根据是否溢出，自动显示或者隐藏滚动条

4、元素本身隐藏

4.1、场景

让某元素在屏幕中不可见

4.2、常见属性

visibility: hidden（占位隐藏）

display: none（不占位的隐藏）

5、元素的整体透明

5.1、场景

让某元素整体（包括内容一起变透明）

5.2、属性名：opacity

5.3、属性值

0~1之间的数字，1表示完全不透明，0表示完全透明