css

1.什么是css

　　css（cascading style sheets）层叠样式表

2.css能做什么

　　css可以把圆角，图片边框，文字阴影和盒阴影，过渡、动画等。用几行代码就能展现出来。

　　可以将站点上所有的网页风格首饰用一个css       目的：将表现与结构分离

3.css语法结构

　　css语法结构由选择符、属性和值构成

   <style type="text/css">
    
                  body { background-color:#cccccc;}
                   ↓                ↓         ↓
                 选择符             属性       值

   </style>

4.css引方式用有三种

　　1.行内引用  直接写在html标签中。

<body style="background-color:#ccccc;">

    <h1 style="font-size:12px; color:#ff0000;">咪咪咪咪啦啦</h1>

　　2.业内引用   由<style></style>标签定位在<head></head>之中

<head>
     <style type="text/css">
      　　 body {
                 background-color:#cccccc;
              }
     </style>
</head>

　　3.外部样式表

style.css    :

    body {
           background-color:#cccccc;
    }
    

    index.html    :

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

优先级就近原则         行内引用  >页内引用>页外引用

5.css选择符

　　1.通配符  *

    * {
      color:blue;
      margin:0;
      padding:0;
    }

　　2.元素符 

页面中已有的标签名的选择符。

body{} h2{} p{} 等

 

　　3.群主选择  下面就是4个组成样式一样

    h1,h2, h3, p {
           font-size:12px;
           font-family:arial;
        }

　　4.关系选择符

 

 

 

代码如下：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div>a{
            background-color:#E61061;
        }
        span{ 
            background-color:#67B374;
        }
        div+p{
            background-color:#0000FF;
        }
        p{
            background-color:#808080;
        }

    </style>
</head>
<body style="back">
<div>
     <a>背景色是#E61061</a>
    <span>
        <a>背景色是#67B374</a>
    </span>
</div>
<p>背景色是#0000FF</p>
<p>背景色是#808080</p>
<p>背景色是#808080</p>


</body>
</html>

 

posted @ 2016-08-09 10:22  车水码龙  阅读(202)  评论(0)  编辑  收藏  举报