CSS基础

CSS概述

CSS：层叠样式表（Cascading style sheets），给页面中HTML标签设置样式
CSS写在style标签中，语法规则如下

CSS的引入方式：

• 内嵌式：CSS写在style标签中，虽然style标签可以写在页面任意位置，但通常约定在head标签中
• 外联式：CSS写在单独的.css文件中，通过link标签在网页中引入
• 行内式：CSS写在标签的style属性中

CSS选择器

CSS选择器的作用是选择页面中对应的标签，以进行样式设置

标签选择器

结构：标签名{ css属性名：属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式
其他：标签选择器选择的是一类标签，而不是单独某一个；标签选择器无论嵌套关系有多深，都能找到对应的标签

类选择器

结构：.类名{ css属性名：属性值；}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
其他：所有标签上都有class属性，class属性的属性值称为类名； 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头；一个标签可以同时有多个类名，类名之间以空格隔； 类名可以重复，一个类选择器可以同时选中多个标签

ID选择器

结构：#id属性值{ css属性名：属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
其他： 所有标签上都有id属性；id属性值在一个页面中是唯一的；一个标签上只能有一个id属性值；一个id选择器只能选中一个标签

通配符选择器

结构：*{ css属性名：属性值；}
作用：找到页面中所有的标签，设置样式

复合选择器

后代选择器：空格

根据HTML 标签的嵌套关系，选择父元素后代中满足条件的元素，后代包括：儿子、孙子、重孙子，选择器与选择器之前通过空格隔开

选择器语法：选择器1 选择器2 { css }

子代选择器：>

根据HTML 标签的嵌套关系，选择父元素子代中满足条件的元素，子代只包括：儿子，选择器与选择器之前通过>隔开
选择器语法：选择器1 > 选择器2 { css }

并集选择器

同时选择多组标签，设置相同的样式，每组选择器之间通过,分隔， 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
选择器语法：选择器1 ，选择器2 { css }

交集选择器

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

选择器语法：选择器1选择器2 { css}

hover伪类选择器

选中鼠标悬停在元素上的状态，设置样式，伪类选择器选中的元素的某种状态
选择器语法：选择器:hover{ css}

结构伪类选择器

根据元素在HTML中的结构关系查找元素，减少对于HTML中类的依赖，有利于保持代码整洁，常用于查找某父级选择器中的子元素

选择器	说明
E:first-child { }	匹配父元素中第一个子元素，并且是E元素
E:last-child { }	匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n){ }	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n) { }	匹配父元素中倒数第n个子元素，并且是E元素
E:nth-of-type(n){ }	只在父元素的同类型(E)子元素范围中，匹配第n个

注意：
1.n为从0开始
2.通过n可以组成常见公式

功能	公式
偶数	2n、even
奇数	2n+1、2n-1、odd
找到前五个	-n+5
找到从第五个往后	n+5

链接伪类选择器

常用于选中超链接的不同状态

语法	功能
a:link { }	选中a链接 未访问过 的状态
a:visited { }	选中a链接 访问之后 的状态
a:hover { }	选中a链接 鼠标悬停 的状态
a:active { }	选中a链接 鼠标按下 的状态

注意：

• 如果需要同时实现以上四种伪类状态效果，需要按照LVHA顺序书写
• 其中:hover伪类选择器使用更为频繁，常用于选择各类元素的悬停状态

焦点伪类选择器

用于选中元素获取焦点时状态，常用于表单控件

input:focus {
	background-color: blue;
}

属性选择器

通过元素上的HTML属性来选择元素，常用于选择input 标签
选择器语法：

选择器	功能
E[attr]	选择具有attr属性的E元素
E[attr=“val”]	选择具有attr属性并且属性值等于val的E元素

伪元素

一般页面中的非主体内容可以使用伪元素，普通元素HTML 设置的标签，伪元素由CSS 模拟出的标签效果

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

注意：

1. 必须设置content属性才能生效
2. 伪元素默认是行内元素

字体和文本样式

字体样式

