七、CSS简介及编码规范

2021-02-02 本文已影响0人 honest涛

一、CSS简介及编码规范

1、HTML的局限性

说起HTML，这其实是个非常单纯的家伙，它 $\color{red}{只关注内容的语义}$ 。比如<h1>表明这是一个大标题，<p>表明这是一个段落，<img>表明这儿有一个图片，<a>表示此处有链接。
很早的时候，世界上的网站虽然很多，但是它们都有一个共同的特点： $\color{red}{丑}$ 。
虽然HTML可以做简单的样式，但是带来的是无尽的 $\color{red}{臃肿和繁琐}$ ...

2、CSS—网页的美容师

$\color{red}{CSS}$ 是 $\color{red}{层叠样式表}$ （ $\color{red}{Cascading Style Sheets}$ ）的简称。有时我们也会称之为 $\color{red}{CSS样式表}$ 或 $\color{red}{级联样式表}$ 。
CSS也是一种标记语言。
CSS主要用于设置HTML页面中的 $\color{red}{文本内容}$ （字体、大小、对齐方式等）、 $\color{red}{图片的外形}$ （宽高、边框样式、边距等）以及 $\color{red}{版面的布局和外观显示样式}$ 。
CSS让我们的网页更加丰富多彩，布局更加灵活自如。简单理解： $\color{red}{CSS可以美化HTML，让HTML更漂亮，让页面布局更简单}$ 。
$\color{red}{总结：}$

HTML主要做结构，显示元素内容。
CSS美化HTML，布局网页。
CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。

3、CSS语法规范

使用HTML时，需要遵从一定的规范、CSS也是如此。要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则。
$\color{red}{CSS规则由两个主要的部分构成：选择器以及一条或多条声明。}$

CSS语法规范.png

$\color{red}{选择器}$ 是用于指定CSS样式的 $\color{red}{HTML标签}$ ，花括号内是对该对象设置的具体样式。
属性和属性值以“键值对”的形式出现。

4、CSS代码风格

1、样式格式书写

   /* 紧凑格式 */
   h3 {color: red;font-size: 20px;}
   /* 展开格式 */
   h3 {
        color: red;
        font-size: 20px;
    }

$\color{red}{强烈推荐第二种格式}$ ，因为更直观。

2、样式大小写

h3 {
    color: red;
}

H3 {
    COLOR: RED;
}

$\color{red}{强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母}$ ，特殊情况除外。

3、空格规范

h3 {
    color: red;
}

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