七、CSS简介及编码规范

2024-02-04 22:24:16

一、CSS简介及编码规范

1、HTML的局限性

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

2、CSS—网页的美容师

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

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

3、CSS语法规范

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

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

4、CSS代码风格

1、样式格式书写

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

强烈推荐第二种格式，因为更直观。

2、样式大小写

h3 {
	color: red;
}

H3 {
	COLOR: RED;
}

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

3、空格规范

h3 {
	color: red;
}

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

码农公寓