css参考手册(完美整理版)
- 格式:pdf
- 大小:159.32 KB
- 文档页数:9
目录CSS 选择器参考手册........................................... 错误!未定义书签。
CSS .class 选择器................................................. 错误!未定义书签。
CSS #id 选择器..................................................... 错误!未定义书签。
CSS *选择器......................................................... 错误!未定义书签。
CSS element选择器........................................... 错误!未定义书签。
CSS element,element选择器.......................... 错误!未定义书签。
CSS element element选择器........................ 错误!未定义书签。
CSS element>element 选择器........................ 错误!未定义书签。
CSS element+element选择器........................ 错误!未定义书签。
CSS element+element选择器........................ 错误!未定义书签。
CSS [attribute] 选择器....................................... 错误!未定义书签。
CSS :visited 选择器............................................. 错误!未定义书签。
CSS :active 选择器.............................................. 错误!未定义书签。
一、CSS背景属性(Background)background简写属性在一个声明中设置所有的背景属性。
{backgroud:background-color;background-image;background-repeat ;background-attachment;background-position;}∙background-color:redrgb(255,255,255)#000000设置背景颜色∙background-image:url(bgimage.gif);(值为图片的路径)设置背景图像∙background-repeat:设置图像的排列repeat 默认。
背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承background-repeat 属性的设置。
∙background-attachment:设置背∙图像是否固定或者随着页面的其余部分滚动。
scroll 默认值。
背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时,背景图像不会移动。
inherit 规定应该从父元素继承background-attachme nt属性的设置。
∙background-position:topleft;x%y%;5px50px设置背景图像的起始位置。
∙∙景二、CSS边框属性(Border和Outline)border:简写属性在一个声明设置所有的边框属性{border:border-width;border-color;border-style;}border-width:设置边框宽度*thin定义细的边框*medium 默认。
定义中等的边框。
*thick 定义粗的边框。
*length允许您自定义边框的宽度。
(15px) *inherit 规定应该从父元素继承边框宽度。
css3 手册所有一、引言CSS(层叠样式表)是一种用于描述文档样式的标记语言,具体包括字体、颜色、布局等方面的样式定义。
CSS3是CSS的最新版本,是Web开发中常用的样式定义语言之一。
本手册将详细介绍CSS3的各项属性及其使用方法。
二、选择器1. 元素选择器元素选择器是CSS中最常用的选择器之一,通过元素名称来选择文档中的元素。
例如,使用`p`选择器可以选择所有的`<p>`标签。
2. 类选择器类选择器用于选择带有特定类名的元素。
通过在类名前面加上点号(.),例如`.red`,可以选择具有`red`类的元素。
3. ID选择器ID选择器用于选择具有特定ID的元素。
通过在ID名称前面加上井号(#),例如`#header`,可以选择具有`header`的ID的元素。
4. 属性选择器属性选择器用于选择具有特定属性值的元素。
通过在属性名前加上方括号([]),例如`[type="text"]`,可以选择type属性值为"text"的元素。
5. 伪类选择器伪类选择器用于选择元素的特殊状态。
常见的伪类选择器有`hover`、`active`和`visited`等。
6. 伪元素选择器伪元素选择器用于在文档中添加不存在的元素并为其添加样式。
常见的伪元素选择器有`::before`和`::after`等。
三、文本样式1. 字体可以使用`font-family`属性设置元素的字体。
例如,`font-family: Arial, sans-serif;`可以设置字体为Arial。
2. 颜色可以使用`color`属性设置元素的文本颜色。
例如,`color: red;`可以将文本颜色设置为红色。
3. 背景可以使用`background-color`属性设置元素的背景颜色。
例如,`background-color: #f1f1f1;`可以将背景颜色设置为浅灰色。
四、盒子模型1. 尺寸可以使用`width`和`height`属性设置元素的宽度和高度。
CSS 背景属性(Background)属性描述CSS background在一个声明中设置所有的背景属性。
1 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
1 background-color设置元素的背景颜色。
1 background-image设置元素的背景图像。
1 background-position设置背景图像的开始位置。
1 background-repeat设置是否及如何重复背景图像。
1CSS 边框属性(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设置上边框的宽度。
CSS语法手册字体属性1、font-family×能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单。
浏览器由前向后选用字体。
语×:{font-family:字体1,字体2, ... ,字体n}2、font-style×能:使文本显示为扁斜体或斜体等表示强调。
数值:normal - 正常italic - 斜体oblique - 偏斜体3、font-variant×能:用于在正常与小型大写字母字体间切换。
数值:normal - 如果该标志继承父元素的small-caps 设置,则关键字normal 将font-variant 设置为正常字体。
small-caps - 把小写字母显示为字体较小的大写字母。
4、font-weight×能:用于设置字体灰度,生成字体的深,浅版本。
数值:正常灰度- normal相对灰度- bold, bolder, light, lighter梯度灰度- 取值如下:100, 200, 300, 400(相当于normal), 500, 600, 700(相当于bold), 800, 900。
5、font-size×能:用各种度量单位控制文本字体大小。
数值:有四种数值方式绝对尺寸- 用具体字号表定义字体大小,可以取下列数值之一:xx - small, x-small, small, medium, large, x-large, xx-large。
不同字体有不同的数值。
相对尺寸- larger, smaller,产生的尺寸是相对于父容器字号而言的。
长度- 用毫米(mm),厘米(cm),英寸(in),点数(pt),象素(px),pica(pc),ex(小写字母x的高度)或em(字体高度)作为度量单位。
百分比- 相对于其父元素字体大小的百分比。
6、font×能:简写属性,提供了对字体所有属性进行设置的快捷方×。
css3.0参考手册Table of Contents1. CSS3 Properties (3)Borders (3)Backgrounds (3)Color (3)Text effects (3)User-interface (4)Selectors (4)Basic box model (4)Generated Content (4)Other modules (4)1.1 边框(Border) (4)1.1.1 Border-color (5)1.1.2 Border-image (6)1.1.3 Border-radius (8)1.1.4 box-shadow (10)1.2 背景(Background) (11)1.2.1 background-origin (11)1.2.2 background-clip (13)1.2.3 Background-size (14)1.2.4 Multiple backgrounds (16)1.3 颜色(Color) (18)1.3.1 HSL colors (19)1.3.2 HSLA colors (20)1.3.3 opacity (21)1.3.4 RGBA colors (22)1.4 文本(Text effects) (24)1.4.1 text-shadow (24)1.4.2 text-overflow (26)1.4.3 word-wrap (27)1.5 用户界面(User-interface) (28)1.5.1 box-sizing (28)1.5.2 resize (30)1.5.3 outline (31)1.5.4 outline-width (33)1.5.5 outline-style (34)1.5.6 outline-offset (36)1.5.7 outline-color (37)1.5.8 nav-index (38)1.5.9 nav-up (40)1.5.10 nav-right (41)1.5.11 nav-down (42)1.5.12 nav-left (43)1.6 基础盒模型(Basic box model) (44)1.6.1 overflow (44)1.6.2 overflow-x (46)1.6.3 overflow-y (47)1.7 内容(Generated Content) (49)1.7.1 content (49)1.8 其它模块(Other modules) (50)1.8.1 media queries (51)1.8.2 Speech (52)1.8.3 columns (55)1.8.4 column-width (57)1.8.5 column-span (59)1.8.6 column-rule (60)1.8.7 column-rule-color (62)1.8.8 column-rule-width (64)1.8.9 column-rule-style (65)1.8.10 column-gap (68)1.8.11 column-fill (70)1.8.12 column-count (71)1.8.13 column-break-before (72)1.8.14 column-break-after (74)1.8.15 @font-face (75)2. 选择器(selectors) (77)2.1 子串匹配的属性选择符E[att^="val"] (78)2.2 子串匹配的属性选择符E[att$="val"] (79)2.3 子串匹配的属性选择符E[att*="val"] (80)2.4 结构性伪类E:root (81)2.5 结构性伪类E:nth-child(n) (82)2.6 结构性伪类E:nth-last-child(n) (83)2.7 结构性伪类E:nth-of-type(n) (84)2.8 结构性伪类E:nth-last-of-type(n) (85)2.9 结构性伪类E:last-child (86)2.10 结构性伪类E:first-of-type (87)2.11 结构性伪类E:only-child (88)2.12 结构性伪类E:only-of-type (89)2.13 结构性伪类E:empty (90)2.14 UI元素状态伪类E:checked (91)2.15 UI元素状态伪类E:enabled (92)2.16 UI元素状态伪类E:disabled (93)2.17 UI元素状态伪类E::selection (94)2.18 否定伪类E:not(s) (95)2.19 目标伪类E:target (96)2.20 通用兄弟元素选择器E ~ F (97)1. CSS3 Properties 属性列表Borders∙border-color(See 1.1.1)∙border-image(See 1.1.2)∙border-radius(See 1.1.3)∙box-shadow(See 1.1.4) Backgrounds∙background-origin(See 1.2.1)∙background-clip(See 1.2.2)∙background-size(See 1.2.3)∙multiple backgrounds(See 1.2.4) Color∙HSL colors(See 1.3.1)∙HSLA colors(See 1.3.2)∙opacity(See 1.3.3)∙RGBA colors(See 1.3.4)Text effects∙text-shadow(See 1.4.1)∙text-overflow(See 1.4.2)∙word-wrap(See 1.4.3)User-interface∙box-sizing(See 1.5.1)∙resize(See 1.5.2)∙outline(See 1.5.3)∙nav-up(See 1.5.9) , nav-right(See 1.5.10) , nav-down(See 1.5.11) , nav-left(See 1.5.12) Selectors∙attribute selectors(See 2.)Basic box model∙overflow-x(See 1.6.2) , overflow-y(See 1.6.3)Generated Content∙content(See 1.7.1)Other modules∙media queries(See 1.8.1)∙multi-column layout(See 1.2.4)∙Web fonts(See 1.8.15)∙speech(See 1.8.2)1.1 边框(Border)属性列表∙border-color(See 1.1.1)∙border-image(See 1.1.2)∙border-radius(See 1.1.3)∙box-shadow(See 1.1.4)1.1.1 Border-color继承性:无语法:border-color:<color>相关属性:border-top-color, border-right-color, border-bottom-color , border-left-color取值:<color>:颜色值。
CSS语法手册全集(不看你会后悔的!)CSS语法手册(一)字体属性1、font-family功能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单。
浏览器由前向后选用字体。
powered by 语法:{font-family:字体1,字体2, ... ,字体n}例子:字体2、font-style功能:使文本显示为扁斜体或斜体等表示强调。
数值:normal - 正常italic - 斜体oblique - 偏斜体例子:NormalItalicOblique3、font-variant功能:用于在正常与小型大写字母字体间切换。
数值:normal - 如果该标志继承父元素的small-caps 设置,则关键字normal 将font-variant 设置为正常字体。
small-caps - 把小写字母显示为字体较小的大写字母。
例子:FONT-VARIANT4、font-weight功能:用于设置字体灰度,生成字体的深,浅版本。
数值:正常灰度- normal相对灰度- bold, bolder, light, lighter梯度灰度- 取值如下:100, 200, 300, 400(相当于normal), 500, 600, 700(相当于bold), 800, 900。
例子:字体灰度5、font-size功能:用各种度量单位控制文本字体大小。
数值:有四种数值方式绝对尺寸- 用具体字号表定义字体大小,可以取下列数值之一:xx - small, x-small, small, medium, large, x-large,xx-large。
不同字体有不同的数值。
相对尺寸- larger, smaller,产生的尺寸是相对于父容器字号而言的。
长度- 用毫米(mm),厘米(cm),英寸(in),点数(pt),象素(px),pica(pc),ex(小写字母x的高度)或em(字体高度)作为度量单位。
百分比- 相对于其父元素字体大小的百分比。
css动画属性(Animation):请使用动画属性时控制外观@keyframes属性:规定动画,同时将动画与选择器绑定。
语法:@keyframes animationname {keyframes-selector{css-style;}}animationname必需,定义动画名称。
keyframes 必需,动画时长的百分比。
合法值:0%—100%/from(0%)—to(100%)。
css-styles必需,一个或多个合法的css样式。
浏览器支持:Firefox支持替代的-moz-animation、Safari和Chrome支持替代的-webkit-animation、Opera支持替代的-o-animationanimation属性:一个简写属性,包括animation-name:规定@keyframes动画名称。
Animation-duration:规定动画完成一个周期(用ms或s计)。
Animation-timing-function:规定动画的速度曲线。
Animation-delay:规定动画开始时间。
Animation-iteration-count:规定动画播放次数。
Animation-direction:规定动画是否下周期逆向播放。
默认值:none 0 ease 0 1 normal 继承性:no 版本:css3语法:animation:name duration timing function delay iteration-countdirectionJavaScript语法:objectname.style.animation=”mymove 5s infinite”定义:需要始终规定animation-duration属性,否则时长为0,就不会播放动画了。
浏览器支持:IE10 Firefox支持animation属性、Safaris和Chrome支持替代的-webkit-animation属性、Opera支持代替的-o-animation属性可使用简写属性可将动画与div绑定Animation-name属性:为@keyframe动画规定名称。