CSS语法规范、基础选择器 | 青训营笔记

144 阅读2分钟

目录

  • CSS语法规范及代码风格
  • CSS基础选择器

一、CSS语法规范及代码风格

1.1CSS语法规范
 CSS规则有两个主要的部分构成:选择器以及一条或多条声明。
222.png

  • 选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式
  • 属性和属性值以“键值对”的形式出现
  • 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
  • 属性和属性值之间用英文“:”分开
  • 多个“键值对”之间用英文“;”进行区分

 所有的样式,都包含在<style>标签内,表示是样式表。一般写在</head>上方。如下:

    <head>
        <style>
            h4{
                color:blue;
                font-size: 100px;
            }
        </style>
    </head>


1.2CSS代码风格
1.2.1样式格式书写
 推荐使用展开格式,更加直观,如下:

    h3 {
        color: pink;
        font-size: 20px;
    }

1.2.2样式大小写
 推荐样式选择器、属性名、属性关键字全部使用小写字母,如1.2.1中的代码块。
1.2.3空格规范
 属性值前面,冒号后面,保留一个空格;选择器(标签)和大括号中间保留空格。如1.2.1中的代码块。

二、CSS基础选择器

2.1选择器分类
 选择器分为基础选择器和符合选择器两大类。基础选择器由单个选择器构成。包括:标签选择器、类选择器、id选择器和通配符选择器。

2.2标签选择器
 标签选择器是指用HTML标签名词作为选择器,为页面中某一类标签指定统一的CSS样式。语法如下:

    标签名 {
        属性1: 属性值1;
        属性2: 属性值2;
    }


2.3类选择器
 使用类选择器差异化选择不同的标签,就是不会像标签选择器一样全部选择。语法如下:

    .类名 {
        属性1: 属性值1;
        属性2: 属性值2;
    }

 类选择器在HTML中以class属性表示,在CSS中,类选择器以"."显示。
 可以给一个标签指定多个类名,从而达到更多的选择目的。使用方式如下:

    <div class="red font20">小明</div>

 在class里面写多个类名,之间用空格分开。

2.4 id选择器
 id选择器可以为标有特定id的HTML元素指定特定的样式。
 HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。
 id选择器一般用于页面唯一性的元素上,经常和Javascript搭配使用。
 语法如下:

    #id名 {
        属性1: 属性值1;
        属性2: 属性值2;
    }


2.5 通配符选择器
 通配符用"*"定义,表示选取页面中所有元素,语法如下:

    * {
        属性1: 属性值1;
        属性2: 属性值2;
    }

 通配符在特殊情况下才使用。