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:外部样式表/内部样式表/内联样式

在html中,引用CSS样式有3中方式:外部样式表,内部样式表,内联样式。 本文代码整理自w3school:http://www.w3school.com.cn...
  • books1958
  • books1958
  • 2014年12月05日 15:15
  • 4444

【图书】CSS重构:样式表性能调优

前言 近一两年对于 CSS 相关的图书寥寥可数,印象中上一次有关的应该就是《CSS 揭秘》,上周发现的这本有兴趣的可以看看。 CSS重构:样式表性能调优 作者: [美] ...
  • wGL3k77y9fR1k61T1aS
  • wGL3k77y9fR1k61T1aS
  • 2017年11月06日 00:00
  • 289

四种CSS样式表的引入方式

代码: CSS样式表
  • linhaiyun_ytdx
  • linhaiyun_ytdx
  • 2016年09月19日 13:23
  • 885

CSS样式表的优先级

什么是css优先级浏览器需要判断哪些css样式与html元素最相关,并选择最相关的用在该元素上。优先级详解4种权值(1最大)1、内联样式...2、ID选择符 #nav{...} ...3、class选...
  • lk7688535
  • lk7688535
  • 2016年08月11日 15:09
  • 178

什么是级联样式表(CSS),介绍级联样式表(CSS)。

一 介绍级联样式表(CSS)是用于描述以标记语言编写的文档的呈现的样式表语言。[1]尽管通常用于设置以HTML和XHTML编写的网页和用户界面的视觉风格,但该语言可以应用于任何XML文档,包括纯XML...
  • dog_eggs
  • dog_eggs
  • 2017年09月13日 19:35
  • 151

使用 CSS(样式表)的 class

class 是类,用来定义 style 属性。 在使用 CSS(样式表)时用 class 可以更方便。 举例: 文件1:C1.CSS .Bar { border-right: 2px outset; ...
  • l12345678
  • l12345678
  • 2007年10月23日 10:13
  • 680

c#之CSS三种样式表

2、CSS的几种设置方式(你可以通过怎样的方式向HTML页面中写入CSS代码??) 内联样式表(在标签内设置元素的样式)内联样式表缺点:如果要将同样的样式风格设置到网页中所有的段落上,就需要对每个标签...
  • kaikai_sk
  • kaikai_sk
  • 2016年02月12日 22:03
  • 1669

qt样式表学习

1.何为Qt样式表
  • fu1201520
  • fu1201520
  • 2014年11月15日 11:50
  • 840

css,级联样式表

1996年12月发布css1 1998年5月发布css2,随后发布了css2.1,css2.1的目标是使其适应html和xml。 直到现在css3还在开发中 《别具光芒css属性、浏览器...
  • andyweike
  • andyweike
  • 2010年12月12日 18:07
  • 6868

用js动态生成css样式表

用js动态生成css代码     有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它...
  • grtreexyz
  • grtreexyz
  • 2015年12月14日 12:51
  • 1479
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS样式表
举报原因:
原因补充:

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