08-HTML样式组合-6

HTML样式组合

组合样式

  •  可单独定义某个元素样式属性值
  • 也可以定义某个元素多个属性值（空格隔开即可）
  • 同时可以将多个元素一同定义属性
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        /* blue值单独定义 */
        .blue{
            color: blue;
        }
        /* 每个元素的class属性可以设置多个值,这些值可以组合成新的选择器 */
        .first.blue{
            border-bottom: 3px solid #FF0000;
        }
        .second.blue{
            border-bottom: 3px solid #0088FF;
        }
        /* 群组选择器,多个选择器使用同一个style */
        #news,#steps{
            border-left: 5px solid #ADFF2F;
            font-size: 25px;
        }
    </style>
    <body>
        <div id="main">
            <ul id="news">
                <li class="first blue">新闻第一条</li>
                <li class="second blue">新闻第二条</li>
                <li class="blue">新闻第三条</li>
            </ul>
            <ol id="steps">
                <li>第一步</li>
                <li>第二步</li>
                <li>第三步</li>
            </ol>
        </div>
    </body>
</html>

内嵌样式

  • body标签内style定义样式属性

 

 

  • 代码演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p style="width: 100px;height: 50;border: 3px solid red;
                 border: 2px solid green;">
            一般情况下是直角矩形
        </p>
        <p style="width: 100px;height: 50;border: 3px solid red;
                 border: 2px solid red;
                 border-radius: 10px;">
            加上border-radius可以变成圆角矩形
        </p>
        <p style="width: 100px;height: 100px;border: 3px solid red;
                 border: 2px solid blue;
                 border-radius: 50px;">
            控制圆角大小变成圆形
        </p>
        <p style="width: 150px;height: 150;border: 3px solid red;
                 border: 2px solid green;
                 border-radius: 10px 20px 30px 40px;">
            可以任意设置4个角的半径
        </p>
    </body>
</html>

 

内联样式

  • body外定义style样式属性
  • 代码演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        /* blue值单独定义 */
        .blue{
            color: blue;
        }
        /* 每个元素的class属性可以设置多个值,这些值可以组合成新的选择器 */
        .first.blue{
            border-bottom: 3px solid #FF0000;
        }
        .second.blue{
            border-bottom: 3px solid #0088FF;
        }
        /* 群组选择器,多个选择器使用同一个style */
        #news,#steps{
            border-left: 5px solid #ADFF2F;
            font-size: 25px;
        }
    </style>
    <body>
        <div id="main">
            <ul id="news">
                <li class="first blue">新闻第一条</li>
                <li class="second blue">新闻第二条</li>
                <li class="blue">新闻第三条</li>
            </ul>
            <ol id="steps">
                <li>第一步</li>
                <li>第二步</li>
                <li>第三步</li>
            </ol>
        </div>
    </body>
</html>

外联样式

  • 外联样式：将内联样式中定义的样式单独写成一个文件，并命名为*.css格式，该文件成为css样式文件，通过link标签加载样式，如下所示：

