CSS属性速查表

下表中"CSS" 列指示该属性是在哪个CSS 版本（CSS1、CSS2 或CSS3）中定义的。

1. CSS3 动画属性（Animation）

属性描述CSS @keyframes规定动画。 3 animation所有动画属性的简写属性，除了

3

animation-play-state 属性。

animation-name规定@keyframes 动画的名称。 3 animation-duration规定动画完成一个周期所花费的秒或毫秒。 3 animation-timing-function规定动画的速度曲线。 3 animation-delay规定动画何时开始。 3 animation-iteration-count规定动画被播放的次数。 3 animation-direction规定动画是否在下一周期逆向地播放。 3 animation-play-state规定动画是否正在运行或暂停。 3 animation-fill-mode规定对象动画时间之外的状态。 3 2. CSS 背景属性（Background）

属性描述CSS background在一个声明中设置所有的背景属性。 1 background-attachment设置背景图像是否固定或者随着页面的其余部分滚

1

动。

3. 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)、铺满

3

(rounded)或拉伸(stretched)。

border-image-slice规定图像边框的向内偏移。 3 border-image-source规定用作边框的图片。 3 border-image-width规定图片边框的宽度。 3 border-radius简写属性，设置所有四个border-*-radius 属

3

性。

4. Box 属性

5. Color 属性

6. Content for Paged Media 属性

bookmark-level 规定书签的级别。 3 bookmark-target 规定书签链接的目标。 3 float-offset 将元素放在float 属性通常放置的位置的相反方向。 3 hyphenate-after 规定连字单词中连字符之后的最小字符数。 3 hyphenate-before 规定连字单词中连字符之前的最小字符数。 3 hyphenate-character 规定当发生断字时显示的字符串。 3 hyphenate-lines 指示元素中连续断字连线的最大数。 3 hyphenate-resource 规定帮助浏览器确定断字点的外部资源（逗号分隔的列

3

表）。

hyphens 设置如何对单词进行拆分，以改善段落的布局。 3 image-resolution 规定图像的正确分辨率。 3 marks 向文档添加裁切标记或十字标记。 3 7. CSS 尺寸属性（Dimension）

8. 可伸缩框属性（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 9. 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 10. 内容生成（Generated Content）

属性描述

content与:before 以及:after 伪元素配合使用，来插入生成

2

内容。

counter-increment递增或递减一个或多个计数器。 2 counter-reset创建或重置一个或多个计数器。 2 quotes设置嵌套引用的引号类型。 2

3 crop 允许被替换元素仅仅是对象的矩形区域，而不是整个对

象。

move-to 从流中删除元素，然后在文档中后面的点上重新插入。 3 page-policy 确定元素基于页面的occurrence 应用于计数器还是

3

字符串值。

11. Grid 属性

12. Hyperlink 属性

13. CSS 列表属性（List）

14. CSS 外边距属性（Margin）

15. Marquee 属性

16. 多列属性（Multi-column）

column-count规定元素应该被分隔的列数。 3 column-fill规定如何填充列。 3 column-gap规定列之间的间隔。 3 column-rule设置所有column-rule-* 属性的简写属性。 3 column-rule-color规定列之间规则的颜色。 3 column-rule-style规定列之间规则的样式。 3 column-rule-width规定列之间规则的宽度。 3 column-span规定元素应该横跨的列数。 3 column-width规定列的宽度。 3

3 columns规定设置column-width 和column-count 的简写

属性。

17. CSS 内边距属性（Padding）

18. Paged Media 属性

元素进行缩放。

19. CSS 定位属性（Positioning）

属性描述CSS bottom设置定位元素下外边距边界与其包含块下边界之间的偏

2

移。

clear规定元素的哪一侧不允许其他浮动元素。 1 clip剪裁绝对定位元素。 2 cursor规定要显示的光标的类型（形状）。 2 display规定元素应该生成的框的类型。 1 float规定框是否应该浮动。 1

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

移。

overflow规定当内容溢出元素框时发生的事情。 2 position规定元素的定位类型。 2

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

移。

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

偏移。

vertical-align设置元素的垂直对齐方式。 1 visibility规定元素是否可见。 2

20. CSS 打印属性（Print）

21. CSS 表格属性（Table）

22. CSS 文本属性（Text）

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

3 text-justify规定当text-align 设置为"justify" 时所使用的对齐

方法。

text-outline规定文本的轮廓。 3 text-overflow规定当文本溢出包含元素时发生的事情。 3 text-shadow向文本添加阴影。 3 text-wrap规定文本的换行规则。 3 word-break规定非中日韩文本的换行规则。 3 word-wrap允许对长的不可分割的单词进行分割并换行到下一行。 3

