浅谈 CSS2.0
作为 CSS 的初学者，我想借此机会简单谈一下我对 CSS 的一个认识，因为初学不久所以不再对 CSS3.0 表述自己的认知，这一次主要谈一谈 CSS2.0。
首先需要了解到什么是 CSS，CSS 的全称为层叠样式表(英文全称 Casca-ding Style Sheets)，层叠样式表听起来感觉比较的生涩难懂，我个人觉得可以简单的理解为是对 html 中各个元素的控制，控制的东西有很多，比如我们控制块级元素的位置，控制一些文本元素的颜色，大小等。而我们通过什么去控制呢？
说到这里就不得不提到 CSS 学习的根本，也就是选择器和属性与属性值。
选择器顾名思义就是选择，选择我们要控制的元素。目前我们常用的选择器主要有以下几类
类选择器
<html>
<head>
<meta charset="UTF-8" />
<style>
.box1 {
...
}
</style>
</head>
<body>
<div class="box1">
...
</div>
</body>
</html>
从这里我们可以看到我们选中了class="box1"的元素，这样我们就可以在.box1中对其的大小，位置已经背景颜色等属性进行操作，我们现在先不谈属性，只要理解可以对其进行控制即可。
id选择器
<html>
<head>
<meta charset="UTF-8" />
<style>
#box1 {
...
}
</style>
</head>
<body>
<div id="box1">
...
</div>
</body>
</html>
同样的我们可以看到我们通过id选中了id为box1的盒子，这样我们在其中便可以对其进行操作，不过我们通常在写css的时候多使用类选择器，而在写js的时候会使用id选择器。
标签选择器
<html>
<head>
<meta charset="UTF-8" />
<style>
div{
...
}
</style>
</head>
<body>
<div>
...
</div>
<div class="box1">
...
</div>
</body>
</html>
标签选择器的用法和上面的类选择器以及id选择器类似，但是值得注意的是，如果我们没有给标签选择器规定一个范围的话，那他作用的是所有元素中的标签,就比如上面的第二个div一样，虽然第二个div规定了类名为box1，但是上面的div标签选择器同样会作用于他，这里这里我们需要讨论两个问题
1.如何规定div标签选择器的范围
2.以上三种最常见的选择器先后级别
答：
1.若是我们想要规定一个标签选择器的范围，我们就需要学习到后代选择器、子选择器等等，在这里不在做详细的阐述，有兴趣的朋友可以点击这里获取想要的信息CSS选择器
2.在说选择器的优先级别之前，先简单阐述一下行内样式、内部样式和外部样式的关系
行内样式
<span style="color=red">我是行内样式</span>
在这里我们可以看到我们将样式写入了标签中，这样样式的写法我们称之为行内样式，其中color是属性,red是属性值，我们后面在详细说属性和属性值
内部样式
<html>
<head>
<meta charset="UTF-8" />
<style>
div{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div>
...
</div>
</body>
</html>
这里我们将css和html写到了一个文件里面，这样的写法我们称之为内部样式的写法
外部样式
外部样式即我们写一个单独的css文件，比如
index.html
index.css
然后我们在index.html中要引用到我们css文件
<link rel="stylesheet" href="路径">
这样的话，我们就可以引入我们所写的CSS了
阐述完三种样式的写法后，我们需要记住
行内样式>内部样式=外部样式，其实对于一些内部样式>外部样式的说法是存在一些争议的，但是他们都符合就近原则，按照就近原则来讲，内部样式>外部样式也就说的过去了。
说完三种样式的写法，我们重新回到选择器上，类选择器，id选择器和标签选择器的优先级别
对于同种样式下，我们规定：id选择器>类选择器>标签选择器
对于之前详细看过选择器的朋友来说，会发现选择器我们通常会复合使用，那么对于复合使用的选择器我们又如何判断优先级别呢
有这样一个规则：
id选择器 100
类选择器 10
标签选择器 1
我们只需要将其对应选择器的数值相加，数值较大的则优先级别高。
至此，选择器部分我们就大概结束了，下来我们继续阐述属性和属性值
属性and属性值
阅读到这的时候会发现在上面的阐述中其实已经摄入了一部分的属性和属性值
比如：
color:red;
在这里面中，color即为属性，color译为颜色，所以他控制的就是字体的颜色，red即为他的值，也就是红色，所以红色就是属性值。
同样的：
font-size:20px;
font-weight:bold;
line-height:20px;
这时候我们就很容易看出来那一部分是属性，那一部分是属性值了。
当我们分清属性和属性值后，我们就需要了解CSS2.0中的属性的划分了
在CSS2.0中我们的属性主要划分为如下几个部分：
1.布局属性
a.盒子模型设置
b.浮动设置
c.定位设置
2.美化属性
a.字体美化
b.文本美化
c.列表设置
d.表格设置
…
由于css的属性和属性值太多，所以这里只选取部分常见的进行描述，想具体了解的朋友参考css2.0手册
盒子模型
盒子模型是什么，顾名思义，我们就把他当作是一个二维的矩形来看，就像是从上方往下俯视一个矩形游泳池一样，我们可以很轻易的想到这个游泳池都有什么，比如：围墙，围墙里面游泳的部分，这个游泳池的大小，这个游泳池里面的颜色等等。所以说，看到盒子，我们要首先想到盒子的以下属性：
1)内容区域 width height
2)内填充区域 padding
3)边框 border
4)外填充区域 margin
5)背景
内容区域
以游泳池为例，这个游泳池包含了围墙以及中间的可游泳部分，所以说围墙以及中间的可游泳部分都属于内容。而我们则通过width和height来设置他内容的长和宽，比如我们现在设置一个内容100px*100px的游泳池，不考虑围墙
<html>
<head>
<meta charset="UTF-8" />
<style>
.swimmingPool{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class=".swimmingPool">
...
</div>
</body>
</html>
这样的话，我们的大的游泳池就定义好了，现在这个游泳池没有围墙，光最中间的游泳部分就有100px*100px
内填充区域
内填充区域实际上就是我们所谓的围墙部分，但是由于我们的游泳池总共的区域就100px*100px,所以当我们添加围墙的时候，我们中间的游泳就变的小了，而我们的width和height说直白点就是设置游泳的区域的大小，所以为了保持我们的占地不变，我们中间的位置要变小，假设围墙是20px的厚度，那我们的长和宽都要减去两个20px，我们通过padding来设置内填充部分
<html>
<head>
<meta charset="UTF-8" />
<style>
.swimmingPool{
width:60px;
height:60px;
padding:20px
}
</style>
</head>
<body>
<div class=".swimmingPool">
...
</div>
</body>
</html>
这样一来，我们的占地面积还是没有变，但是我们游泳池的内容部分变小了。(padding属性的属性值有很多种用法，具体参考上面的css2.0手册，在这里不再过多阐述)
边框
我们的泳池初步完成，我们下来要给他加一个防护网，也就是我们盒子的边框，当然，由于我们的占地面积不能变，所以我们的边框也要算在100px*100px里面，所以我们的游泳的部分又要变少了。假设我们的防护网为1px的宽度，也就是我们盒子的border的宽度为1px。
<html>
<head>
<meta charset="UTF-8" />
<style>
.swimmingPool{
width:58px;
height:58px;
padding:20px
border:1px solid red;
}
</style>
</head>
<body>
<div class=".swimmingPool">
...
</div>
</body>
</html>
至此，我们的占地100px*100px的游泳池就做好了，也就是我们做了一个在网页上占了长100px宽100px的盒子，边框border是1px的宽度,内填充padding是20px。最后实际内容区域是一个长58px宽58px的矩形。
外填充区域
外填充区域margin简单来讲就是和别人的一个距离，当然这个一定是同等级的，就比如两个泳池之间的距离就可以用margin来设置
<html>
<head>
<meta charset="UTF-8" />
<style>
.swimmingPool1{
width:58px;
height:58px;
padding:20px;
border:1px solid red;
margin:20px;
}
</style>
</head>
<body>
<div class=".swimmingPool1">
...
</div>
<div class=".swimmingPool2">
...
</div>
</body>
</html>
这样的话，我们的泳池1和泳池2之间就有了一个20px的间距。
背景
背景，顾名思义就是泳池（盒子）的底色，背景可以是图片（background-image）也可以是纯颜色(background-color)
<html>
<head>
<meta charset="UTF-8" />
<style>
.swimmingPool1{
width:58px;
height:58px;
padding:20px;
border:1px solid red;
margin:20px;
background-color:skyblue;
}
</style>
</head>
<body>
<div class=".swimmingPool1">
...
</div>
<div class=".swimmingPool2">
...
</div>
</body>
</html>
值得一提的是我们背景也会填充到padding和border区域，有兴趣的朋友可以私下了解
浮动设置和定位设置由于刚学习没多久，才疏学浅，再这里就不再班门弄斧
美化属性
字体美化
字体我们通常想到的是字体的大小，字体的颜色，字体的类型粗细等，以下我就做一个梗概：
font-style:设置字体是否倾斜 normal italic
font-weight:设置字体是否加粗 normal bold bolder
font-size:调整字体大小 谷歌默认是的16px 用的最多的是12px和14px
font-family:设置字体类型 和用户电脑上设置的字体也有关系
font-family:A,B,C,D
font:上面几个属性的复合属性
font:font-style font-weight font-size/line-height font-family
font-style 和 font-weight 可以不写 也可以交换位置
后面的两个必须写且不能交换位置
上面的这些属性都具有继承性，给父元素设置了，子元素也能继承到
经典运用:给body设置相关的字体的属性
color:设置字体颜色
对于a标签来说 需要选中a标签
<html>
<head>
<meta charset="UTF-8" />
<style>
.swimmingPool1{
/* 以下是盒子的属性 */
width:58px;
height:58px;
padding:20px;
border:1px solid red;
margin:20px;
background-color:skyblue;
/* 以下是字体的属性 */
color:red;
font-size:16px;
line-height:20px;
font-style:normal;
font-weight:bold;
}
</style>
</head>
<body>
<div class=".swimmingPool1">
这是大小为16px,行高为20px,颜色为红色加粗的字体
</div>
<div class=".swimmingPool2">
...
</div>
</body>
</html>
文本美化
text-decoration:设置文本的装饰线
underline 下划线
应用:把a标签的默认是下划线去掉，hover时加上
line-through 删除线 偶尔用一下
text-indent:首行空格
text-indent:2em 空连个文字的宽度
text-indent:-99999em 隐藏一个盒子中的文本、
text-align:设置文本中一个盒子的对齐方式
<html>
<head>
<meta charset="UTF-8" />
<style>
.swimmingPool1{
/* 以下是盒子的属性 */
width:58px;
height:58px;
padding:20px;
border:1px solid red;
margin:20px;
background-color:skyblue;
/* 以下是字体的属性 */
color:red;
font-size:16px;
line-height:20px;
font-style:normal;
font-weight:bold;
/* 以下是对文本的设置 */
text-align:center;
/* 这样我们的文本就居中再我们的盒子中了 */
}
</style>
</head>
<body>
<div class=".swimmingPool1">
这是大小为16px,行高为20px,颜色为红色加粗的字体
</div>
<div class=".swimmingPool2">
...
</div>
</body>
</html>
列表设置or表格设置
列表和表格有很多，我们通常都是用来美化，再这里就不再一一阐述，有兴趣的的朋友可以参考css手册
最后，感谢大家花费一定的时间来看我这个前端小白对css2.0的认识，其中必定存在一定的问题和很多阐述不明白的地方，如果有问题请大家留言讨论，谢谢。
3342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