<link rel="stylesheet" type="text/css" href="css/main.css">
  • 外联样式表的优势
    • 通畅会把多个网页共有样式属性写进一个文件，通过样式文件加载降低重复编写工作量，并提高项目的可维护性
    • 该文件通常会被缓存，加快页面渲染速度（修改后如果样式样式不生效，需要手动清楚浏览器缓存）
  • 代码演示　　
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <style type="text/css">
/*     body {
            font-family: 'MicrosoftYaHei';
        }
        #nav ul{
            overflow: hidden;
        }
        #nav>ul>li{
            float: left;
            width: 100px;
            list-style: none;
            font-size: 20px;
        }
        #main>dl>dt{
            font-size: 18px;
            color: red;
            font-weight: bold;
        }
        #main>dl>dd{
            margin-left: 2em;
            font-size: 12px;
            line-height: 2em;
        }
        #main>dl>dd>ul{
            padding-left: 0;
        }
        #main>dl>dd>ul>li{
            list-style: square;
    } */
    </style>
    <body>
        <div id="nav">
            <ul>
                <li><a href="./">首页</a></li>
                <li><a href="./">新闻</a></li>
                <li><a href="./">关于我们</a></li>
                <li><a href="./">在线留言</a></li>
            </ul>
        </div>
        <div id="main">
            <dl>
                <dt>Python的数字类型</dt>
                <dd>
                    <ul>
                        <li>整数类型</li>
                        <li>浮点数类型</li>
                        <li>复数类型</li>
                    </ul>
                </dd>
                <dt>Python的字符串类型</dt>
                <dd>
                    <ul>
                        <li>由一串字符组成</li>
                        <li>字符串之间的顺序不能变</li>
                        <li>可以使用切片方法取字符串片段</li>
                    </ul>
                </dd>
                <dt>Python的字典类型</dt>
                <dd>
                    <ul>
                        <li>由键值对组成</li>
                        <li>通过键取值</li>
                        <li>可以按照键名或键值排序</li>
                    </ul>
                </dd>
            </dl>
        </div>
    </body>
</html>
  • main.css文件
body {
        font-family: 'MicrosoftYaHei';
    }
    #nav ul{
        overflow: hidden;
    }
    #nav>ul>li{
        float: left;
        width: 100px;
        list-style: none;
        font-size: 20px;
    }
    #main>dl>dt{
        font-size: 18px;
        color: #5F98E3;
        font-weight: bold;
    }
    #main>dl>dd{
        margin-left: 2em;
        font-size: 12px;
        line-height: 2em;
    }
    #main>dl>dd>ul{
        padding-left: 0;
    }
    #main>dl>dd>ul>li{
        list-style: square;
}

 

样式优先性

  •  相同选择器条件下：内嵌样式>内联样式>外联样式
  • id选择器>class类选择器>元素选择器>通配符选择器>继承样式
  • !import修饰符优先级最高
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <style type="text/css">
    body {
            font-family: 'MicrosoftYaHei';
        }
        #nav ul{
            overflow: hidden;
        }
        #nav>ul>li{
            float: left;
            width: 100px;
            list-style: none;
            font-size: 20px;
        }
        #main>dl>dt{
            font-size: 18px;
            color: red;
            font-weight: bold;
        }
        #main>dl>dd{
            margin-left: 2em;
            font-size: 12px;
            line-height: 2em;
        }
        #main>dl>dd>ul{
            padding-left: 0;
        }
        #main>dl>dd>ul>li{
            list-style: square;
    }
    </style>
    <body>
        <div id="nav">
            <ul>
                <li><a href="./">首页</a></li>
                <li><a href="./">新闻</a></li>
                <li><a href="./">关于我们</a></li>
                <li><a href="./">在线留言</a></li>
            </ul>
        </div>
        <div id="main">
            <dl>
                <dt>Python的数字类型</dt>
                <dd>
                    <ul>
                        <li>整数类型</li>
                        <li>浮点数类型</li>
                        <li>复数类型</li>
                    </ul>
                </dd>
                <dt>Python的字符串类型</dt>
                <dd>
                    <ul>
                        <li>由一串字符组成</li>
                        <li>字符串之间的顺序不能变</li>
                        <li>可以使用切片方法取字符串片段</li>
                    </ul>
                </dd>
                <dt>Python的字典类型</dt>
                <dd>
                    <ul>
                        <li>由键值对组成</li>
                        <li>通过键取值</li>
                        <li>可以按照键名或键值排序</li>
                    </ul>
                </dd>
            </dl>
        </div>
    </body>
</html>
    • 说明内联样式起作用，main.css样式文件失效
  •  作业习题配图效果

  •  代码演示

 

posted @ 2021-03-09 00:39  西瓜的春天  阅读(85)  评论(0)    收藏  举报