最初的web页面只是在浏览器里边显示一些信息而已，后来随着互联网的发展，人们对页面的可观赏性要求越来越高，你网站做的难看，没人浏览啊，而且网站的功能越来越强大，如果这么多的页面没有一个很好的排版的话，简直就是乱七八糟，为此对于优化页面的需求也越来越高，但是HTML他没这个能力啊，HTML：臣妾做不到啊~。为此为了弥补HTML的不足，W3C组织又弄出来了一个新的东西，那就是CSS，然后就是HTML来负责内容，CSS用来负责美观。
5.1引用方式
CSS有4种定义与引用方式：行内样式，内嵌式，链接式和导入式。用的时候可以根据实际的情况来选择合适的定义方式。
1，行内样式：
行内样式是一种比较直接的一种样式，它通过style属性直接定义在HTML标记内，这种样式比较容易被初学者接受，但是非常不灵活。
例子如下：<p style=”color:blue”>文字</p>把段落里边的颜色设置成蓝色。
2，内嵌式：
内嵌式样式表就是在页面中使用<style></style>标记将CSS样式包含在页面中，例如：
<style>
P{
color:red;
}
</style>
这样的话，在html文档中，所有p标记的内容都是红色字体的。但是呢，我们一个网站里边有很多的网页的，你说我们在一个网页定义了这样的一个样式，但是我们另外的一个页面又要重新弄，是不是很麻烦，所以说这种时比较笨重的。
3，链接式：
链接外部CSS样式表是最常用的一种引用样式表的方式，将CSS样式定义在一个外部的文件中，然后在html文件中使用<link>标记引用，这是最为有效的使用CSS样式表的方式。
用法：<link rel=”stylesheet” href=”path” type=”text/css”>
例子：比如我们创建了一个mystyle.css的样式表，那么我们怎么用呢？
<link rel=”stylesheet” href=”mystyle.cc” type=”text/css”>那么在CSS文件中定义的样式就被HTML文件引用了。
4，导入式
导入式和链接式差不多只不过是引用的方式不一样罢了，比如在链接式中举的那个例子，那么用导入式怎么用呢？
<style>
@import “mystyle.css”
</style>
如果万一有一个文档具有上述的所有的样式，而且对同一种标记多了多个样式定义的时候应该怎么办呢？所以W3C给这几种使用CSS的方式弄了一个级别。他们的优先级从高到底为：行内样式》内嵌》链接》导入式。
5.2CSS规则：
一个CSS样式表中包含3部分内容：选择符、属性、属性值。
选择符：{属性：属性值;}
选择符又叫选择器，HTML引用某个CSS文件之后，某一段文字的具体用什么样式，就是通过选择器来具体使用的。
例如上边提到的例子
<style>
P {
color:red;
}
</style>
那么p就是选择器，当前的HTML中所有使用p标记的内容的颜色都将是红色的。
Color就是属性喽，red就是属性值。
5.3CSS选择器
1，标记选择器：直接定义某个标记的属性，那么所有使用这个标记的内容都将是被设置的样式。使用这种选择器非常便捷，但是使用这种选择器会有一定的局限性。比如说我定义了一个超链接的样式，那么我一个页面的超链接将都是这个样式，我想用不同的样式来表现超链接的话，将非常麻烦。
2，类别选择器：自己定义一个类别，以.开头，相当于自己定义了一个属性一样。
例子：
<head>
<meta charset = “utf-8”>
<title>类别选择器</title>
<style>
.one{
color:red;
}
</style>
</head>
<body>
<h2 class=”one”>应用了选择器1</h2>
</body>
3,ID选择器：通过HTML页面中的ID属性来选择来添加样式的，需要注意一个html页面中不能有两个相同的ID，相当于给标记的ID属性增加了一个属性值，定义ID以#号开头。
<style>
#one{
color:red;
}
</style>
<body>
<p id=”one”>ID选择器</p>
</body>
5.4 CSS常用属性
此处略，无非就是宽，高，背景，字体，颜色啥的，需要用的时候去查找就行了。顺便举个小例子。
下期预告：六,JavaWeb简略的谈下前端技术<三>JavaScript
如果想查看更多的技术文档请关注我的公众号：ITYaoDao，或者直接扫描下边的二维码：
扫一扫
991
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
