码迷,mamicode.com
首页 > Web开发 > 详细

css样式表

时间:2017-08-14 23:48:52      阅读:362      评论:0      收藏:0      [点我收藏+]

标签:dss   red   标签   utf-8   har   name   add   round   set   

            样式表主要分为三类:内联式、内嵌式和外部样式表。

            内联式样式表是跟html联合显示,写在body标签里边,属于控制精确,但是可用性差。在三种样式中会优先显示作用。

            内嵌式是作为独立区域写在head标签里边。body标签中有对应的标签:<div id/name/class="  "></div>。

            外部样式表是新建一个css文件,用来放样式表,在html中用link链接。

<link type="text/css" rel="stylesheet" href="../../css/new_file.css"/>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*网页内容边距*/
            *{
            margin: 10px;
            padding:10px ;
        }
            /*id选择器*/
        #div1{
            width: 100px;
        height: 100px;
        background-color: red;
            
        }
        /*class选择器*/
        .div-class{width: 200px;
        height: 200px;
        background-color: black;
            
        }
        /*标签选择器*/
        div{
            border: 5px; solid salmon;
        }
        
        
        /*属性选择器   名称可以自定义*/
        [name=n]{
            width: 300px;
        height: 300px;
        background-color: blueviolet;
        }
        
        /*复合选择器*/
        /*并列选择器*/
        .c,.c2{
            width: 200px;
            height: 200px;
            background-color: brown;
        }
        /*子代选择器*/
        .cc span{
            color: red;
        }
        
        /*其他*/
        .x1{
            width: 500px;
            
        }
        .x2{height: 500px;
            background-color: cadetblue;
            
        }
        
        </style>
        <link type="text/css" rel="stylesheet" href="../../css/new_file.css"/>
    </head>
    <body>
        <!--第一种直接引用(优先)-->
        <div style="width: 100px; height: 100px; background-color: darkblue;">ssddd</div>
        <!--第二种-->
        <div id="div1"></div>
        <!--第三种-->
            <div id="div2"></div>
        <div class="div-class"></div>    
        
        <!--
            id 不可重复   class  可以重复     name 可以重复
        -->
        
        <div sb=n></div>
        <div class="c"></div>
        <div class="c2"></div>
        <div class="cc">
            <span>ffddsssssssd</span>
        </div>
        <span>ffddsssssssd</span>
        
        
        <div class="x1 x2"></div>
    </body>
</html>

             在样式表中表示大小要有px。网页编辑过程中可将内嵌式样式表与对应的标签写在一起,完成后统一排版写在head里,或者移到外部样式表css文件中。在css文件中样式表不带style标签。



css样式表

标签:dss   red   标签   utf-8   har   name   add   round   set   

原文地址:http://www.cnblogs.com/dej-11/p/7360436.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!