css的语法规范及基础选择器

最新推荐文章于 2022-07-06 19:01:22 发布

qq_50636169

最新推荐文章于 2022-07-06 19:01:22 发布

阅读量388

点赞数 1

本文链接：https://blog.csdn.net/qq_50636169/article/details/118704212

版权

CSS的语法规范
CSS规则由选择器以及一条或多条声明两部分构成

<head>
   <style>
        h {                    /*选择器*/
           color /*属性*/: blue /*属性值*/;       /*声明*/
           font-size: 2px;   /*声明*/
         }
    </style>
</head>

选择器用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以"键值对"形式出现
属性与属性之间用英文":"分开
属性是指对指定对象设置样式属性，如字体颜色大小等
多个"键值对"之间用英文";"分开，以便进行区分
空格规范
属性值前面，冒号后面，保留一个空格
选择器和大括号之间要有空格

CSS基础选择器
CSS选择器的作用是选择标签，它分为基础选择器和复合选择器，这里我们主要介绍一下基础选择器
基础选择器
基础选择器由单个选择器组成，包括标签选择器、类选择器、id选择器和通配选择器
1.标签选择器
又称元素选择器，是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式，其作用是可以把某一类标签全部选择出来，
语法：标签名：{属性1：属性值1；}

<head>
   <style>
          p {
              color: red;
              font-size: 2px;
          }
          h6 {
              color: blue;
              font-size: 2px;
          }
    </style>
</head>
<body>
    <p>数学</p>
    <p>数学</p>
    <p>数学</p>
    <h6>语文</h6>
    <h6>语文</h6>
    <h6>语文</h6>
</body>

它能快速为页面中同类型的标签统一设置样式，但是不能设置差异化样式，只能选择全部的当前标签
2.类选择器
可以差异化选择不同标签，单独选择一个或某几个
类选择器在HTML中以class属性表示，类选择器以一个"."表示
语法：.类名 {属性1：属性值1；}

<head>
 <style>
        .red {
            color: cornflowerblue;
            font-size: 2px;
        }
        .blue {
            color: darkkhaki;
            font-size: 2px;
        }
  </style>
 </head>
 <body>
     <ul>
        <li class="red">朝花夕拾</li>
        <li class="blue">呐喊</li>
    </ul>
 </body>

长名称或词组可使用中横线来为选择器命名
不要使用纯数字、中文

等命名，尽量使用英文字母表示
类选择器—多类名
给一个标签指定多个类名，从而达到更多的选择目的
多类名使用方式

多个类名中间必须用空格分开
class属性中可以写多个类名

<head>
<style>
       .yellow {
            background-color: yellow;
        }
        .green {
            background-color: greenyellow;
        }
        .font {
            width: 100px;
            height: 100px;
        }
    </style>
  </head>
  <body>
    <p>利用类选择器画两个颜色的盒子</p>
    <div class="yellow font"></div>
    <div class="green font"></div>

3.id选择器
HTML元素以id属性设置选择器，CSS中id选择器以"#“来定义，一般用于页面的唯一性元素上，且只能在HTML文档中出现一次
语法：#id名{属性1：属性值1；}
样式”#“定义，结构用"id"调用
4.通配符选择器
在CSS中，通配符选择器用”*"定义，它表示选取页面中所有元素
语法：* {属性1：属性值1；}

通配选择器不需要调用，自动就给所有元素使用样式
特殊情况下使用，可以选择所有标签

qq_50636169

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css的语法规范及基础选择器

CSS的语法规范CSS规则由选择器以及一条或多条声明两部分构成<head> <style> h { /*选择器*/ color /*属性*/: blue /*属性值*/; /*声明*/ font-size: 2px; /*声明*/ } </style></head>选择器用于指定CSS样式的HTML标签，
复制链接

扫一扫