javascript中经常用到的一些css属性

最新推荐文章于 2025-08-22 11:32:18 发布

i海边拾贝

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量484

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript css

本文链接：https://blog.youkuaiyun.com/MaoFachang/article/details/73587553

javascript 专栏收录该内容

2 篇文章

订阅专栏

javascript在经常用到的一些css属性，这些属性用到过好多次，每一次用到的时候却又不知道怎么写，还要去翻以前的文件，好尴尬。

现在做一下整理，把一些常用的css属性记录下来。

标签上直接使用css属性使用style，如：

<div style="width:100%;height: 99%">

自定义内部样式使用<style type="text/css"></style>标签，如：

<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>

引用外部样式，使用<link>标签，如：

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

CSS 背景属性（Background）

属性	描述	CSS
background	在一个声明中设置所有的背景属性。	1
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-color	设置元素的背景颜色。	1
background-image	设置元素的背景图像。	1
background-position	设置背景图像的开始位置。	1
background-repeat	设置是否及如何重复背景图像。	1
background-clip	规定背景的绘制区域。	3
background-origin	规定背景图片的定位区域。	3
background-size	规定背景图片的尺寸。	3

如何在一个声明中设置所有背景属性：

body
  { 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
  }

CSS 边框属性（Border 和 Outline）

属性	描述	CSS
border	在一个声明中设置所有的边框属性。	1
border-bottom	在一个声明中设置所有的下边框属性。	1
border-bottom-color	设置下边框的颜色。	2
border-bottom-style	设置下边框的样式。	2
border-bottom-width	设置下边框的宽度。	1
border-color	设置四条边框的颜色。	1
border-left	在一个声明中设置所有的左边框属性。	1
border-left-color	设置左边框的颜色。	2
border-left-style	设置左边框的样式。	2
border-left-width	设置左边框的宽度。	1
border-right	在一个声明中设置所有的右边框属性。	1
border-right-color	设置右边框的颜色。	2
border-right-style	设置右边框的样式。	2
border-right-width	设置右边框的宽度。	1
border-style	设置四条边框的样式。	1
border-top	在一个声明中设置所有的上边框属性。	1
border-top-color	设置上边框的颜色。	2
border-top-style	设置上边框的样式。	2
border-top-width	设置上边框的宽度。	1
border-width	设置四条边框的宽度。	1
outline	在一个声明中设置所有的轮廓属性。	2
outline-color	设置轮廓的颜色。	2
outline-style	设置轮廓的样式。	2
outline-width	设置轮廓的宽度。	2
border-bottom-left-radius	定义边框左下角的形状。	3
border-bottom-right-radius	定义边框右下角的形状。	3
border-image	简写属性，设置所有 border-image-* 属性。	3
border-image-outset	规定边框图像区域超出边框的量。	3
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。	3
border-image-slice	规定图像边框的向内偏移。	3
border-image-source	规定用作边框的图片。	3
border-image-width	规定图片边框的宽度。	3
border-radius	简写属性，设置所有四个 border-*-radius 属性。	3
border-top-left-radius	定义边框左上角的形状。	3
border-top-right-radius	定义边框右下角的形状。	3
box-decoration-break		3
box-shadow	向方框添加一个或多个阴影。	3

设置 4 个边框的样式：

p
  {
  border:5px solid red;
  }

Color 属性

属性	描述	CSS
color-profile	允许使用源的颜色配置文件的默认以外的规范。	3
opacity	规定书签的级别。	3
rendering-intent	允许使用颜色配置文件渲染意图的默认以外的规范。	3

CSS 尺寸属性（Dimension）

属性	描述	CSS
height	设置元素高度。	1
max-height	设置元素的最大高度。	2
max-width	设置元素的最大宽度。	2
min-height	设置元素的最小高度。	2
min-width	设置元素的最小宽度。	2
width	设置元素的宽度。	1

设置段落的高度和宽度：

p
  {
  height:100px;
  width:100px;
  }

可伸缩框属性（Flexible Box）

属性	描述	CSS
box-align	规定如何对齐框的子元素。	3
box-direction	规定框的子元素的显示方向。	3
box-flex	规定框的子元素是否可伸缩。	3
box-flex-group	将可伸缩元素分配到柔性分组。	3
box-lines	规定当超出父元素框的空间时，是否换行显示。	3
box-ordinal-group	规定框的子元素的显示次序。	3
box-orient	规定框的子元素是否应水平或垂直排列。	3
box-pack	规定水平框中的水平位置或者垂直框中的垂直位置。	3

通过使用 box-align and box-pack 属性，居中 div 框的子元素：

div
{
width:350px;
height:100px;
border:1px solid black;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari、Opera 以及 Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

CSS 字体属性（Font）

属性	描述	CSS
font	在一个声明中设置所有字体属性。	1
font-family	规定文本的字体系列。	1
font-size	规定文本的字体尺寸。	1
font-size-adjust	为元素规定 aspect 值。	2
font-stretch	收缩或拉伸当前的字体系列。	2
font-style	规定文本的字体样式。	1
font-variant	规定是否以小型大写字母的字体显示文本。	1
font-weight	规定字体的粗细。	1

CSS 文本属性（Text）

属性	描述	CSS
color	设置文本的颜色。	1
direction	规定文本的方向 / 书写方向。	2
letter-spacing	设置字符间距。	1
line-height	设置行高。	1
text-align	规定文本的水平对齐方式。	1
text-decoration	规定添加到文本的装饰效果。	1
text-indent	规定文本块首行的缩进。	1
text-shadow	规定添加到文本的阴影效果。	2
text-transform	控制文本的大小写。	1
unicode-bidi	设置文本方向。	2
white-space	规定如何处理元素中的空白。	1
word-spacing	设置单词间距。	1
hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	3

为不同元素设置文本颜色：

body
  {
  color:red;
  }
h1
  {
  color:#00ff00;
  }
p
  {
  color:rgb(0,0,255);
  }

更多css属性请访问： css参考手册