CSS样式表

转载 2015年11月18日 10:30:59

常用CSS样式属性|CSS样式表

【长度单位】
CSS可使用长度单位
单位
单位说明
范例
pt
Point,就像是Word里面的Point一样大小
font-size:10pt
px
Pixels,依您屏幕分辨率而决定大小
font-size:10px
pc
Pica,6个Pica是一英吋
font-size:10pc
mm
公厘,用过尺...这个设定值完全不会因为其它设定而改变
font-size:10mm
cm
公分,不会因为使用者设定而改变
font-size:10cm
%
百分比,大部分是指所在位置宽度或者长度百分比
font-size:10%

【颜色表示】
CSS可用颜色表示方式
表示方式
表示方式说明
范例
#rrggbb
可以用Windows色彩选择工具找到
color:#feefc7
rgb(#,#,#)
用数字来表示红色蓝色以及绿色的混合...也可以用Windows色彩选择工具找
color:rgb(135,255,124)
rgb(%,%,%)
用百分比来代表红色蓝色以及绿色的强度来混合颜色
color:rgb(70%,35%,41%)
颜色名称
用颜色的名称来指定颜色
color:brown

【背景可用值】
CSS可用背景值
名称
说明
可能值
范例
background
背景
下面的背景设定值皆适用
background:fixed
background-attachment
背景图性是否固定
fixed, scroll
background-attachment:fixed
background-color
背景颜色
颜色
transparent(透空)
backgroun-color:yellow
background-image
背景图片
none(无背景图)
url(****)(图片位置)
background-image:url(test.jpg)
background-position
背景图位置
水平 垂直
background-position:135 159
background-repeat
背景是否重复
repeat(重复)
repeat-x(水平重复)
repeat-y(垂直重复)
no-repeat(不重复)
background-repeat:repeat

【属性可用值】
CSS可用属性值
名称
说明
可能值
范例
visibility
显示或是隐藏
inherit(父组件决定)
hidden(隐藏)
visible(显示)
 
visibility:hidden
width
宽度
auto(自动决定)
数字
width:135
height
高度
auto(自动决定)
数字
height:100
z-index
Z轴高度(立体,是否在另一个组件之上)
auto(自动决定)
数字
z-index:135
position
定位方式
absolute
(绝对寻址-依窗口坐标,原点为父窗口左上角)
relative
(相对定位-以一般网页排列[right.center.left]后再根据坐标定位,原点为定位后的位置)
static
(静态定位-以一般网页排列)
position:absolute
top(对象的position属性须为absolute或relative)
对象的Y坐标(原点根据postion属性有所不同)
数字
 
left(对象的position属性须为absolute或relative)
对象的X坐标(原点根据postion属性有所不同)
数字
 

【文字设定可用值】
CSS可用文字设定值
名称
说明
可能值
范例
font
文字设定
以下所有皆可使用
 
font:arial
font-family
字体
字体名称
font-family:arial
font-size
字体大小
百分比或是数字(单位)
font-size:12px
font-style
字型样式
normal(普通)
italic(斜体)
oblique(斜体)
font-style:italic
font-variant
字型特别样式
normal(普通)
small-caps(大小英文字母)
font-variant:small-caps
font-weight
字型粗细
normal(普通)
bold(粗体)
bolder(超粗体)
lighter(细体)
数字(400=normal 700=bold )
font-weight:bolder
letter-spacing
字符相距
normal(普通)
数字(预设为0)
letter-spacing:5
text-align
字符对齐
left(左边)
right(右边)
center(中间)
justify(左右平分)
text-align:justify
text-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:green
border-color
border-(框线位置)-color
边框颜色
任何颜色表示方法
border-color:blue
border-style
border-(框线位置)-style
边框样式
none(无边框)
dotted(点线)
dashed(虚线)
solid(实线)
double(双线)
groove(立体凹线)
ridge(立体凸线)
inset(立体嵌入线)
outset(立体隆起线)
border-style:dotted
border-width
border-(框线位置)-width
边框宽度
数字
border-width:5
padding
边框补白
数字
padding:5

【鼠标设定】
CSS可用鼠标光标设定值
名称
说明
可能值
范例
cursor
光标图标
auto(自动决定)
default(默认值)
crosshair(十字)
hand(手形)
move(移动时的光标)
help(有问号的游标)
text(文字编辑的光标)
wait(忙碌中的游标)
w-resize(向左箭头)
e-resize(向右箭头)
n-resize(向上箭头)
ne-resize{向右上箭头)
nw-resize(向左上箭头)
s-resize(向下箭头)
se-resize(向右下箭头)
sw-resize(向左下箭头)  
cursor:hand

【滚动条设定】
CSS可用滚动条列设定值
名称
说明
可能值
范例
scrollbar-base-color
滚动条列主色调
颜色
scrollbar-base-color:#aaaaaa
scrollbar-arrow-color
按钮箭头的颜色
颜色
 
scrollbar-arrow-color:#000000
scrollbar-face-color
移动棒的颜色
颜色
scrollbar-face-color:#ffee99
scrollbar-highlight-color
按钮边框内层左边与上面的颜色及滚动条底部轨道网状颜色(与track同时使用网状会消失)
颜色
scrollbar-highlight-color: #000000
scrollbar-3dlight-color
按钮边框外层左边与上面的颜色
颜色
scrollbar-3dlight-color:#000000
scrollbar-darkshadow-color
按钮边框外层右边与下面的颜色
颜色
scrollbar-darkshadow-color:#000000
scrollbar-shadow-color
按钮边框内层右边与下面的颜色
颜色
scrollbar-track-color: #cccccc
scrollbar-track-color
底部轨道颜色
颜色
scrollbar-track-color: #cccccc

相关文章推荐

简单的css样式表范例(一)

css是指层叠样式表,用来进行网页风格设计。采用css技术能够更加精确、有效的控制页面的布局、字体、颜色、背景和其他效果实现。 下面就做一个简单的把外部css文件嵌套在html中的范例: 首先建立...

WEB入门三 CSS样式表基础

学习内容Ø        CSS的基本语法Ø        CSS选择器Ø        常见的CSS样式Ø        网页中3种使用CSS的方式能力目标Ø        理解CSS的作用Ø   ...

css样式表和选择器的优先级以及position元素属性值的区别

css样式表和选择器的优先级以及position元素属性值的区别

5步让你的CSS样式表成功减肥

5步让你的CSS样式表成功减肥 上一篇:提升你设计水平的CSS3新技术 « 下一篇:一起感受HTML5和CSS3的能量 » 你有没有觉得你的CSS样式表文件过于臃肿?其实如果...

用JFinal框架自带的main方法运行正常的情况下,用tomcat发布项目出现css样式表引用错误和资源找不到问题。

用jfinal框架写了个demo,引用了
  • ni_cu
  • ni_cu
  • 2014年09月21日 16:42
  • 2683

打印机打印CSS样式表的注意事项

也许我们已经发现,在使用打印机进行打印使用Div+CSS的网页时会出现很多空白,和在显示器上浏览网页时大不相同。 这中现象是CSS样式表导致的,CSS样式表针对不同的设备可以定义不同的样式表。比...

记住!!JavaScript无法获取css样式表的内容

记住!!JavaScript无法获取css样式表的内容
  • Shsgear
  • Shsgear
  • 2016年10月26日 22:10
  • 244

在css样式表里面引用background-image没有出现图片原因与解决方法

今天写网页的时候遇到一个问题,在样式表里面引用background-image,没有出现效果。然后查了一下是因为相对路径和绝对路径的问题,还有一个是对css样式表的引入的误解,这类文章别的博客已经有的...

Css样式表 (常用基础)

1、CSS(Cascading Stylesheets,层叠样式表  级联样式单)  是一组格式设置规则,用于控制网页内容的外观。通过使用CSS样式设置页面的格式,可以把页面的内容与表现形式分离开。...

四种CSS样式表的引入方式

代码: CSS样式表
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS样式表
举报原因:
原因补充:

(最多只允许输入30个字)