当前位置：文档之家 › css属性及属性值

css属性及属性值

  • 格式：pdf
  • 大小：102.69 KB
  • 文档页数：3

css属性及属性值

1、css 背景属性：

background 在⼀个声明中设置所有的背景属性。 1

background-attachment 设置背景图像是否固定或者随着页⾯的其余部分滚动。 1

background-color 设置元素的背景颜⾊。 1

background-position 设置背景图像的开始位置。

background-image 设置元素的背景图像。 1

url('URL') 指向图像的路径。

none 默认值。不显⽰背景图像。

inherit 规定应该从⽗元素继承 background-image 属性的设置。

background-repeat 设置是否及如何重复背景图像。

repeat 默认。背景图像将在垂直⽅向和⽔平⽅向重复。

repeat-x 背景图像将在⽔平⽅向重复。

repeat-y 背景图像将在垂直⽅向重复。

no-repeat 背景图像将仅显⽰⼀次。

inherit 规定应该从⽗元素继承 background-repeat 属性的设置。

2、css 边框属性：

border 在⼀个声明中设置所有的边框属性。

border-width 规定边框的宽度。参阅：border-width 中可能的值。

border-style 规定边框的样式。参阅：border-style 中可能的值。

solid 定义实线。

border-color 规定边框的颜⾊。参阅：border-color 中可能的值。

border-bottom 在⼀个声明中设置所有的下边框属性。

border-bottom-color 设置下边框的颜⾊。

border-bottom-style 设置下边框的样式。

border-bottom-width 设置下边框的宽度。

border-color 设置四条边框的颜⾊。

border-left 在⼀个声明中设置所有的左边框属性。

border-left-color 设置左边框的颜⾊。

border-left-style 设置左边框的样式。

border-left-width 设置左边框的宽度。

border-right 在⼀个声明中设置所有的右边框属性。

border-right-color 设置右边框的颜⾊。

border-right-style 设置右边框的样式。

border-right-width 设置右边框的宽度。

border-top-color 设置上边框的颜⾊。

border-top-style 设置上边框的样式。

border-top-width 设置上边框的宽度。

border-width 设置四条边框的宽度。

outline 在⼀个声明中设置所有的轮廓属性。

outline-color 设置轮廓的颜⾊。

outline-style 设置轮廓的样式。

outline-width 设置轮廓的宽度。

3、css ⽂本属性：

color 设置⽂本的颜⾊。 1

line-height 设置⾏⾼。 1

text-align 规定⽂本的⽔平对齐⽅式。 1

word-spacing 设置单词间距。 1

direction 规定⽂本的⽅向 / 书写⽅向。 2

letter-spacing 设置字符间距。 1 text-decoration 规定添加到⽂本的装饰效果。 1

text-indent 规定⽂本块⾸⾏的缩进。 1

text-shadow 规定添加到⽂本的阴影效果。 2

text-transform 控制⽂本的⼤⼩写。 1

unicode-bidi 设置⽂本⽅向。 2

white-space 规定如何处理元素中的空⽩。 1

4、css 字体属性：

font 在⼀个声明中设置所有字体属性。 1

font-size 规定⽂本的字体尺⼨。 1

font-weight 规定字体的粗细。 1

font-style 规定⽂本的字体样式。 1

font-family 规定⽂本的字体系列。 1

font-size-adjust 为元素规定 aspect 值。 2

font-stretch 收缩或拉伸当前的字体系列。 2

font-variant 规定是否以⼩型⼤写字母的字体显⽰⽂本。 1

5、css 外边距属性：

margin 在⼀个声明中设置所有外边距属性。 1

margin-bottom 设置元素的下外边距。 1

margin-left 设置元素的左外边距。 1

margin-right 设置元素的右外边距。 1

margin-top 设置元素的上外边距。 1

6、css 内边距属性：

padding 在⼀个声明中设置所有内边距属性。 1

padding-bottom 设置元素的下内边距。 1

padding-left 设置元素的左内边距。 1

padding-right 设置元素的右内边距。 1

padding-top 设置元素的上内边距。 1

7、css 尺⼨属性：

height 设置元素⾼度。 1

width 设置元素的宽度。 1

max-height 设置元素的最⼤⾼度。 2

max-width 设置元素的最⼤宽度。 2

min-height 设置元素的最⼩⾼度。 2

min-width 设置元素的最⼩宽度。 2

8、css 定位属性：

bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。 2

clear 规定元素的哪⼀侧不允许其他浮动元素。 1

left 在左侧不允许浮动元素。

right 在右侧不允许浮动元素。

both 在左右两侧均不允许浮动元素。

none 默认值。允许浮动元素出现在两侧。

display 规定元素应该⽣成的框的类型。 1

none 此元素不会被显⽰。

block 此元素将显⽰为块级元素，此元素前后会带有换⾏符。