23. 2D/3D 转换属性（Transform）

24. 过渡属性（Transition）

25. 用户界面属性（User-interface）

CSS3关键帧动画

CSS3关键帧动画 本文转载自创美优品，转载就保留此信息。我决定探索该地区的CSS3关键帧动画。的想法很简单-创造一种虚拟明信片。我住在巴黎，所以很明显我给你我的问候，从巴黎:)

下载源文件 （。psd文件） 明信片从巴黎的。zip 1.9MB CSS3的动画支持：Chrome浏览器2 +，Safari 4的+，火狐5 +，iOS的Safari浏览器3.2和 Android 2.1系统+（源碎杂志）。 我们将3个要素：云中的动画（有三个层次的云），旋转法尔灯和艾菲尔铁塔闪闪发光。 的HTML结构其实很简单：

我们将使用下面的图片（我将讨论一点点波光粼粼的效果），让我们先来完成的CSS样式表：

动画云

HTML+CSS标签属性大全

HTML CSS标签属性大全 a卷标, 属性名称, 简介 批注 1、跑马灯 …普通卷动 …滑动 …预设卷动 …来回卷动 …向下卷动 …向上卷动 向右卷动 向左卷动 …卷动次数 …设定宽度 …设定高度 …设定背景颜色 …设定卷动距离 …设定卷动时间 2、字体效果

…

标题字(最大)

…

