css常用属性

CSS之一：常用样式表 css之一：常用 常用css属性——字体控制 font-size: 12px font-family: “Arial“ font-weight:bold font-style : italic 字体大小 字体类型 加粗 斜体 font : font-style || font-variant || font-weight || font-size || line-height || font-family font:10pt font:10pt ”Arial“ Font标签包含了各个font分支 常用的为字体和大小的组合。 letter-spacing : normal | length 字符间隔 normal :　默认值。默认行高 length :　百分比数字 | 由浮点数字和单位标识符 组成的长度值，允许为负值。其百分比取值是基于字 体的高度尺寸 color:blue; 或 color:#ff3300; 文本的颜色 line-height : normal | length normal :　默认值。默认行高 length :　百分比数字 | 由浮点数字和单位标识符 组成的长度值，允许为负值。其百分比取值是基于字 体的高度尺寸 Code:ex04/css_news.htm 常用css属性——文本控制 text-align : left | right | center | justify 设置或检索对象中文本的对齐方式。 left :　默认值。左对齐 right :　右对齐 center :　居中对齐 justify :　两端对齐 vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length auto :　自动 baseline :　基线对齐 sub :　垂直对齐文本的下标 super :垂直对齐文本的上标 top :　内容对象顶端对齐 text-top :　将支持 valign 特性的对象的文本与对 象顶端对齐 middle :　中部对齐 bottom :底端对齐 text-bottom :　文本与对象底端对齐 length :　CSS2功能 由浮点数字和单位标识符组成的长度值 | 百分数。 可为负数。定义由基线算起的偏移量。基线对于数值 来说为0，对于百分数来说就是0%。 word-break : normal | break-all | keep-all normal :　默认值。允许在词间换行 break-all :与 normal 相同。也允许非亚洲语言文 本行的任意字内断开。 keep-all :　对于中文，韩文，日文，不允许字断 开。适合包含少量亚洲文本的非亚洲文本 Code:ex04/css_news.htm 常用css属性——文本控制2 word-wrap : normal | break-word 取值：normal :　 默认值。允许内容顶开指定的容器边界 break-word :　内容将在边界内换行。如果需要，词内 换行( word-break )也将发生 设置或检索当当前行超过指定容器的边界时是否断开 转行。 此属性仅作用于有布局的对象，如块对象。内联要素 要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者 设定 display 属性为 block 。 示例： div { word-wrap: break-word; word-break: break-all; } 此段代码，常用，来限内容不超出容器范围。 常用css属性——背景控制 background-color : transparent | color background-image : none | url ( url ) background-position : position || position background-repeat : repeat | no-repeat | repeat-x | repeat-y layer-background-color : transparent | color background:颜色 背景图片 重复性 位置; 背景色 背景图像 背景图像的定位，位置坐标 指定背景图像是否重复，怎么重复 指定背景色透明 可仅用background代替上面各属 性。 应用举例： 1、表格的背景图像和背景色 2、给textarea生成水平笔记效果 3、制作重复性背景图片、图片虚线的技巧。 常用css属性——定位应用 position : static | absolute | relative | fixed Static 默认值。无特殊定位，对象 遵循HTML定位规则 absolute :绝对定位，具体位置依 据left、top的指定。 relative：同absolute，唯一不同 的是不重叠。如定位中，不计算中 间元件的尺寸。 Top: auto | lengthleft; bottom:auto | lengthleft; Right:auto | lengthleft; z-index : auto | number 背景色 背景图像 背景图像的定位，位置坐标 指定背景图像是否重复，怎么重复 指定背景色透明 可仅用background代替上面各属 性。 应用举例： Code: ex04\positon_ex.htm 常用css属性——超链接样式 超链接标签的样式比较特殊，大家 都有过上网的经历，超链接有四种效 果： A 未点击样式 B 鼠标悬停 C 鼠标按下 D 访问过的样式 与这四种样式对应的样式表定义形式 依次为： a:link{}或者a:{} a:hover{} a:active{} a:visited{} 所以，一般的，我们要对超链接定义 一套四类样式表。 针对所超链接： a:link{font-size:12px;text-decoration:none;} a:hover{font-size:12px;text-decoration:underline;} 类样式表：引用class=“名称”来引用： .mylink:ink{font-size:12px;text-decoration:none;} .mylink:hover{font-size:12px;text-decoration:underline;} 其中： font-size表示文字大小。 text-decoration=underline表示下划线。 Code:ex04/css_news.htm CSS之二：DIV专 css之二：DIV专题 何为DIV布局？ 所谓DIV布局，实际就是通用div标签来显示网页内容，通过css来控制显示的。从而，取代表格 布局，让页面更具灵活性、可控性、清晰性。 DIV标签，也有人称之为“层标签“。 样式表： #header{width:300px;height:200px;} #content{width:300px;height:400px;} .foot{width:300px;height:50px;} 页面： DIV布局优势 DIV布局的优势： 1、DIV布局灵活、代码清晰，方便各个版块的调整、补充、删除。 2、越来越多的网站、包括客户选择了DIV布局，国外新开发的网站，均是DIV布局。 3、使用DIV布局，减少了表格的多层嵌套关系，增加了浏览器对网页的解析效率。 4、使用DIV布局，减少了页面的大小，从而提高了网站的浏览速度。 与表格的主要区别： DIV布局与传统表格(table)布局最大的区别在于： 原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距； 而现在则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间距。 DIV布局现状： 在中国，往往设计师对代码的掌握能力不是很全面，css+div布局，对美术人员来说，是有一定难度 的，使用div布局，需要建立在对html、css、javascript掌握的基础之上，这也是DIV布局很难人人 会，人人用的原因。作为PHP程序员，学习DIV很有必要，以满足网站布局的高端需求。 DIV布局的模型 自从1996年CSS1的推出， W3C组织就建议把所有网 页上的对像都放在一个盒 (box)中，设计师可以通过 创建定义来控制这个盒的 属性，这些对像包括段 落、列表、标题、图片以 及层