CSS3常用属性大全

CSS3常用属性大全
CSS3常用属性大全

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 //设置下边框的宽度。

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-style //设置四条边框的样式。

border-top //在一个声明中设置所有的上边框属性。

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

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

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

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

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

outline-color //设置轮廓的颜色。

outline-style //设置轮廓的样式。

outline-width //设置轮廓的宽度。

border-bottom-left-radius //定义边框左下角的形状。

border-bottom-right-radius //定义边框右下角的形状。

border-image //简写属性,设置所有border-image-* 属性。

border-image-outset //规定边框图像区域超出边框的量。

border-image-repeat //图像边框是否应平铺(repeated)、铺满(rounded)或拉伸

(stretched)。

border-image-slice //规定图像边框的向偏移。

border-image-source //规定用作边框的图片。

border-image-width //规定图片边框的宽度。

border-radius //简写属性,设置所有四个border-*-radius 属性。

border-top-left-radius //定义边框左上角的形状。

border-top-right-radius //定义边框右下角的形状。

box-decoration-break //

box-shadow //向方框添加一个或多个阴影。

Box 属性

overflow-x //如果容溢出了元素容区域,是否对容的左/右边缘进行裁剪。overflow-y //如果容溢出了元素容区域,是否对容的上/下边缘进行裁剪。overflow-style //规定溢出元素的首选滚动方法。

Rotation //围绕由rotation-point 属性定义的点对元素进行旋转。

rotation-point //定义距离上左边框边缘的偏移点。

Color 属性

color-profile //允许使用源的颜色配置文件的默认以外的规。

opacity //规定书签的级别。

rendering-intent //允许使用颜色配置文件渲染意图的默认以外的规。

Content for Paged Media 属性

bookmark-label //规定书签的标记。

bookmark-level //规定书签的级别。

bookmark-target //规定书签的目标。

float-offset //将元素放在float 属性通常放置的位置的相反方向。hyphenate-after //规定连字单词中连字符之后的最小字符数。

hyphenate-before //规定连字单词中连字符之前的最小字符数。

hyphenate-character //规定当发生断字时显示的字符串。

hyphenate-lines //指示元素中连续断字连线的最大数。

hyphenate-resource //规定帮助浏览器确定断字点的外部资源(逗号分隔的列表)。hyphens //设置如何对单词进行拆分,以改善段落的布局。

image-resolution //规定图像的正确分辨率。

marks //向文档添加裁切标记或十字标记。

string-set //

CSS 尺寸属性(Dimension)

height //设置元素高度。

max-height //设置元素的最大高度。

max-width //设置元素的最大宽度。

min-height //设置元素的最小高度。

min-width //设置元素的最小宽度。

width //设置元素的宽度。

可伸缩框属性(Flexible Box)

box-align //规定如何对齐框的子元素。

box-direction //规定框的子元素的显示方向。

box-flex //规定框的子元素是否可伸缩。

box-flex-group //将可伸缩元素分配到柔性分组。

box-lines //规定当超出父元素框的空间时,是否换行显示。

box-ordinal-group //规定框的子元素的显示次序。

box-orient //规定框的子元素是否应水平或垂直排列。

box-pack //规定水平框中的水平位置或者垂直框中的垂直位置。

CSS 字体属性(Font)

font //在一个声明中设置所有字体属性。

font-family //规定文本的字体系列。

font-size //规定文本的字体尺寸。

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

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

font-style //规定文本的字体样式。

font-variant //规定是否以小型大写字母的字体显示文本。

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

容生成(Generated Content)

content //与:before 以及:after 伪元素配合使用,来插入生成容。counter-increment //递增或递减一个或多个计数器。

counter-reset //创建或重置一个或多个计数器。

quotes //设置嵌套引用的引号类型。

crop //允许被替换元素仅仅是对象的矩形区域,而不是整个对象。move-to //从流中删除元素,然后在文档中后面的点上重新插入。

page-policy //确定元素基于页面的occurrence 应用于计数器还是字符串值。

Grid 属性

grid-columns //规定网格中每个列的宽度。

grid-rows //规定网格中每个列的高度。

Hyperlink 属性

target //简写属性,设置target-name、target-new以及target-position属性。target-name //规定在何处打开(的目标)。

target-new //规定目标在新窗口还是在已有窗口的新标签页中打开。target-position //规定在何处放置新的目标。

CSS 列表属性(List)

list-style //在一个声明中设置所有的列表属性。

