css学习笔记

-------------css学习笔记总结------------------
1.简介：
    CSS 是 Cascading Style Sheet 的缩写。
译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
CSS用来美化和修饰页面的显示效果。而且不区分大小写。
2.代码格式：
    属性:属性值;属性1:属性值1;属性2:属性值2
属性和值之间用:分隔.
属性和属性之间用;分隔.

3.css与html代码结合的方式：
方式一：
<div style="color:red;font-size:24px;background-color:blue">so colorful~</div>


方式二：
<style type="text/css">
div{color:red;font-size:24px;background-color:blue}
</style>


方式三：
<style type="text/css">
@import url(练习css.css);
</style>
注意：
    格式是：@import url(文件名.css);
这里面的文件路径一般用相对路径，文件要在同一个目录下面。
如果有几个要封装的标签，如span,div则可用用@import url(total.css);形式。

方式四：
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="练习css.css"/>
rel:引入的外部文件与我当面的页面之间的关系。stylesheet(文档的外部样式表)得到了所有浏览器的支持。


4：选择器


定义：用来确定被应用样式(操作)的标签的一种语法.
选这器的优先级：
style标签属性>id选择器>类选择器>标签名称选择器


一.标签名称选择器
通过div和span来确定被操作的元素的范围
比如：
div{color:blue;font-size:4px;back-grounp:#CC00CC}
span{color:blue;font-size:4px;back-grounp:#CC00CC}


二.类选择器
<style type="text/css">
.second{color:red}
</style>
然后用的时候是
<div class="second">


三.id选择器
#div{color:green;}
<div id="span1">
通过标签属性id的值来确定要操作的标签,id的值要保证唯一性.
在id选择器的前面需要加（#）来区分


四.组合选择器
selector1,selector2{css代码}
selector1和selector2可以是任一的选择器
#div1,#span1{color:red;}
#span1{background-color:blue;}
作用是：把span1和div1公用的代码抽取出来。


五.关联选择器
<style type="text/css">
<!--- 页面中所有的div中的span的字体颜色为蓝色，包括span1和span2---->
  div span{color:blue;}
  <!--- 页面中所有的div中的div中的span的字体颜色为红色，只包括span2---->
  div div span{color:red;}
</style>
...........
<div>
        div1
        <span>内部span1</span>
    <div>
        <span>内部span2</span>
    </div>
</div>


六.伪类选择器
:伪类的名称,伪类的名称是固定的.系统给你分配的
link:从未访问过
visited：被访问过
active：鼠标按下去但没有松开的时候
hover：数遍悬在字体上的时候
<style>
<!--- 注意 ：表识--->
a:link{color:red} 
a:visited{color:orange}
a:hover{color:blue}
a:active{color:green}
</style>
div:hover{background-color:red}
<!--- #的作用是：表示最顶端的一个默认锚点 --->
<a href="#">我是a1</a>
<div>我是a2</div>