标题字(最小) …粗体字 …粗体字(强调) …斜体字 …斜体字(强调) …斜体字(表示定义) …底线 …底线(表示插入文字) …横线 …删除线 …删除线(表示删除) …键盘文字 … 打字体 …固定宽度字体(在文件中空白、换行、定位功能有效) …</plaintext>固定宽度字体(不执行标记符号) <listing>…</listing> 固定宽度小字体 <font color=00ff00>…</font>字体颜色 <font size=1>…</font>最小字体 <font style =font-size:100 px>…</font>无限增大 3、区断标记 <hr>水平线 <hr size=9>水平线(设定大小) <hr width=80%>水平线(设定宽度) <hr color=ff0000>水平线(设定颜色) <br>(换行) <nobr>…</nobr>水域(不换行)</p><h2>HTML5+CSS3从入门到精通自测练习</h2><p>《HTML5+CSS3从入门到精通》自测练习（修 正版） 一、单选题(共44题，每题1分，共44分) 1.支持input类型的输入框的消息提示的属性是[] A.detail B.placeholder C.pattern D.required 标准答案：B 试题分析：P101 2.（）方法用于绘制圆形，一般其中的第几个参数决定圆形的半径[] A.1 B.2 C.3 D.4 标准答案：C 试题分析：P114 3.下列哪项不是HTML5的新特性[] A.兼容性 B.合理性 C.安全性 D.有插件 标准答案：D 试题分析：p1-2 4.下列不是html5主要功能的是[] A.Cross-document B.Vector Scalable Graphics C.MathML D.Web Origin Concept 标准答案：B 试题分析：p4 5.在HTML5中可以省略全部标记的元素是________[] A.option B.body C.hr D.img 标准答案：B 试题分析：P39 6.不支持Web Storage的浏览器的是[] A.IE7以上版本 B.以上版本 C.Safari 以上版本 D.Opera 以上版本 标准答案：A</p><p>试题分析：P178 7.audio元素中src属性的作用是________。[] A.提供播放、暂停和音量控件 B.循环播放 C.制定要播放音频的URL D.插入一段替换内容 标准答案：C 试题分析：P160 8.以下哪项不属于Html5中input标签新增的输入类型________。[] A.email B.url C.number D.radio 标准答案：D 试题分析：P80-83 9.outline属性可以定义块元素的外轮廓线，以下错误的是———[] A.outline-color定义轮廓边框颜色 B.outline-style定义轮廓边框轮廓 C.outline-width定义轮廓边框宽度 D.outline-offset定义轮廓边框位置 标准答案：D 试题分析：50910.基本CSS代码书写规范不正确的是————[] A.尽量不缩写 B.全部小写，且每一项CSS定义写成一行 C.ID必须是唯一的，且用在结构的定义中 D.CSS可以尽量使用expression 标准答案：D 试题分析：288 11.1982年，（）创造了HTML语言。[] A.爱因斯坦 B.蒂姆·伯纳斯·李 C.比尔·盖茨 D.埃隆·马斯克 标准答案：B 试题分析：P22 12.在XHTML文档中，（）是一个必要的元素，他决定了网页文档的显示规则。[] A.body B.style C.header D.DOCTYPE 标准答案：D 试题分析：P35</p><h2>web前端培训教程：CSS3 的动画效果</h2><p>海文国际https://www.wendangku.net/doc/889327553.html, web前端培训教程：CSS3 的动画效果 本章主要探讨HTML5 中CSS3 的动画效果，可以通过类似Flash 那样的关键帧模式控制运行。 一．动画简介 CSS3 提供了类似Flash 关键帧控制的动画效果，通过animation 属性实现。那么之前的transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果，有一定的局限性。 animation 实现动画效果主要由两个部分组成： 1.通过类似Flash 动画中的关键帧声明一个动画； 2.在animation 属性中调用关键帧声明的动画。 CSS3 提供的animation 是一个复合属性，它包含了很多子属性。如下表所示：</p><p>海文国际https://www.wendangku.net/doc/889327553.html, 除了这9 个属性之外，动画效果还有一个重要的属性，就是关键帧属性： @keyframes。 它的作用是声明一个动画，然后在animation 调用关键帧声明的动画。 //基本格式，“name”可自定义 @keyframes name { /*...*/ } 二．属性详解 在讲解动画属性之前，先创建一个基本的样式。 //一个div 元素 <div>我是HTML5</div></p><p>海文国际https://www.wendangku.net/doc/889327553.html, //设置CSS div { width: 200px; height: 200px; background-color: white; border: 1px solid green; } 1.@keyframes //创建动画的第一步，先声明一个动画关键帧。 @keyframesmyani { 0% { background-color: white; margin-left:0px; } 50% { background-color: black; margin-left:100px; } 100% { background-color: white; margin-left:0px;</p><h2>CSS属性代码大全</h2><p>CSS属性代码大全 一、CSS文字属性： color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白： padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白 三、CSS符号属性： list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/ list-style-type:disc; /*实心圆形符号*/</p><h2>4.《HTML5+CSS3从入门到精通》自测练习(修正版)</h2><p>《HTML5+CSS3 从入门到精通》自测练习 （修正版） 一、单选题(共44 题，每题 1 分，共44 分) 1. 支持input 类型的输入框的消息提示的属性是[1.0] A. detail B. placeholder C. pattern D. required 标准答案：B 试题分析：P101 2. context.arc（）方法用于绘制圆形，一般其中的第几个参数决定圆形的半径[1.0] A. 1 B. 2 C. 3 D. 4 标准答案：C 试题分析：P114 B. body C. hr D. img 标准答案： B 试题分析：P39 6. 不支持Web Storage 的浏览器的是[1.0] A. IE7 以上版本 B. Firefox3.0 以上版本 C. Safari 4.0 以上版本 D. Opera 10.5 以上版本 标准答案： A 试题分析：P178 7. audio 元素中src 属性的作用是。[1.0] A. 提供播放、暂停和音量控件 B. 循环播放 C. 制定要播放音频的URL D. 插入一段替换内容 标准答案： C 试题分析：P160 3. 下列哪项不是HTML5 的新特性[1.0] 8.以下哪项不属于Html5 中input 标签新增的输入类型。[1.0] A. 兼容性 B. 合理性 C. 安全性 D. 有插件A. email B. url C. number D. radio 标准答案：D 试题分析：p1-2 4. 下列不是html5 主要功能的是[1.0] A. Cross-document B. Vector Scalable Graphics C. MathML D. Web Origin Concept 标准答案：B 试题分析：p4 5. 在HTML5 中可以省略全部标记的元素是[1.0] A. option 标准答案：D 试题分析：P80-83 9. outline 属性可以定义块元素的外轮廓线，以下错误的是———[1.0] A. outline-color 定义轮廓边框颜色 B. outline-style 定义轮廓边框轮廓 C. outline-width 定义轮廓边框宽度 D. outline-offset 定义轮廓边框位置 标准答案： D 试题分析：509 10. 基本CSS 代码书写规范不正确的是————[1.0] A. 尽量不缩写 ;.</p><h2>10款让人惊叹的html5动画效果</h2><p>10款让人惊叹的html5动画效果 这里介绍10款让人叹为观止的html5动画效果 1、15种html5+css3图片堆叠图片展示特效 这是一款html5和css3制作的图片堆叠图片展示特效，就像一幅扑克牌堆叠在一起，最开始只能看到一张，点击按钮后就会展开成几张，非常有意思。 2、html5 svg+css3制作图片边框运动动画效果</p><p>一款使用html5 svg技术制作的图片边框运动动画效果，鼠标移动到图片上时，便会有几条线绕着边框运动，共有4种不同的效果。建议使用Firefox或Chrome浏览器观看。 3、21种html5+css3鼠标悬停hover超链接导航条动画效果 利用css3 transition属性制作的21种不同的鼠标悬停效果。当鼠标hover或悬停在超链接上时，</p><p>会触发各种动画效果。每种动画效果都十分独特，可用于网站导航。 4、18种基于html5 svg和css3的神奇超链接动画效果 普通的超链接效果是鼠标放上去出现一条下划线，本插件异想天开的使用html5 svg和css3打造出18种很神奇的超链接动画效果。每种超链接动画效果都有它的独到之处。 5、html5+css3网格图片3d翻转Loading页面切换效果</p><p>这是一个图片html5和css3制作的3d翻转Loading页面切换效果。在页面上以网格的形式展示所有的页面缩略图，当点击了缩略图片后，图片进行3d翻转，然后加载相应的页面内容。 6、12种利用html5+css3打造的消息提示框效果 这是12种风格各异的弹出消息提示框效果，使用html5和css3 animation属性制作，有各种旋转、翻转、伸展特效。效果非常华丽。</p><h2>css样式大全(精华版)</h2><p>字体属性：(font) 大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高{line-height: normal;}(正常) 单位：PX、PD、EM 粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体{font-variant: small-caps;}(小型大写字母) normal;(正常) 大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体：(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性：(background) 色彩{background-color: #FFFFFF;} 图片{background-image: url();} 重复{background-repeat: no-repeat;} 滚动{background-attachment: fixed;}(固定) scroll;(滚动) 位置{background-position: left;}(水平) top(垂直); 简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/ 区块属性：(Block) /*这个属性第一次认识，要多多研究*/ 字间距{letter-spacing: normal;} 数值/*这个属性似乎有用，多实践下*/ 对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进{text-indent: 数值px;} 垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值 空格white-space: pre;(保留) nowrap;(不换行)</p><h2>HTML5CSS3实战笔记</h2><p>HTML5+CSS3响应式布局笔记 第一章：HTML5,CSS3响应式布局入门 响应式布局：流式设计，弹性布局... 指针对任一设备对网页内容进行完美布局的一种显示机制。 视口：指浏览器窗口内的内容区域，不包含工具栏，标签栏等。 CSS3是在CSS2基础上按模块构建的，以CSS2.1标准为核心。 实现响应式设计的关键技术是CSS3—媒体查询。 响应式布局的条件：CSS3的媒体查询，流动布局。 原则：让设计在多平台多视口的情况下保留尽可能多的内容，而不是使用display：none隐藏它。 可以通过调整标签的先后顺序来显示大小屏内容顺序问题。 第二章：媒体查询，支持不同的视口 html4中的媒体查询： <link rel=“stylesheet” media=“screen and (orientation:portrait)” href=“xx.css”/> 加载CSS的四种方法：行内，内链，外链，import。其中import会增加css请求，影响速度。@import url(“phone.css”) screen and (max-width: 媒体查询可以检测到如下特性，但最常用的是视口宽度（width）和屏幕宽度（device-width）: width:视口宽度。 height:视口高度。 device-width:屏幕宽度。 device-height:屏幕高度。 orientation:检查设备处于横向还是纵向。 aspect-ratio:基于视口宽度和高度的宽高比。如16：9写为aspect-ratio:16/9. device-aspect-ratio:设备屏幕的高宽比。 color:每种颜色的位数。例如min-color:16会检测设备是否拥有16位颜色。 color-index:设备的颜色索引表中的颜色数。值为非负整数。 monochrome:检测单色帧缓冲区中每像素所使用的位数。值为非负整数，比如 monochrome:2。 resolution:用来检测屏幕或打印机的分辨率。如min-resolution:300dpi或 min-resolution:300dpcm。 scan:电视机的扫描方式，值可设为progressive(逐行扫描)或interlace(隔行扫描)。 grid:用来检测输出设备是网格设备还是位图设备。 以上除了scan和grid都可以使用min，max创建一个查询范围。 Respond.js(https://https://www.wendangku.net/doc/889327553.html,/scottjehl/Respond)是为Internet Explorer 8 及更低版本增加媒体查询支持的最快的JavaScript 工具,但它目前无法解析CSS 的@import</p><h2>CSS3常用属性大全</h2><p>CSS3 动画属性（Animation） @keyframes //规定动画。 animation //所有动画属性的简写属性，除了animation-play-state 属性。animation-name //规定@keyframes 动画的名称。 animation-duration //规定动画完成一个周期所花费的秒或毫秒。 animation-timing-function //规定动画的速度曲线。 animation-delay //规定动画何时开始。 animation-iteration-count //规定动画被播放的次数。 animation-direction //规定动画是否在下一周期逆向地播放。 animation-play-state //规定动画是否正在运行或暂停。 animation-fill-mode //规定对象动画时间之外的状态。 CSS 背景属性（Background） background //在一个声明中设置所有的背景属性。 background-attachment //设置背景图像是否固定或者随着页面的其余部分滚动。background-color //设置元素的背景颜色。 background-image //设置元素的背景图像。 background-position //设置背景图像的开始位置。 background-repeat //设置是否及如何重复背景图像。 background-clip //规定背景的绘制区域。 background-origin //规定背景图片的定位区域。 background-size //规定背景图片的尺寸。 CSS 边框属性（Border 和Outline） border //在一个声明中设置所有的边框属性。 border-bottom //在一个声明中设置所有的下边框属性。 border-bottom-color //设置下边框的颜色。 border-bottom-style //设置下边框的样式。 border-bottom-width //设置下边框的宽度。</p><h2>CSS中的各属性意思</h2><p>1、字体属性 这是最基本的属性，您经常都会用到。它主要包括以下这些属性： 2、颜色和背景属性 下面我们就讲一下CSS的颜色和背景属性。先来看一下CSS下的颜色和背景都有哪些属性吧（如下表）： 3、文本属性 ※定义间距 前面说了如何用CSS定义字体、颜色和背景属性，那么定义好的文本我们怎么对它进行排版呢？ 下面我们讲述一下CSS的文本属性，还是先来看一下文本属性的详细列表：</p><p>※装饰超链接 网页默认的链接方式是这样的：未访问过的链接是蓝色文字并带蓝色的下划线，访问过的超级链接是深紫色的文字并带深紫色的下划线。如果您所有的网页都是这种样式，是不是很单调呢？ 4、“容器”属性 ※边距属性 听起来是不是很有趣，什么叫“容器”属性呢？CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。 您想，网页中的内容肯定是都需要“装”进这个“容器”里。“容器”属性是CSS中非常重要的一种属性，我们将分类进行学习。 先来看一下边距属性的详细列表： ※填充距属性 本节我将向您介绍填充距属性。我们先来看一下填充距的属性列表： ※边框属性 本节我们来看一下种类繁多的边框属性，先来看一下属性列表：</p><p>※图文混排 我们在来看看“容器”属性还有什么其他的属性，请看属性列表： 5、分级属性 如果您使用过Word，那您一定知道Word中有一个“项目符号和编号”的功能。 在html中，您无需使用前面提到的一些字体、颜色、容器属性来对字体、颜色和边距、填充距等进行初始化。因为在CSS中，已经提供了进行分级的专用分级属性。 分级属性包括了“list-style”（列表样式）、“list-item”（列表项）等多种属性，我们先来看一下分级属性的详细列表： 6、鼠标属性</p><h2>CSS3 选择器</h2><p>我们会定期对W3School 的CSS 参考手册进行浏览器测试。 CSS3 选择器 在CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个CSS 版本中定义的。（CSS1、CSS2 还是CSS3。） 选择器例子例子描述C S S .class.intro 选择class="intro" 的所有元素。 1 #id#firstname 选择id="firstname" 的所有元素。 1 ** 选择所有元素。 2 element p 选择所有 元素。 1 element,element div,p 选择所有<div> 元素和所有 元素。 1 element element div p 选择<div> 元素内部的所有 元素。 1 element>element div>p 选择父元素为<div> 元素的所有 元素。 2 element+element div+p 选择紧接在<div> 元素之后的所有 元素。 2 [attribute][target] 选择带有target 属性所有元素。 2 [attribute=value][target=_blank] 选择target="_blank" 的所有元素。 2 [attribute~=value][title~=flower] 选择title 属性包含单词"flower" 的所有元素。 2 [attribute|=value][lang|=en] 选择lang 属性值以"en" 开头的所有元素。 2 :link a:link 选择所有未被访问的链接。 1 :visited a:visited 选择所有已被访问的链接。 1 :active a:active 选择活动链接。 1 :hover a:hover 选择鼠标指针位于其上的链接。 1 :focus input:focus 选择获得焦点的input 元素。 2 :first-letter p:first-letter 选择每个 元素的首字母。 1 :first-line p:first-line 选择每个 元素的首行。 1 :first-child p:first-child 选择属于父元素的第一个子元素的每个 元素。 2 :before p:before 在每个 元素的内容之前插入内容。 2 :after p:after 在每个 元素的内容之后插入内容。 2</p><h2>html5教程：8个炫酷CSS动画及源码分享</h2><p>html5教程：8个炫酷CSS动画及源码分享在现代网页中，我们已经越来越习惯使用大量的CSS3元素，而现在的浏览器也基本都支持CSS3，所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页。本文要分享8个超炫酷的纯CSS3动画，有几个非常经典，比如大象走路的那个，如果你对CSS3感兴趣，赶紧来看看吧。 1、纯CSS3实现大象走路动画之前我们分享过一款纯CSS3人物行走动画，效果相当震撼。这一次要给大家介绍的是一款纯CSS3实现的大象走路动画，大象走路时的形态表现的十分逼真，你可能不会想到，这么给力的动画居然是用纯CSS3实现的，很可爱的大象，下载源码自己去研究吧。 2、纯CSS3实现苹果设备 iPhone iPad iMac及iWatch今天我们又要用CSS3来绘制一些有趣的东西，这次要绘制的是全套的苹果设备，包括iPhone、iPad、iMac及iWatch，配合各自的界面壁纸，显得非常逼真，同时跟现实中的设备一样，屏幕同样具有切换的效果，只不过这个是定时切换，并不能滑动切换，有兴趣的同学可以自行实现一下。 3、纯CSS3实现变形金刚组装动画特效今天要分享的依然是一款用纯CSS3实现的动画，是一个变形金刚组装动画特效，这种组装动画将人物的各部位按某种顺序组合起来，显得非常酷。 4、纯CSS3 3D按钮按钮酷似牛奶般剔透CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性特效可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。 5、CSS3音量调节旋转按钮之前我们分享过很多可以调节音量的HTML5视频播放器，大部分音量调节按钮都比较普通，没有什么特色。今天要分享一款基于CSS3的音量调节旋转按钮，只要按住鼠标即可旋转按钮来调节音量。这是一款很有特色旋转按钮。</p><h2>CSS属性大全完整版</h2><p>CSS属性大全完整版 字体属性：(font) 大小 font-size: x-large; (特大) xx-small; (极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 font-style: oblique; (偏斜体) italic; (斜体) normal; (正常) 行高 line-height: normal; (正常) 单位：PX、PD、EM 粗细 font-weight: bold; (粗体) lighter; (细体) normal; (正常) 变体 font-variant: small-caps; (小型大写字母) normal; (正常) 大小写 text-transform: capitalize; (首字母大写) uppercase; (大写) lowercase; (小写) none; (无) 修饰 text-decoration: underline; (下划线) overline; (上划线) line-through; (删除线) blink; (闪烁) 常用字体</p><p>font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性：(background) 色彩 background-color: #FFFFFF; 图片 background-image: url(); 重复 background-repeat: no-repeat; 滚动 background-attachment: fixed; (固定) scroll; (滚动) 位置 background-position: Left (水平) top (垂直); 简写方法background:#000 url(..) repeat fixed left top; 区块属性：(Block) 字间距 letter-spacing: normal; 数值 对齐 text-align: justify; (两端对齐) left; (左对齐) right; (右对齐) center; (居中) 缩进</p><h2>css3实现动画效果常用方法</h2><p>css3实现动画效果常用方法 早期在web中要实现动画效果，都是依赖于JavaScript或flash来完成，但在css3中新增加了一个新的模块transition，它可以通过一些简单的css事件来触发元素的外观变化，让效果显得更加细腻。简单来说，就是通过鼠标的单击、获得焦点、被点击、或对元素任何改变中触发，并平滑地以动画效果改变css属性值 在css中创建简单的过渡效果可以从以下几个步骤来实现： （1）在默认样式中声明元素的初始状态样式 （2）声明过渡元素最终状态样式，比如悬浮状态 （3）在默认样式中通过添加过渡函数，添加一些不同的样式 1、css变形属性 transform属性的基本语法如下： translate(): 移动元素，可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数translateX()和translateY(); scale():缩小或方法元素，可以使用元素尺寸发生变化，在此基础上用两个扩展函数scaleX()和scaleY(); rotate(): 旋转元素，其参数值为旋转的角度值（360deg） skwe();让元素倾斜。在此基础上有两个扩展函数skewX()和skewY() matrix():定义矩阵变形，基于X轴和Y轴 2、过渡属性transition 过渡属性是一个复合属性，主要包括以下几个属性 transition-property:指定过渡或动态模拟的css属性（CSS属性名称） transition-duration:指定完成过渡所需的时间（持续时间） transition-timing-function:指定过渡函数（缓动函数） transition-delay:指定开始出现的延迟时间（改变元素属性值后多长时间开始执行） transition的优点在于简单易用，但是它有几个很大的局限。 （1）transition需要事件触发，所以没法在网页加载时自动发生。 （2）transition是一次性的，不能重复发生，除非一再触发。 （3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。 （4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。 3、animation动画 animation-name属性主要用来调用@keyframes定义好的动画</p><h2>css常用的属性大全</h2><p>CSS常用属性大全 2011-04-22 12:51 字体属性：(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高 line-height: normal;(正常) 单位：PX、PD、EM 粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常) 变体 font-variant: small-caps;(小型大写字母) normal;(正常) 大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 字体投影效果：filter:dropshadow(color=#FFFFFF, offx=1, offy=1, positive=1); 背景属性： (background) 色彩background-color: #FFFFFF; 图片background-image: url(); 重复background-repeat: repeat; no-repeat; repeat-x; repeat-y;滚动background-attachment: fixed;(固定) scroll;(滚动) 位置background-position: left(水平) top(垂直);bottom; right; center; 简写方法 background:#000 url(..) repeat fixed left top; 区块属性： (Block) 字间距letter-spacing: normal; 数值 对齐text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进text-indent: 数值px; 垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 单词间距word-spacing: normal; 数值 空格white-space: pre;(保留) nowrap;(不换行)</p><h2>css3选择器 伪类伪元素</h2><p>CSS3选择器 在css3中新增了很多选择器，大部分浏览器都支持了，但是要知道坑爹的IE还在拖后腿，希望不久的将来IE能赶上来。下面就介绍一下css3中都增加了哪些选择器。 1.属性选择器 E[attr] →有attr属性的E元素。 E[attr^=’value’] →寻找属性值以value开头的元素。 E[attr$=’value’] →寻找以属性值value结束的元素。 E[attr*=’value’] →寻找属性值包含value的元素。 灵活运用，可以组合使用，例如： a[href^=’http://’][href*=’/folder2/’][href$=’.pdf’]{ } E ~ F { } 相邻兄弟连接符，选择的是文档树的同一层级中，紧邻元素E之后的任意元素F。 E + F { } 普通兄弟连接符，选择的是文档树的同一层级中，位于元素E之后的任意元素F，不管它是否直接相邻。 以上选择器大部分浏览器都支持，包括坑爹的IE。 2.伪类 E：first-child{ } //在css2引入，css3中增加11个新的结构伪类。 E：nth-child(n/2n/3n-1/odd/even){ } E：nth-of-type(n/2n/3n-1/odd/even){ } E：nth-last-child( ){ }和E：nth-last-of-type( ){ }与上面参数相同，但是元素要从最后一个算。 first-child{ }和:first-of-type{ } //选择其父元素的第一个子元素和其父元素的某种指定类型的第一个子元素。 last-child{ }和:last-of-type{ } //选择父元素的最后一个子元素和属于某种类型的最后一个子元素。 only-child和only-of-type，选择的是该元素有一个父元素，但没有任何的兄弟元素或者没有相同类型的兄弟元素。 例：p:only-of-type{ } p:only-child{ } 3.其它伪类 target伪类，指向网页内部特定元素的链接。例： <h4 id=”my_id”>Lorem ipsum</h4> <a href=”https://www.wendangku.net/doc/889327553.html,/page.html#my_id”>Lorem</a> Target伪类能够在涉及的URI被使用的时候，把样式应用到元素上。 #my_id:target{ } 其它例子.comment:target{ } empty伪类，选择没有子元素（包括文本节点）的元素。 例： <td>我</td><td></td><td>是</td> td:empty{ } //只会应用到第二个td元素，因为其它两个包含有文本节点 root伪类，选择文档树中的第一个元素，它的唯一真正作用就是发生在为XML文档添</p><h2>css3动画效果总结</h2><p>css3动画效果总结 scale(a); 元素x和y方向均缩放a倍transform: scale(a, b); 元素x方向缩放a倍，y方向缩放b倍transform: scaleX(a); 元素x方向缩放a倍，y方向不变transform: scaleY(b); 元素y方向缩放b倍，x方向不变translate设置元素的位移，用法为：transform: translate(a, b); 元素x方向 位移a，y方向位移btransform: translateX(a); 元素x方向位移a，y方向不变transform: translateY(b); 元素y方向位移b，x方向不变skew设置元素倾斜的角度，用法包括：transform: skew(a, b); 元素x方向逆时针倾斜角度a，y方向顺时针倾斜角度btransform: skewX(a); 元素x方向逆时针倾斜角度a，y方向不变transform: skewY(b); 元素y方向顺时针倾斜角度b，想方向不变以上的参数均必须是以deg结尾的角度数或0，可为负数表示反向。matrix设置元素的变形矩阵，因为矩阵变形过于复杂，暂略。origin设置元素的悬挂点，用法包括：transform-origin: a b; 元素的悬挂点为(a, b)元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。transitiontransition-property指定transition效果作用的CSS属性，其值是CSS属性名。transition-duration动画效果持续的时间，其值为以s结尾的秒数。transition-timing-function指定元素状态的变化速率</p><h2>CSS3中的Transition属性详解</h2><p>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 | [ <IDENT> ] [ ',' <IDENT> ]* transition-property 是用来指定当元素其中一个属性改变时执行transition 效果，其主要有以下几个值：none(没有属 性改 变)；all （所有属性改变）这个也是其默认值；indent （元素属性名）；当其值为none 时，transition 马上停止执行，当指定为all 时，则元素产生任何属性值变化时都将执行transition 效果，ident 是可以指定元素的某一个属性值。其对应的类型如下： 1、color ： 通过红、绿、蓝和透明度组件变换（每个数值单独处理），如：background-color ，border-color ，color ，outline-color 等CSS 属性； 2、length ：真实的数字，如：word-spacing ，width ，vertical- align ，top ，right ，bottom ，left ，padding ，outline-width ，margin ，min-width ，min- height ，max-width ，max-height ，line-height ，height ，border-width ，border- spacing ，background-position 等属性； 3、percentage ：真实的数字，如：word-spacing ，width ，vertical- align ，top ，right ，bottom ，left ，min-width ，min- height ，max-width ，max-height ，line-height ，height ，background-position 等属性； 4、integer 离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生，如：outline-offset ，z-index 等属性； 5、number 真实的（浮点型）数值，如：zoom ，opacity ，font-weight 等属性； 6、transform list ：详情请参阅：《CSS3 Transform 》。 7、rectangle ：通过x 、 y 、 width 和height （转为数值）变换，如：crop ；</p></div> </div> <div> <div>相关文档</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="12818138"><a href="/topic/12818138/" target="_blank">css属性列表</a></li> <li id="16863174"><a href="/topic/16863174/" target="_blank">css3动画</a></li> <li id="14157738"><a href="/topic/14157738/" target="_blank">css3选择器</a></li> </ul> </div> </div> </div> </div> <div class="category"> <span class="navname">相关文档</span> <ul class="lista"> <li><a href="/doc/1718491574.html" target="_blank">CSS3常用属性大全</a></li> <li><a href="/doc/f611570224.html" target="_blank">CSS3常用属性大全</a></li> <li><a href="/doc/4015307394.html" target="_blank">css属性大全</a></li> <li><a href="/doc/7511087020.html" target="_blank">常见CSS属性一览表</a></li> <li><a href="/doc/a53684309.html" target="_blank">常用CSS样式属性CSS样式表</a></li> <li><a href="/doc/086542756.html" target="_blank">CSS样式大全</a></li> <li><a href="/doc/dd4657595.html" target="_blank">CSS属性总结(经典,很全)</a></li> <li><a href="/doc/3611737503.html" target="_blank">css常用的属性大全</a></li> <li><a href="/doc/5911330792.html" target="_blank">2.2.38 CSS列表属性(三)列表项目符号位置：list-style-position</a></li> <li><a href="/doc/801989322.html" target="_blank">CSS属性大全</a></li> <li><a href="/doc/a012128290.html" target="_blank">CSS样式所有属性</a></li> <li><a href="/doc/164941429.html" target="_blank">css样式大全(精华版)</a></li> <li><a href="/doc/e24785125.html" target="_blank">CSS大全</a></li> <li><a href="/doc/478276413.html" target="_blank">css属性(功能分类)</a></li> <li><a href="/doc/7b9925498.html" target="_blank">css中文样式表(含中英文对照表)</a></li> <li><a href="/doc/978672198.html" target="_blank">网页前端设计css样式大全(整理版)</a></li> <li><a href="/doc/d63439705.html" target="_blank">css属性列表与属性值含义</a></li> <li><a href="/doc/2111455159.html" target="_blank">CSS属性大全完整版</a></li> <li><a href="/doc/58504152.html" target="_blank">HTML中CSS样式标签大全及用法</a></li> <li><a href="/doc/7f18032718.html" target="_blank">CSS标签属性大全</a></li> </ul> <span class="navname">最新文档</span> <ul class="lista"> <li><a href="/doc/0719509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0e19509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9319184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/db19211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/af19240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9919184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8b19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8019195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7a19336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6719035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6a19035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4d19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3a19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2519396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2419396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1f19338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/ef19066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/bc19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "87c822d3866fb84ae55c8d87"; </script> <div class="footer"> <p><a href="/tousu.html" target="_blank">侵权投诉</a> &nbsp;&copy; 2013-2023 www.wendangku.net &nbsp;<a href="/sitemap.html">站点地图</a>&nbsp;|&nbsp;<a href="https://m.wendangku.net">手机版</a></p> <p><a href="https://beian.miit.gov.cn" target="_blank">闽ICP备11023808号-7</a>&nbsp;&nbsp;本站文档均来自互联网及网友上传分享，本站只负责收集和整理，有任何问题可通过上访投诉通道进行反馈</p> </div> <script type="text/javascript">foot();</script> </div> </body> </html>