玩转CSS系列-CSS简介及添加
大家可能都知道，如果一个网页只是使用HTML代码进行编写。在默认情况下是没有任何样式可言的，就像我们盖好一幢楼，但是还没有装修那样，而HTML就相当于我们刚盖好楼的主体，而咱们开始学习的CSS就是装修，只不过CSS是针对HTML实现美化，当然不只是美化，还有布局。
CSS 全称：Cascading Style Sheets中文翻译为层叠样式表 ，定义HTML中的标记以何种方式显示。如：我们想让网页中H1标记的文字显示的不要那么大，或者换个颜色等等诸如一系列这样的问题，都可以通过CSS来实现。目前所有的主流浏览器均支持CSS。
我们通过下边两张图对比一下：
我们先看一下添加过CSS样式的网页如下图
玩转CSS系列-CSS简介及添加
现在我们把CSS样式表文件去掉
玩转CSS系列-CSS简介及添加
通过这两种这两张图大家可以明显的看到。加完CSS的可以按照我们设计的想法实现我们网页元素的摆放
下边我们先学习如何把CSS添加到网页中去，而其还要注意学习CSS要明白一个重要的问题，CSS主要是解决与实现表现（CSS）与结构（HTML）的分离。我们编写完HTML之后，如何通过CSS对HTML实现控制呢。
行内样式
内嵌样式
链接样式
导入样式
我们这一节课的示例就先从行内样式开始
行内样式：就是直接在HTML上写样式，就是HTML上加属性style=””这种形式。如
<p style=”color:#f00”>dushuwu</p>，但是这种方法并不是被我们推荐的，因为不利于实现表现与结构分离。也为后期维护带来很多不必要的困难。我们只需要知道即可。
内嵌样式：针对当前一个网页可以使用的样式，一般写在html的<head></head>标记中。而且要使用一个示明，我们的样式都要写到这个声明中如下：
<style type=”text/css”>写我们的样式</style>
我们看一个示例文件为我们段落文字改成红色的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dushuwu第一示例</title>
<style type="text/css">
color:#f00;
</style>
</head>
<body>
<p>dushuwu</p>
<h2>www.</h2>
</body>
</html>
我们在这里又有一个新的知识点。如果我们想给段落添加一个样式的话。我们可以通过两步实现，第一步先找到这个段落，第二步添加CSS样式属性（PS：这些属性咱们现在可以理解为已经提供好的，咱们使用即可）。
那咱们现在就看一下这个CSS选择器：
CSS选择器的分类：
HTML标签选择器
群组选择器
包含选择器
自定义选择器有可以分为两种
Class选择器
ID选择器
HTML标签选择器：就是直接使用BODY中的HTML标记做为选择符,就像我们第一示例那样。
但是这种选择器有一种局限性。假设我们有两个段落。要设置不一样的效果。那怎么办呢？当然我们选择器必须结合起来用才可以。
假如我们要为网页中的H2和P的文字都要改成红色的，怎么办呢？这时候群组选择器就派上用场了。我们看个示例文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dushuwu第一示例</title>
<style type="text/css">
h2,p
color:#f00;
</style>
</head>
<body>
<p>dushuwu</p>
<h2>dushuwu提供CSS教程</h2>
</body>
</html>
语法规范就是
选择器,选择器{属性:属性值;}
总结：我们记得只要我们CSS属性一致的时候，都可以使用群组选择符。
包含选择器：找到含有的内容，就像我们HTML中UL LI a（PS：列表上加链接） 这种形式，如果我们要为列表中链接添加样式。这时候我们就能使用包含选择器
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>dushuwu第三示例</title>
<style type=”text/css”>
ul li a{color:#f00;}
</style>
</head>
<body>
<ul>
<li><a href=”#”>项目编号1</a></li>
<li><a href=”#”>项目编号2</a></li>
</ul>
<a href=”#”>我不会被改变</a>
</body>
</html>
语法规范是：
选择器 选择器{属性:属性值;}
注意：这里面是空格隔开的 HTML中的父级空格HTML中的子级
自定义选择器
引入：如果网页中有多个P标签，我们想为其中某一个P添加样式。该怎么办呢，之前的选择器都不能满足。
ID选择器：为网页中某一个标签添加属于自己的选择器，而且规范要求我们这个ID名称的选择器只能使用一次。（PS：也是为了以后JS好调用）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>示例</title>
<style type="text/css">
#diyi li a{color:#f00;}
</style>
</head>
<body>
<ul>
<li><a href="#">项目编号1</a></li>
<li><a href="#">项目编号2</a></li>
</ul>
<ul id="diyi">
<li><a href="#">项目编号1</a></li>
<li><a href="#">项目编号2</a></li>
</ul>
<a href="#">我不会被改变</a>
</body>
</html>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
CSS