CSS样式属性及CSS样式表浅谈

迈不过友情╰ 2024-03-29 16:31 146阅读 0赞

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][https_www.weidianyuedu.com]

【长度单位】

CSS可使用长度单位

单位

单位说明

范例

Point，就像是Word里面的Point一样大小

font-size:10pt

Pixels，依您屏幕分辨率而决定大小

font-size:10px

Pica，6个Pica是一英吋

font-size:10pc

公厘，用过尺...这个设定值完全不会因为其它设定而改变

font-size:10mm

公分，不会因为使用者设定而改变

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\]后再根据坐[标定][Link 2]位，原点为定位后的位置)

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

[Link 1]: https://m.weidianyuedu.com/
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com/
[Link 2]: https://so.csdn.net/so/search?q=%E6%A0%87%E5%AE%9A&spm=1001.2101.3001.7020

CSS样式属性及CSS样式表浅谈

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关打印样式CSS的技巧浅谈

相关 CSS样式的优先级浅谈

相关 CSS样式属性及CSS样式表浅谈

相关关于打印样式CSS浅谈

相关关于CSS样式的优先级浅谈

相关 CSS样式：属性

相关 css样式属性

相关 CSS常见样式及属性

相关浅谈CSS样式

相关 CSS样式浅识