HTML-层叠样式表-个人-finished

1、层叠样式表 3. 色调与风格 2. 字体控制 1. 页面控制方法学习统一控制页面风格的方法学习如何统一控制页面的色调与风格学习如何统一控制页面字体目标 3. 2. 1.Web标准和CSS（层叠样式表）简介层叠样式表的语法结构添加层叠样式表的方法内容摘要 5. 4.控制外观样式控制文字样式 3.行为（behavior） 2.表现（Presentation） 1.结构（Structure）HTMLXML XHTMLDOM ECMAScript（JavaScript 等）CSSWeb标准的构成Web标准由一系列规范组成，由于Web设计越来越趋向于整体与结构化，目前Web标准也逐步变为由三大部分组成的

2、标准集 高效率的开发与简单维护 信息跨平台的可用性 降低服务器成本 便于改版 加快网页解析速度 与未来兼容 更良好的用户体验Web标准的好处CSS（Cascading StyleSheets，层叠样式表） 是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量，尤其是当你面对的是有数百个网页的站点时。内容结构和格式控制相分离。CSS层叠样式表简介 3. 链接到外部文件 2. 添加在中 1. 直接添加网页内容 添加层叠样式表的方法 4. 联合使用样式表 i

3、mport “*.css”; 要添加的其他样式表具体内容 2.群组选择符 1.类型选择符对一组对象进行相同样式指派比如：h1,h2,h3以网页中已有的标签类型作为名称的选择符比如: body p层叠样式表的语法结构 4.Id及class 3.包含选择符CSS提供的由用户自定标签名称的一种选择符模式，用户可以使用id和 class对页面中的HTML标签进行自定义名称，从而达到扩展HTML标签及组合HTML标签的目的.Hello world China对某一个对象中的子对象进行样式指定时使用比如：p li表示p内的li标签将被指定样式CSS属性与选择符: 选择符属性：值控制字体的样式属性名描述fo

4、nt-family：字体名称font-size:：字号参数font-style: 斜体字的名称font-weight: 字体粗细控制文字的样式 属性名描述值text-transform:文字的大小写uppercase：所有文字大写显示 lowercase：所有文字小写显示 capitalize：每个单词头字母大写显示 none：不继承母体的文字变形参数text-decoration:文字修饰underline：为文字加下划线 overline：为文字加上划线 line-through：为文字加删除线 blink：使文字闪烁 none：不显示上述任何效果属性名描述值word-spacing:间隔

5、距离间隔距离的取值：points、em、pixes、in、cm、mm、pc、ex、normal等。letter-spacing:字母间距数字line-height:行间距离数字text-align:文本水平对齐left：左对齐right：右对齐center：居中对齐justify：相对左右对齐vertical-align:文本垂直对齐top：顶对齐；bottom：底对齐text-top：相对文本顶对齐text-bottom：相对文本底对齐baseline：基准线对齐middle：中心对齐sub：以下标的形式显示super：以上标的形式显示text-indent:缩进距离数字控制文本的样式 属性

6、名描述值color:颜色属性 1）用十六进制方式 #ff0000 2）用 rgb(R,G,B)方式进行，例如：color:rgb(255,255,0); 3）CSS内定的颜色名称，例如：red,yellow。background-color:设置对象背景颜色同color ，可以设置transparent透明background-image:设置对象背景图片url(URL)background-repeat:背景图片重复no-repeat：不重复平铺背景图片repeat-x：在水平方向上平铺repeat-y：在垂直方向上平铺默认：不设定，水平+垂直平铺background-attachment:

7、背景图片固定fixed：网页滚动，图片不动scroll：网页滚动，图片一起移动background-position:背景图片定位top: 相对前景对象顶对齐Bottom:相对前景对象底对齐Left: 左对齐Right: 右对齐Center: 中心对齐控制颜色和背景的样式 属性名描述值list-style-type:列表符号标识取值：disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, nonelist-style-image:URL列表图形符号用图像代替列表项目符号list-sty

8、le-position:列表位置inside: 在BOX模型内部显示outside：在BOX模型外部显示控制列表的样式 属性名描述值cursor：变更鼠标形状hand: 手形crosshair：十字形text: 文本形wait: 沙漏形move: 十字箭头形help: 问号形e-resize: 有箭头形n-resize：上箭头nw-resize: 左上箭头w-resize: 左箭头s-resize: 下箭头se-resize: 右下箭头sw-resize：左下箭头控制用户界面的样式 属性名描述值margin:边框空白margin-top: 顶部空白距离margin-right: 右边margi

9、n-bottom: 底部margin-left: 左边border：对象边框border-top：顶边框宽度border-right: 右边框宽度border-bottom：底边border-left：左border-width:所有边框宽度border-color: 边框颜色（同时设置四面边框颜色，用空格分离,top-right-bottom-left）border-style：边框样式参数(none，dotted，dashed，solid，double，groove，ridge，inset，outset)padding:对象间隙padding-top: 顶部间隙padding-right：右边padding-bottom：底部padding-left：左边间隙控制框与边框的样式 属性名描述值display：控制显示样式block：默认，在对象前后都换行inline：在对象前后都不换行list-item：在对象前后都换行，增加了项目符号none：无显示控制显示的样式 属性名描述值white-space：处理元素内空格normal：把多个空格替换为一个来显示pre：忠实地按输入显示空格nowrap：禁止换行控制空