外部样式表-独立的一个文件（myStyles.css） <head><link rel="myStyles" type="text/css" href="样式表的URL"/></head> 内联样式表 <h1 style="color:red;">……</h1> 嵌入式样式表 <head><style type="text/css">…………<style></head> <head><style type="text/css">@import url(myStylses.css);<style></head> ——在嵌入表中引入外部表 link @import——当你的网页须要引入多个外部CSS文件时.你可以运用 link引入一个CSS,然后在这个CSS文件中用@import形式引入其它多个 CSS文件 样式继承 不可继承——margin、padding、border、background 可被继承—— 计算值继承——front-size 样式层叠 优先级： 浏览器默认<用户自定义(normal)<网页设计师编写(normal)<网页设计师编写(import)<用户自定义(import) 排放次序判断 找出选择器对特定元素的所有声明 根据样式声明重要性(!import)和来源进行优先级排序——浏览器默认<用户自定义(normal)<网页设计师编写(normal)<网页设计师编写(import)<用户自定义(import) 特殊性排序-制定更详细的选择器将覆盖更一般的选择器。特殊性：a(内联)>b（id选择器数量）>c（属性（类、伪类）选择器数量）>d（元素（元素、伪元素）选择器数量） CSS规则在文档中出现顺序——后出现的>先出现的>@import(样式表本身规则前出现) z-index z-index在设置了position=absolute/relative时有效 值较高的覆盖较低的 z-index=-1时元素在默认文本下 <style type="text/css"> middle{position:absolute;left:60px;top:60px;z-index:2;background-color:orange;} </style> 效果控制： 制定裁剪区域（clip） <style text="text/css"> img{position:absolute;clip:rect(50px 200px auto auto);} </style> 设置元素可见性 display——none、block（块级）、inline（内嵌级） visibility——visible（可见）、hidden（影藏）、inherit（继承；默认值） 两者的区别在于visibility属性定义的元素任然保留原来的显示空间 CSS控制的区域： 单位 长度单位 绝对长度——用于打印输出设备 mm in pt 点 pc picas 相对长度——浏览器的系统默认值 em ems 当前字体中M字母宽度 px 像素 ex exes当前字体中X字母高度 颜色单位 百分比 rgb 整数值 rgb 十六进制 #fc0eab;#c96==#cc9966 颜色名 aqua（水绿/black（黑/blue（蓝/ fuchsia（紫红/ gray（灰/ green（绿/lime（浅绿/ maroon（褐/navy（深蓝/ olive（橄榄/purple（紫/red（红/silver（银/teal（深青/white（白/yellow（黄/transparent(透明 URL单位 字体 font-style（倾斜程度）normal、italic=oblique font-variant（字体变形）normal、small-caps font-weight（粗细）100、200、300、400=normal、500、600、700=bold、800、900、lighter、bolder font-size（大小）xx-small、x-small、small、medium、large、x-large、xx-large font-family（字体名）times new Roman、Arial、Verdana 元素内容文本属性 text-indent(首行缩进) text-algn（对齐方式）left、right、center vertical-align text-decoration（文本装饰）none、underline、overline、line-through、blink text-shadow（文本阴影）none、color值 line-height（行高）normal、auto word-spacing（词间距）——空格为词的分割线 letter-spacing（字间距） text-transform（大小写形式）capitalize（词首大写——空格为分隔符）、uppercase、lowercase、none white-space normal pre nowrap(不换行) 背景和颜色 color 16进制、rgb()、颜色名字 background #idDiv{bachground:red url(rdl_cup.jpg) no-repeat scroll right bottom} background-color transparent background-image background-repeat repeat no-repeat repeat-x repeat-y background-position {1,2} top/center/buttom||left/center/right background-attachment scroll fixed 定位 在正常流中，文本元素按从上到下、从左到右的格式布局。——块级元素从上到下，内嵌元素从左到右。 正常流中的元素影响其相邻元素的位置 容器快 初始化容器快——根元素（html） 块级元素、表格单元的内容区——静态或相对定位的费根元素 不是静态定位（relative、absolute、fixed）的祖先元素——绝对定位的非根元素——祖先元素为块级元素：容器块扩充到该元素的padding边缘；祖先元素是内嵌元素的容器快为内容区；无祖先元素的为初始化块 定位（position top、right、bottom、left） 静态定位(static)——系统默认，按照它们在HTML的出现顺序生成。 相对定位(relative)——相对于他在正常情况下的默认位置。去而留其位(不影响文本流中接下来的其它层的位置)，可能覆盖其它元素 <style type="text/css"> div{position:relative;height:80pc;width:80px;} .style1{left:30px;top:30px;border:1px solid black;margin-bottom:10px;background-color:#acd373;}</style> 绝对定位(absolute)——孤立（脱离流）、空间被释放、相对其容器块定位 <style type="text/css"> .style{position:absolute;top:10px;left:10px;}</style> 溢出（overflow） visible——默认值；不裁剪、无滚动、强制显示全部内容 hidden——裁剪多余内容、 scroll——裁剪多余内容、有滚动 auto <style type="text/css"> <div{width:250px;height250px;position:absolute;overflow:scroll;} </style> 固定定位(fixed)——孤立、相对视口=viewpoint（浏览器窗口）定位——永远显示在视区内。 浮动（float）——none、left、right 功能：多列的网页布局、从无序列表创建导航工具条、不使用表格而创建内饰表格的对齐方式 float!=none时，元素被视为块级元素 浮动文本类型元素必须制定width 浮动元素margin不会重合 浮动元素在内容区内，不进padding 相邻的浮动元素向同一方向移动——直到碰到父级内边缘或前面的浮动元素 超过容器宽度的元素向相反方向浮动 浮动的内嵌元素顶部低于前面的块级元素 浮动元素顶部低于前一浮动元素 清除浮动clear:none/left/right/both <style>img {float:right;margin:2opx; clear:ri} </style> 布局 元素盒：每个元素都会产生一个矩形盒子围绕在元素类容之外 元素的背景（颜色和图）在内边距区域可见，且延伸到边框下 元素盒总宽度=margin+border+padding+width padding—防止边框挤压内容， 背景填充padding；padding不重合 border：1个到4个围绕在元素内容和内边距的线 边框样式 none double groove ridge inset outset dotted >dashed solid 非可替换内嵌元素不受border影响 可替换元素受影响 上、右、下、 <h1 style="border:.5em(border-width) outset(border-style) red(border-color)"hello</h1> margin{margin-top margin-right margin-bottom margin-left}： 外边距是透明的，其上显示的是父级的背景。 margin为负数时，突破父级元素与页面其它元素重叠 正常文档流中相邻块级元素垂直外边距重合——取其大。 浮动元素、绝对定位元素、内嵌元素垂直外边距不会重合 h1{margin:3px 20px 3px 20px;} width和height：——可以设置块级元素和内嵌可替换元素（图片）；不可以设置内嵌文本元素=不可替换元素（文本） 不可替换元素+display:block—>块级元素 列表格式 项目图片 list-style-image 项目符号 list-style-type disc/circle/square/decimal/lower-roman/upper-roman/lower-alpha/upper-aloha/none
评论