代码改变世界

CSS样式表

2018-01-08 15:00  看看乖哦  阅读(232)  评论(0)  编辑  收藏  举报

2018，1,8

CSS

CSS

作用：美化HTML网页

一，样式表的分类

1，内联式样式表

优点：精确控制

缺点：范围小

2，内嵌式样式表

（作为一个独立区域内嵌在网页里，必须写在head标签里<style type="text/css">内容</style>）

优点：范围大 

缺点：不精确

3，外部式样式表

a，新建一个css文件

b，在HTLM中右键——css样式——附加样式表

（一般用link链接方式）

优点：范围大，可多次使用css

缺点：不精确

注：显示有限级别———*<标签名< class < I D *<标签名< class < I D *<标签名< class < I D

《代码》：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
           <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
            <style type="text/css">
                *{color:#009; font-family:华文行楷;}
                #a{color:#F60}
                .b, .v{color:#000}
                span{color:#0C0}
                ol li{color:#C06; font-family:"仿宋"}
                k span{color:#FF0}
                
            </style>
            <link href="../CSS/Untitled-2.css" />
            
            
    </head>

    <body>
        <div>内样式表联 内嵌样式表 外部样式表</div>
        <div>内容0原始</div>
        <div style="color:#F00;">内容1内联式样式表</div>
        <div>优点：控制精确</div>
        <div>缺点：范围小</div>
        <div>内嵌式表格</div>
        <div>优点：范围大</div>
        <div>缺点：不精确</div>
        <div>外部样式表</div>
        <div>优点：范围大</div>
        <div>缺点：不精确</div>
        <div id="a">内容0</div>
        <div class="b">内容0</div>
        <div class="b">内容0</div>
        <span>*<标签名< class < I D </span>
        <span>*<标签名< class < I D </span>
        <span>*<标签名< class < I D </span>
    
   
        <div class="v">内容0</div>
        <div class="v">内容0</div>
         <div class="v">内容0</div>
        <div class="v">内容0</div>   
            <ol>
                <li>内容</li>
                <li>内容</li>
                <li>内容</li>
                <li>内容</li>
                <li>内容</li>
                <li>内容</li>
            </ol>
        <div id="k">
            <span>neirong</span>
            <span>neirong</span>
            <span>neirong</span>
        </div>
     </body>
</html>
《网页显示》：
内样式表联 内嵌样式表 外部样式表
内容0原始
内容1内联式样式表
优点：控制精确
缺点：范围小
内嵌式表格
优点：范围大
缺点：不精确
外部样式表
优点：范围大
缺点：不精确
内容0
内容0
内容0

*<标签名< class < I D *<标签名< class < I D *<标签名< class < I D

内容0
内容0
内容0
内容0
    1.内容
    2.内容
    3.内容
    4.内容
    5.内容
    6.内容
neirong neirong neirong