list-style-image //将图象设置为列表项标记。

list-style-position //设置列表项标记的放置位置。

list-style-type //设置列表项标记的类型。

marker-offset //设置或检索标记容器和主容器之间水平补白。即两个容器靠近

的一边的间距。

CSS 外边距属性(Margin)

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

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

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

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

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

Marquee 属性

marquee-direction //设置移动容的方向。

marquee-play-count //设置容移动多少次。

marquee-speed //设置容滚动得多快。

marquee-style //设置移动容的样式。

多列属性(Multi-column)

column-count //规定元素应该被分隔的列数。

column-fill //规定如何填充列。

column-gap //规定列之间的间隔。

column-rule //设置所有column-rule-* 属性的简写属性。

column-rule-color //规定列之间规则的颜色。

column-rule-style //规定列之间规则的样式。

column-rule-width //规定列之间规则的宽度。

column-span //规定元素应该横跨的列数。

column-width //规定列的宽度。

columns //规定设置column-width 和column-count 的简写属性。CSS 边距属性(Padding)

padding //在一个声明中设置所有边距属性。

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

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

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

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

Paged Media 属性

fit //示意如何对width和height属性均不是auto的被替换元素进行缩放。fit-position //定义盒对象的对齐方式。

image-orientation //规定用户代理应用于图像的顺时针方向旋转。

page //规定元素应该被显示的页面特定类型。

size //规定页面容包含框的尺寸和方向。

CSS 定位属性(Positioning)

bottom //设置定位元素下外边距边界与其包含块下边界之间的偏移。clear //规定元素的哪一侧不允许其他浮动元素。

clip //剪裁绝对定位元素。

cursor //规定要显示的光标的类型(形状)。

display //规定元素应该生成的框的类型。

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

left //设置定位元素左外边距边界与其包含块左边界之间的偏移。overflow //规定当容溢出元素框时发生的事情。

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

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

top //设置定位元素的上外边距边界与其包含块上边界之间的偏移。vertical-align //设置元素的垂直对齐方式。

visibility //规定元素是否可见。

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

CSS 打印属性(Print)

orphans //设置当元素部发生分页时必须在页面底部保留的最少行数。page-break-after //设置元素后的分页行为。

page-break-before //设置元素前的分页行为。

page-break-inside //设置元素部的分页行为。

widows //设置当元素部发生分页时必须在页面顶部保留的最少行数。CSS 表格属性(Table)

border-collapse //规定是否合并表格边框。

border-spacing //规定相邻单元格边框之间的距离。

caption-side //规定表格标题的位置。

empty-cells //规定是否显示表格中的空单元格上的边框和背景。

table-layout //设置用于表格的布局算法。

CSS 文本属性(Text)

color //设置文本的颜色。

direction //规定文本的方向/ 书写方向。

letter-spacing //设置字符间距。

line-height //设置行高。

text-align //规定文本的水平对齐方式。

text-decoration //规定添加到文本的装饰效果。

text-indent //规定文本块首行的缩进。

text-shadow //规定添加到文本的阴影效果。

text-transform //控制文本的大小写。

unicode-bidi //设置文本方向。

white-space //规定如何处理元素中的空白。

word-spacing //设置单词间距。

hanging-punctuation //规定标点字符是否位于线框之外。

punctuation-trim //规定是否对标点字符进行修剪。

text-align-last //设置如何对齐最后一行或紧挨着强制换行符之前的行。

text-emphasis //向元素的文本应用重点标记以及重点标记的前景色。

text-justify //规定当text-align 设置为"justify" 时所使用的对齐方法。text-outline //规定文本的轮廓。

text-overflow //规定当文本溢出包含元素时发生的事情。

text-shadow //向文本添加阴影。

text-wrap //规定文本的换行规则。

word-break //规定非中日文本的换行规则。

word-wrap //允许对长的不可分割的单词进行分割并换行到下一行。

2D/3D 转换属性(Transform)

transform //向元素应用2D 或3D 转换。

transform-origin //允许你改变被转换元素的位置。

transform-style //规定被嵌套元素如何在3D 空间中显示。

perspective //规定3D 元素的透视效果。

perspective-origin //规定3D 元素的底部位置。

backface-visibility //定义元素在不面对屏幕时是否可见。

过渡属性(Transition)

transition //简写属性,用于在一个属性中设置四个过渡属性。transition-property //规定应用过渡的CSS 属性的名称。

