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

【CSS选择器】

时间:2015-11-20 01:50:27      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:

1.标签选择器

  所有该标签都会被加上此效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>标签选择器</title>
    <style type="text/css">
        p{
            font-size: 40px;
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>测试文本1</p>
    <p>测试文本2</p>
</body>
</html>

 

2.类选择器

  类选择器可以同时作用在不同的标签元素上

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>类选择器</title>
    <style type="text/css">
        .blue{
            font-size: 40px;
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="blue">测试文本1</p>
    <h1 class="blue">这是h标签</h1>
    <p>测试文本2</p>
</body>
</html>

  在一个标签中可以使用多个类选择器,达到复合使用的效果,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>类选择器</title>
    <style type="text/css">
        .red{
            color: red;
        }
        .big{
            font-size: 32px;
        }
    </style>
</head>
<body>
    <p class="red">红色</p>
    <p class="big">大的</p>
    <p class="red big">红的大的</p>
</body>
</html>

 

3.id选择器

  每个id名称只可使用一次。id选择器的基本作用是对每个页面中出现的唯一元素进行定义。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>id选择器</title>
    <style type="text/css">
        #red{
            color: red;
        }
        #big{
            font-size: 32px;
        }
    </style>
</head>
<body>
    <p id="red">红色</p>
    <p id="big">大的</p>
</body>
</html>

 

 

【CSS选择器】

标签:

原文地址:http://www.cnblogs.com/zuixinxian/p/4979595.html

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