CSS基础教程之基本选择器

CSS选择器

1、基本选择器



(1)“*”选择器:通配符

  • 描述:将匹配所有的HTML标签,所有的标签都会改变的。

  • 语法:*{ color:red; }

 注:“*”尽量少用,因为IE6不支持。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     *{
         color:red;
     }
    </style>
    </head>
    <body>
        <h1>习近平心中的互联网</h1>
        <p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>



(2)标签选择器

描述:将匹配指定的HTML标签。

语法:h1{ color:red; }

注:CSS标签选择器,与HTML标签的名称一样,但不能加尖括号。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     h1{
         color:red;
     }
     p{
         color:blue;
     }
    </style>
    </head>
    <body>
        <h1>习近平心中的互联网</h1>
        <p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>



(3)class选择器(类选择器)——类选择器是使用频率最高的

描述:给一类HTML标签加样式。这里所指的“一类”是:每个HTML标签都有一个class属性,且class的值一样。class属性是公共属性,每个HTML标签都有。

类选择器的名称,必须以“.”开头,后限HTML标签的class属性的值。如:.box{ color:red; }

注: HTML标签的class属性的值,不能以数字开头。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     .NO1{
         color:red;
         background-color:#88ff66;
     }
    </style>
    </head>
    <body>
        <h1 class="NO1">习近平心中的互联网</h1>
        <p class="NO1">互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>



(4)id选择器

描述:给指定id的元素添加样式。

  • 网页中HTML标签的id属性的值,必须是唯一的。

  • 每一个HTML标签都有一个id的公共属性。

  • id属性一般是给JS使用的,不是让你来加样式的。class属性只能给CSS用,不能给JS用的。

  • id选择器的名称,必须以“#”开头,后跟HTML标记的id属性的值。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
    #NO1{
        color:blue;
        background-color:#88ff99;
    }
    .NO1{
         color:red;
         background-color:#88ff66;
     }
    </style>
    </head>
    <body>
        <h1 id="NO1">习近平心中的互联网</h1>
        <p class="NO1">互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>


继续学习
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> *{ color:red; } </style> </head> <body> <h1>习近平心中的互联网</h1> <p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

HTML+CSS基础入门教程