CSS知识总结

CSS引入方式

一、内嵌式：CSS写在style标签中
作用范围：当前页面
使用场景：小案例
二、外联式：CSS写在单独的CSS文件中,通过link标签引入
作用范围：多个页面
使用场景：项目中
三、行内式：CSS写在标签的style属性中
作用范围：当前标签
使用场景：配合js使用

选择器

一、标签选择器
结构：标签名{css属性名：属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
1、标签选择器选择的是一类标签，而不是单独的某一个
2、标签选择器无论嵌套关系有多深，都能找到对应的标签
二、类选择器
结构：.类名{css属性名：属性值；}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
1、所有标签上都有class属性，class属性的属性值称为类名(类似于名字)
2、类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3、一个标签可以同时有多个类名，类名之间以空格隔开
4、类名可以重复，一个类选择器可以同时选中多个标签
三、id选择器
结构：#id属性值{css属性名：属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
1、所有标签上都有id属性
2、id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3、一个标签上只能有一个id属性值
4、一个id选择器只能选中一个标签
四、通配符选择器
结构：*{css属性名：属性值；}
作用：找到页面中所有的标签，设置样式
注意点：
1、开发中使用极少，只会在极特殊情况下才会用到
2、有时候可能会用于去除标签默认的margin和padding

字体和文本样式

一、字体样式
1、字体大小
属性名：font-size
取值：数字+px
注意点：
谷歌浏览器默认文字大小是16px
单位需要设置，否则无效
2、字体粗细
属性名：font-weight
取值：
关键字：
正常 normal
加粗 bold
纯数字：100~900的整百数
正常 400
加粗 700
注意点：
不是所有字体都提供了九种粗细，因此部分取值页面中无变化
实际开发中以：正常、加粗两种取值使用最多
3、字体是否倾斜
属性名：font-style
取值：
正常(默认值)：normal
倾斜：italic
4、字体类型font-family
属性名：font-family
常见取值：具体字体1，具体字体2，具体字体3，具体字体4，…，字体系列
具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等等…
字体系列:sans-serif、serif、monospace等…
渲染规则：
1、从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
2、如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意点：
1、如果字体名称中存在多个单词，推荐使用引号包裹
2、最后一项字体系列不需要引号包裹
3、网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
6、样式的层叠问题
给同一个标签设置了相同的样式，此时样式会层叠(覆盖)，写在最下面大的会生效
7、字体font相关属性的连写
属性名：font(复合属性)
取值：
font：style、weight、size、family；
省略要求：只能省略前两个，如果省略了相当于设置了默认值
注意点：如果需要同时设置单独和连写形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面
二、文本样式
1、文本缩进
属性名：text-indent
取值：
数字+px
数字+em(推荐：1em=当前标签的font-size的大小)
2、文本水平对齐方式
属性名：text-align
取值：
属性值 效果
left 左对齐
center 居中对齐
right 右对齐
注意点：
如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素)设置
拓展:如果需要让div、p、h(大盒子)水平居中
可以通过margin:0 auto实现
注意点：
a、如果需要让div、p、h(大盒子)水平居中，直接给当前元素本身设置即可
b+、margin：0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时默认占满父元素的宽度

3、文本修饰
属性名：text-decoration
取值：
属性值 效果
underline 下划线(常用)
line-through 删除线(不常用)
overline 上划线(几乎不用)
none 无装饰线(常用)
注意点：
开发中会使用text-decoration：none；清除a标签默认的下划线
三、行高
作用：控制一行的上下行间距
属性名：line-height
取值：
数字+px
倍数(当前标签font-size的倍数)
应用：
1、让单行文本垂直居中可以设置line-height：文字父元素高度
2、网页精准布局时，会设置line-height：1、可以取消上下间距
行高与font连写的注意点：
如果同时设置了行高和font连写，注意覆盖问题
font：style weight size/line-height family；
四、颜色常见取值
属性名：
如：文字颜色：color
如：背景颜色：background-color
属性值：
颜色表示方式 表示含义 属性值
关键词 预定义的颜色名 red、green、blue、yellow…
红绿蓝三原色,每
rgb表示法 项取值范围0~255 rgb(255,255,255)
红绿蓝三原色+
rgba表示法 a表示透明度， rgba(255,255,255,0.5)
取值范围是0~1
十六进制表 #开头,将数字转
示法 换成十六进制表 #000000、#ff0000
示

