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)测试

css:选择器(标签、类、ID、通配符)

 

 

在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>

测试:

css:选择器(标签、类、ID、通配符)

 

 

 标签选择器,是凭据标签的差别来对样式举行设置的

MySQL 5.7.30 的安装/升级(所有可能的坑都在这里)

 

(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>

测试:

css:选择器(标签、类、ID、通配符)

 

 

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

类命名规则:

头: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>

css:选择器(标签、类、ID、通配符)

 

 在统一种标签中,通过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>

 

原创文章,作者:870t新闻网,如若转载,请注明出处:https://www.870t.com/archives/12379.html