Java Web_07从入门到精通(CSS)

**

一、css样式概述

Cascading Style Sheet(层叠样式表) 缩写为CSS,主要用于网页风格设计，包括字体大小，颜色 以及元素的精确定位等。
HTML5规范推荐把页面外观交给CSS去控制，而HTML标签则负责标签、语义部分。HTML5删除了传统的 big strike等专门控制页面外观的标签，而把页面外观的控制工作交给CSS负责。目前的最新规范是CSS3.
1.1 CSS历史和作用
CSS是一种专门描述结构文档表现方式的文档，它即可以描述这些文档如果在屏幕上显示，也可以描述它们的打印效果，甚至声音效果，CSS不单可以包含在文档的内部，而且可以独立的文档方式存在。CSS有很多优点：
表达效果丰富 ：样式单可以支持文字和图像的精确定位，三维层技术以及交互操作等，对于文档的表现力远远超过了HTML中的标记。更重要的是，CSS的标准规范独立于其他结构的文档，当需要实现更丰富的表达效果时，仅需修改CSS即可，无需修改原始的页面。

文档体积小：在实际应用中，如果相同的标记下的内容有相同的表现方式，使用传统的方法需要为每个标记分别定义显示格式，造成大量的重复定义。而在CSS中，对于同一类标记只需进行一次格式定义即可。
便于信息检索：样式单的显示逻辑与数据逻辑分离，显示细节的描述并不影响文档中数据的内在结构，因此，网络引擎对文档进行检索，更容易检索到有用的信息。
可读性好：CSS对各种标记的显示进行集中定义，且定义方式直观易读。
W3C已经该出了两种样式单语言的推荐标准：一种是CSS 美化html一种是可扩展样式单语言
XSL（eXtensible Stylesheet language）美化 XML
目前,CSS3的最新版本是CSS3.0
CSS1.0 1996年12月 CSS1.0作为第一个正式规范面世。
CSS2.0 1998年5月 CSS2.0也是使用最广泛的CSS版本
CSS2.1 2004年2月 CSS2.1对原来的CSS2.0做了小范围的修改。
CSS3.0 2010年CSS3规范推出，增加了变形和动画还有就是3D效果
CSS3.0的致命弱点就是对浏览器的版本要求高，IE对CSS3的支持不理想。
chrome webkit

1.2 CSS样式的基本使用
链接外部样式 这种方式将样式文件彻底与HTML文档分离 样式文件需要额外引入
导入外部样式文件 这种方式与上一种方式相同 只是使用@import来引入样式文件
使用内部样式定义 这种方式是通过在HTML文档头定义样式单部分来实现的。这个样式只能供一个页面使用
使用行内样式 通过HTML标签的Style属性来定义样式。

table{
background: #003366;
width:400px;
border-style: solid;
border-width:3px;

}
td{
background-color: #fff;
font-family: “楷体_GB2312”;
font-size:20pt;
text-shadow: -8px 6px 2px #333;
}
通常不建议使用内部CSS样式，因为这种做法需要在HTML文档内嵌入CSS样式定义，这种内部CSS样式主要有三大劣势：
如果此CSS样式需要被其他HTML文档使用，那么这些CSS样式必须在其他HTML文档中重复定义
大量CSS嵌套在HTML文档中，必将导致HTML文档过大，大量的重复下载，导致网络负载加重。
如果需要修改整站风格时，必须依次打开每个页面重复修改，不利于软件工程化管理。
但内部样式定义也并非一无是处，如果想让某些CSS样式仅对某个页面，而不影响整个站点，则应该选择使用内部CSS样式定义。

table{background: #003366;}
td{
background: #fff;
font-family:“楷体_GB2312”;
font-size:20pt;
text-shadow: -8px 6px 2px #333;}
.title{
font-size:18px;
color:red;
height: 30px;
width:200px;
border-top: 3px solid #ccc;
border-left: 3px solid #ccc;
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
}

<div class="title">前端技术:</div>
    <table>
        <tr>
            <td>HTML超文本标记语言</td>
        </tr>
        <