JavaScript核心之CSS概述(各种常用属性)

目录

1 Element中style属性常用的样式属性

1.1 borderStyle属性参数值

1.2 fontWeight属性的参数值

1.3 fontSize属性

1.4 style元素对象的滤镜属性filter

1.4.1 alpha属性值

2 HTML 《link》 标签的 rel 属性


1 Element中style属性常用的样式属性

对应样式标签属性就是把样式属性中大写的用连字符(-)+小写字母代替就是标签属性了

例如:backgroundColor的样式标签属性:background-color

属性 说明
background 设置或检索对象最多5个独立的背景属性
backgroundColor 设置或检索对象的背景颜色
backgroundImage 设置或检索对象的背景图像
backgroundPosition 设置或检索对象的背景位置
backgroundPositionX 设置或检索backgroundPosition属性的X坐标
backgroundPositionY 设置或检索backgroundPosition属性的Y坐标
behavior 设置或检索DHTML行为的位置
border 设置或检索对象周围边框的绘制属性
borderBottom 设置或检索对象下边框的属性
borderBottomColor 设置或检索对象下边框的颜色
borderBottomStyle 设置或检索对象下边框的样式
borderBottomWidth 设置或检索对象下边框的宽度
borderColor 设置或检索对象的边框颜色
borderLeft 设置或检索对象左边框的属性
borderLeftColor 设置或检索对象左边框的颜色
borderLeftStyle 设置或检索对象左边框的样式
borderLeftWidth 设置或检索对象左边框的宽度
borderRight 设置或检索对象右边框的属性
borderRightColor 设置或检索对象右边框的颜色
borderRightStyle 设置或检索对象右边框的样式
borderRightWidth 设置或检索对象右边框的宽度
borderStyle 设置或检索对象上、下、左、右边框的样式
borderTop 设置或检索对象上边框的属性
borderTopColor 设置或检索对象上边框的颜色
borderTopStyle 设置或检索对象上边框的样式
borderTopWidth 设置或检索对象上边框的宽度
borderWidth 设置或检索对象上、下、左、右边框的宽度
bottom 设置或检索对象相对于文档层次中下一个定位对象的底部的位置
color 设置或检索对象文本的颜色
cursor 设置或检索当鼠标指针指向对象时所使用的形状
direction 设置或检索对象的阅读顺序
display 设置或检索对象是否需要渲染
font 设置或检索对象最多6个独立的字体属性
fontFamily 设置或检索对象文本所使用的字体名称
fontSize 设置或检索对象文本所使用的字体大小
fontStyle 设置或检索对象的字体样式,如斜体,常规或倾斜体
fontVariant 设置或检索对象文本是否以小型大写字母显示
fontWeight 设置或检索对象的字体宽度
height 设置或检索对象的高度
left 设置或检索对象相对于文档层次中下一个定位对象的左边界的位置
letterSpacing 设置或检索对象的字符间附加空间的总和
lineHeight 设置或检索对象两行间的距离
listStyle 设置或检索对象最多3个独立的lineStyle属性
listStyleImage 检索要为对象应用的列表项目符号的图像
listStylePosition 检索相对于对象内容如何绘制项目符号( 属性设置在何处放置列表项标记)
listStyleType 检索对象预定义的项目符号类型
margin 设置或检索对象的上右下左边距
marginBottom 设置或检索对象的下边距宽度
marginLeft 设置或检索对象的左边距宽度
marginRight 设置或检索对象的右边距宽度
marginTop 设置或检索对象的上边距宽度
padding 设置或检索要在对象和其边距(若存在边框)之间插入的全部空间
paddingBottom 设置或检索要在对象下边框和内容之间插入的空间总量
paddingLeft 设置或检索要在对象左边框和内容之间插入的空间总量
paddingRight 设置或检索要在对象右边框和内容之间插入的空间总量
paddingTop 设置或检索要在对象上边框和内容之间插入的空间总量
right 设置或检索相对于文档层次中下一个定位对象的右边界的位置
scrollbar3dLightColor 设置或检索滚动条上滚动按钮和滚动滑块的左上颜色
scrollbarArrowColor 设置或检索滚动箭头标识的颜色
scrollbarBaseColor 设置或检索滚动条的主要颜色,其中包含滚动按钮和滚动滑块
scrollbarDarkShadowColor 设置或检索滚动条上滑槽的颜色
scrollbarFaceColor 设置或检索滚动条和滚动条的滚动箭头的颜色
scrollbarHighlightColor 设置或检索滚动框和滚动条滚动箭头的左上边缘颜色
scrollbarShadowColor 设置或检索滚动框和滚动条滚动箭头的右下边缘颜色
scrollbarTrackColor 设置或检索滚动条上轨迹元素的颜色
styleFloat 设置或检索文本要绕排到对象的哪一侧
tableLayout 检索表明表格布局是否固定的字符串
textAlign 设置或检索对象中的文本是左对齐、右对齐、居中对齐还是两端对齐
textDecoration 设置或检索对象中的文本是否有闪烁、删除线、上划线或下划线样式
top 设置或检索对象相对于文档层次中下一个定位对象的上边界的位置
verticalAlign 设置或检索对象的垂直排列
visibility 设置或检索对象的内容是否显示
whiteSpace 设置或检索对象中是否自动换行
width 设置或检索对象的宽度
wordBreak 设置或检索单词内的换行行为,特别是对象中出现多语言的情况
wordSpacing 设置或检索对象中单词间的附加空间总量
wordWrap 设置或检索当内容超过其容器边界是否是断词
zIndex 设置或检索定位对象的堆叠次序
zoom 设置或检索对象的放大比例

