内容是抽象的，必须以某种样式来呈现样式：字体、前景色、背景色、背景图、间距、边框。。。。
面试题：XHTML1.0对HTML4.0的改进
1借鉴了XML的写法，语法更加严格
2.把页面的内容和样式分离了，废弃了HTML4中的表示样式的标签和属性，推荐使用css样式来描述页面的样式
html4.0中为了丰富显示效果，设计的很多标签和属性把页面的“内容”和“表现”混杂在一起，导致页面内容杂乱，不便于理解和修改
2016/8/9 11:45:36
CSS3 ： Cascade Style Sheel 级联样式单
使用CSS样式表的方式：
一、内联方式——样式定义在单个的HTML元素中的标准style里
CSS语法：
1.只需将分号隔开的一个或多个属性/值对作为元素的style属性的值
2.属性和属性值之间用：连接
3.多对属性之间用；隔开
<h1 style="background-color:silver;color;blue;">
文本
</h1>
二、内部样式表——样式定义在HTML的头元素中,表规则位于文档头元素中的<style>元素内
1.在文档的<head>元素内添加<style>元素
2.在<style>元素中添加样式规则
<html>
<head>
<style type="text/css">
h1{color:blue;}
</style>
</head>
<body>
<h1>文本</h1>
<h1>文本2</h1>
</body>
</html>
三、外部样式表（outer）：创建一个独立的.css文件
<html>
<head>
<link rel="stylesheet" type="text/css" href="x.css">
</head>
<body>
<h1>1号标题</h1>
<p>段落</p>
<span>其他文本</span>
</body>
</html>
使用原则：
内联样式只对当前元素有效；内部样式对当前整个页面有效；外部样式对所有引用它的页面都有效（可用于控制全站的风格）
内联样式尽量少用;内部样式可以适量使用（全站中只有一个页面中使用的样式）；推荐使用外部样式（外部文件不要太多）
CSS样式表特征
1.继承性——大多数css的样式规则可以被继承
2.层叠性：
（1）可以定义多个样式
（2）不冲突时，多个样式表中的样式可层叠为一个
3.优先级——样式定义冲突时，按照不同样式规则的优先级来应用样式
CSS基本语法:
属性名：属性值；
内部/外部CSS；
选择器{ /*该样式的作用*/
属性名：属性值；
属性名：属性值；
.......
属性名：属性值；
}
CSS选择器——重点
说明：JavaScript/jQuery中也可以使用类似于CSS中的选择器进行元素的选择。
1.通用选择器： *{...} 选择页面中的所有元素
2.元素选择器： 元素名{...} 选择指定的元素，如div{...}
3.id选择器： #id值{...} 仅选择具有指定ID的元素，如#p2{...}
4.类别选择器： .类名{...} 选择具有指定class的所有元素 如.mark{...}
5.并列/过滤选择器：选择器1.选择器2{...} 选择可被两个选择器同时选定的元素 如p.mark{...} 或 .product.mark{...}
6.父子选择器：选择器1 选择器2{...} 选择可被选择器1选择的元素下的所有子元素中可被选择器2选中的元素
如div span{...} .product .mark{...}
7.直接子元素选择器 选择器1>选择器2{...} 选中选择器1中的直接子元素中可被选择器2选中的 如div>span{...} IE6不支持
8.多项选择器： 选择器1，选择器2，...选择器 n{...} 选择可被任何一个选择器选中的元素 如h2,
#main, .mark{...}
9.伪类选择器： ：伪类名{...}
a:link{...}
选择所有未访问过的超链接
a:visited{...}
选择所有访问过的超链接
元素 :hover{...} 当鼠标悬停于元素上方时 IE6不支持a：hover
元素 :active{...} 当元素被激活时(比如点击时)
input :focus{...} 当元素获得输入焦点 IE7前都不支持
CSS中的尺寸单位
%：百分比
in：英寸
cm：厘米
mm：毫米
pt：磅（1pt等于1/72英寸）
px:像素(计算机屏幕行的一个点)
em：1em等于当前的字体尺寸，2em等于当前字体尺寸的两倍
相对尺寸：
% 所占父元素的百分比 如div{width:50%;}
px：像素，指屏幕上的一个点 如div{width :500px;}
em：倍率，表示标准字体大小的倍率 如div{height:3em;}
绝对尺寸 ：(在屏幕上使用的web页面尺寸几乎不用绝对尺寸)
in：英寸
cm：厘米
mm：毫米
pt：磅（1pt等于1/72英寸）
CSS中的颜色
1.英文字符表示 如red green silver
2.RGB表示，rgb（xxx，xxx，xxx） 如span{color:rgb(255,255,255);}
3.三位百分比 rgb（xx%,xx%,xx%） 如span{color:rgb(30%,50%,0%);
}
4.六位十六进制数 #xxxxxx 如span{color:#ffffff;}
5.三位十六进制数 #xxx 如span{color:#ff0;}
色彩理论：
原色：能够以一定的比例调配出其他颜色的颜色
加色系：以RedGreenBlue为原色的色彩体系。主动发光的物体的颜色使用加色系，如太阳、火焰、灯、显示屏等。颜色越多越白。
减色系：以CyneMegatonYellow为原色的色彩体系。不会主动发光，而是发射其他光线的物体，使用减色系，如月亮。纸张、油画笔等。颜色越多越黑。
计算机中颜色表示———加色系：
任意一个颜色都要使用red、green、blue三个原色以一定的比例混合调配出来。
32位真彩色：使用8bit（0-255//00-ff）来描述一个原色的配比量
64位真彩色：使用16bit（0-65535/000000-ffffff）来描述一个原色的配比量
常用颜色rgb：
10,10,10 深灰色
10,10,10 深灰色
200,200，200 浅灰色
0,255,255 青色，红色的互补色
255,0,255 品红色，绿色的互补色
255,255,0 黄色，蓝色的互补色
230,180,10 土黄色
200,230,190
180 240 50
240 180 50
180 50 240
240 50 180
50 240 180
50 180 240
CSS常用属性——重点/难点
| 属性名 | 含义 | 可取值 | 版本/兼容性 |
| width | 指定元素的宽度（block元素才能指定/img/table） | %、 px、 em | 1 |
| height | 指定元素的高度（block元素才能指定/img/table） | %、 px、 em | 1 |
| min-width | 定义元素的最小宽度 | 2 | |
| max-width | 定义元素的最大宽度 | 2 | |
| min-height | 定义元素的最小高度 | 2 | |
| max-height | 定义元素的最大高度 | 2 | |
| overflow | 如何处理溢出的内容 | hidden隐藏、visible可见、scroll滚动、auto自动 | 2 |
| border-width | 边框宽度，可用“上右下左”顺序指定4个值 | ||
| border-color | 边框颜色，可用“上右下左”顺序指定4个值 | 可以用transparent表示透明色 | |
| border-style | 边框样式，可用“上右下左”顺序指定4个值 | none、double、solid、inset、outset、dotted、dashed、groove、ridge | |
| border-left/right/top/bottom | 边框单边定义 | ||
| border | 样式的集合，占用页面空间 | 宽度 样式 颜色 | CSS2 |
| border-radius | 边框半径，绘制圆角边框 | 可取1-4个值，宽的百分比 | CSS3/IE9 |
| outline-width | 轮廓宽度 | ||
| outline-color | 轮廓颜色 | ||
| outline-style | 轮廓样式 | ||
| outline | 外轮廓——不占元素空间 | 颜色 样式 宽度 | |
| box-shadow | 边框阴影——不占页面空间 | h（水平阴影位置）必须 v（垂直阴影位置）必须 color 可选，阴影颜色 blur 可选，模糊距离、 spread 可选，阴影尺寸 insety 可选，将外部阴影（outset）改为内部阴影 | CSS3/ |
| border-image | 图片边框，将图片规定为包围div元素的边框 | 1.source（路径）：url（xx.jpg/png）2.width（宽度）:边框宽/九宫格格宽 3.平铺方式 repeat（平铺）round（铺满）stretch（拉伸） |
2016/8/9 18:00:46
面试题：CSS样式的优先级
!important>内联样式>#id选择器>类/伪类选择器>元素选择器>内部/外部样式>浏览器预定义样式
!important可以调整样式规则的优先级
将!important添加在样式规则之后，中间用空格隔开
选择器{属性：属性值 !important;}
通用选择器，显示为一个星号（*）
1.可以与任何元素匹配
2.常用于设置一些默认样式，比如设置整个文档的文本的默认字体和大小
*
{
margin:0;
padding:0;
font-size:9pt;
font-family:"Times New Roman";
}
}
伪类选择
器
链接伪类
1.link，适用于尚未访问的链接
2.visited，适用于访问过的链接
动态伪类
1.hover，适用于鼠标悬停在HTML元素时
2.active，适用于html元素被激活时
3.focus，适用于html元素获取焦点设时
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
