【Dongle】【Web】CSS总结
通过之前的学习，我们了解到CSS对于改变html标签样式非常方便有效。下面我们来了解一下CSS：
CSS简介
CSS（Cascading Style Sheets）全称为层叠样式表，用于控制页面样式，将页面样式与网页分离的一种标记性语言。
那么什么是标记语言呢？标记语言，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。标记语言不仅仅是一种语言，就像许多语言一样，它需要一个运行时环境，使其有用。提供运行时环境的元素称为用户代理。
故而CSS作为一种标记性语言，只是用来辅助的html显示的，有html才能运行，没有html就不能运行；相反，html有css可以运行，没有css照样可以运行。那么为什么要使用CSS呢？原因在于html对于修改某一类选择器样式必须找到全部的这类选择器，然后一个一个修改，过于繁琐，所以才有了CSS的使用。
CSS总结
css作用
1.结构与样式分离的方式,便于后期维护与改版;
2.样式定义精确到像素的级别;
3.可以用多套样式,使网页有任意样式切换的效果
4.降低服务器的成本
CSS设计
文字效果
字体font-family
font-family:黑体, 幼圆;文字大小：font-size
p.inch{ font-size: 0.5in; }
p.cm{ font-size: 0.5cm; }
p.mm{ font-size: 4mm; }
p.pt{ font-size: 12pt; }
p.pc{ font-size: 2pc; }
文字颜色color
color:#333333;文字粗体font-sty：bold
h1 span{ font-weight:lighter;}
span{ font-size:28px; }
span.one{ font-weight:100; }
span.ten{ font-weight:bold; }
span.eleven{ font-weight:normal; }文字斜体font-style：italic
h1{ font-style:italic; } /* 设置斜体 */
h1 span{ font-style:normal; } /* 设置为标准风格 */
下划线、顶划线、删除线、闪烁：text-decoration
p.one{ text-decoration:underline; } /* 下划线 */
p.two{ text-decoration:overline; } /* 顶划线 */
p.three{ text-decoration:line-through; } /* 删除线 */
p.four{ text-decoration:blink; } /* 闪烁 */字母大小写：text-transform
p.one{ text-transform:capitalize; } /* 单词首字大写 */
p.two{ text-transform:uppercase; } /* 全部大写 */
p.three{ text-transform:lowercase; } /* 全部小写 */图片效果与盒子模型
图片
width:70%; /* 相对宽度 */
height:110px; /* 绝对高度 */盒子模型
页面背景
可以加图片，或者也可以直接设置背景颜色等等
background-image:url(03.gif); /* 页面背景图片 */
background-color:#FFFF00; /* 页面背景颜色 */
由于存在div，所以也可以进行页面背景分块。如果加载背景图片，可以设计是否重复，并且可以设置重复类型。repeat-y垂直方向重复，repeat-x水平方向重复，no-repeat不重复。
background-repeat:repeat-y; /* 垂直方向重复 */表格和表单
表格标记有caption标题、th列、tr行、td单元格。可以设计表格的颜色和边框，通过将表格奇数行和偶数行的颜色不同来方便使用者查看数据。
body{
background-color:#ebf5ff; /* 页面背景色 */
margin:0px; padding:4px;
text-align:center; /* 居中对齐（IE有效） */
}
.datalist{
color:#0046a6; /* 表格文字颜色 */
background-color:#d2e8ff; /* 表格背景色 */
font-family:Arial; /* 表格字体 */
}
.datalist caption{
font-size:18px; /* 标题文字大小 */
font-weight:bold; /* 标题文字粗体 */
}
.datalist th{
color:#003e7e; /* 行、列名称颜色 */
background-color:#7bb3ff; /* 行、列名称的背景色 */
.btn{
background-color:transparent; /* 背景色透明 */
border:0px; /* 边框取消 */
}页面与浏览器元素
超链接
可以设置未访问时、访问时、访问后的样式
a:link{ /* 超链接正常状态下的样式 */
color:#005799; /* 深蓝 */
text-decoration:none; /* 无下划线 */
}
a:visited{ /* 访问过的超链接 */
color:#000000; /* 黑色 */
text-decoration:none; /* 无下划线 */
}
a:hover{ /* 鼠标经过时的超链接 */
color:#FFFF00; /* 黄色 */
text-decoration:underline; /* 下划线 */
}
a.help:hover{ /* “帮助”按钮的样式 */
cursor:help; /* 变幻鼠标形状 */
}滚动条
同其他元素相同，可以设置大小（限文本）、颜色、背景等等
background-color:#efe5e2;
scrollbar-3dlight-color: #B0C4DE;
scrollbar-arrow-color: #34547E;
scrollbar-base-color: #FF0000; /* 基调颜色 */
scrollbar-darkshadow-color: #1D4272;
scrollbar-face-color: #CFDFF4;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #5380BA;菜单
项目列表的编号可以设置编号方式，也可以选择图片编号
ul{
font-size:0.9em;
color:#00458c;
list-style-type:decimal; /* 项目编号 */
} list-style-image:url(icon1.jpg); /* 图片符号 */
滤镜
滤镜主要是用来实现图像的各种特殊效果。标识符是“filter”，使用语句“filter：filtername(parameters)”。
滤镜的分类：Alpha通道，Blur模糊，透明色，Flip翻转，遮罩，波浪
具体滤镜的使用可以查看百度百科：CSS滤镜
其他语言
CSS语言可以与其他语言（如Javascript、XML、AJAX等）相结合，能实现更好的HTML页面显示和操作效果。