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；
           }
           

         • 【注意】

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

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同 的标签	不能差异化选择	较多	标签名{属性：属性值；}
类选择器	可以选出一个或多个标签	可以根据需求选择	非常多	.类名{属性：属性值；}
id选择器	一次只能选择一个标签	ID属性只能在每个HTML文档中出现一次	一般和js搭配	#id{属性：属性值；}
通配符选择器	选择所有 的标签	选择的太多，有部分不需要	特殊情况使用	*{属性：属性值；}