文章目录
CSS导入方式
类别 | 引入方法 | 位置 | 加载 |
---|---|---|---|
行内样式 | 开始标签内style | html文件内 | 同时 |
内部样式 | <head>中<style>内 | html文件内 | 同时 |
链入外部样式 | <head>中<link>引用 | css样式文件与html文件分离 | 页面加载时,同时加载CSS样式 |
导入式@import | <head>中<style>内 | css样式文件与html文件分离 | 在读取完html文件之后加载 |
使用链入外部样式的好处?
- css和html文件分离
- 多个文件可以使用同一个样式文件
- 多个文件引用同一个css文件,css只需要下载一次
link和@import的区别?
区别1: link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
区别2:加载顺序的差别。
当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式,网速慢的时候还挺明显。 简而言之就是,link引用CSS时,在页面载入时同时加载;@import需要等页面完全载入后才加载
区别3:兼容性的差别。
由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
区别4:使用dom控制样式时的差别。
当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
区别5:链入方式上有区别。
<!--link导入方式:-->
<link rel="stylesheet" type="text/css" href="index.css">
<!--@import导入的方式:-->
<style type="text/css">
@import url('index.css');
</style>
并且@import可以在CSS文件中再次引入其他样式表 。
css导入方式优先级
对于同一个元素,同时使用上面表格的四种导入方式来设置CSS样式来查看他们的优先级
行内样式 > 内部样式 > 外部样式
说明:
1、链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
2、最后定义的优先级最高(就近原则)
CSS选择的艺术
标签选择器
p{color:red}
通过标签选择器设置样式,那使用该标签的内容都引用该样式。
类选择器
为HTML标签添加class属性
<h1 class = "red">内容1</h1>
通过类选择器来为具有此class属性的元素设置CSS样式
.red{color:red}
可对不同类型元素的同一个名称的类选择器设置不同的样式规则
p.red{font-size:50px}
每一个标签可以属于多个类选择器
<h1 class = "red one">内容</h1>
ID选择器
为HTML标签添加id属性
<h1 id="one">内容</h1>
通过ID选择器来设置CSS样式
#one{
color:red
}
群组选择器
h1,p,p.red,h2{
font-size:50px
}
全局选择器
*{
font-size:50px
}
后代选择器
p a em {...} /*p标签中a标签中的em*/
#p1 em {...} /*id为p1的标签中的em*/
p.red a em{...} /*class为red的p标签中的a标签中的em*/
伪类选择器
伪类选择器定义特殊状态下的样式,无法用标签、id、class及其它属性实现
链接伪类——链接的4种状态:激活状态、已访问状态、未访问状态、和鼠标悬停状态
伪类 | 说明 |
---|---|
:link | 未访问的链接 |
:visited | 已访问的链接 |
:hover | 鼠标悬停状态 |
:active | 激活的链接 |
伪类:hover和:active
1 :hover用于访问的鼠标经过某个元素时
2 :active用于一个元素被激活时(即按下鼠标之后放开鼠标之前的时间)
IE6及更早版本,支持a元素的4种状态
IE6浏览器不支持其他元素的hover和active
链接伪类的顺序
:Link > :Visited > :Hover > :Active
说明:
1 a:hover必须置于a:link和a:visited之后,才有效
2 a:actived必须置于 a:hover之后,才有效
3 伪类名称对大小写不敏感
CSS继承和层叠
继承的好处:
1、父元素设置样式,子元素可以继承部分属性
2、减少CSS属性
注意:不是所有属性都是可以继承的,在IE中,table表格不会继承父元素的属性。
CSS层叠:
1、可以定义多个样式
2、不冲突时,多个样式可以层叠为一个
3、冲突时,按不同样式规则优先级来应用样式
CSS权重
CSS优先级规则
同一个样式表中:
1.权值相同
就近原则(离被设置元素越近优先级越高)
2.权值不同
根据权值来判断CSS样式,哪种CSS样式权值高,就使用哪种样式
选择器的权值:
-
标签(元素)选择器和伪元素选择器:权值为1
-
类选择器、属性选择器和伪类选择器:权值为10
-
ID选择器:权值为100
-
通配符选择器:权值为0
-
行内样式:权值为1000
!important规则
-
可调整样式规则的优先级(最高)
-
添加在样式规则之后,中间用空格隔开
div{color:red !important;}
CSS命名规范
- 采用英文字母、数字以及”-“和”_“命名
- 以小写字母开头,不能以数字和”-“,”_“开头
- 命名形式:单字,连字符,下划线和驼峰
/*一个单词,采用全部小写方式*/
.special{......}
/*多个单词*/
/*驼峰写法,除第一个单词外,其他首字母大写*/
.mainTitle{......}
/*采用"-"连接符*/
.main-title{......}
/*采用"_"下划线*/
.main_title{......}
- 使用有意义命名
CSS3选择器
回顾CSS选择器:
通配符选择器、元素选择器、类选择器、ID选择器、后代选择器
新增基本选择器:
子元素选择器、相邻兄弟元素选择器、通用兄弟选择器、群组选择器
基本选择器
子元素选择器
概念:
子元素选择器只能选择某元素的子元素
语法格式:
父元素 > 子元素 (Father > Childern)
兼容性:
IE8+、FireFox、Chrome、Safari、Opera
别名:
直接后代选择器
相邻兄弟元素选择器
概念:
相邻兄弟元素选择器可以选择紧邻在另一元素后的元素,而且他们都具有一个相同的父元素
语法格式:
元素 + 兄弟相邻元素 (Element + Sibling)
兼容性:
IE8+、FireFox、Chrome、Safari、Opera
通用兄弟选择器
概念:
选择某元素后面的所有兄弟元素,而且他们具有一个相同的父元素
语法格式:
元素 ~ 后面所有兄弟相邻元素 (Element ~ Siblings)
兼容性:
IE8+、FireFox、Chrome、Safari、Opera
群组选择器
概念:
群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号”,“隔开
语法格式:
元素1,元素2,…,元素n(Element1,Element2,…,Elementn)
兼容性:
IE6+、FireFox、Chrome、Safari、Opera
属性选择器
对带有指定属性的HTML元素设置样式
Element[attribute]
概念:
选择所有带有attribute属性选择器
兼容性:
IE8+,FireFox、Chrome、Safari、Opera
Element[attribute=“value”]
概念:
选择所有使用atribute=“value”的元素
兼容性:
IE8+,FireFox、Chrome、Safari、Opera
Element[attribute~=“value”]
概念:
选择attribute属性包含单词“value”的元素
兼容性:
IE8+,FireFox、Chrome、Safari、Opera
Element[attribute^=“value”]
概念:
选择attribute属性值以“value”开头的所有元素
兼容性:
IE8+,FireFox、Chrome、Safari、Opera
Element[attribute$=“value”]
概念:
选择attribute属性值以“value”结尾的所有元素
兼容性:
IE8+,FireFox、Chrome、Safari、Opera
Element[attribute*=“value”]
概念:
选择attribute属性值包含“value”的所有元素
兼容性:
IE8+,FireFox、Chrome、Safari、Opera
Element[attribute|=“value”]
概念:
选择attribute属性值为“value”或以“value-”开头的元素
兼容性:
IE8+,FireFox、Chrome、Safari、Opera
伪类选择器
动态伪类:
- 锚点伪类
- 用户行为伪类
UI元素状态伪类
CSS3结构类
否定选择器
伪元素
动态伪类
这些伪类并不存在于HTML中,只有当用户和网站交互的时候才能体现出来
锚点伪类 :link , :visited
用户行为伪类 :hover , :active , :focus
UI元素状态伪类
概念:
我们把“:enabled”,“:disable”,“:checked”伪类称为UI元素状态伪类
兼容性:
IE9+,FireFox、Chrome、Safari、Opera
CSS3结构类
CSS3的:nth选择器
我们把CSS3的:nth选择器也称为CSS3结构类
选择方法:
:first-child,:last-child,:nth-child(),:nth-last-chld,nth-of-type(),:nth-last-of-type(),:first-of-type(),:last-of-type,:only-child,:only-of-type,:empty
Element:first-child
概念:
选择属于其父元素的首个子元素的每个Element元素
兼容性:
IE8+,FireFox、Chrome、Safari、Opera
Element:last-child
概念:
指定属于其父元素的最后一个子元素的Element元素
兼容性:
IE8+,FireFox、Chrome、Safari、Opera
Element:nth-child(N)
概念:
:nth-child(N)选择器匹配属于其父元素的第N个子元素,不论元素的类型
兼容性:
IE9+,FireFox4+,Chrome,Safari,Opera
关于参数(N)
Element:nth-child(number)
选择某元素下的第number个Element元素
Element:nth-child(n)
n是一个简单的表达式,取值从“0”开始计算。这里只能是“n”,不能用其他字母代替,可以实现一些巧妙的用法,如2n+1表示奇数,2n表示偶数等
Element:nth-child(odd),Element:nth-child(even)
odd和even是可用于匹配下标是奇数或偶数的Element元素的关键词(第一个下标是1)
Element:nth-last-child(N)
概念:
匹配属于其元素的第N个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数
兼容性:
IE9+,FireFox4+,Chrome,Safari,Opera
Element:nth-of-type(N)
概念:
:nth-of-type(N)选择匹配属于父元素的特定类型的第N个子元素的每个元素
兼容性:
IE9+,FireFox4+,Chrome,Safari,Opera
Element:nth–last-of-type(N)
概念:
匹配属于父元素的特定类型的第N个子元素的每个元素,从最后一个子元素开始计数
兼容性:
IE9+,FireFox4+,Chrome,Safari,Opera
Element:first-of-type
概念:
:first-of-type选择器匹配属于其父元素的特定的首个子元素的每个元素
兼容性:
IE9+,FireFox4+,Chrome,Safari,Opera
Element:last-of-type
概念:
:last-of-type选择器匹配属于其父元素的特定的首个子元素的每个元素
兼容性:
IE9+,FireFox4+,Chrome,Safari,Opera
Element:only-child
概念:
:only-child选择器匹配属于其父元素的唯一子元素的每个元素
兼容性:
IE9+,FireFox,Chrome,Safari,Opera
Element:only-of-type
概念:
:only-of-type选择器匹配属于其父元素的特定类型的唯一子元素的每个元素
兼容性:
IE9+,FireFox4+,Chrome,Safari,Opera
Element:empty
概念:
:empty选择器匹配没有子元素(包括文本节点)的每个元素
兼容性:
IE9+,FireFox,Chrome,Safari,Opera
否定选择器(:not)
概念:
:not(Element/selector)选择器匹配非指定元素/选择器的每个元素
语法格式:
父元素:not(子元素/子选择器) (Father:not(Children/selector))
兼容性:
IE9+,FireFox,Chrome,Safari,Opera
举个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>not</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
}
a {
text-decoration: none;
color: #333;
font-size: 14px;
display: block;
float: left;
width: 100px;
height: 30px;
}
nav {
width: 800px;
margin: 0 auto;
}
nav > a:not(:last-of-type) {
border-right: 1px solid red;
}
</style>
</head>
<body>
<nav>
<a href="#">first</a>
<a href="#">second</a>
<a href="#">third</a>
<a href="#">fourth</a>
<a href="#">fifth</a>
</nav>
</body>
</html>
伪元素
CSS伪元素用于向某些选择器设置特殊效果
语法格式:
元素::伪元素 (Element::pseudo-element)
兼容性:
IE9+,FireFox,Chrome,Safari,Opera
Element::first-line
概念:
根据“first-line”伪元素中的样式对Element元素的第一行文本进行格式化
说明:
“first-line”伪元素只能用于块级元素
Element::first-letter
概念:
用于向文本的首字母设置特殊样式
说明:
“first-letter”伪元素只能用于块级元素
Element::before
概念:
在元素的内容前面插入新的内容
说明:
常用“content”配合使用
Element::after
概念:
在元素的内容后面插入新内容
说明:
常用“content”配合使用,多用于清除浮动
Element::selection
概念:
用于设置在浏览器选中文本后的背景色和前景色
兼容性说明:
::selection在IE家族中,只有IE9+版本支持,在Firefox中需要加上其前缀“-moz”