简单了解css的基本使用

最新推荐文章于 2024-06-29 23:22:36 发布

T糖锅G

最新推荐文章于 2024-06-29 23:22:36 发布

阅读量1.1k

点赞数 35

分类专栏：前端知识文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_63323754/article/details/140018150

版权

前端知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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、特点

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

color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height
…

2、层叠性

1.1、特性

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

1.2、注意点

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

3、优先级

3.1、特性

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

3.2、优先级公式

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

3,3、注意点

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

3.4、权重叠加计算

3.4.1、场景

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

3.4.2、权重叠加计算

第一级：行内样式个数

第二级：id选择器个数

第三级：类选择器个数

第四级：标签选择器个数

3.4.3、比较规则

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

八、盒子模型

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会作用在父元素上，最终导致父元素一起往下移动

解决方法

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

九、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、区别

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

2.3、种类

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

2.4、注意点

必须设置content属性才能生效

伪元素默认是行内元素

3、浮动（float）

3.1、作用

网页布局、文字环绕

3.1、特点

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

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

4、清楚浮动

4.1、含义

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

4.2、原因

子元素浮动脱标不占位置

4.3、目的

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

4.4、方法

4.4.1、直接设置父元素高度

特点

优点：简单方便

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

4.4.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.1.2、浮动

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

1.1.3、定位

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

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、特点

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

2.3.4、应用场景

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

2.4、绝对定位

2.4.1、介绍

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

2.4.2、代码

position: absolute;

2.4.3、特点

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

2.5、固定定位

2.5.1、介绍

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

2.5.2、代码

position: fixed;

2.5.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	根据是否溢出，自动显示或者隐藏滚动条