-
CSS概念
- 概念:
- 层叠样式表:同一个样式都作用于同一个元素
- 设置网页外观
- 减少内容格式化,减少网页体积,加快下载和访问速度
注意:如果同一个样式同时作用于同一个元素,最终样式决定于样式的优先级
-
CSS基本语法
- CSS选择器
- 可以使css样式与元素进行分离
- 作用
- 减少代码冗余
- 方便后期维护
- 语法:选择器{属性名:属性值;}
注意:符号都是英文的,符号必须写
- 选择器命名规则:
- 最好不使用简单的字符命名,使用英文单词
- 使用英文字母开头,后面跟数字、字母、下划线、中线
- 不能以数字开头
- 不能使用中文
-
CSS引入方式
- 行间样式
- 语法:<标签名 style=”样式属性”></标签名>
- 内嵌式
- 语法
- 在head标签中创建一对style标签
- 在style标签中创建选择器
- <head><style>选择器{属性名:属性值;}</style></head>
- 语法
- 外链式
- 语法:
- 先在页面外建立外部样式表文件(*.css)
- 再在页面引入文件:<link rel=”stylesheet” type=”text/css” href=”*.css”/>
- 语法:
注意:type属性值可选择,默认text/css
注意:
-
-
- 标签属性 属性名=”属性值”
- 样式属性 属性名:属性值;
-
-
选择器
- 什么是选择器:选择器就是一种匹配模式,匹配那些需要添加样式的元素
注意:选择器最终选择的就是元素(标签),给匹配到的元素添加样式
- 选择器分类
- 基本选择器
- id选择器
- 声明:#id名称{样式规则}
- 调用:<标签名 id=”id名称”></标签名>
- 注意:
- # 表示使用的是id声明的选择器
- id是唯一的,在调用的时候只能调用一次,可以声明多次
- 调用时 id名称前后不能有空格
- 同一个元素不能同时调用多个id
- 类名选择器
- 声明:.类名{样式规则}
- 调用:<标签名 class=”类名”></标签名>
- 注意:
- . 表示使用的是class声明的选择器
- 调用过程中同一个类名可以调用多次
- 同一个元素可以同时调用多个类名,用空格隔开
- 标签选择器(元素选择器)
- 语法:标签名{样式规则}
- 匹配页面中所有该标签的元素
- 注意:标签名只能是html中存在的标签
- 通用选择器
- 语法:*{样式规则}
- 注意:
- *表示通配符,匹配页面中所有的标签(包括html,head,body)
- 通常不建议使用,在测试代码时使用
- 会影响浏览器解析网页速度
- 注意:不能匹配某个范围内的元素,引入层级选择器
- id选择器
- 层次选择器
- 后代选择器
- 语法:选择器1 选择器2 选择器3{样式规则}
- 注意:
- 选择器1,2,3都是由基本选择器组成
- 匹配选择器1下面的选择器2下面的选择器3
- 选择器2是选择器1的后辈元素
- 子选择器
- 语法:选择器1>选择器2{样式规则}
- 匹配选择器1的第一层子级元素
- 只匹配第一代儿子
- 并列选择器
- 语法:选择器1,选择器2{样式规则}
- 注意:
- 匹配页面中所有的选择器1和选择器2
- 多个元素设置相同属性时用
- 交集选择器
- 语法:选择器1选择器2{样式规则} (中间没空格)
- 注意:匹配同时含有选择器1和选择器2的元素
- 相邻选择器
- 语法:选择器1+选择器2{样式规则}
- 注意:匹配的是选择器1 后面的第一个兄弟选择器2
- 兄弟选择器
- 语法:选择器1~选择器2{样式规则}
- 注意:匹配的是选择器1之后的所有兄弟选择器2
- 后代选择器
- 基本选择器
注意:在属性前面加一个-(-属性)表示过滤属性,不解析这个属性
-
- 伪类选择器
- 动态伪类选择器
- E:link 设置超链接a在未被访问前的样式。
- E:visited 设置超链接a在其链接地址已被访问过时的样式。
- E:hover 设置元素在其鼠标悬停时的样式。
- E:active 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
- E:focus 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。
- 注意;
- 设置超链接标签注意设置顺序:L、V、H、A
- 项目中:只设置其中一两个属性
- 目标伪类选择器
- 设置页面中锚点的样式
- 语言伪类选择器
- UI状态伪类选择器
- 结构伪类选择器(重点)
- E:first-child: 匹配父元素中第一个儿子,并且第一个儿子必须是指定的选择器
- E:last-child: 匹配父元素中最后一个儿子,并且最后一个儿子必须是指定的选择器
- E:first-of-type:匹配父元素中同类型中第一个子元素
- E:last-of-type:匹配父元素中同类型中最后一个子元素
- E:nth-child(n): 匹配父元素的第n个子元素E,如果之前有其他元素会占一个位置(E:nth-child(2n)匹配偶数项,奇数项+1)
- E:nth-of-type(n):匹配父元素中同类型中第n个子元素
- 否定伪类选择器
- E:not(s): 匹配不含s选择符的元素E
- 动态伪类选择器
- 伪类选择器,伪元素选择器区别
- 在css3之前的版本中没有区别,使用时都是使用一个”:”
- 在css3中对它们做了一个区分(用两个冒号)
- 伪类选择器:一种状态或一个属性
- 实例:匹配班上的所有男生得到一个集合,伪类选择器就是从这个集合中筛选出某个或多个元素
- 伪元素选择器:就是创建了一个新元素
- 如before是在元素之前创建一个新元素
- 伪类选择器:一种状态或一个属性
- 属性选择器
- E[att] 选择具有att属性的E元素。
- E[att="val"] 选择具有att区别属性且属性值等于val的E元素。
- E[att~="val"] 选择具有att属性且属性值为一个用空格分隔的字词列表,其中一个等于val的E元素。
- E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。
- E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素。
- E[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素。
- E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择。
- 伪类选择器
-
优先级
1. css优先级
-
- 引入css的三种方式:行内>内嵌=外链(内嵌、外链优先级取决于哪一个最后引入)
- !important > 行内样式 > id选择器 > 类名选择器 > 标签选择器
- 权值:
- 行内样式: 1000
- id选择器: 100
- 类名选择器:10
- 标签选择器:1
- 优先级:比较权值大小