HTML学习心得(4)

CSS的简单框架结构和元素渲染

什么是CSS

​ CSS，中文名：层叠样式表。是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

​ CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

​ 我们可以简单的来理解它的作用，它作为一个可以设定部件风格，色彩，样式，以及调配各部件之间的关系等等一系列的操作，怎么说呢，它能起到的作用比我们想象的要强大。我们可以通过它实现一张网页的大部分美化，也可以使用它使我们的网页不单单局限于一个二维的平面。

​

CSS编译环境

和HTMl类似的，CSS也可以使用记事本编写，完成后只需要将格式改为.css文件即可。

正常的电脑

支持css的浏览器

记事本

也可使用Sublime text 打开编写

​

CSS的内链外链

内链

CSS链接到网页上的方式有两种，现在我们先来说一下简单的内链方式。

标签内属性

标签内部的属性设置在我看来也是属于CSS的范畴之内的，所以我把这部分放在这里，做一个总结。

在每个标签里面，我们会发现存在一个style的关键字，通常我们是这样使用它的：

​ 即在标签的其实标签里加入style关键字，然后接=和“ ”，在引号中加入我们想要的属性内容，譬如更改颜色，更改大小，规定元素的位置，设置优先显示级别等等操作。

​ 这样的在标签内部加入的属性设置，我把它归为CSS内链的标签内属性这一类。但很明显的，我们会发现这样有一个问题：虽然这样写可以非常方便看到这个标签携带的属性，但我们在后面使用的时候会发现，抛开文件的长度大大增加这一点不说，我们在后期修改或者维护的时候会变得很麻烦。大量的属性代码占据的大部分的代码页面，会使我们找到目标标签变得麻烦[^18]，所以我们想要一种能将属性设置集中的方法，来简便我们的查找和后期调试。

​ 所以，在

内的全局属性定义就出现了。

​ 在这里，我们会讲到

中

​ 在这段截取的源码中，我们可以看到，在

中我们定义了一个

​ 因为.css文件和HTML文件在一个文件夹下，我们可以省略href要求的文件的全部路径，只需要写出.css文件的名字就可以了，不要忘记加文件的后缀。然后再下面使用

CSS的ID命名

​ 在了解到了CSS的外链和

内的全局属性定义后，我们不免会有这样一个问题：”怎么让浏览器知道我的属性设置是给谁都写的呢？一张网页里有这么多的标签。”我们在这里使用使用id和class来结局这个问题，下面我们来介绍CSS中的ID命名。

​ 在基本上每个标签中，都有这样一个属性，它不包含在

​ 命名的格式很简单，在这里就不多叙述了。要注意一个标签只能有一个ID 。那么我们再来看看在CSS文件中是怎么规定ID的。

#div7{

position:fixed;

right:0;

z-index:1;

bottom:0;

margin-bottom:0px;

}

​ 可以看到，在CSS文件中，使用一个#来标记说明这是一个控制ID的属性块，#后面接ID的名字。对于该ID下的所有属性设置，我们用一对{}将该ID下的所有属性都包含起来。

​ 特别的，对于CSS的命名，提供了二级命名，也就是我们不只可以命名到ID或者后面的class，我们可以直接命名到该ID或clss下的一类标签。

​ 我们举一个例子来看：

#topfor{

float:right;

width:700px;

vertical-align:middle;

position:relative;

text-align:right;

}

#topfor a{

position:relative;

color:white;

text-decoration:none;

top:20px;

}

​ 在这个例子中，我们看到我们为一个