transition-duration //定义过渡效果花费的时间。

transition-timing-function //规定过渡效果的时间曲线。

transition-delay //规定过渡效果何时开始。

用户界面属性(User-interface)

appearance //允许您将元素设置为标准用户界面元素的外观

box-sizing //允许您以确切的方式定义适应某个区域的具体容。

icon //为创作者提供使用图标化等价物来设置元素样式的能力。

nav-down //规定在使用arrow-down 导航键时向何处导航。

nav-index //设置元素的tab 键控制次序。

nav-left //规定在使用arrow-left 导航键时向何处导航。

nav-right //规定在使用arrow-right 导航键时向何处导航。

nav-up //规定在使用arrow-up 导航键时向何处导航。

outline-offset //对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

resize //规定是否可由用户对元素的尺寸进行调整。

CSS_style属性大全

CSS style属性大全 显示: 标签属性/属性行为集合事件滤镜方法对象样式 一、标签属性属性描述 ALIGN align 设置或获取表格排列。 ALLOWTRANSPARENCY allowTransparency 设置或获取对象是否可为透明。 APPLICATION APPLICATION 表明对象的内容是否为HTML 应用程序(HTA),以便免除浏览器安全模式。ATOMICSELECTION 指定元素及其内容是否可以一不可见单位统一选择。 BEGIN begin 设置或获取时间线在该元素上播放前的延迟时间。 BORDER border 设置或获取框架间的空间,包括3D 边框。 canHaveChildren 获取表明对象是否可以包含子对象的值。 canHaveHTML 获取表明对象是否可以包含丰富的HTML 标签的值。 CLASS className 设置或获取对象的类。 contentWindow 获取指定的frame 或iframe 的window 对象。 DA TAFLD dataFld 设置或获取由dataSrc 属性指定的绑定到指定对象的给定数据源的字段。 DA TASRC dataSrc 设置或获取用于数据绑定的数据源。 disabled 获取表明用户是否可与该对象交互的值。 END end 设置或获取表明元素结束时间的值,或者元素设置为重复的简单持续终止时间。 firstChild 获取对象的childNodes 集合的第一个子对象的引用。 FRAMEBORDER frameBorder 设置或获取是否显示框架的边框。 hasMedia 获取一个表明元素是否为HTML+TIME 媒体元素的Boolean 值。 HEIGHT height 设置或获取对象的高度。 HIDEFOCUS hideFocus 设置或获取表明对象是否显式标明焦点的值。 HSPACE hspace 设置或获取对象的水平边距。 ID id 获取标识对象的字符串。 innerText 设置或获取位于对象起始和结束标签内的文本。 isContentEditable 获取表明用户是否可编辑对象内容的值。 isDisabled 获取表明用户是否可与该对象交互的值。 isMultiLine 获取表明对象的内容是包含一行还是多行的值。 isTextEdit 获取是否可使用该对象创建一个TextRange 对象。 LANG lang 设置或获取要使用的语言。 LANGUAGE language 设置或获取当前脚本编写用的语言。

HTML5+CSS3从入门到精通自测练习

《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

