Html学习之六（CSS选择器的使用--基础选择器的使用）

最新推荐文章于 2022-10-01 21:58:01 发布

dhx3970

最新推荐文章于 2022-10-01 21:58:01 发布

阅读量166

点赞数

原文链接：http://www.cnblogs.com/lsm-boke/p/10629228.html

版权

一、基础选择器

1.id选择器

2.class选择器

3.元素选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>id选择器</title>
        <style>
            #text{
                font: "微软雅黑";
                color: red;                
            }
        </style>
    </head>
    <body>
        <h1 id="text">长恨歌 </h1>
        <h3 id="text">作者：白居易</h3>
        <p id="text">
        《长恨歌》是唐代诗人白居易的一首长篇叙事诗。全诗形象地叙述了唐玄宗与杨贵妃的爱情悲剧。诗人借历史人物和传说，创造了一个回旋宛转的动人故事，并通过塑造的艺术形象，再现了现实生活的真实，感染了千百年来的读者，诗的主题是“长恨”。该诗对后世诸多文学作品产生了深远的影响。
        </p>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class选择器</title>
        <style>
            .red-text{
                font: "微软雅黑";
                color: red;                
            }
        </style>
    </head>
    <body>
        <h1 class="red-text">长恨歌 </h1>
        <h3 class="red-text">作者：白居易</h3>
        <p class="red-text">
        《长恨歌》是唐代诗人白居易的一首长篇叙事诗。全诗形象地叙述了唐玄宗与杨贵妃的爱情悲剧。诗人借历史人物和传说，创造了一个回旋宛转的动人故事，并通过塑造的艺术形象，再现了现实生活的真实，感染了千百年来的读者，诗的主题是“长恨”。该诗对后世诸多文学作品产生了深远的影响。
        </p>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素选择器</title>
        <style>
            h1{color: blue;}
            p{
                font: "微软雅黑";
                color: red;                
            }
        </style>
    </head>
    <body>
        <h1>长恨歌 </h1>
        <h3>作者：白居易</h3>
        <p>
        《长恨歌》是唐代诗人白居易的一首长篇叙事诗。全诗形象地叙述了唐玄宗与杨贵妃的爱情悲剧。诗人借历史人物和传说，创造了一个回旋宛转的动人故事，并通过塑造的艺术形象，再现了现实生活的真实，感染了千百年来的读者，诗的主题是“长恨”。该诗对后世诸多文学作品产生了深远的影响。
        </p>
    </body>
</html>