选择器进阶

一、后代选择器：空格
作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2 {css}
结果：
在选择器1所找到标签的后代(儿子、孙子、重孙子…)
注意点：
1、后代包括：儿子、孙子、重孙子…
2、后代选择器中，选择器与选择器之前通过空格隔开
二、子代选择器：>
作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1>选择器2{css}
结果：
在选择器1所找到标签的子代(儿子)中，找到满足选择器2的标签，设置样式
注意点：
1、子代只包括：儿子
2、子代选择器中，选择器与选择器之前通过>隔开
三、并集选择器：，
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1，选择器2{css}
结果：
找到选择器1和选择器2选择的标签，设置样式
注意点：
1、并集选择器中的每组选择器之间通过,分离
2、并集选择器中的每组选择器可以是基础选择器或者是复合选择器
3、并集选择器中的每组选择器通过一行写一个，提高代码的可读性
四、hover伪类选择器
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器：hover{css}
注意点：
1、伪类选择器选中的元素的某种状态

背景相关属性

一、背景颜色
属性名：background-color(bgc)
属性值：
颜色取值：关键字、rgb表示法、rgba表示法、十六进制表示法…
注意点：
背景颜色默认值是透明：rgba(0,0,0,0,),transparent
背景颜色不会影响盒子的大小，并且还能看清盒子的大小和位置，一般会布局在习惯先给盒子设置背景颜色
二、背景图片
属性名：background-image(bgi)
属性值：background-image：url(‘图片的路径’)
注意点：
背景图片中url中可以省略引号
背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰的效果，类似于背景颜色，是不能撑开盒子的
三、背景平铺
属性名：background-repeat(bgr)
属性值：
取值 效果
repeat (默认值)水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿着水平方向(x轴)平铺
repeat-y 沿着垂直方向(y轴)平铺
四、背景位置
属性名：background-position(bgp)
属性值：background-position：水平方向位置 垂直方向位置；
1、方位名词(最多只能表示9个位置)
水平方向:left center right
垂直方向:top center bottom
2、数字+px(坐标)
坐标系：原点(0,0)–盒子的左上角
x轴–水平向右
y轴–垂直向下
操作：将图片左上角与坐标原点重合即可
注意点：
方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
五、背景相关属性的连写形式
属性名：background(bg)
属性值：
单个属性值的合写，取值之间以空格隔开
书写顺序：
推荐：background：color image repeat position
省略问题：
可以按照需求省略
特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background:url()
注意点：
如果需要设置单独的样式和连写
1、要么把单独的样式写在连写的下面
2、要么把单独的样式写在练习的里面

元素显示模式

一、块级元素
显示特点：
1、独占一行(一行只能显示一个)
2、宽度默认是父元素的高度，高度默认由内容撑开
3、可以设置宽高
代表标签：
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…
二、行内元素
显示特点：
1、一行可以显示多个
2、宽度和高度默认由内容撑开
3、不可以设置宽高
代表标签:
a、span、b、u、i、s、strong、ins、em、del…
三、行内块元素
显示特点：
1、一行可以显示多个
2、可以设置宽高
代表标签：
input、textarea、buttton、select…
特殊情况:img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
四、元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
语法：
属性 效果 使用频率
display:block 转换成块级元素 较多
display:inline-block 转换成行内块元素 较多
display:inline 转换成行内元素 极少
注意点：
1、块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等…
但是：p标签中不要嵌套div、p、h等块级元素
2、a标签内部可以嵌套任意元素
但是：a标签不能嵌套a标签