编写位置
1.内联样式
<p style="color:red;"></p>
2.内部样式表
<head>
<style type="text/css">
p{
color:red;
background-color:yellow;
}
</style>
</head>
3.外部样式表
<link rel="stylesheet" type="text/css" href="文件的路径"/>
选择器
元素选择器
标签名{ }
<style>
p{
color: red;
}
</style>
id选择器
#id {}
<style>
#content{
color: red;
}
</style>
类选择器
.class名{}
<style>
.content{
color: red;
}
</style>
每个标签可以设置多个class
<p class="content name one" title="文本内容">
class属性值是可以重复的
通配选择器
*{}
选中页面中的所有元素
并集选择器（和的关系）
选择器1,选择器2,选择器N{}
<style>
h1,#one,.content{
color: red;
}
</style>
交集选择器
选择器1选择器2选择器N{}
//选取所有class为content的div元素
<style>
div.content{
color: red;
}
</style>
后代选择器
父元素 子元素{}
div span {}
子元素选择器
父元素 > 子元素 {}
div > span {}
IE6及以下的浏览器不支持子元素选择器
属性选择器
[属性名]
选取含有指定属性的元素
[属性名="属性值"]
选取属性值等于指定值的元素
[属性名^="属性值"]
选取属性值以指定内容开头的元素
[属性名$="属性值"]
选取属性值以指定内容结尾的元素
[属性名*="属性值"]
选取属性值中包含指定内容的元素
兄弟元素选择器
兄弟元素是指次元素后边的一些元素。
<div class="box">
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
.box3, .box4, .box5
是.box2的兄弟元素
前一个+后一个
选取后一个兄弟元素（需要前后紧挨着）
前一个元素~后边所有元素
选取后边所有的兄弟元素
伪类选择器
伪类专门用来表示元素的一种的特殊的状态，
比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
:not(选择器)
否定伪类选择器
p:not(.hello){
background-color: yellow;
}
:link
没访问过的链接
a:link{
color: yellowgreen;
}
:visited
访问过的链接
a:visited{
color: red;
}
:hover
鼠标移入状态
a:hover{
color: skyblue;
}
p:hover{
background-color: yellow;
}
:active
被点击的状态
a:active{
color: black;
}
p:active{
background-color: orange;
}
:focus
文本框获取焦点状态
input:focus{
background-color: yellow;
}
:target
目标伪类选择器
当用户点击a元素，该元素锚链接指向的元素会显示在视口范围，所指向的元素即目标元素
<a href=“#e1”> 一个锚链接 </a>
p:target{
//编写你的CSS样式
}
:checked
当input type=‘checkbox’被选中时
input[type=checkbox] {
//css3提供清楚默认样式
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
使用CSS3的appearance属性改变元素的外观,清空默认属性
注：
- hover和:active也可以为其他元素设置
- IE6中，不支持对超链接以外的元素设置:hover和:active
结构化伪类
<style type="text/css">
<!-- 选取不到span，因为span不是父元素的第一个标签-->
div span:first-child{
color: red;
}
div span:nth-of-type(2){
color: green;
}
</style>
</head>
<body>
<div class="box">
<p>我是p</p>
<span>我是span</span>
<p>我是p</p>
<span>我是span</span>
<p>我是p</p>
<span>我是span</span>
<p>我是p</p>
<span>我是span</span>
</div>
</body>
:first-child
已选中元素中的第一个元素（会检测此元素是否是其父元素中的第一个元素）
:last-child
已选中元素中的最后一个元素（会检测此元素是否是其父元素中的最后一个元素）
:nth-child
已选中元素中的指定位置的元素（会检测此元素是否是其父元素中的指定位置的元素）
- number 选择number指定位置上的元素
- odd 选择奇数位置上的元素
- Even 选择奇数位置上的元素
- an+b 从第b个元素开始，每a个一组，选取第第一个元素
:first-of-type
已选中元素中的第一个元素
:last-of-type
已选中元素中的最后一个元素
:nth-of-type
已选中元素中的指定位置的元素
参数
number 选择number指定位置上的元素
odd 选择奇数位置上的元素
Even 选择奇数位置上的元素
an+b 从第b个元素开始，每a个一组，选取第第一个元素
伪元素选择器
伪元素规范使用::
:before/after
before表示元素内部最前边的部分
规范使用：：，实际使用：，为了匹配IE8
一般before都需要结合content这个样式一起使用，
通过content可以向before或after的位置添加一些内容
:after表示元素的内部最后边的部分添加
-
添加的元素是内联元素
p:before{ content: "我会出现在整个段落的最前边"; color: red; } p:after{ content: "我会出现在整个段落的最后边"; color: orange; }
::first-line
为第一行设置样式
p:first-line {
background-color: yellow;
}
::first-letter
为第一个字符设置样式
p:first-letter {
color: red;
font-size: 20px;
}
::selection
选中的内容
在火狐中需要采用另一种方式编写::-moz-selection
/**
* 兼容火狐的
*/
p::-moz-selection{
background-color: orange;
}
/**
* 兼容大部分浏览器的
*/
p::selection{
background-color: orange;
}
多媒体选择器
@media
控制打印机页面样式
@media print {
a:before{
//attr（）获取元素属性
content: attr(href);
}
}
screen
用于电脑屏幕，平板电脑，智能手机等移动端适配开发
多媒体选择器内部样式可能被正常样式覆盖，可以使用 !important 强制生效
当视口的宽度小于等于768px时，.box显示蓝色
@media screen and (max-width: 768px){
.box{
background-color: #00f;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px){
/*
多媒体选择器内部样式可能被正常样式覆盖，可以使用 !important 强制生效
*/
.box{
background-color: #00f !important;
}
}
width
- max-width
- min-widht
orientation
- landscape 横屏
- portrait 竖屏
IE兼容
第三方插件：
https://github.com/scottjehl/Respond
注意事项：
1、需要在服务器上运行。
2、包含媒体查询的 css文件需采用外链形式。
3、头部引用的respond.js 需置于css 文件之后。
speech
应用于屏幕阅读器等发声设备
视口
布局视口
布局视口：固定的，（手机端）每个浏览器厂商都有自己的设置，一般980px (1024px)
多媒体选择检测的是布局视口的宽度
可视视口
理想视口
理想布局在移动端不使用浏览器设置的默认大小
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
选择器优先级
内联样式 ， 优先级 1000
id选择器， 优先级 100
类和伪类， 优先级 10
元素选择器， 优先级 1
通配* ， 优先级 0
继承的样式， 没有优先级
优先级的规则
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，
但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，
则使用靠后的样式。
并集选择器的优先级是单独计算
div , p , #p1 , .hello{}
可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级，
将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important
