首页 > > 网页制作 > css >

css：选择器（标签、类、ID、通配符）

2020-05-29 16:00:26来源：博客园阅读 ()

css：选择器（标签、类、ID、通配符）

1、css概述

主要的使用场景就是美化网页，布局页面

（1）html的局限性

它只关注内容的语义，只能做一些简单的样式，并且非常的臃肿和繁琐

（2）css对网页美化的作用

css是层叠样式表的简称，它和html是一样的，都是一种标记语言，css主要用于设置html页面的文本内容（字体、大小、对齐方式等）图片的外形（宽度、高度、边框样式、边距等）以及版面的布局和外观显示样式。css可以美化html使得页面更加漂亮，页面的布局更加简单。

（3）html与css

html主要做结构，显示元素内容，css美化html，布局网页。因此，html专注结构呈现，css做样式，即结构与样式相分离

2、css语法规范

（1）代码

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p{
                color: red;
                font-size: 20px;
            }
        </style>
    </head>
    <body bgcolor="aquamarine">
        <h2>静夜思</h2>
        <p>
                                床前明月光，疑似地上霜
        </p>
        <p>
                               举头望明月，低头思故乡，
        </p>
    </body>
</html>

（2）测试

在style标签中，p被称为选择器，用于指定css的html标签，花括号内部是对该对象设置的具体样式

属性和属性的值，以键值对的形式出现

属性和属性的值以冒号隔开

每一个键值对以分号相隔开

3、选择器

就是根据不同的需求，把不同的标点选出来。

（1）标签选择器

标签选择器是指用标签名称作为选择器，按照标签名称分类，为页面中某一标签制定统一的样式。优点是能够快速地为页面同类型的标签，统一设置样式。但是标签选择器不能满足差异化样式，只能同时设置同一类型的标签

代码：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p{
                color: red;
                font-size: 20px;
            }
            
            div{
                color:black;
                font-size: 25px;
            }
        </style>
    </head>
    <body bgcolor="aquamarine">
        <h2>静夜思</h2>
        
        <p>
                       床前明月光，
        </p>
        
        <p>
                               疑似地上霜，                 
        </p>
        
        <div>
            举头望明月，
        </div>
        
         <div>
            低头思故乡，
        </div>
        
    </body>
</html>

测试：

标签选择器，是根据标签的不同来对样式进行设置的

（2）类选择器

标签选择器不能实现差异化的设置，但是类选择器可以，它可以单独选一个或者几个标签

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .myclass1{
                color: red;
                font-size: 20px;
            }
            
            .myclass2{
                color:black;
                font-size: 25px;
            }
        </style>
    </head>
    <body bgcolor="aquamarine">
        <h2>静夜思</h2>
        
        <p class="myclass1">
                       床前明月光，
        </p>
        
        <p class="myclass2">
                               疑似地上霜                
        </p>
        
        <div class="myclass1">
            举头望明月，
        </div>
        
         <div class="myclass2">
            低头思故乡
        </div>
        
    </body>
</html>

测试：

在使用类选择器之后，即使是相同的标签，也可以实现不同的样式。如果说标签选择器是为了区别不同的标签的话，那么类选择器，则可以进一步对众多的同一种标签进行区分

类命名规则：

头：header

内容：content

尾：footer

导航：nav

侧栏：column

菜单：menu

类选择器实现盒子模型：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .red{
                width: 50px;
                height: 20px;
                background-color: red;
            }
            
            .yeloow{
                width: 50px;
                height: 40px;
                background-color: yellow;
            }
        </style>
    </head>
    <body bgcolor="aquamarine">
        <h2>类选择器实现盒子模型</h2>
        
      <div class="red"></div>
      
      <div class="yeloow"></div>
      
      
      <div class="red"></div>
        
    </body>
</html>

在同一种标签中，通过class的不同实现不同的布局

类选择器的多类名：一个标签的class属性有多个值

可以把一些标签元素相同的元素放到一个类里面：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
           .myclass1{
                   width: 250px;
                height: 60px;
                background-color: blanchedalmond;
           }
           .myclass2{
                   width: 250px;
                height: 60px;
                background-color:red;
           }
        </style>
    </head>
    <body>
        <h2>类选择器实现盒子模型</h2>
        
      <div class="myclass1">
          床前明月光，疑是地上霜.
      </div>
      
      <div class="myclass2">
          举头望明月，低头思故乡，
      </div>
        
    </body>
</html>

在这个案例中，两句话显示的区域的大小是相同的，可以把他们抽取出来，重新创建一个新的class

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
           .myclass1{
                background-color: blanchedalmond;
           }
           .myclass2{
                   
                background-color:red;
           }
           .area{
                   width: 250px;
                height: 60px;
           }
        </style>
    </head>
    <body>
        <h2>类选择器实现盒子模型</h2>
        
      <div class="myclass1 area">
          床前明月光，疑是地上霜.
      </div>
      
      <div class="myclass2 area">
          举头望明月，低头思故乡，
      </div>
        
    </body>
</html>

这样的话可以节省css代码，统一修改也非常方便

（3）id选择器

ID选择器和类选择器的使用方法基本相同，但是定义方式不同，最大的区别就是ID选择器只能使用一次

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        #color{
            color: red;
        }
        </style>
    </head>
    <body>    
      <div id="color">
          床前明月光，疑是地上霜.
      </div>
    </body>
</html>

（4）通配符选择器

*：修改所有标签的样式

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        * {
            color: red;
        }
        </style>
    </head>
    <body>    
      <div id="color">
          床前明月光，疑是地上霜.
      </div>
      <p>
          举头望明月，低头思故乡.
      </p>
    </body>
</html>