css的格式
CSS的选择器
1、标签选择器
- 使用html的标签名作为选择器
- label{样式}
2、id选择器
- 使用html中元素的id属性作为选择器，同一个页面的要求唯一
- #myid{样式}
3、class选择器
- 使用html中元素的class属性值作为选择器
- .类名{样式}
4、后代选择器（以空格标识）
- 选择某个元素的后代元素作为选择器
- 父元素 后代元素{样式}
5、子元素选择器（以>标识）
- 选择某个元素的直接子元素作为选择器
- 父元素>子元素{样式}
6、相邻兄弟选择器（以+标识）
- 选择紧邻在某个元素的后面的元素（二者具有相同的父元素）作为选择器
- 元素1+元素2{样式}
7、后续兄弟选择器（以~标识）
- 选择指定元素之后的所有兄弟元素
- 元素~元素{样式}
8、并集选择器
- 多个选择器之间使用逗号隔开，标识这些选择器使用同一个样式
9、交集选择器
- 取两个选择器的交集
- label.mylabel{样式} 表示选择label标签中的class值为mylabel的标签作为选择器
- 其中前面的选择器必须为标签选择器，后面的选择器必须为id选择器或者class选择器，两个选择器之间不能有空格
CSS样式表的类别
- 根据CSS相对于元素存放的位置分为：
- 行内样式
- 在元素的开始标签中，使用style属性编写的样式
- 外部样式表
- 将css代码写在一个.css文件中，使用时，需要在页面中使用<link>标签引入入此样式表
- <link type="text/css" rel="stylesheet" href="../css/css0905/0905.css"/>
- 其中type和rel的只是固定值
- href是.css文件所在的位置
- 导入式：
- <style type="text/css">@import url{"路径"}</style>
- 内部样式表
- css代码写在<head>内的<style>标签中
- 三种方式的区别
- 行内样式直接，修改简单，但html代码和css代码混在一起
- 内部样式表，比起行内样式有优点，但如果是多个页面采用相同的样式，不能复用
- 外部样式表，html代码与css代码分析，可以多个页面复用
- 优先级不同
CSS的优先级
- CSS的继承
- 子标签可以自动继承父标签的样式风格，子标签单独设置的样式风格不会影响父标签的样式。
- 如果同一个元素存在多个样式，优先级最高的样式生效，优先级低的无效。
- 1、行内样式表(内联样式)>内部样式表>外部样式表
- 2、选择器的优先级
- id选择器>class(类)选择器>元素选择器
- 3、最高优先级 !important
- 4、相同优先级中最后一次定义生效
字体样式
- font-family 字体类型
- font-size 字体大小，单位px
- font-style 字体风格 斜体(italic)等
- font-weight 字体的粗细
- font 设置多个属性，比如 font:italic bold 20px "宋体" 。顺序：风格 粗细 大小 字体
文本样式
- color 文本的颜色 取值方式#FFEE33(#FE3)十六进制，或者使用英文的颜色单词
- text-align 元素的水平对齐方式 取值 left right center
- text-indent 段落的首行缩进，取值单位为像素，如20px
- text-height 行高 取值单位为像素
- text-decoration 文本的修饰线 underline 下划线、line-through删除线、overline顶部线
伪类
- 定义元素在不同状态下的样式
- 语法： 标签：伪类名{样式}
背景色
- background-color 设置元素的背景颜色
扫一扫
1367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
