【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; }/* 全部小写 */

图片效果与盒子模型

图片

      如同div，可以设计大小，也可以设置位置，也可以设计边框样式

width:70%;/* 相对宽度 */height:110px;/* 绝对高度 */

盒子模型

页面背景

      可以加图片，或者也可以直接设置背景颜色等等

<pre name="code" class="css">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;/* 行、列名称的背景色 */

      表单元素有input(text、radio、checkbox、summit、textarea、...)和Select等。通过设计按钮的样式，可以使按钮像文本一样的显示效果。

.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;/* 项目编号 */}<pre name="code" class="css">list-style-image:url(icon1.jpg);/* 图片符号 */

滤镜

     滤镜主要是用来实现图像的各种特殊效果。标识符是“filter”，使用语句“filter：filtername(parameters)”。

     滤镜的分类：Alpha通道，Blur模糊，透明色，Flip翻转，遮罩，波浪

     具体滤镜的使用可以查看百度百科：CSS滤镜

其他语言

      CSS语言可以与其他语言（如Javascript、XML、AJAX等）相结合，能实现更好的HTML页面显示和操作效果。