css样式表
一.基本选择器
1.标签选择器:<style>标签名{stylesheet......}</style>
2.ID选择器:<style>#ID名{stylesheet......}</style>
3.类选择器:<style>.类名{stylesheet......}</style>
4.通配符选择器:<style>*{stylesheet......}</style>
5.伪类选择器:选择的是标签的状态,常见的a标签
<style>
a:link{stylesheet......} //链接还没被点击
a:visited{stylesheet......} //访问过这个链接
a:hover{stylesheet......} //鼠标放在上面悬停
a:active{stylesheet......} //鼠标按住不松手
</style>
<style>
标签选择器:first-child{stylesheet......} //选择标签选择器中的第一个元素
标签选择器:first-line{stylesheet......} //设置第一行样式
标签选择器:first-letter{stylesheet......} //设置第一个字符的样式
标签选择器:before{content:URL( address )} //引用网络的样式表
</style>
二.复合选择器
1.交集选择器:多个选择器用+号连接;<style>.class+div{stylesheet......}</style>
2.并集选择器:多个选择器用,号连接;<style>div,span{stylesheet......}</style>
3.子代选择器:多个选择器用>连接;<style>div>#ID{stylesheet......}</style>
4.后代选择器:多个选择器用空格连接;<style>div .class{stylesheet......}</style>
三.CSS代码插入形式
1.行内样式
css样式表就是把css代码直接写在现有的HTML标签中
2:嵌入式,嵌入式css样式,就是可以把css样式代码写在head中<style type="text/css">XXX</style>标签之间。
3:外连式css样式,写在单独的一个文件中.
样例:引用阿里云矢量图标库
外联式的引用:<link rel="stylesheet" href="//at.alicdn.com/t/font_656651_w6yflbuqhrsk0529.css">
<i class="icon iconfont"></i>
<i class="iconfont icon-tiaoxingtu"></i>
四.CSS三大特性
1.层叠性:当多个样式作用于同一个标签时,样式发生了冲突,总是执行后面的样式而与这些样式调用的顺序无关,可以认为后面的样式叠在了前面的样式上
2.继承性:内部标签可以继承外部标签的样式但是只能继承文字相关的样式,文字颜色,大小等特殊的:h标签无法继承文字大小a标签,无法继承文字颜色
3.优先级:当多个选择器作用在同一个标签上时,然后又设置了相同的属性,如何层叠就是由优先级确定的
1).如果是间接选中(继承来的)那么谁离得近就使用谁的
2).如果是直接选中并且选择器类型一样,那么谁写在后面就用谁的
3).如果直接选中,并且类型还不一样,那么就会按选择器优先级来确定
important>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承如果我们想提高某个样式的优先级,可以使用!important
1.它只能修饰属性
2.需要写在;前面
3.通配符选择器也可以使用