CSS
CSS（层叠样式表）是用来美化页面用的，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色、边框等。
CSS主要有元素内联、页面嵌入和外部引用三种使用方式。CSS是描述元素的皮肤！
元素内联，直接将样式写入元素的style属性中，
<input type="text" readonly="readonly" style="background-color: #FF00FF" />，style="color:Red;background-color: #FF00FF"为元素内联，适用于样式没有可复用性的场合。- 页面嵌入：在head中加入
表示页面中所有input都是采用指定的样式。适合于样式复用，减小页面体积
所有的P标签都变成红色字体，加粗。
外部引用，将css内容写入css后缀的文件
div{background:yellow} 然后在页面中引用，在head中加入<link type="text/css" rel="Stylesheet" href="s1.css" />适合于多个页面共享css。更变原则：就近原则
常见样式
- css计量单位：css中表示宽度、距离时有多种计量单位：px（像素）、30%（百分比）、em（相对单位）等。width:20px。
- background-color:Red;背景颜色；color：文本颜色
- 复合样式 background border
- border-style:solid;边框风格，实线solid（默认是没有），还有dotted(点)等值；border-color：边框颜色；border-width：边框宽度(默认是0)。例子：
style="border-color:Red;border-width:1px;border-style:dotted;" - display：元素是否显示，可选值none（不显示,不占地儿）、block （显示为块级元素，此元素前后会带有换行符。）、inline（显示为内联元素，元素前后没有换行符 ）等。
- cursor，鼠标在元素上时显示的光标图标，可选值：cursor（默认光标）、pointer（超链接上的手）、text（输入Bean）、wait（忙沙漏）、help（帮助）等。还可以通过cursor:url(dinosau2.ani)使用ani、cur格式的自定义光标图片。
- LI不显示圆点：LIST-STYLE-TYPE: none;一般设在li或者ul上
- 应用：图片：不显示边框，见备注 图片：不显示边框
IMG { border:0px;BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none} 例子 外部引用
*{ /* 所有的元素 */ margin:0; padding:0; color:Red;}body{ background:red url(/images/back_image.GIF);}span{ /* block 块 display:block;*/ cursor:pointer; color:Blue; text-decoration:underline;}input{ color:Green;}li{ /* 去掉ul前面的黑点 */ list-style-type:none;} 样式选择器
对于非元素内联的样式需要定义样式选择器，通俗的说就是这个样式适合于哪些元素，三种：标签选择器、class选择器和id选择器。
标签选择器 input{border-color:Yellow;color:Red;}，对于指定的标签采用统一的样式
- class选择器，以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格
.d1{ color:Red; width:100px;}.d2{ color:Blue; width:200px;}.d3{ color:Green; width:300px;} 123123123 abc 啊打发 样式名称开头加“.”
.warning{background:Yellow;}.highlight{font-size:xx-large;cursor:help;} | aaa | bb | ccc |
- 标签+类选择器:通过指定标签来确定不同的类适用范围
label.name{ background-color:Gray;}input.name{ color:Blue;} - id选择器：与类选择器不同的地方就是.改成了#。
#wrap{ border:solid 1px blue; width:300px; height:300px;} main - 包含选择器：设置div中strong标签的格式，div中所有strong
div strong{ color:Red;}测试 这是左边栏 left - 后代选择器：直接属于div的strong才会属于这个样式。
div strong{ color:Red;} 这是左边栏 left - 组合选择器 ：多个标签一个样式，组合选择器可以使用类选择器.h3,.p,.span {}
h3,p,span { color:Yellow;}标题3
这是段落
这是span - 伪选择器：超链接使用
- A:visited：超链接点击过的样式；A:visited {TEXT-DECORATION: none}下划线
- A:active：选中超链接时的样式；A:active {TEXT-DECORATION: none}
- A:link：超链接未被访问时的状态；A:link {TEXT-DECORATION: none}
- A:hover：鼠标移到超链接时的状态。A:hover {TEXT-DECORATION: underline}
a:visited{ color:Gray;}a:link{ color:Red; }a:hover{ color:Black; font-style:italic;}a:active{ color:Yellow;}传智播客csdncnbeta123 传智博客视频_布局
布局的分类：表格布局，框架布局，div+css布局
- 表格布局：表格套表格 ，代码多，table显示很慢，一块块的显示就比较麻烦，显示圆角就比较麻烦
- 框架布局：多个页面来显示：
- Frameset 框架页里不能有body
left.html
-
- iframe 嵌入页面
adsfasdfasdfadsf
main.html
iframe：在一个页面中嵌入一个页面
adsf
div+css布局：
- 网页布局就是“这块内容显示在左边，那两块内容并排显示，那块内容漂浮在页面上”。
- 不要使用
<table>进行布局，因为：table可能会在所有tr、td加载完成以后才显示，所以加载完成之前界面是一片空白；用table布局会将布局方式写在html中，违反了“语义性”原则；用table会影响搜索引擎的抓取，不利于SEO。因此Table用来表达真是表格状数据的东西，布局用Div(层)+Css来做,Div用来圈定元素，CSS用来定义元素的位置。 - Div+CSS就是将要布局的内容用
<div>切成块，然后使用css描述每个块的大小、位置等。 布局最重要的一个属性就是float，
内容