样式	属性名	说明
字体大小	font-size	数字+px，谷歌浏览器默认16px
字体粗细	font-weight	正常：normal 或400，加粗：bold 或700 纯数字：100~900的整百数，不是所有字体都提供了九种粗细，因此部分取值页面中无变化
字体样式	font-style	正常：normal，倾斜：italic
字体系列	font-family	具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列； 具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……； 字体系列：sans-serif、serif、monospace等……； 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体，如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体； 如果字体名称中存在多个单词，推荐使用引号包裹，最后一项字体系列不需要引号包裹
体连写	font	font : style weight size family;

文本样式

样式	属性名	说明
文本缩进	text-indent	数字+px，数字+em，1em = 当前标签的font-size的大小
文本水平对齐方式	text-align	left 左对齐，center 居中对齐，right 右对齐
文本修饰	text-decoration	underline 下划线，line-through 删除线，overline 上划线，none 无装饰线

行高

行高line-height用于控制一行的上下行间距
取值：数字+px或倍数（当前标签font-size的倍数）
应用：

• 让单行文本垂直居中可以设置line-height : 文字父元素高度；
• 网页精准布局时，会设置line-height : 1 可以取消上下间距

行高与font连写：font : style weight size/line-height family

颜色取值

颜色表示方式	说明	属性值
关键字	预定义颜色名	red,green,blue,yello…
rgb	红绿蓝三原色，每项取值范围 0 ~ 255	rgb(0,0,0),rgb(255,255,255)…
rgba	红绿蓝三原色+a透明度，透明度取值范围是0-1	rgb(0,0,0,0.5),rgb(255,255,255,.03)…
十六进制	#开头，十六进制数字	#000000, #ff000，简写 #000、#f00

背景相关属性

样式名称	属性名	属性值	说明
背景颜色	background-color	颜色取值：关键字、rgb表示法、rgba表示法、十六进制…	背景颜色默认值是透明：rgba(0,0,0,0) 、transparent 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
背景图片	background-image	background-image: url(图片路径);	背景图片中url中可以省略引号 背景图片默认是在水平和垂直方向平铺的 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子
背景平铺	background-repeat	repeat：默认值，水平和垂直方向平铺 no-repeat 不平铺 repeat-x 水平方向平铺 repeat-y 垂直方向平铺
背景位置	background-position	background-position: 水平方向 垂直方向	可以使用方位名词：水平方向 left、center、right 垂直方向 top、center、bottom 可以使用坐标值数字+px，原点(0, 0) 是盒子的左上角 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
背景相关属性的连写	background	background：color image repeat position

元素显示模式

模式	特点	代表标签
块级元素	独占一行（一行只能显示一个） 宽度默认是父元素的宽度，高度默认由内容撑开 可以设置宽高	div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer
行内元素	一行可以显示多个 宽度和高度默认由内容撑开 不可以设置宽高	a、span、b、u、i、s、strong、ins、em、del
行内块元素	一行可以显示多个 可以设置宽高	input、textarea、button、select

元素显示模式转换

属性	效果
display:block	转换成块级元素
display:inline-block	转换成行内块元素
display:inline	转换成行内元素

HTML嵌套规范注意点

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

CSS 特性

继承性

子元素有默认继承父元素样式的特点
可以继承的常见属性(文字控制属性都可以继承)： color、 font-style、font-weight、font-size、font-family、 text-indent、text-align、line-height

层叠性

给同一个标签设置不同的样式， 此时样式会层叠叠加，会共同作用在标签上
给同一个标签设置相同的样式， 此时样式会层叠覆盖， 最终写在最后的样式会生效
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

优先级

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
选择器优先级
继承< 通配符选择器< 标签选择器< 类选择器< id选择器< 行内样式< !important
其中： !important不能提升继承的优先级，只要是继承优先级最低！
权重叠加计算
如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算：

比较规则：

1. 先比较第一级数字，如果比较出来了，之后的统统不看
2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
3. ……
4. 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
   注意：!important如果不是继承，则权重最高