CSS网页编程
CSS概述
CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
那么CSS和HTML是如何在网页代码中相结合的呢？通过四种方式：style属性 、style标签、导入和链接。
CSS与HTML相结合的四种方式
☆ 1、style属性方式
<p style="background-color:#FF0000; color:#FFFFFF">
p标签段落内容。
</p>
☆ 2、style标签方式
<style type=”text/css”>
p { color:#FF0000;}
</style>
☆ 3、导入方式
<style type="text/css">
@import url(myDiv.css)
</style>
☆ 4、链接方式
<link rel="stylesheet" type="text/css" href="css_3.css" media="screen" />
示例：
<html>
<head>
<title>MyCssDemo1</title>
<style type="text/css">
/*3、导入方式 导入语句必须写在前面*/
@IMPORT url("css/a.css");
/*2、用style标签方法*/
span {
background-color: yellow;
color: black;
}
</style>
<!-- 4、用link标签的方式加载 -->
<link rel="stylesheet" type="text/css" href="css/b.css" media="screen,print"/>
</head>
<body>
湖南城市学院
<!-- 1、用style属性方法 -->
<div style="background-color: red;color: black">这是第一个div区域中的文字</div>
<span>这是第一个span区域中的文字</span>
<hr />
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
</tr>
<tr>
<td>Jack</td>
<td>22</td>
</tr>
</table>
</body>
</html>
相关语法
☆样式优先级
由上到下，由外到内。优先级由低到高。——总之，一般情况是以后加载为主，但还有细节优先级问题（后面会讲到）。
☆CSS代码格式
选择器名称 { 属性名：属性值；属性名：属性值；…….}
属性与属性之间用 分号 隔开
属性与属性值直接按用 冒号 连接
如果一个属性有多个值的话，那么多个值用 空格 隔开。
选择器
就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器（标签本身就是封装数据的容器）。
☆选择器共有三种：
1) html标签名选择器。使用的就是html的标签名。
2) class选择器。其实使用的是标签中的class属性。
3) id选择器。其实使用的是标签的中的id属性。
每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。
在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。
☆选择器的优先级
标签名选择器 < class选择器 < id选择器 < style属性
示例：
<html>
<head>
<title>MyCssDemo3</title>
<style type="text/css">
table {
border: solid 1px;
width: 300px;
text-align: center;
}
/*div中的a类，且这里写了的话下面的.a再设的话无法覆盖此处设置的
div.a {
background: #66B3FF;
}
*/
.a{/*class选择器*/
background: #FF0000;
width: 209px;
}
#age {/*id选择器*/
/*下文设置的id只能有一个，其实像class那样设置多个也是可以达到一样的效果的，
但是id在java编程中应该要是唯一的，在JavaScript中经常用，若不唯一就很同意挂掉*/
background: #66B3FF;
}
tr {
background-color: #DFFFDF;
}
</style>
</head>
<body>
湖南城市学院
<div>这是第一个div区域中的文字</div>
<div class="a">这是第二个div区域中的文字</div>
<span>这是第一个span区域中的文字</span><br/>
<span class="a">这是第二个span区域中的文字</span>
<p>这是一个p区域中的文字</p>
<hr/>
<table>
<tr> <th>姓名</th> <th id="age">年龄</th></tr>
<tr class="a"> <td>张三</td> <td>23</td></tr>
<tr> <td>李四</td> <td>23</td></tr>
<tr class="a"> <td>Jack</td> <td>22</td></tr>
</table>
</body>
</html>
扩展选择器
☆关联选择器
标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。例如：
p { color:#00FF00;}
p b { color:#FF000;}
<p>P标签<b>XXXX学院</b>段落样式</p>
<p>P标签段落</p>
☆组合选择器
对多个选择器进行相同样式的定义。例如，我们想对“div中的<b>标签”和“类名为cc”的区域设置相同的样式，则可以定义如下的组合选择器：
.cc, div b{/*不同选择器之间用逗号分开*/
background-color:#0000ff;
color:#fff;
}
☆伪元素选择器
其实就在html中预先定义好的一些选择器，称为伪元素。
格式：标签名:伪元素。类名 标签名。类名:伪元素。
1、超链接a标签中的伪元素
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
2、段落p标签中的伪元素
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一个字母。
3、自定义伪元素
:focus 具有焦点的元素
div:hover{
background-color:#f00;
color:#fff;
}
扩展选择器综合练习：
<html>
<head>
<style type="text/css">
span b{/*关联选择器*/
background-color: #ff0000;
color: #ff0;
}
.c,div b{
text-decoration: line-through;
}
span:HOVER {
color:#0000ff;
}
a:LINK {
background-color:#06f;
color:#f00;
text-decoration: none;
}
a:VISITED {
background-color: #f00;
color:#000;
text-decoration: line-through;/*无效*/
}
a:HOVER {
background-color: #ff0;
color:#f00;
font-size: 24px;
text-decoration: underline;/*有效*/
}
a:ACTIVE {
background-color: #000;
color:#fff;
font-size: 32px;
text-decoration: line-through;/*有效*/
}
p:FIRST-LINE {
font-size:24px;
color:#f00;
background-color: #ff0;
}
p:FIRST-LETTER {
font-size:32px;
}
input:FOCUS{
background-color: #9f0;
}
</style>
</head>
<body>
<div>这是一个<b>div区域</b></div>
<span>这是一个<b>span区域</b></span>
<p>
新华网北京5月24日电 五月的龙江大地，林茂风清，沃野茵茵。5月23日，<span class="c">习近平总书记</span>到黑龙江省考察调研，
从北京直飞素有“祖国林都”“红松故乡”之称的伊春市。
</p>
伊春位于黑龙江东北部，<a href="http://www.sina.com" target="_blank">是全国重点国有林区</a>，林业施业面积400万公顷。2013年，在全国率先全面停止天然林商业性采伐。
<br/>
<input type="text"><br/>
<input type="text">
</body>
</html>
CSS的盒子模型1
◇边框(border)
上 border-top
下 border-bottom
左 border-left
右 border-right
◇内补丁(Paddings)：内边距
上 padding-top
下 padding-bottom
左 padding-left
右 padding-right
◇外补丁(Margins)：外边距
上 margin-top
下 margin-bottom
左 margin-left
右 margin-right
CSS的盒子模型2
☆CSS布局——漂浮
◇ float : none | left | right
none : 默认值。对象不飘浮
left : 文本流向对象的右边
right : 文本流向对象的左边
◇ clear : none | left | right | both
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
示例1：
<html>
<head>
<style type="text/css">
#imgText {
border: #f00 solid 1px;
width: 400px;
position: relative;
top: 50px;
left: 100px;
}
#img {
float: left;
}
#text {
color: #f00;
font-size: 20;
font-family: "隶书";
}
#signText {
font-size: 24px;
color: #00f;
position: absolute;
top: 10px;
left: 70px;
}
</style>
</head>
<body>
<div id="imgText">
<div id="img"><img src="example.jpg" width="300px" height="200px"></div>
<div id="text">
习近平来到上甘岭林业局溪水国家森林公园，实地察看天然林保护情况。
他走进红松林深处，同正在巡山的护林员进行交流，了解他们的工作生活情况。
</div>
<div id="signText">新浪网</div>
</div>
</body>
</html>
示例2：
<html>
<head>
<style type="text/css">
div {
border: #f00 solid 1px;
width: 200px;
height: 100px;
}
#div1 {
background-color: #f00;
padding: 20px; /* 4个边距都是20px*/
/* padding: 20px 100px; 上下边距是20px，左右是100px*/
/* padding: 20px 100px 200px ;上,左右,下*/
/* padding: 20px 100px 200px 300px ; 顺时针：上,右，下，左*/
margin: 0px;
float: left;
}
#div2 {
background-color: #0f0;
margin-left: 100px;
padding: 20px;
float: left;
}
#div3 {
background-color: #00f;
padding: 20px;
margin-left: 100px;
float: left;
/*这里设置成漂浮则会和前面设置了漂浮的成员一起靠右侧排队，若这里不设置漂浮，则div框图会无视前面设置了漂浮的成员的存在直接排到最前面，
会出现看上去与设置了漂浮的div重叠的现象，但是文字会留在下一行而不随div一起，但是文字所在的纵坐标与div保持一致并且紧挨着div框图，只是横坐标不同而已*/
/*clear: left;*/
/*设置clear: left;的话如果前者有设置了漂浮的，该成员不会排到前者右侧而是在下面，即clear属性设置成了left,right等时，相应一侧不允许出现有设置了漂浮的*/
}
body {
margin: 0px;
/*body标签也有margin，因此在head里的style里设最外的margin为0的话，仍然有空隙，需要为body设css属性将margin设为0才可以达到想要的效果*/
}
</style>
</head>
<body>
<div id="div1">信息科学与工程学院</div>
<div id="div2">土木工程学院</div>
<div id="div3">数学与计算科学学院</div>
</body>
</html>
CSS的盒子模型3
☆CSS布局——定位
◇ position : static | absolute | fixed | relative
static : 默认值。无特殊定位，对象遵循HTML定位规则。
absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义。
fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。
relative : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置。
☆CSS布局——图文混排
☆CSS布局——图像签名
示例：
<html>
<head>
<style type="text/css">
div {
border: #f00 1px solid;
width: 200px;
height: 100px;
}
#div1 {
background-color: #f00;
/*position: absolute;
top: 50px;
left: 80px;*/
/*设置成绝对定位时，可以看成该对象与其他的不位于同一个平面，因此，其他的可以直接置顶排列。
并且，当绝对定位的对象与其他对象(相对定位和不设置定位)出现重叠的时候，设置了绝对定位的对象将位于其他的对象的下方*/
}
#div2 {
background-color: #0f0;
width: 300px;
position: relative;
top: 20px;
left: 20px;
}
#div3 {
background-color: #00f;
/*position: relative;
top: 10px;*/
/*相对定位只能根据前者不设置相对定位时应该处的位置来相对的，若前者设置了相对定位，此处会将其置之不理，任然认为前者处于原处。
并且，当相对定位的对象与其他对象(绝对定位和不设置定位以及出现的比其早的相对定位的对象)出现重叠的时候，设置了相对定位的对象将位于其他对象的上方*/
}
#div0 {
position: absolute;
top: 400px;
left: 150px;
}
#div4 {
position: relative;
background-color: #f00;
}
#div5 {
position: relative;
background-color: #0f0;
}
#div6 {
position: relative;
background-color: #00f;
}
</style>
</head>
<body>
<div id="div1">信息科学与工程学院1</div>
<div id="div2">土木工程学院1</div>
<div id="div3">数学与计算科学学院1</div>
<hr/>
<div id="div0">
<div id="div4">信息科学与工程学院2</div>
<div id="div5">土木工程学院2</div>
<div id="div6">数学与计算科学学院2</div>
</div>
</body>
</html>