css学习

1、什么是CSS？


Css是Cascading Style Sheets 的简写，它除了可以轻松设置网页元素的显示位置和格式化，甚至还能产生滤镜、图像淡化、网页淡入淡出的渐变效果。


2、Css的注释：


/*……*/：注意注释不能嵌套使用


3、Css的语法格式：


样式选择器 {
                      属性1：值1；
                      属性2：值2；
                       ……
}


4、Css的四种设置方式：


（1）内联样式表


在HTML元素标签中使用style属性内联。
<p style="position:absolute; bgcolor=red">aaaaa</p>


（2）嵌入样式表


通过HTML<style></style>标签将CSS嵌入到HTML中使用
<style>
p {
         color:red; 
         font-size:4cm;


}
</p>


（3）外部样式表（项目中就用这个）


<link rel="stylesheet" type="text/css" href="css/layout.css"/>
rel:链接的是什么，链接的是样式表
type：什么类型的
href：在哪呢
（4）输入样式表


可以将一个样式文件输入到另外一个样式文件中，或将一个样式文件输入到<style>标签中。
例：在test.css中导入one.css,two.css中。
p {background-color:green;}


@import url(one.css);
@import url(two.css);


他们的优先级别：
内联的高于其它的，其它的和加载的顺序有关。


5、样式选择器的分类：


（1）HTML选择器


p {


}


（2）类选择器


同一个选择器能有不同的类，因而允许同一个元素有不同的样式。
定义的方法：
[tag].类名        类名是自定义的，如果不加标签名tag，则代表所有的HTML元素都可以使用


<tag class="类名1 类名2" >      同一个元素可以使用多个类，类名之间使用空格分开
.nav {


}




（3）ID选择器


ID属性就用来对单一的元素定义单独样式
#left {


}




（4）关联选择器


a b h1 #two {


}




（5）组合选择器


主要是为了减少样式表的重复声明，组合的允许的。只要使用英文逗号（,）隔开每个选择符就可以了
a, b, h1, #one {


}




（6）伪元素选择器


是指对同一个HTML元素在不同的状态下的一种定义方式
目前只有a和p 两个HTML元素可以使用
a:hover, a:link {


}
使用方法：
标签：伪元素         标签[.类名]：伪元素
a:link   ：没有任何操作前的状态
a:hover：光标一到那个到超链接上的状态
a:active：选择超链接是的状态
a:visited：访问过的超链接的状态
p：first-letter：一个段落中的首字母的状态
p：first-line：一个段落中首行的状态


6、样式规则的继承：


所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。


7、样式规则的优先级：


关联选择器 > ID选择器 > Class选择器 > HTML标签选择器