自己总结的css

CSS 的应用的应用 1 长度单位长度单位 类型单位含义示例 px像素 根据显示设备的分辨率而确定的 一个长度单位 显然 分辨率都为 800 600 的 17 寸显示器和 52 寸投影中 像素为 100 80 的绝对长度是不一样的 但同一显示设备中 px 值是绝对的 p font size 18px 将字号设置为 18 像素 em以目前字符高度为单位 p text indent 2em 段落前空两个字符 相 对 长 度 表示长度为参考标签的百分比 前面可 以加 或 两个符号 如果参考对象没 有确定值 则为标准值 table width 80 表示表格占父容器宽度的 80 in英寸 1 in 2 54 cm 非国际单位 平时 使用极少 p fline height 1in 行高为 1 英寸 cm厘米 国际标准单位 使用较少 mm毫米 国际标准单位 使用较少 pt点数 1 pt 1 72 in 基本的显示单位 较少使用 p font size 11pt 将字号设置为 11 点 绝 对 长 度 pc印刷单位 应用在印刷行业中 1pc 12pt 2 颜色值颜色值 表示方法含义示例 颜色名使用系统预先定义好的颜色名称表示颜 色 如 red green blue 分别表示红绿蓝 a link color gray 活动超链接颜色为灰色 十六进制使用十六进制表示颜色 格式为 RRGGBB RR 表示红色分量值 GG 表示 绿色分量值 BB 表示蓝色分量值 font color ff0000 字体颜色为红色 background color 800080 背景色为紫色 RGB 分量rgb RR GG BB RR 表示红色分量值 GG 表示绿色分量值 BB 表示蓝色分量值 可以用数值或百分比形式表示 color rgb 255 0 0 红色 color rgb 80 0 0 暗红 3 字体属性 字体属性 表示方法含义示例 font family所有字体hongen font style字体是否 倾斜 属性 Normal italic oblique hongen hongen hongen font variant字体是否 用大小写 属性 Normal small caps bold bolder lithter 等 hongen font size定义字体 的大小 属性 Normal Absolute size relative size length percentage Leaf 4 4 CSSCSS中的文本属性中的文本属性 属性名称属性值说明 color 十六进制 英文名称 三原色单位颜色 letter spacing Normal 正常显示 长度 文本间隔 设置字符间距 word spacing normal正常显示 长度文本间隔 设置文本中单词 white space normal文本自动处理换行 pre换行和空白受保护 nowrap强制在同一行显示 text align left 左 right 右 center 居 中 justify 两端对齐 设置对象中首行文本的缩进值 h1 h1 text align center text decoration underline 下划线 overline 底 线 line through 线穿过 blink 闪烁 文本修饰属性 h3 text decoration underline text indent 长度首行缩进 百分比同上 设置首行缩进 p text indent 1 0 in line height 像素行高 数字 百分比行高 元素的行高 div font size 10pt line height 2 text transform none 正常显示可以包含大 小字 符 capitalize 字符串第一个字符大 写 uppercase设置大写字符 lowercase设置小写字符 用来设置文本格式转换 capitalize 首字母大写 uppercase 大写 lowercase 小写 和 none 无 vertical align sub设置文字为下标 super设置文字为上标 top元件往上端靠齐 middle设置文字是在中线位置 bottom元件往下端靠齐 设某对象相对其他文本的位置 平方值 32 5 5 CSSCSS 中背景的使用中背景的使用 属性名称属性值说明 color 定义前景色颜色 color rgb 204 82 2 8 background attachment scroll 设置背景图像会随视窗滚动 条的移动而移动 fixed设置背景图像不会随视窗滚动条的移 动而移动 背景是否随内容滚动 background color 十六进background color ff0000 英文名称background color red 三原色background color rgb 255 0 0 Transparent background color transparent 透明 背景颜色 background imageURL background image url bg jpg 背景图片 none不设置背景图片 背景图像 background position top left设置背景图案出现在上左方 top center设置背景图案出现在上方中间 top right设置背景图案出现在上右方 center left设置背景图案出现在中间左方 center center设置背景图案出现在IE中间 center right设置背景图案出现中间右方 bottom left 设置背景图案出现在下左方 bottom设置背景图案出现在正下方 bottom right 设置背景图案出现在下右方 背景图片的位置 background repeat repeat将背景图案填满整个背景 repeat x 将背景图案在水平方向添满 repeat y 将背景图案在垂直方向添满 no repeat 图案只出现一次 背景图片是否以如何平铺 6 CSSCSS 中列表的使用中列表的使用 属性名称属性值说明 list style type none无符号 disc 实体的小圆点 circle空心的小圆点 square实心的小方块 decimal1 2 3 lower romani ii iii upper romanI II III 列表项所使用标记符 号的样式 lower alphaa b c d e upper alphaA B C D E list style position inside清单项目较往右移 outside清单项目正常显示 列表项标记的放置位 置 list style imageURL list style image url lmk gif none不会显示任何图象 列表项标记的图像 7 7 CSSCSS 中边框的使用中边框的使用 属性名称属性值说明 border color 十六进制可依序设置上 右 下 左线 英文名称border color red 四边均为红色 三原色border color red green 上下为红色 左右为绿色 border color red green blue 上为红色 左右为绿色 下为蓝色 border color red green blue yellow 上右下左分别为红绿蓝黄 border style none不显示边线 dotted点线 dashed虚线 solid实线 double双线 border width 长度 border width 0 2cm 0 3cm 0 4cm 0 5cm none border width 1 2 3 4 8 8 CSSCSS 中边界的使用中边界的使用 属性名称属性值说明 padding bottom 长度 百分比元件下端边线的空隙 padding left 长度 百分比元件左端边线的空隙 padding right 长度 百分比元件右端边线的空隙 padding top 长度 百分比元件上端边线的空隙 简易写法 padding 10px padding 2px 4px padding 2px 6px 10px padding 1px 2px 3px 4px margin bottom auto自动调整空隙 长度 百分比设置下端空隙 margin left auto自动调整空隙 长度 百分比设置左端空隙 margin right auto自动调整空隙 长度 百分比设置右端空隙 margin top auto自动调整空隙 长度 百分比设置上端空隙 简化方案 margin 2px 4px margin 2px 6px 10px margin 1px 2px 3px 4px 常用网页顶格设置 margin 0 9 9 CSSCSS 中区块的使用中区块的使用 属性名称属性值说明 width 像素 百分比区块的宽度 auto height 像素 百分比区块的高度 auto min height 像素像素 百分比区块最小高度 auto max height 像素像素 百分比区块最大高度 auto min width 像素像素 百分比区块最小宽度 auto max width 像素像素 百分比区块最大宽度 auto 1010 CSSCSS 中浮动的使用中浮动的使用 属性名称属性值说明 float none正常显示 left左浮动 right右浮动 clear none允许两边浮动 left不允许左边浮动 right不允许右边浮动 both不允许两边浮动 11 CSSCSS 中定位的使用中定位的使用 1212 CSSCSS 中溢出的使用中溢出的使用 属性名称属性值说明 position relative 设置区块基准点为左上角 absolute 设置网页的为基准点左上角 static 无设置 left auto以基准点定位在左边 像素 百分比定位在左边 top auto以基准点定位在上边 像素 百分比定位在上边 right auto以基准点定位在右边 像素 百分比定位在右边 bottom auto以基准点定位在下边 像素 百分比定位在下边 z index auto自动调整高度 数字数字越大越往上层 1313 CSSCSS 中滚动条的使用中滚动条的使用 1414 SSSS 链接 光标 链接 光标 DHTMLDHTML 缩放 缩放 属性名称属性值说明 overflow visible不剪切内容也不添加滚动 auto 在必需时对象内容才会被 hidden不显示超过对象尺寸的内容 scroll总是显示滚动条 overflow x 同上 overflow y 同上 属性名称属性值说明 scrollbar 3dlight color 颜色 十六进制 滚动条亮边框 scrollbar highlight color 颜色 十六进制 滚动条 3D 界面亮边 scrollbar face color 颜色 十六进制 滚动条 3D 表面 scrollbar arrow color 颜色 十六进制 滚动条方向箭头 scrollbar shadow color 颜色 十六进制 滚动条 3D 暗边 scrollbar darkshadow color 颜色 十六进制 动条暗边框 scrollbar base color 颜色 十六进制 滚动条基准颜色 scrollbar track color 颜色 十六进制 滚动条的拖动区域 属性名称属性值说明 CSSCSS 中链接的使用中链接的使用 a link 表示该超链接文字尚未被点选 a visited 表示该超链接文字已被点选过 a active 表示该超链接文字正被点选 但未被放开 a hover 表示当鼠标停留在文字上 CSSCSS 中光标的使用中光标的使用 cursor auto 光标是手指 Crosshair 光标是十子形 default 光标是箭头 hand pointer 光标是手形 move 光标是移动的符号 text 输入文字的符号 wait 漏斗 help 帮助 CSSCSS 中中 DHTMLDHTML 的使用的使用 1515 CSSCSS 滤镜滤镜 1616 CSSCSS 定义选择器定义选择器 behavior urlDHTML 文件 CSSCSS 中缩放的使用中缩放的使用 zoom normal使用对象的实际尺寸 百分数 浮点实数 放大缩小 属性名称属性值说明 AlphaAlpha 滤镜的使用滤镜的使用 opacity 0 100对象的亮度 style 1 2 3滤镜的样式 BlurBlur 滤镜的使用滤镜的使用 add true false是否印象派 direction 0 360角度 strength 数字模糊度 FliphFliph FlipvFlipv 滤镜滤镜 无属性 DropShadowDropShadow 滤镜滤镜 color 颜色阴影颜色 offx 数字x 坐标偏移 offy 数字y 坐标偏移 positive true false是否建立透明 GlowGlow 滤镜滤镜 color 颜色发光颜色 strength 数字发光厚度 GrayGray Invert Xray Invert Xray 无属性 ShadowShadow 滤镜滤镜 color 颜色阴影颜色 direction 0 360阴影方向 17 CSSCSS 层叠层叠 属性名称属性值说明 应用应用 ID每个 ID 在一个页面中只能使用一次 作为某个元素的唯一标识符 一般情 况下 ID 只用于页面的唯一元素 如 页眉 主导航条 布局区块等 示例 This paragraph has red text 相应的 CSS 代码 hightlight color FFFFFF 将将 ID 与选与选 择器结合择器结合 适合所有 h2 标题 h2 color 333 font size 16px 只适合 title 的 h2 标题 h2 title color eee 相应的 XHTML 代码 Title Of My Article ID 的使用的使用 场合场合 对于每个 ID 每个页面只能有一个元 素使用该样式 因此 ID 应该为每个 页面唯一存在并仅使用一次的元素 不保留 避免使用避免使用 ID 的场合的场合 当一个以上的地方需要使用同一 CSS 规则时 不应该使用 ID 应用类应用类类可以无限次的使用 因此它是应用 CSS 的非常灵活的方法 his paragraph has red text 相关 CSS 代码 hightlight color FFFFFF 结合多个类结合多个类 和和 ID Beer Spirtis Cola Lemonade 相应的 CSS 代码 ul drinks color FF6600 mix Color 999999 hot Color 333333 利用类改写利用类改写 基本样式基本样式 p Color ff6600 bleached Color ccc 相应的 XHTML 代码 This paragraph has red text This paragraph has red text 直接将类链直接将类链 接到元素上接到元素上 p bleached color red 相应的 XHTML 代码 This paragraph has red text 避免避免 适合适合对于 class 如果多次重复使用或者使 用子类选择器 那么就选择 class 如果是定义唯一性的标记 比如布 局 那么用 id 属性名称例子 外部链接实现层外部链接实现层 叠叠 导入样式实现层导入样式实现层 叠叠 import url one css import url two css import url three css 分组分组h1 Font family 隶书 宋体 楷体 Line height 140 Color 333 h2 Font family 隶书 宋体 楷体 Line height 140 Color 333 h3 Font family 隶书 宋体 楷体 Line height 140 Color 333 分组后 h1 h2 h3 Font family 隶书 宋体 楷体 Line height 140 Color 333 分组例外 h1 Font style italic 继承继承h1 Color 333 This is the greatest heading in the world 从 BODY 继承 Body Margin 10px Font family 隶书 Background 000 Color fff 上下文选择器上下文选择器h1 Color ccc i Color 000 使用上下文选择器 h1 I Color 000 子类选择器子类选择器 box color red box1 font weight bold box2 font style italic Box Box1 Box2 其他选择器其他选择器p color black a text decoration underline h1 font weight bold 后代选择器后代选择器h2 i color red li a text decoration none main h1 Color red 伪类伪类a link color blue a visited color green a hover a active color red input focus background color yellow 通用选择器通用选择器 Padding 0 Margin 0 子选择器和子选择器和 相邻同胞选择器相邻同胞选择器 子选择器子选择器 nav li background url bg gif no repeat left top Home Server Development Consultancy Contact Us 相邻同胞选择器 h1 p font weight bold Main Heading First Paragraph Second Paragraph 属性选择器属性选择器CSS strong title border bottom 1px dotted 999 strong title hover cursor help background ccc 代码注释与结构代码注释与结构 body styles body Font size 67 5 1818 CSSCSS 构造模构造模 属性名称例子 添加添加 div This is our content area 给 div 添加一个 id This is our content area container Padding 20px Border 1px solid 000 Background ccc 添加子添加子 div This is our content area I m in a box I m also in a box box margin 10px padding 20px border 1px solid 000 div 和上下文选择器和上下文选择器 box p Color 333 container p Color 333 边距边距 外边距外边距 margin container Margin top 20px Margin left auto Margin right auto Margin bottom 20px Width 300px Border 1px solid 333 Padding ccc container Margin 20px auto 1em auto 上 右 下 左 用 margin auto 居中 Body Text align center container Width 400px Margin 10px auto 10px auto Padding 20px Background ccc Text align left 内边距内边距 padding container Padding top 20px Padding left 10 Padding right 1em Padding bottom 0 Background ccc 外边距外边距 内边距和主体内边距和主体Body Margin 0 Padding 0 边框边框 Border style 边框样式边框样式 None 无边框 dotted 点线 dashed 虚线 Solid 实现 double 双线 groove 凹槽 ridge 凸槽 nset 凹边 outset 凸边 上 右 下 左 Border style solid dotted inset outset Border top width Border right width Border bottom width Borer left widt Border color Border Border left Border top Border right Border bottom Border width 定位定位 P h1 和和 div 等成为块级元素等成为块级元素 意思是这些元素显示为一块内容意思是这些元素显示为一块内容 即即 块框块框 与之相反与之相反 strong 和和 span 等元素称为行内元素等元素称为行内元素 即即 行内框行内框 更多内容更多内容 后章在述后章在述 相对定位相对定位 myBox Position relative Top 20px Left 20px 绝对定位绝对定位 myBox Position absolute Top 20px Left 20px 浮动浮动 news img Float left news p Float right 19 CSS 构造列表与导航构造列表与导航 20 CSS 构造颜色 背景与图构造颜色 背景与图 属性名称例子 内边距与外边距Ul Margin 0 Padding 0 使用图片作为列表 图标 Ul Margin 0 Padding 0 Width 200px List style image url images list gif Line height 150 以背景图片作为项 目列表图标 Ul List style type none Li Background url images list gif no repeat left center Padding 0 0 0 25px 内联列表Ul List style type disc Li Display inline 这里的 display 属性是块级值的设置 定义是否要成为块 Inline 是是内联 block 是区块 背景图片和内联列 表 Ul List style type none Li Display inline Background url images list gif no repeat left center Margin 0 0 0 10px Padding 0 0 0 15px 垂直导航栏 Drubjs Menu Beer Spirits Cola Lemonade Tea Coffee Ul List style type none Margin 5px Padding 2px Width 160px Font size 12px Li Background ddd Margin 0 Padding 2px 10px Border left 1px solid fff Border top 1px solid fff Border right 1px solid 666 Border bottom 1px solid aaa 创建垂直翻转的列 表 ul margin 0 padding 0 list style type none Ul a Display block Width 200px Height 40px 39px Line height 40px 39px Color 000 Text decoration none Background 94b8E9 url images pixy rollover gif no repeat left center left bottom ext indent 50px a hover background position right bottom 创建水平导航条ul Margin 0 Padding 0 2em List style none line height 2 1em Width 720px Background faa819 url images mainNavBg gif repeat x ul li float left ul a color fff padding 0 10px background url images divider gif repeat y left top text decoration none 属性名称例子 设定颜色红色的几种合法定义 f00 ff0000 Red Rgb 255 0 0 Rgb 100 0 0 十六进制三元组第一个字节 红色的值 第二个字节 绿色的值 第三个字节 蓝色的值 简化写法 cccccc 可写成 ccc ff6633 可以写成 f63 21 CSS 构造超链接构造超链接 使用 17 种具名 颜色 黑色 black 000000 藏蓝色 navy 000080 绿色 green 008000 海蓝色 teal 008080 银色 silver 0c0c0c 蓝色 blue 0000ff 酸橙色 lime 00ff00 浅绿色 aqua 00ffff 绛紫色 maroon 800000 紫色 purple 800080 橄榄绿 olive 808000 灰色 gray 808080 红色 red ff0000 紫红色 fuchsia ff00ff 黄色 yellow ffff00 橙色 orange ffa500 白色 white ffffff 使用 span 更好 的控制文本中局 部区域的文本 文本内容 使用 display 属 性提供区块转换 inline block none 背景图象渐变的 制作 Body Background ccc url bg gif rpeat x 给一个区块加上 一个背景 branding Width 700px Height 200px Background url branding gif no repeat 给标题加上一个 小图标 H1 Padding left 20px Background url bullet gif no repeat left center 如果希望使用百分比而不使用关键字 则 0 50 这样就实现了垂直居中 圆顶角 Headline Content box Width 418px Background ccc url bottom gif no repeat left bottom box h2 Background url top gif no repeat left top 如果不希望碰到边界 加上填充 box h2 Padding 10px 20px 0 20px box p Padding 0 20px 10px 20px 简单的 CSS 阴影 效果 img wrapper background url images shadow gif no repeat bottom right clear right float left position relative margin 10px 0 0 10px img wrapper img display block 这个属性到列表再进行解释 margin 5px 5px 5px 5px position relative 属性名称例子 给链接加上边框A link Color f00 Text decoration none Border bottom 1px dashed 333 Line height 150 在文章段落中加上超 级链接 A link Color f00 Text decoration none Border 1px solid 333 Background ccc Padding 2px Line height 150 用背景图象添加记号A link Color f00 Padding 0 15px 0 0 Background url images arrow gif no repeat right center A visited Color 999 Padding 0 15px 0 0 Background url images checkmark gif no repeat right center 利用派生来影响链接P a link p a visited p a hover p a active Color f00 Ul a Color 000 利用图片作为下划线A link a visited Color 666 Text decoration none Background url images underline1 gif repeat x left bottom A hover a active Background url images underline1 hover gif 突出显示不同类型的 链接 external Background url images externalLink gif no repeat right top Padding right 10px 使用属性选择器来做 链接 a href http background url images externalLink gif no repeat right top padding right 10px a href mailto background url images email png no repeat right top padding right 13px 创建按钮和翻转a Display block Width 6em Padding 02 em Line height 1 4 Background color 94b8e9 Border 1px solid black Color 000 Text decoration none Text align center a hover background color 369 color fff 具有图象的翻转a Display block Width 200px Height 40px Line height 40px Background color 94b8e9 Color 000 Text decoration none Text indent 50px Background 94b8ea url images button gif no repeat left top A hover Background 369 url images button over gif no repeat left top Color fff 以访问链接样式AndyBudd s Blogography Stuff and Nonsense Hicks Design Clagnut HTML Dog Adactio All In The Head Mark Boulton Ian Lloyd ul list style none li margin 5px 0 li a display block width 300px height 30px line height 30px color 000 text decoration none background 94B8E9 url images visited gif no repeat left top text indent 10px li a visited background position right top 纯 css 工具提