inline 默认。此元素会被显⽰为内联元素，元素前后没有换⾏符。

inline-block ⾏内块元素。

list-item 此元素会作为列表显⽰。

run-in 此元素会根据上下⽂作为块级元素或内联元素显⽰。

compact CSS 中有值 compact，不过由于缺乏⼴泛⽀持，已经从 CSS2.1 中删除。

marker CSS 中有值 marker，不过由于缺乏⼴泛⽀持，已经从 CSS2.1 中删除。

table 此元素会作为块级表格来显⽰（类似

inline-table 此元素会作为内联表格来显⽰（类似

table-row-group 此元素会作为⼀个或多个⾏的分组来显⽰（类似 ）。

table-header-group 此元素会作为⼀个或多个⾏的分组来显⽰（类似 ）。

table-footer-group 此元素会作为⼀个或多个⾏的分组来显⽰（类似 ）。

table-row 此元素会作为⼀个表格⾏显⽰（类似 ）。

table-column-group 此元素会作为⼀个或多个列的分组来显⽰（类似 ）。

table-column 此元素会作为⼀个单元格列显⽰（类似 ）

table-cell 此元素会作为⼀个表格单元格显⽰（类似 和 ）

table-caption 此元素会作为⼀个表格标题显⽰（类似 ）

float 规定框是否应该浮动。 1

left 元素向左浮动。

right 元素向右浮动。

none 默认值。元素不浮动，并会显⽰在其在⽂本中出现的位置。

position 规定元素的定位类型。 2

absolute ⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗元素进⾏定位。元素的位置通过 "left", "top", "right" 以及 "bottom"

属性进⾏规定。fixed ⽣成绝对定位的元素，相对于浏览器窗⼝进⾏定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进⾏规定。

relative ⽣成相对定位的元素，相对于其正常位置进⾏定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

clip 剪裁绝对定位元素。 2

cursor 规定要显⽰的光标的类型（形状）。 2

left 设置定位元素左外边距边界与其包含块左边界之间的偏移。 2

overflow 规定当内容溢出元素框时发⽣的事情。 2

right 设置定位元素右外边距边界与其包含块右边界之间的偏移。 2

top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 2

vertical-align 设置元素的垂直对齐⽅式。 1

visibility 规定元素是否可见。 2

z-index 设置元素的堆叠顺序。 2

9、css 伪类：

:active 向被激活的元素添加样式。 1

:focus 向拥有键盘输⼊焦点的元素添加样式。 2

:hover 当⿏标悬浮在元素上⽅时，向元素添加样式。 1

:link 向未被访问的链接添加样式。 1

:visited 向已被访问的链接添加样式。 1

:first-child 向元素的第⼀个⼦元素添加样式。 2

:lang 向带有指定 lang 属性的元素添加样式。 2

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 当有⿏标悬停在链接上 */