1.1 borderStyle属性参数值

参数值 说明 参数值 说明
none 无边框 double 边框是双实线
hidden 隐藏边框(IE不支持) groove 边框带有立体感的沟槽
dotted 边框由点组成 ridge 边框成脊形
dashed 边框由短线组成 inset 边框内嵌一个立体边框
solid 边框是实线 outset 边框外嵌一个立体边框

1.2 fontWeight属性的参数值

参数值 说明
normal 默认值,正常的字体,相当于400.声明该值将取消之前任何设置
bold 粗体。相当于700,也相当于b对象的作用
bolder 比normal略粗
lighter 比normal略细
100 字体至少像200那样细
200 字体至少像100那样粗,像300那样细
300 字体至少像200那样粗,像400那样细
400 相当于normal
500 字体至少像400那样粗,像600那样细
600 字体至少像500那样粗,像700那样细
700 相当于bold
800 字体至少像700那样粗,像900那样细
900 字体至少像800那样粗

1.3 fontSize属性

参数值 说明
xx-small 绝对字体尺寸。根据对象字体进行调整。最小
x-small 绝对字体尺寸。根据对象字体进行调整。较小
small 绝对字体尺寸。根据对象字体进行调整。小
medium 默认值。绝对字体尺寸。根据对象字体进行调整。正常
large 绝对字体尺寸。根据对象字体进行调整。大
x-large 绝对字体尺寸。根据对象字体进行调整。较大
xx-large 绝对字体尺寸。根据对象字体进行调整。最大
larger 相对字体尺寸。相当于父对象中字体尺寸进行相对增大。使用成比例的em单位计算
smaller 相对字体尺寸。相当于父对象中字体尺寸进行相对减小。使用成比例的em单位计算
length 百分数|由浮点数和单位标识符组成的长度值,不可为负值。其百分比取值是基于父对象中字体的尺寸

1.4 style元素对象的滤镜属性filter

属性 说明
alpha 调整对象内容的不透明度
blendTrans 以渐隐原始内容的形式显示对象的新内容
chroma 将对象内容的指定颜色显示为透明
dropShadow 创建对象内容的实体阴影,偏移量位于指定方向。这将是的内容看起来是浮动的,因此会产生阴影
flipH 以沿水平方向翻转的形式显示对象内容
flipV 以沿垂直方向翻转的形式显示对象内容
glow 在对象边缘外侧添加光晕,以便使其看起来像发光的样子
gray 以灰度显示对象的内容
invert 反转对象内容的色调、饱和度和亮度
light 在对象的内容上创建灯光效果
maskFilter 将对象内容的透明像素显示为彩色遮罩,将非透明像素显示为透明
motionBlur 以运动模糊的效果显示对象内容
revealTrans 使用24种预先定义的切换效果显现对象的新内容
shadow 创建对象内容的实体阴影,偏移量位于指定方向,这将创建阴影效果
wave 在对象的内容上执行垂直方向的正弦波扭曲
xray 更改对象内容的颜色深度将其以黑白显示

1.4.1 alpha属性值

属性 说明
opacity 代表透明水准。默认的范围是0~100,0:完全透明,100:完全不透明
finishOpacity 是一个可选参数。设置渐变的透明效果时,就用该参数来指定结束时的透明度,范围是0~100
style 参数指定透明区域的形状特征,0:统一形状,1:线型,2:放射状,3:长方形
startX 渐变透明效果的开始X坐标
startY 渐变透明效果的开始Y坐标
finishX 渐变透明效果的结束X坐标
finishY 渐变透明效果的结束Y坐标

2 HTML 《link》 标签的 rel 属性

<link rel="stylesheet" type="text/css" href="theme.css" />
描述
alternate 文档的替代版本(比如打印页、翻译或镜像)。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的上一个文档。
contents 文档的目录。
index 文档的索引。
glossary 在文档中使用的词汇的术语表(解释)。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
subsection 文档的小节。
appendix 文档的附录。
help 帮助文档。
bookmark 相关文档。

猜你喜欢

转载自blog.csdn.net/u012060033/article/details/89810987