web前端开发之Css

1. css(层叠样式)

控制页面的样式和布局,定义如何显示html文档.

Css语法:选择器:{属性1:值1;属性2:值2:……}

 

如:  h1{color:red:font-size:14px:}  

//颜色可以用三种形式表示       red/rgb(100,20,300)/#ffbb00

 

选择器种类:html选择器(h/p…标记)，ID选择器（#test{…}），类选择器（.test{…}），属性选择器[align=center]{color：red}

 

三种样式表：1.直接样式表

<p style=”color:red”>这是一个段落</p>

2.内部样式表

  <style type=”test/css”>

     P{color:red}

  </style>

3.外部样式表

  //style.Css

P{color:red}

<link rel=”stylesheet” href=”style.css” type=”text/css”/>

2.    样式表实际写法

*{font-family=”arial”}                 //表示应用在所以样式中

Body{color:gray}                    //表示应用在body中

P，span{color：red}                //表示应用在p和span中

P  span{color：red}                //表示应用在p内的span中

P#t{color：green}                  //表示p内id=t的样式中

P．t{color：yellow}                //表示应用在p内class=t的样式中

P#t  span{color：pint}             //表示应用在p内id=t内span的样式中

.p{color：red}                     //表示应用在class=p的样式中

3.    伪类用法

1.       伪类语法

选择器：伪类{属性：值；属性：值：…..}

:link        有链接属性时
:visited    链接地址已被访问过
:active     被用户激活(在鼠标点击与释放之间发生的事件)
:hover      其鼠标悬停

2.       锚伪类

2.1   a：link{color：#FF000}   //未访问的连接

2.2   a:  visited{color：#00FF00} //已访问的连接

2.3   a： hover{color：#FF00FF} //鼠标移动到连接上

2.4   a：action{color：#0000FF} //选定

注：a： hover必须在a:  visited和a：link之后

a：action必须在a： hover之后