CSS语法规范一

CSS语法规范

1. CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

p{
                color: red;
                font-size: 12px;
            }

CSS代码风格

1. 样式格式书写
   • 紧凑格式

   • h3 {color: deeppink;font-size:20px}

   • 展开格式

   • h3 {
        color: deeppink;
        font-size:20px
     }

   • 推荐展开格式书写，因为直观
2. 样式大小写风格

   • h3 {
        color: deeppink;
     }

   • h3 {
        COLOR: deeppink;
     }

   • 推荐样式选择器、属性名，属性值关键字全部使用小写字母，特殊情况除外
3. 样式空格风格

   • h3 {
        color: deeppink;
     }

   • • 属性值前面，冒号后面，保留一个空格
     • 选择器（标签）和大括号中间保留空格

CSS基础选择器

1. CSS选择器的作用

   • <div>我是div</div>
     <p>我是段落</p>

   • 根据不同的需求把不同的标签选出来这就是选择器的作用。简单来说就是选择标签用的
   • CSS做两件事
     • 找到所有选择的标签
     • 设置这些标签的样式
2. 选择器分类
   • 选择器分为基础选择器 和复合选择器 两大类
     • 基础选择器是由单个选择器组成
     • 基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器
       • 标签选择器

       • 标签名{
              属性1：属性值1；
              属性2：属性值2；
              属性3：属性值3；
         }

       • 作用：可以把某一类标签全部选择出来。
       • 优点：能快速为页面中同类型的标签统一设置样式
       • 缺点：不能设计差异化样式，只能选择全部的当前标签
       • 类选择器

         • .类名{
                属性1：属性值1；
                属性2：属性值2；
                属性3：属性值3；
           }

         • 类选择器口诀：
           • 样式点定义，结构类（class）调用，一个或多个，开发最常用
         • 【注意】
           • 类选择器使用"."进行标识，后面紧跟类名（自定义）
           • 可以理解为给这个标签起一个名字
           • 长名称或者词组可以使用中横线来为选择器命名
           • 不要使用纯数字、中文等命名，尽量使用英文字母来表示
           • 命名要有意义，尽量使别人一眼就知道这个类名的目的
       • 类选择器——多类名
         • 多类名使用方式

         • <div class="red font20">艾希</div>

           • 【注意】：
             • 在标签class属性中写 多个类名
             • 多个类名中间必须用空格分开
             • 这个标签就可以分别具有这些类名的样式
         • 使用场景
           • 可以把一些标签相同的元素放在一个类里
           • 这些标签就可以调用这个公共的类，然后在调用自己独有的类
       • id选择器
         • HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义
         • 语法：

           #id{
                属性1：属性值1；
                属性2：属性值2；
                属性3：属性值3；
           }

         • 【注意】样式#定义，结构id调用，只能调用一次，不能被别的标签调用
         • 与类选择器的区别
           • 类选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
           • id选择器好比人的身份证号码，全国唯一
           • id选择器和类选择器最大的区别在使用次数上
           • 类选择器在修改样式中用得最多，id选择器一般用于页面唯一性元素上，经常和js搭配调用
       • 通配符选择器
         • 在CSS中，通配符选择器使用“*”定义，他表示选取页面中所有的元素
         • 语法

           *{
                属性1：属性值1；
                属性2：属性值2；
                属性3：属性值3；
           }

         • 【注意】
           • 通配符选择器不需要调用，自动就给所有的元素使用样式

原文地址：https://www.cnblogs.com/SSPOFA/p/11768671.html