之前介绍了基本的网页设计，但是之前的那个只是一个框框，完全没有美观可言，现在介绍如何修饰以及玩出花样，之前的简单介绍点击打开链接
CSS的基本介绍
简介：CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。那么CSS和HTML是如何在网页代码中相结合的呢？通过四种方式：style属性 、style标签、导入和链接。
1，直接采用style属性：
<!– html与css相结合的第1种方式：给html标签添加style属性 –> <p style="color: #1f3 ;border:#1ff solid; ">这是我做css网页技术</p> 2，style标签方式 ：
<!– css与html的连接第二种方式style标签方式 –><style type="text/css">p{color: #0ff;border: 10px solid;}</style>3，导入方式
<style type="text/css">/*css和html的连接第三种方式 导入css文件*/@import url(mycss1.css);</style>4,链接方式
<span style="white-space:pre"></span><link rel="stylesheet" type="text/css" href="css_3.css" media="screen" />
CSS的相关语法：
CSS代码格式：
选择器名称 { 属性名：属性值；属性名：属性值；…….}
属性与属性之间用 分号 隔开属性与属性值直接按用 冒号 连接如果一个属性有多个值的话，那么多个值用 空格 隔开。
选择器：
就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器（标签本身就是封装数据的容器）。
1，选择器一般三种：
1) html标签名选择器。使用的就是html的标签名。2) class选择器。其实使用的是标签中的class属性。3) id选择器。其实使用的是标签的中的id属性。
每一个标签都定义了class属性和id属性。用于对标签进行标识，，方便对标签进行操作。在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。
1，html标签选择器：
<span style="white-space:pre"></span><style>div{background: #FF5151;font-size: 12px;}2，class选择器：<在style中以“.”开头的为class选择器，使用时候只需要 class="mm"即可使用>
<span style="white-space:pre"></span><span style="font-family: Arial, Helvetica, sans-serif;">.mm{</span>color:#00AEAE;font-size: 18px;}3，id选择器：<在style中以“#”，开头是的id选择器，使用的时候只需要 id="pid"就可以使用>
#pid{font-size: 50px;color: #2828FF;}2选择器的优先级：
标签名选择器（远距离统一设置） < class选择器（单个设置） < id选择器（单个设置）< style属性（最近距离设置）
前面介绍的都是简单的，基本的介绍，下面是扩展的：
扩展
关联选择器：
标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。例如：
<span style="white-space:pre"></span>p { color:#00FF00;}<span style="white-space:pre"></span>p b { color:#FF000;}<span style="white-space:pre"></span><p>P标签<b>湖南城市学院</b>段落样式</p><span style="white-space:pre"></span><p>P标签段落</p> <strong></strong>组合选择器：
对多个选择器进行相同样式的定义。例如，我们想对“div中的<b>标签”和“类名为cc”的区域设置相同的样式，则可以定义如下的组合选择器：<span style="white-space:pre"></span>span b,.cc{color: #9F35FF;font-style: italic;<span style="white-space:pre"></span>}多样的伪元素选择器
简介：
其实就在html中预先定义好的一些选择器，称为伪元素。
格式：标签名:伪元素。类名 标签名。类名:伪元素
超链接a标签中的伪元素：
a:link 超链接未点击状态。a:visited 被访问后的状态。a:hover 光标移到超链接上的状态（未点击）。a:active 点击超链接时的状态。
使用顺序： L – V – H – A
简单的使用：
<!DOCTYPE html><html> <head><title>lvha.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!–<link rel="stylesheet" type="text/css" href="./styles.css">–><style>div {color: #750000;}div f{color:#00A600;}.cc{}/* 超链接未点击状态。 */<span style="color:#ff0000;">a:LINK </span>{color:#00A6ff;font-size:18px;}<span style="color:#ff0000;">a:VISITED</span> {color: #5B5B5B;font-size: 80px;}/*当鼠标移动这里适合，发生相应的反应,光标移到超链接上的状态（未点击）*/<span style="color:#ff0000;">a:HOVER</span> {color: #00DB00;font-size:50%;}/*点击超链接时的状态*/<span style="color:#ff0000;">a:ACTIVE</span> {color:#FFBD9D;background: #00EC00;font-size: 80px;}</style> </head> <body> <a href="" target="new">你好，这是演示</a> <div>这是div<f>部</f>>分</div> </body></html> 效果图：
1.点击前：a:link
命运如同手中的掌纹，无论多曲折，终掌握在自己手中。
