css样式表的几种引入方式
- 内部样式表:不用通过引入css文件来设置样式,直接在head的< style>双标签中设置。
- 内联样式表(行内样式):在HTML中,直接将样式属性写在标签上,优先级高于其它所有方式设置的样式,加了!important的除外。
- 外部样式表:通过引入外部css文件设置样式,引入方式有两种,一种是通过link标签
< link rel=“stylesheet” type=“text/css” href=“xxx.css”/>
一种是在head的< style>双标签中引入
< style>
@import url(xxx.css);
</ style>
这一种引入方式引入的css文件不会和HTML文件同时加载,很慢,所以一般都用link的方式引入。
css的几种常用选择器
css既然能设置元素的样式,那么首先一点就要通过某种方式将样式与元素关联起来,而起到关联作用的就是选择器
- 标签选择器: 标签名{样式属性} 权重为1
- id选择器: #id名{样式属性} 权重为100
- 类选择器: .类名{样式属性} 权重为10
- 群组选择器: 可设置多个选择器,用逗号隔开,这些选择器共用一些样式,权重各算各的
- 包含选择器 选择器间存在包含关系,空格隔开,比如div标签里有一个id为xx的元素,就可以通过 div #xx{样式属性}来选择到这个元素给它设置属性,权重为包含关系中涉及到的所有选择器权重之和
- 通配符选择器:*{样式属性},对页面上所有元素生效的样式设置,权重为0
- 伪类选择器:首先说一下我对伪类的理解,伪类字面意思拆开就是伪和类,就是抽象的一种分类,一般类的区分是根据元素一些客观存在的特点分类,比如说我这里要设置一行关于商品的标签,那么就可以分为商品类,通过类选择器来选中有商品这个类名的元素统一设置商品类特有的样式,而伪类的存在就是为了给一些抽象的,动态的分类来设置样式。
这里以a标签的伪类选择器为例
a:link{} a标签在未被访问过情况下的样式
a:visited{} a标签在被访问后情况下的样式
a:hover{} a标签在鼠标滑过或悬停时的样式
a:active{} a标签在鼠标点击时的样式
从上面分析,这种基于用户动态操作的分类,只能通过伪类选择器来实现,伪类选择器权重为10,与类的选择器一样。
css3新增选择器:
属性选择器:权重10 拿a标签来举例
a[title] {样式属