a:active {color: #0000FF} /* 被选择的链接 */

合集下载

css弹性盒子属性及其用法

css弹性盒子属性及其用法

css弹性盒⼦属性及其⽤法

弹性盒⼦模型

display：flex；先将元素变成弹性容器，那么这个元素中的⼦元素⾃然⽽然就变成了弹性⼦元素。（容器是⼀个块状元素）

display：inline-flex；容器是⼀个⾏内flex元素

弹性盒⼦属性：

flex-direction:弹性⼦元素的排列⽅式（主轴排列⽅式）

flex-warp:设置弹性盒⼦的⼦元素是否换⾏

flex-flow:flex-direction 和 flex-wrap 的简写

align-item:设置弹性盒⼦在纵轴对其⽅式

align-content:修改flex-wrap属性⾏为，类似align-items.但是不是设置元素对其，⽽是设置⾏对其（⾏与⾏的对其⽅式）

justify-content：设置弹性盒⼦元素在主轴对其⽅式

flex-direction:弹性容器中⼦元素的排列⽅式(主轴排列⽅式)【⼦元素在主轴上的排列⽅式】

属性值：

row:默认在⼀⾏排列

row-reverse:反转横向排列（右对齐，从后往前排，最后⼀项排在最前⾯。）

column：纵向排列。

column-reverse：反转纵向排列，从下往上排，最后⼀项排在最上⾯

flex-wrap:设置弹性盒⼦的⼦元素超出⽗容器时是否换⾏

Tip:横轴的⽅向决定了新⾏堆叠的⽅向。

属性值：

nowrap: 默认值。规定元素不拆⾏或不拆列。

wrap:规定元素在必要的时候拆⾏或拆列。

wrap-reverse:规定元素在必要的时候拆⾏或拆列，但是以相反的顺序。

align-item:设置弹性盒⼦元素在侧轴（纵轴）⽅向上的对齐⽅式

相关属性： flex-start：弹性盒⼦元素的侧轴（纵轴）起始位置的边界紧靠住该⾏的侧轴起始边界。 flex-end：弹性盒⼦元素的侧轴（纵轴）起始位置的边界紧靠住该⾏的侧轴结束边界。 center：弹性盒⼦元素在该⾏的侧轴（纵轴）上居中放置。（如果该⾏的尺⼨⼩于弹性盒⼦元素的尺⼨，则会向两个⽅向溢出相同的长度）。 baseline：如弹性盒⼦元素的⾏内轴与侧轴为同⼀条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

CSS3中的Transition属性详解

CSS3中的Transition属性详解

济宁网站制作：

济宁辉腾计算机信息有限公司： CSS3中的Transition属性详解

W3C标准中对CSS3的transition这是样描述的:"CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。"

下面我们从最简单的语法和属性值开始一步一步来学习transition的具体使用：

语法：

1

2

3 transition ： [<'transition-property'> || <'transition-duration'> ||

<'transition-timing-function'> || <'transition-delay'> [,

[<'transition-property'> ||

<'transition-duration'> || <'transition-timing-function'> ||

<'transition-delay'>]]*

transition主要包含四个属性值：执行变换的属性：transition-property；变换延续的时间：transition- duration；在延续时间段，变换的速率变化transition-timing-function；变换延迟时间transition- delay。下面分别来看这四个属性值：

一、transition-property：

语法：.transition-property ： none | all | [ ] [ ',' ]*

transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属 性改 变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）；当其值为none时，transition马上停止执行，当指定为all 时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。其对应的类型如下：

CSS 设置布局属性

CSS 设置布局属性

CSS 设置布局属性

在进行页面设计时，要保证页面元素出现在其适当的位置，常常需要使用div完成。然而div布局需要与CSS属性一起使用才可以完成布局设置。CSS中的边距和间隙属性就提供了这样一种功能，能够为页面元素定义边框，并修饰内容距离，从而优化文本内容的显示效果。

1、区块概念

CSS中，所有的页面元素都包含在一个矩形框内，称为元素框。元素框描述了元素及其属性在页面布局中所占的空间大小，因此元素框可以影响其他元素的位置及大小。比如，页面中第一个元素框为10px，那么下一个元素框就处于离顶部10px距离的位置。如果第一个元素框增加为20px，则下一个元素框就要再下移10px。而整个页面就是由这些个大大小小，但不会重叠的元素框形成的。

在设计页面布局时，网页设计者要充分考虑所有页面元素的边框与元素内容框（实际被用来显示元素内容区域）之间的间隙的布置，才能使页面紧凑，而又不失条理。要完全理解边距与间隙，设计者就必须清楚地明确各边距及间隙的位置，而边线、边框、边距及间隙共同构成了一个区块，两个相邻元素的区块示意图如图4-4所示。

bottom bottom

rightcenterrightcenterbottom元素1的内容上外边线下外边线左外边线右外边线上边距下边距左边距右边距上边框下边框左边框右边框上间隙下间隙左间隙右间隙右内边线左内边线上内边线下内边线宽度高度bottom

rightrightcenterbottom元素2的内容上外边线下外边线左外边线右外边线上边距下边距左边距右边距上边框下边框左边框右边框上间隙下间隙左间隙右间隙右内边线左内边线上内边线下内边线宽度高度图4-4 区块示意图

从示意图中可以清楚地看到边框与间隙所控制的区域。其中元素框就是那个最深阴影的矩形框。

2、margin属性

CSS边距属性margin可以定义元素周围的空间范围。该属性可以让内容重叠，也可以使用其包含的四个子属性分别对上，下，左，右进行样式改变，并且可以快速的设置所有边距。

CSS3属性中有关于制作动画的三个属性

CSS3属性中有关于制作动画的三个属性

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation；我们一起学习完了Transform和Transition，让我们对元素实现了一些基本的动画效果，这些我想足以让大家激动了一阵子，今天我们趁着这个热劲继续第三个动画属性Animation的学习，单从Animation字面上的意思，我们就知道是“动画”的意思。但CSS3中的Animation与HTML5中的Canvas绘制动画又不同，Animation只应用在页面上已存在的DOM元素上，而且他跟Flash和JavaScript以及jQuery制作出来的动画效果又不一样，因为我们使用CSS3的Animation制作动画我们可以省去复杂的js,jquery代码（像我这种不懂js的人来说是件很高兴的事了），只是有一点不足之处，我们运用Animation能创建自己想要的一些动画效果，但是有点粗糙，如果想要制作比较好的动画，我见意大家还是使用flash或js等。虽然说Animation制作出来的动画简单粗糙，但我想还是不能减少我们大家对其学习的热情。

在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们在使用transition 制作一个简单的transition效果时，我们包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作（换到flash中说，就是第一帧我要执行什么动作，第二帧我要执行什么动作），这样我们用Transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。下面我们一起先来看看Keyframes: