css层叠样式表
为html中的元素添加样式 相同的样式多个,会覆盖 不同的样式多个,会叠加 目标: 学习常用的样式属性***,选择器*** 语法: 选择器 { 样式; 样式; 样式; ... } 样式 : 属性名 : 属性值 ; 注意 : 为元素设置样式建议使用css 使用方式: 行内样式表 : 在元素的开始标签上添加一个style属性,样式定义在style属性值中 内部样式表 : head中定义style标签对,标签对中定义css样式 外部样式表 : 在外部定义一个css文件,在要使用的html中通过link标签引入 样式表的优先级: 优先显示谁 谁离元素近就优先显示谁2 路径: 回到上一层../ 进入某一个路径 路径名/
基础选择器
css选择器 : 选中一个或者一组元素,方便为元素添加样式 基础选择器 **** 组合选择器 **** 群组选择器 **** 属性选择器 *** 伪列选择器 **** 微元素选择器 基础选择器 : #id选择器 : 根据元素id属性值,选中一个元素 .class|类选择器 : 根据元素的class属性值,选中一个或者组员元素 标签|元素选择器 : 根据标签名选中一个或者一组元素 *通配符 : 选中所有元素 基础选择器的优先级: id>class>元素>通配符 注意: 元素的class属性值可以相同,并且值列表可以存在多个值 群组选择器 : 通过多种选择器匹配到多个元素同时选中
使用方式
CSS 层叠样式表 为html中的元素添加样式 相同的样式多个,会覆盖 不同的样式多个,会叠加 目标: 学习常用的样式属性***,选择器*** 语法: 选择器 { 样式; 样式; 样式; ... } 样式 : 属性名 : 属性值 ; 注意 : 为元素设置样式建议使用css 使用方式: 行内样式表 : 在元素的开始标签上添加一个style属性,样式定义在style属性值中 内部样式表 : head中定义style标签对,标签对中定义css样式 外部样式表 : 在外部定义一个css文件,在要使用的html中通过link标签引入 样式表的优先级: 优先显示谁 谁离元素近就优先显示谁2 路径: 回到上一层../ 进入某一个路径 路径名/
组合选择器
后代选择器 空格 子元素选择器 > 选中第一层直接子元素,不包含孙子元素等 相邻兄弟 + 普通兄弟 ~ 样式: 可以继承的样式 : 字体样式 文本样式 背景样式等... 不可以继承的样式 : 边框,内外边距的样式等
属性选择器[ ]
根据元素的属性与属性值选中一个或者一组元素 [属性名] : 包含这个属性的元素被选中 元素名[属性名] : 指定元素中具有这个属性的元素被选中 元素名[属性名='属性值'] : 指定元素中具有这个属性并且属性值为定值的的元素被选中
伪类选择器
hover : 当鼠标悬停在元素上时候选中元素添加样式 first-child : 作为第一个子元素 last-child: : 作为最后一个子元素 nth-child(2) : 作为第几个子元素