CSS精要-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_56910425/article/details/127234036

一、CSS引入方式

内嵌式

CSS写在style标签中

外联式

CSS写在一个单独的.css文件中

行内式

CSS写在标签的style属性中

二、基础选择器

1、标签选择器

结构：标签名{css属性名：属性值;}

注意点：

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

2、类选择器

结构：.类名{css属性名：属性值;}

注意点：

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

3、id选择器

结构：#id属性值{css属性名：属性值;}

注意点：

所以标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

4、通配符选择器

结构：*{css属性名：属性值}

注意点：

开发中极少使用，只会在极特殊情况下才会用到

三、字体和文字样式

1、字体样式

字体大小：font-size
- 默认字号为16px
字体粗细：font-weight
- 正常：normal/400
- 加粗：bold/700
字体样式：font-style
- 正常（默认）：normal
- 倾斜：italic
字体类型：font-family
- 常见字体：Microsoft YaHei、微软雅黑、黑体、宋体、楷体等
- 字体系列：sans-serif（无衬线字体）、serif（衬线字体）、monospace（等宽字体）等
- 渲染规则
  1. 从左往右按顺序查找，如果电脑中未安装改字体，则显示下一个字体
  2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
字体类型：font属性连写
如果给同一个标签设置了相同的属性，此时样式会层叠，写在最下面的会生效

2、文本样式

文本缩进：text-indent

取值：
- 数字+px
- 数字+em（1em = 当前标签设置的font-size的大小）
文本水平对齐方式：text-align

属性值效果
left 左对齐
center 居中对齐
right 右对齐
文本修饰：text-decoration

属性值效果
underline 下划线
line-through 删除线
overline 上划线
none 无修饰线

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

属性值	效果
underline	下划线
line-through	删除线
overline	上划线
none	无修饰线

注意点：

可以使用text-decoration:none;清楚a标签默认的下划线

3、line-height行高

取值：

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

4、颜色常见取值

属性名：

文字颜色：color
背景颜色：background-color

属性值：

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red、green、blue、yellow…
rgb表示法	红绿蓝三原色。每项取值范围：0~255	rgb(0,0,0)、rgb(255,255,255)…
rgba表示法	红绿蓝三原色+a表示透明度，取值范围0~1	rgba(255,255,255,0.5)…
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#ff0000…

5、标签水平居中方法

margin:0 auto;

四、选择器进阶

1、复合选择器

1、后代选择器：空格

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

注意点：

后代包括：儿子、孙子、重孙子…
后代选择器中，选择器和选择器之前通过空格隔开

2、子代选择器：>

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

注意点：

子代只包括：儿子
子代选择器中，选择器与选择器之前通过>隔开

2、并集选择器

并集选择器：，

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

注意点：

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

3、交集选择器

交集选择器：紧挨着

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

注意点：

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

4、hover伪类选择器

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

选择器语法：选择器：hover{css}

注意点：

伪类选择器选中的元素的某钟状态

5、Emmet语法

作用：

通过简写语法，快速生成代码

五、背景相关属性

1、背景颜色

backgroud-color

注意点：

背景颜色默认值是透明：rgba（0，0，0，0）、transparent（透明的）
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般会在布局中献给盒子设置背景颜色

2、背景图片

backgroun-image

属性值：

backgroun-image：url('图片的路径')

注意点：

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

3、背景平铺

background-repeat

属性值：

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

4、背景位置

background-position

属性值：

方位名词：
- 水平方向
  - left
  - center
  - right
- 垂直方向
  - top
  - center
  - bottom
数字+px
- 坐标系
  - 原点（0，0）——盒子左上角
  - x轴——水平向右
  - y轴——垂直向下

六、元素显示模式

1、块级元素

显示特点：

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

代表标签：

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

2、行内元素

显示特点：

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

代表标签：

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

3、行内块元素

显示特点：

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

代表标签：

input、textarea、button、select
特殊情况：img标签有行内块元素特点，但是Chrome调试工具显示结果为inline

4、元素显示模式转换

语法：

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

HTML嵌套规则注意点：

块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素…
- p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
- a标签不能嵌套a标签

七、CSS三大特性

1、继承性

2、层叠性

3、优先级

优先级公式：

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

八、盒子模型

CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成

边框（border）

属性值：如：border:10px solid red;
快捷键：bd+tab
附：solid：实线、dashed：虚线、dotted：点线
border-left、border-right、border-top、border-bottom
作用属性名属性值
边框粗细 border-width 数字+px
边框样式 border-style solid：实线、dashed：虚线、dotted：点线
边框颜色 border-color 颜色取值

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	solid：实线、dashed：虚线、dotted：点线
边框颜色	border-color	颜色取值

CSS3盒模型（自动内减）

box-sizing:border-box;

清除默认内外边距

*{
    margin:0;
    padding:0;
}

九、结构伪类选择器

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

选择器

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