试题分析: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

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>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>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.360docs.net/doc/ab10364396.html,/scottjehl/Respond)是为Internet Explorer 8 及更低版本增加媒体查询支持的最快的JavaScript 工具,但它目前无法解析CSS 的@import</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>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;(闪烁) 常用字体:(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; 数值</p><h2>css知识点汇总</h2><p>CSS学习知识点 1、css是什么? CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表”,它定义如何显示 HTML元素,用于控制网页的外观。 2、为什么使用css,优点是什么? 1:【内容】和【表现】相分离 HTML文件中只存放文本信息,将样式部分放在一个独立样式文件中。页面对搜索引擎更加友好。 2:提高页面浏览速度 采用CSS布局的页面容量要比TABLE布局的页面文件容量小得多,前者一般只有后者的1/2大小。 3:易于维护和改版 只要简单的修改对应CSS文件,就可以重新设计整个网站的页面。 4: 使用CSS布局更符合现在的W3C标准 W3C组织是对网络标准制定的一个非赢利组织,像HTML、CSS、XML的标准就是由它来定制。 3、CSS样式表的调用方式哪几种? 1、内部样式:把CSS样式表放到<head>文档中: 格式如下:<style type=“text/css”> …… </style> 2、内联式:把CSS样式表写在HTML对应的标记内。 格式如下:<p style="font-size:14pt;color:blue">蓝色14号文字 3、外部样式:把编辑好的CSS文档保存成“.CSS”文件,然后在<head>中定义。 格式如下:<head> <link rel=stylesheet href="css的文件地址">.....</head> 4、导入样式:与链入外部样式的功能基本相同,只是语法和实现方式上有差别。 格式如下:<style> @import url(css.css);</style> 4、几种调用方式的优先级? 从高到低:内联样式--------外部样式---------内部样式-----------导入样式 5、CSS的语法: CSS的定义是由三部分构成: 选择器,属性和属性值。 语法: selector {property: value;} --------------------- 选择符{属性:值}</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>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>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>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.360docs.net/doc/ab10364396.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>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>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>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;(不换行) 显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) 方框属性:(Box) width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左 边框属性:(Border) border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset; border-width:; 边框宽度 border-color:#; 简写方法border:width style color; 列表属性:(List-style) 类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;</p><h2>HTML中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;(闪烁) 常用字体:(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;(不换行) 显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) 方框属性:(Box) width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左 边框属性:(Border) border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset; border-width:; 边框宽度 border-color:#; 简写方法border:width style color; 列表属性:(List-style)</p></div> <div class="rtopicdocs"> <div class="coltitle">相关主题</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="21404025"><a href="/topic/21404025/" target="_blank">css常用的属性大全</a></li> <li id="14157738"><a href="/topic/14157738/" target="_blank">css3选择器</a></li> <li id="10868298"><a href="/topic/10868298/" target="_blank">css属性大全</a></li> </ul> </div> </div> </div> </div> <div id="rightcol" class="viewcol"> <div class="coltitle">相关文档</div> <ul class="lista"> <li><a href="/doc/7918032718.html" target="_blank">CSS标签属性大全</a></li> <li><a href="/doc/ab10364396.html" target="_blank">CSS3常用属性大全</a></li> <li><a href="/doc/0418083103.html" target="_blank">CSS大全,最全的常用css代码</a></li> <li><a href="/doc/ed4785125.html" target="_blank">CSS大全</a></li> <li><a href="/doc/3611737503.html" target="_blank">css常用的属性大全</a></li> <li><a href="/doc/6310306187.html" target="_blank">CSS 标签属性大全</a></li> <li><a href="/doc/8f14549334.html" target="_blank">CSS常用属性整理</a></li> <li><a href="/doc/c22126267.html" target="_blank">HTML+CSS标签属性大全</a></li> <li><a href="/doc/1a14914512.html" target="_blank">常用CSS样式属性CSS样式表</a></li> <li><a href="/doc/f818487796.html" target="_blank">CSS标签大全(最终整理版)</a></li> <li><a href="/doc/4c17205177.html" target="_blank">CSS常用属性大全</a></li> <li><a href="/doc/7116640705.html" target="_blank">CSS符号属性大全</a></li> <li><a href="/doc/a310089989.html" target="_blank">DW CSS大全,最全的常用css代码1t</a></li> <li><a href="/doc/0917063737.html" target="_blank">HTML+CSS标签属性大全</a></li> <li><a href="/doc/d24809563.html" target="_blank">CSS常用属性大全</a></li> <li><a href="/doc/3511690511.html" target="_blank">常用CSS样式属性CSS样式表</a></li> <li><a href="/doc/607604104.html" target="_blank">CSS3常用属性大全</a></li> <li><a href="/doc/808110408.html" target="_blank">CSS属性大全</a></li> <li><a href="/doc/b07159505.html" target="_blank">CSS常用属性及描述资料</a></li> <li><a href="/doc/1b10889543.html" target="_blank">css知识点汇总</a></li> </ul> <div class="coltitle">最新文档</div> <ul class="lista"> <li><a href="/doc/0f19509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0119509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9b19184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/d819211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/a419240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9d19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8a19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8519195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7119336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6619035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4a19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3b19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2619396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2b19396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1419338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/ed19066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/bd19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "a8b52dbcb207e87101f69e3143323968001cf4df"; </script> <div class="clearfloat"></div> <div id="footer"> <div class="ft_info"> <a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a>&nbsp;<a href="/tousu.html" target="_blank">侵权投诉</a> &nbsp;&copy;2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br /> 本站资源均为网友上传分享,本站仅负责收集和整理,有任何问题请在对应网页下方投诉通道反馈 </div> <script type="text/javascript">foot()</script> </div> </body> </html>