2022年常用CSS样式属性CSS样式表.pdf

《2022年常用CSS样式属性CSS样式表.pdf》由会员分享，可在线阅读，更多相关《2022年常用CSS样式属性CSS样式表.pdf（5页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、常用 CSS 样式属性 |CSS样式表【长度单位】CSS可使用长度单位单位单位说明范例ptPoint ，就像是 Word里面的 Point 一样大小font-size:10ptpxPixels ，依您屏幕分辨率而决定大小font-size:10pxpcPica ，6个 Pica 是一英吋font-size:10pcmm公厘，用过尺 .这个设定值完全不会因为其它设定而改变font-size:10mmcm公分，不会因为使用者设定而改变font-size:10cm%百分比，大部分是指所在位置宽度或者长度百分比font-size:10%【颜色表示】CSS可用颜色表示方式表示方式表示方式说明范例#rrg

2、gbb可以用 Windows色彩选择工具找到color:#feefc7rgb(#,#,#)用数字来表示红色蓝色以及绿色的混合.也可以用 Windows色彩选择工具找color:rgb(135,255,124)rgb(%,%,%)用百分比来代表红色蓝色以及绿色的强度来混合颜色color:rgb(70%,35%,41%)颜色名称用颜色的名称来指定颜色color:brown【背景可用值】CSS可用背景值名称说明可能值范例background背景下面的背景设定值皆适用background:fixedbackground-attachment背景图性是否固定fixed, scrollbackground

3、-attachment:fixedbackground-color背景颜色颜色transparent(透空 )backgroun-color:yellowbackground-image背景图片none( 无背景图 ) url(*)(图片位置 )background-image:urlbackground-position背景图位置水平垂直background-position:135 159精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 1 页，共 5 页 - - - - - - - - - - bac

4、kground-repeat背景是否重复repeat( 重复 ) repeat-x(水平重复 ) repeat-y(垂直重复 ) no-repeat(不重复 )background-repeat:repeat【属性可用值】CSS可用属性值名称说明可能值范例visibility显示或是隐藏inherit(父组件决定 ) hidden( 隐藏 ) visible(显示 ) visibility:hiddenwidth宽度auto( 自动决定 ) 数字width:135height高度auto( 自动决定 ) 数字height:100z-indexZ 轴高度 ( 立体，是否在另一个组件之上)auto

5、( 自动决定 ) 数字z-index:135position定位方式absolute ( 绝对寻址 - 依窗口坐标，原点为父窗口左上角) relative ( 相对定位 - 以一般网页排列后再根据坐标定位，原点为定位后的位置) static ( 静态定位 - 以一般网页排列)position:absolutetop( 对象的 position属性须为 absolute或relative)对象的 Y坐标 (原点根据 postion属性有所不同)数字left(对象的 position属性须为 absolute或relative)对象的 X坐标 (原点根据 postion属性有所不同)数字【文字设定

6、可用值】CSS可用文字设定值名称说明可能值范例font文字设定以下所有皆可使用font:arialfont-family字体字体名称font-family:arialfont-size字体大小百分比或是数字( 单位 )font-size:12px精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 2 页，共 5 页 - - - - - - - - - - font-style字型样式normal( 普通 ) italic(斜体 ) oblique(斜体 )font-style:italicfont-varia

7、nt字型特别样式normal( 普通 ) small-caps(大小英文字母 )font-variant:small-capsfont-weight字型粗细normal( 普通 ) bold( 粗体 ) bolder(超粗体 ) lighter(细体 ) 数字 (400=normal 700=bold )font-weight:bolderletter-spacing字符相距normal( 普通 ) 数字 ( 预设为 0)letter-spacing:5text-align字符对齐left(左边 ) right(右边 ) center(中间 ) justify(左右平分 )text-align

8、:justifytext-decoration字符样式none( 普通 ) underline(加底线 ) no-underline(不加底线 ) blink(闪烁 ) no-blink(不闪烁 ) line-through(加删除线 ) no-line-through(不加删除线) overline(加顶线 ) no-overline(不加顶线 )text-decoration:underline【表格设定】CSS可用表格设定值框线位置： ( 上-top.下-bottom. 左-left.右-right)名称说明可能值范例border表格边框设定以下所有皆可使用border:greenbor

9、der-colorborder-(框线位置 )-color边框颜色任何颜色表示方法border-color:blueborder-styleborder-(框线位置 )-style边框样式none( 无边框 ) dotted( 点线 ) dashed( 虚线 ) solid(实线 ) double( 双线 ) border-style:dotted精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 3 页，共 5 页 - - - - - - - - - - groove( 立体凹线 ) ridge( 立体凸线

10、 ) inset(立体嵌入线 ) outset( 立体隆起线 )border-widthborder-(框线位置 )-width边框宽度数字border-width:5padding边框补白数字padding:5【鼠标设定】CSS可用鼠标光标设定值名称说明可能值范例cursor光标图标auto( 自动决定 ) default(默认值 ) crosshair(十字 ) hand( 手形 ) move(移动时的光标 ) help( 有问号的游标 ) text(文字编辑的光标) wait( 忙碌中的游标 ) w-resize(向左箭头 ) e-resize(向右箭头 ) n-resize(向上箭头

11、) ne-resize向右上箭头 ) nw-resize(向左上箭头 ) s-resize(向下箭头 ) se-resize(向右下箭头 ) sw-resize(向左下箭头 ) cursor:hand【滚动条设定】CSS可用滚动条列设定值名称说明可能值范例scrollbar-base-color滚动条列主色调颜色scrollbar-base-color:#aaaaaascrollbar-arrow-color按钮箭头的颜色颜色scrollbar-arrow-color:#000000scrollbar-face-color移动棒的颜色颜色scrollbar-face-color:#ffee99

12、scrollbar-highlight-color按钮边框内层左边与上面的颜色及滚动条底部轨道网状颜色 ( 与 track同时使用网状会消失)颜色scrollbar-highlight-color: #000000scrollbar-3dli按钮边框外层左边与上面的颜色颜色scrollbar-3dlight-co精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 4 页，共 5 页 - - - - - - - - - - ght-colorlor:#000000scrollbar-darkshadow-color按钮边框外层右边与下面的颜色颜色scrollbar-darkshadow-color:#000000scrollbar-shadow-color按钮边框内层右边与下面的颜色颜色scrollbar-track-color: #ccccccscrollbar-track-color底部轨道颜色颜色scrollbar-track-color: #cccccc精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 5 页，共 5 页 - - - - - - - - - -