CSS 参考手册(CSS 属性组明细对照表)

合集下载

css常用属性

css常用属性

normal :默认值。默认行高 length :百分比数字 | 由浮点数字和单位标识符 组成的长度值,允许为负值。其百分比取值是基于字 体的高度尺寸
Code:ex04/css_news.htm
常用css属性——文本控制
text-align : left | right | center | justify 设置或检索对象中文本的对齐方式。 left :默认值。左对齐 right :右对齐 center :居中对齐 justify :两端对齐 auto :自动 baseline :基线对齐 sub :垂直对齐文本的下标 super :垂直对齐文本的上标 top :内容对象顶端对齐 text-top :将支持 valign 特性的对象的文本与对 象顶端对齐 middle :中部对齐 bottom :底端对齐 text-bottom :文本与对象底端对齐 length :CSS2功能 由浮点数字和单位标识符组成的长度值 | 百分数。 可为负数。定义由基线算起的偏移量。基线对于数值 来说为0,对于百分数来说就是0%。 normal :默认值。允许在词间换行 break-all :与 normal 相同。也允许非亚洲语言文 本行的任意字内断开。 keep-all :对于中文,韩文,日文,不允许字断开。 适合包含少量亚洲文本的非亚洲文本
background-color : transparent | color background-image : none | url ( url ) background-position : position || position background-repeat : repeat | no-repeat | repeat-x | repeat-y layer-background-color : transparent | color background:颜色 背景图片 重复性 位置; 应用举例: 1、表格的背景图像和背景色 2、给textarea生成水平笔记效果 3、制作重复性背景图片、图片虚线的技巧。 背景色 背景图像 背景图像的定位,位置坐标 指定背景图像是否重复,怎么重复 指定背景色透明 可仅用background代替上面各属性。

css属性大全中文对照表

css属性大全中文对照表

css属性⼤全中⽂对照表Aalign-content 规定弹性容器内的⾏之间的对齐⽅式,当项⽬不使⽤所有可⽤空间时。

align-items 规定弹性容器内项⽬的对齐⽅式。

align-self 规定弹性容器内所选项⽬的对齐⽅式。

all 重置所有属性(除了 unicode-bidi 和 direction)。

animation 所有 animation-* 属性的简写属性。

animation-delay 规定开始动画的延迟。

animation-direction 规定动画是向前播放、向后播放还是交替播放。

animation-duration 规定动画完成⼀个周期应花费的时间。

animation-fill-mode 规定元素在不播放动画时(在开始之前、结束之后、或同时)的样式。

animation-iteration-count 规定动画的播放次数。

animation-name 规定 @keyframes 动画的名称。

animation-play-state 规定动画是播放还是暂停。

animation-timing-function 规定动画的速度曲线。

Bbackface-visibility 定义当⾯对⽤户时元素的背⾯是否应可见。

background 所有 background-* 属性的简写属性。

background-attachment 设置背景图像是与页⾯的其余部分⼀起滚动还是固定的。

background-blend-mode 规定每个背景图层(颜⾊/图像)的混合模式。

background-clip 定义背景(颜⾊或图像)应在元素内延伸的距离。

background-color 规定元素的背景⾊。

background-image 规定元素的⼀幅或多幅背景图像。

background-origin 规定背景图像的初始位置。

background-position 规定背景图像的位置。

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

Css div 常用CSS标签及属性

Css div 常用CSS标签及属性

Css+div总结的一些常用CSS标签及属性CSS中的长度绝对单位:几乎不用在网页中in 英寸 1in = 2.54cmcm 厘米 1cm = 0.394inpt 磅 1in = 72ptpc pica 1in = 6pc相对单位:较常用em 1em = 相应字体的font-size值ex 1ex = 相应字体中的小写x字母的高度值,较难求得,一般取0.5em px 最为常用的CSS中的元素分类display 设定元素所属类别,不可继承none(设定为不显示在屏幕上)block(块级元,包括 P,H1-H6,list,div,body)inline(内联元,包括 a,em,span)list-item(列表元,如 LI)颜色与背景类color 设置文字颜色#rgb #rrggbb rgb(255,255,255) rgb(100%,100%,100%)H1{color:red}H1{color:#f00}H1{color:#ff0000}H1{color:rgb(255,0,0)}H1{color:rgb(100%,0%,0%)}background-color 设置背景颜色,格式同上;不可继承,可用于所有元BODY{background-color:red}BODY{background-color:#f00}BODY{background-color:#ff0000}BODY{background-color:rgb(255,0,0)}BODY{background-color:rgb(100%,0%,0%)}background-image 设置背景图片,默认为none,不可继承,可用于所有元url(imageURL) nonebody{backround-image:url(back.jpg);}background-repeat 设置背景图片是否重复排列,不可继承,用于所有元repeat(XY轴均重复) repeat-x(X轴重复排列) repeat-y(Y轴重复排列) No-repeat(不重复排列,默认值)BODY{background-repeat:repeat-x;}BODY{background-repeat:No-repeat;}background-attachment 设定背景图片是否卷动,不可继承,用于所有元scroll(随网页卷动,默认值) fixed(不随网页卷动)BODY{background-attachment:fixed;}background-position 设定背景图片或背景颜色开始显示的位置,不可继承,用于块级元和可替换元top,buttom,left,right,center(用关键字)70px 10px(用长度值)50% 30%(用百分比)BODY{background-position:right top;}BODY{background-position:50px 10px;}BODY{background-position:20% 50%;}background 定义背景综合属性,不要求顺序,各属性值以空格分开BODY{background:#ffcc00 url(bg.jpg) fixed center}字型类font-family 设置字型属性,取值可以是任何字型名称,缺省为浏览器内定字型,可以设多个以逗号(,)分开,有空格的英文字型可用单引号或双引号括起来。

cascading_style_sheet手册_范文模板及概述

cascading_style_sheet手册_范文模板及概述

cascading style sheet手册范文模板及概述**1. 引言**1.1 概述本篇长文将介绍CSS(Cascading Style Sheets)手册的范文模板及概述。

CSS 是一种用于描述HTML文档显示样式的语言,通过定义元素的外观和布局来美化网页。

为了方便开发人员学习和使用CSS,本手册提供了基础知识、常用样式属性、布局与盒模型以及高级技巧与技术实践等内容。

1.2 文章结构本文按照逻辑顺序分为六个主要部分。

首先是引言部分,对文章进行概述和介绍。

其次是CSS基础知识,包括CSS简介、语法和选择器等内容。

第三部分涵盖了CSS样式属性,包括字体样式属性、背景样式属性和边框样式属性等。

接着是布局与盒模型部分,讲解盒模型概述、定位与浮动以及响应式布局等相关内容。

第五部分将介绍高级CSS技巧与技术实践,包括Flexbox布局技术、动画与过渡效果以及平台兼容性注意事项等。

最后,在结论中对全文进行总结并给出未来进一步学习的建议。

1.3 目的本篇长文的目的是为读者提供一个全面且易于理解的CSS手册范文模板,并通过详细介绍各个部分的内容,帮助读者深入了解CSS的基础知识和常用技巧。

通过本手册,读者将能够掌握如何使用CSS来实现网页的样式及布局,并获得一些高级技巧与技术实践,以便在实际开发中更加灵活地运用CSS。

以上是关于文章“1. 引言”部分内容的详细清晰描述。

2. CSS基础知识:2.1 CSS简介:CSS(层叠样式表)是一种用于定义网页样式和布局的标记语言,它可以控制HTML文档中的元素如何显示在浏览器中。

通过使用CSS,我们可以改变文本、图像、背景、边框等方面的样式,以及控制元素的大小、位置和对齐方式。

2.2 CSS语法:CSS的语法由选择器和声明块组成。

选择器用于选择要应用样式的HTML元素,而声明块则包含了一系列属性以及其对应的值。

一个基本的CSS规则由选择器和声明块构成,例如:```h1 {color: blue;font-size: 24px;}```上述例子中,`h1`是选择器,它表示要应用该规则的HTML元素为所有的`<h1>`标签。

css参考手册(完美整理版)

css参考手册(完美整理版)

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属性大全

css属性大全

css属性大全CSS属性大全。

CSS(Cascading Style Sheets)是一种用来为网页添加样式和布局的样式表语言。

它可以控制网页的字体、颜色、间距、边框、背景等各种样式,是网页设计中不可或缺的一部分。

在这篇文档中,我们将详细介绍CSS中的各种属性,帮助您更好地掌握CSS的应用。

1. 字体属性。

字体属性用于设置网页中文本的字体样式、大小、粗细等。

常用的属性包括font-family(设置字体系列)、font-size(设置字体大小)、font-weight(设置字体粗细)、font-style(设置字体样式)等。

2. 文本属性。

文本属性用于设置文本的对齐方式、行高、间距等。

常用的属性包括text-align(设置文本对齐方式)、line-height(设置行高)、letter-spacing(设置字符间距)、word-spacing(设置单词间距)等。

3. 背景属性。

背景属性用于设置网页元素的背景样式。

常用的属性包括background-color(设置背景颜色)、background-image(设置背景图片)、background-repeat(设置背景重复方式)、background-position(设置背景位置)等。

4. 边框属性。

边框属性用于设置网页元素的边框样式。

常用的属性包括border-width(设置边框宽度)、border-style(设置边框样式)、border-color(设置边框颜色)、border-radius(设置边框圆角)等。

5. 盒模型属性。

盒模型属性用于设置网页元素的尺寸、内边距、外边距等。

常用的属性包括width(设置元素宽度)、height(设置元素高度)、padding(设置内边距)、margin(设置外边距)等。

6. 定位属性。

定位属性用于设置网页元素的位置。

常用的属性包括position(设置定位方式)、top(设置元素顶部位置)、left(设置元素左侧位置)、z-index(设置元素层级)等。

CSS3.0参考手册

CSS3.0参考手册

示例:
使用的图片:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <meta name="robots" content="all" /> <meta name="author" content="Tencent-ISRD" /> <meta name="Copyright" content="Tencent" /> <title>Border-image</title> </head> <body>
box-shadow
Border-color
版本:CSS3 继承性:无
语法:
border-color : < color> 相关属性 :border-top-color, border-right-color, border-bottom -color , border-left-color

css参考文献

css参考文献

css参考文献CSS是指层叠样式表,是一种用于为网页添加样式和布局的语言。

它是网站设计中不可或缺的一部分,可以控制网页元素的样式、大小、位置和行为等。

CSS样式可以通过外部样式表、内部样式表和内联样式表嵌入到网页中。

CSS参考文献可以帮助网页设计师和开发人员熟悉CSS语言、快速定位和解决问题。

下面是一些常用的CSS参考文献:1. CSS权威指南(CSS: The Definitive Guide):该书是CSS方面的经典著作之一,由Eric A. Meyer撰写,已经出版到第四版。

本书从基础知识讲起,深入浅出地介绍了CSS的各种特性与应用场景。

适合初学者和专业人士阅读。

2. CSS揭秘(CSS Secrets):该书由前Google工程师LeaVerou撰写,内容涵盖了一些高级CSS技巧和实用小技巧,如形状、渐变、动画、弹性布局等。

本书中的案例和示例非常实用,适合有经验的前端开发人员学习。

3. CSS布局经典实例(CSS Layout Cookbook):该书由Ian Yates和Smashing Magazine团队合著,收录了100多个CSS布局解决方案和实例。

该书从网页布局的基础开始,逐步介绍各种布局技巧和应用场景。

本书的实例非常丰富,适合学习CSS布局的初学者和开发人员。

4. CSS3手册(CSS3: The Missing Manual):该书由David Sawyer McFarland撰写,介绍了CSS3的新特性和语法规则。

本书涵盖了响应式设计、媒体查询、变形和过渡等重要的CSS3技术。

适合已经熟悉CSS基础的开发人员学习。

5. CSS参考手册(CSS Pocket Reference):该书由Eric A. Meyer撰写,是一本小型的CSS参考手册。

该书简洁明了地列出了CSS的各种语法规则和属性值,是一个非常实用的工具书。

以上是一些常用的CSS参考文献。

除此之外,还可以通过各种网站和博客学习CSS技巧和实例。

css属性参考手册(CSSPropertyReferenceManual)

css属性参考手册(CSSPropertyReferenceManual)

css 属性参考手册(CSS Property Reference Manual) CSS property group:backgroundtextTypefaceOutline and outlineMarginpaddinglistContent generationsizeLocationPrintformPseudo classPseudo elementTips and notes:Property: the property column points to syntax, instances, browser support, and so on.The CSS: "CSS" column indicates which version of the property is defined in the CSS Version (CSS1 or CSS2).Tip: the W3School CSS reference manual is periodically tested in all mainstream browsers. Final test time: October 8, 2009.CSS background property (Background)Property description CSSBackground sets all of the background properties in a statement. OneBackground-attachment sets whether the background image is fixed or scrolls along with the rest of the page. OneBackground-color sets the background color of the element. One Background-image sets the background image of the element. One Background-position sets the start position of the backgroundimage. OneBackground-repeat settings and how to repeat the background image. OneCSS border properties (Border and Outline)Property description CSSBorder sets all of the border properties in a declaration. OneBorder-bottom sets all of the lower border properties in a declaration. OneBorder-bottom-color sets the color of the next border.Two Border-bottom-style sets the style of the next border.Two Border-bottom-width sets the width of the next border.One Border-color sets the color of the four borders. OneBorder-left sets all the left border attributes in a declaration. OneBorder-left-color sets the color of the left border. Two Border-left-style sets the style of the left border. TwoBorder-left-width sets the width of the left border. OneBorder-right-colorsets the color of the right border.Two Border-right-style sets the style of the right border.Two Border-right-width sets the width of the right border.One Border-top-color sets the color of the upper border.Two Border-top-stylesets the style of the upper border.TwoBorder-top-width sets the width of the upper border.One Border-width sets the width of the four borders. One Outline-color sets the color of the outline. TwoOutline-style sets the outline style. TwoBorder-right sets all right border attributes in a declaration.OneBorder-style sets the style of the four borders. OneBorder-top sets all of the upper border properties in a declaration. OneOutline sets all of the outline attributes in a declaration.Two Outline-width sets the width of the outline. TwoCSS text attributes (Text)Property description CSSColor sets the color of the text. OneDirection specifies the direction / writing direction of the text. TwoLETTER-SPACING sets character spacing. OneLine-height sets the line height. OneText-align specifies the horizontal alignment of text. OneText-decoration specifies the decorative effect added to the text. OneText-indent provides the first line indent text block. OneText-shadow specifies the shadow effect added to the text. TwoText-transform controls text case. OneUnicode-bidi sets text direction. TwoWhite-space specifies how to handle the space in an element. One Word-spacing sets word spacing. OneCSS font property (Font)Property description CSSFont sets all font attributes in a declaration. OneFont-family specifies the font family of text. OneFont-size specifies the font size of the text. OneFont-size-adjust specifies the aspect value for an element. Two Font-stretch shrinks or stretches the current font family. Two Font-style specifies the font style of the text. OneFont-variant specifies the font style of the text. OneFont-weight specifies the size of the font. OneCSS outer distance attribute (Margin)Property description CSSMargin sets all external distance attributes in a statement. OneMargin-bottom sets the lower outer margin of the element. OneMargin-left sets the left outer margin of the element. OneMargin-right set the elements of the right margin. OneMargin-top set the elements of the margin. OneCSS inner margin attribute (Padding)Property description CSSPadding sets all internal margin attributes in a declaration. OnePadding-bottom sets the inner margin of the element. OnePadding-left sets the left inner margin of the element. OnePadding-right sets the right inner margin of the element. OnePadding-top sets the upper margin of the element. OneCSS list attribute (List)Property description CSSList-style sets all of the list properties in a declaration. OneList-style-image sets the image to list item tags. OneList-style-position sets the placement position of the list item flag. OneList-style-type sets the list item label type. OneMarker-offset 2Content generation (Generated, Content)Property description CSSContent and before, and after pseudo elements are used in conjunction to insert the generated content. TwoCounter-increment increments or decrements one or more counters. TwoCounter-reset creates or resets one or more counters. TwoQuotes sets the quotation marks for nested references. TwoCSS size attribute (Dimension)Property description CSSHeight sets element height. OneMax-height sets the maximum height of the element. TwoMax-width sets the maximum width of the element. TwoMin-height sets the minimum height of the element. TwoMin-width sets the minimum width of the element. TwoWidth sets the width of the element. OneCSS location attribute (Positioning)Property description CSSBottom sets the offset between the outer margin margin of the locating element and the lower boundary of the block. TwoClear specifies which side of the element does not allow other floating elements. OneClip tailoring absolute positioning elements. TwoCursor specifies the type (shape) of the cursor to display. Two Display specifies the type of box that the element should generate. OneFloat specifies whether the box should float. OneLeft sets the offset between the left outer margin margin of the positioning element and the left boundary of the block containing it. TwoOverflow specifies what happens when the contents overflow element box. TwoPosition specifies the location type of the element. TwoRight set the location element right margin contains the offset between the block boundaries with the right boundary. TwoTop positioning elements contain margin boundaries with theoffset between the block boundary. TwoVertical-align sets the vertical alignment of the elements. OneVisibility specifies whether the element is visible. TwoZ-index sets the stacking order of elements. TwoCSS print property (Print)Property description CSSOrphans sets the minimum number of rows that must be left at the bottom of the page when elements are paged inside. TwoThe paging behavior after the page-break-after sets the element. TwoPage-break-before paging behavior before setting elements. TwoPage-break-inside sets the paging behavior inside the element. TwoWidows sets the minimum number of rows that must be reserved at the top of the page when elements are paged inside. TwoCSS table attribute (Table)Property description CSSBorder-collapse specifies whether to merge the table borders. TwoBorder-spacing specifies the distance between the borders of adjacent cells. TwoCaption-side specifies the location of the title of the form. Twobackgrounds on the empty cells in the table. TwoTable-layout sets the layout algorithm for the table. TwoCSS pseudo class (Pseudo-classes)Property description CSS:active adds styles to elements that are activated. One:focus adds styles to elements that have the keyboard input focus. TwoHover: when a mouse is suspended above an element, add a style to the element. One:link adds styles to an unexpected link. One:visited adds styles to links that have been accessed. One:first-child adds a style to the first child element of the element. Two:Lang adds a style to the element with the specified Lang attribute. Two伪元素(css pseudo elements.属性描述cssfirst letter向文本的第一个字母添加特殊样式.first line向文本的首行添加特殊样式.2. before在元素之前添加内容.:after在元素之后添加内容.production打印属性打印html web我们可以借助打印属性让打印文档总是会出现问题.在css2中,内容更容易一些.属性描述值设置元素放在页面底部时所允许的最少文本行数)children.设置是否在内容区之外但是在画布的可打印区域内放〃十字标志marks”.请注意,css2. 1已删除该属性.none cropcross这个属性与属性结合可以指定打印一个元素时所用的特定页面类型page size.请注意,css2. 1已删除该属性.auto identificationpage break after driving设置元素后是否应当放置分页符. alwaysnewleftrightpage break before driving设置元素前否应当放置分页符.alwaysnewleftright page break inside car设置元素内部是否应当放置分页符.newsize利用这个属性,创作人员可以声明打印一个元素时所用页框的大小和方向.它可以与page结合使用.不过并不要求一定如此.请注意,css2. 1已删除该属性.autoportraitlandscapeon设置元素放在页面顶部时所允许的最少文本行数.)。

常用CSS标签及属性对照表

常用CSS标签及属性对照表

常用的CSS 标签标记属性翻译注释1、字体属性(type)font-family (使用什么字体)font-style(字体的样式,是否斜体):normal/italic/obliquefont-variant (字体大小写):normal/small-capsfont-weight (字体的粗细):normal/bold/bolder/lithterfont-size(字体的大小):absolute-size/relative-size/length/percentage2、颜色和背景属性(backgroud)color(定义前景色,例如:p{color:red})background-color ( 定义背景色)background-imag e(定义背景图片)background-repeat( 背景图案重复方式):repeat-x/repeat-y/no-repeatbackground-attachment (设置滚动):scroll( 滚动)/fixe( 固定的)background-position( 背景图案的初始位置):percentage/length/top/left/right/bottom3、文本属性:(block)定义间距:word-spacing(单词之间的距离)letter-spacing(字母之间的距离)text-decoration (定义文字的装饰):nore/underline/overline/line-through/blinkvertical-align ( 元素在垂直方向的位置) :baseline( 基线)/sub/super/top/text-top/middle/bottom/text-bottomtext-transform ( 使文本转换为其它方式) :capitalize( 大写)/uppercase(首字母大写)/lowercase( 小写)/nonetext-align (文字的对齐):left/right/center/justifytext-indent( 文本的首行缩进)length/percentageline-height( 文本的行高):normal/numbet/lenggth/percentage( 百分比)定义超链接:a:link {color:green;text-decoration:nore}( 未访问过的状态) a:visited {color:ren;text-decoration:underline;16pt}( 访问过的状态)a:hover {color:blue;text-decoration:underline;16pt}( 鼠标激活的状态)4、块属性(block)边距属性:margin-top (设置顶边距)margin-right( 设置右边距)margin-bottom (设置底边距)margin-left (设置左边距)填充距属性:padding-top 设置顶端真充距)padding-right 设置顶端真充距)padding-bottom 设置顶端真充距)padding-left 设置顶端真充距)5、边框属性(border )border-top-width (顶端边框宽度)border-right-width (右端边框宽度)border-bottom-width (底端边框宽度)border-left-width (d 左边框宽度)border-width (一次定义边框宽度)border-color (设置边框颜色)border-style(设置边框样式)border-top (一次定义顶端各种属性)border-right (一次定义右端各种属性)border-bottom (一次定义底端各种属性)border-left (一次定义左端各种属性)图文混排:width (定义宽度属性)height(定义高度属性)float (文字环绕在一个元素的四周)clear(定义某一边是否有环绕)6、项目符号和编号(list)display(定义是否显示)white-space(怎样处理空白部分):normal/pre/nowraplist-style-type(在列表前加项目符号)disc( 圆点)/circle( 圈)/square(方形)/decima l (阿拉伯数字)/lower-roman ( 小写罗马数字)/upper-roman ( 大写罗马数字) /lower-alpha (小写英文字母)/upper-alpha (大写英文字母)/norelist-style-tyle(在列表前加图案): <url>/nonelist-style-position(决定列表项中第二行的起邕位置)list-style( 一次性定义所有属性)7、定位(positioning)即层属性Type:设定对象的定位方式。

css中文对照手册

css中文对照手册

边框:border-style none :无轮廓。

border-color 与border-width 将被忽略,hidden :隐藏边框。

dotted :点状轮廓。

dashed :虚线轮廓。

solid :实线轮廓double :双线轮廓。

两条单线与其间隔的和等于指定的border-width 值,groove :3D 凹槽轮廓。

ridge :3D 凸槽,轮廓。

inset :3D 凹边轮廓。

outset :3D 凸边轮廓。

border-radius : 设置对象使用圆角边框 <length>:用长度值设置对象的圆角半径长度。

不允许负值 <percentage>:用百分比设置对象的圆角半径长度。

不允许负值 这两个对象一般为10px ;border-top-right-radiu s设置对象右上角圆角边框 border-top-left-radius 设置对象左上角圆角边框 border-bottom-left-rad ius设置对象左下角圆角边框border-bottom-right-ra dius 设置对象右下角圆角边框背景:属性 简介background 复合属性。

设置对象的背景特性 background-color 设置对象的背景颜色background-image设置对象的背景图像none :无背景图。

<url>:使用绝对或相对地址指定背景图像。

background-repeat 设置对象的背景图像如何铺排填充repeat-x :背景图像在横向上平铺 repeat-y :背景图像在纵向上平铺 repeat :背景图像在横向和纵向平铺 no-repeat :背景图像不平铺 round :背景图像自动缩放直到适应且填充满整个容器。

(CSS3)space :背景图像以相同的间距平铺且填充满整个容器或某个方向。

(CSS3)background-attachment 设置对象的背景图像是随对象内容滚动还是固定的fixed :背景图像相对于窗体固定。

CSS属性大全

CSS属性大全

CSS属性⼤全1. ⽂字属性「字体族科」(font-family),设定时,需考虑浏览器中有⽆该字体。

「字体⼤⼩」(font-size),注意度量单位。

《绝对⼤⼩》|《相对⼤⼩》|《长度》|《百分⽐》(⼀般设置双数)「字体加粗」(font-weight),除了 normal(正常)、bold(粗体)、bolder(特粗)、lighter(细体)外,还有9种以像素为度量为单位的设置⽅式(100,200,300,400,500,600,700,800,900)。

「字体风格」(font-style),也就是字型。

(normal : 正常的字体italic : 斜体。

对于没有斜体变量的特殊字体,将应⽤obliqueoblique : 倾斜的字体)「字体变形」(font-variant),字体变形属性决定了字体显⽰是normal (普通) ,还是Small-caps(⼩型⼤写字母)当⽂字中所有字母都是⼤写的时候,⼩型⼤写字母(值)会显⽰⽐⼩写字母稍⼤的⼤写字符。

「字体」(font),《字体风格》|《字体变形》|《字体加粗》|《字体⼤⼩》|《⾏⾼》|《字体族科》2. ⽂本属性「⽂字间距」(word-spacing),主要⽤于控制⽂字间相隔的距离。

有正常(normal)和值(⾃定义间隔值)两种选择⽅式。

「字母间距」(letter-spacing),其作⽤与字符间距类似,也有正常(normal)和值(⾃定义间隔值)两种选择⽅式。

「垂直对齐」(vertical-align),控制⽂字或图像相对于其母体元素的垂直位置。

如将⼀个2×3像素的GIF图像同其母体元素⽂字的顶部垂直对齐,则该GIF图像将在该⾏⽂字的顶部显⽰。

共有基线(baseline,将元素的基准线同母体元素的基准线对齐)、下标(sub,将元素以下标的形式显⽰),上标(super,将元素以上标的形式显⽰)、顶部(top ,将元素顶部同最⾼的母体元素对齐)、⽂本顶对齐(text-top,将元素的顶部同母体元素⽂字的顶部对齐)、中线对齐(middle,将元素的中点同母体元素的中点对齐)、底部(bottom,将元素的底部同最低的母体元素对齐)及值(⾃定义)等9种选择。

CSS参考手册CSS属性组明细对照表.pdf

CSS参考手册CSS属性组明细对照表.pdf

设置左边框的宽度。
1
border-right
在一个声明中设置所有的右边框属性。
1
border-right-color
设置右边框的颜色。
2
border-right-style
设置右边框的样式。
2
border-right-width
设置右边框的宽度。
1
border-style
设置四条边框的样式。
1
border-top
overflow-x
如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪。 3
overflow-y
如果内容溢出了元素内容区域,是否对内容的上/下边缘进行裁剪。 3
overflow-style
觃定溢出元素的首选滚动方法。
3
rotation
围绕由 rotation-point 属性定义的点对元素进行旋转。 3
设置下边框的样式。
2
border-bottom-width
设置下边框的宽度。
1
border-color
设置四条边框的颜色。
1
border-left
在一个声明中设置所有的左边框属性。
1
border-left-color
设置左边框的颜色。
2
border-left-style
设置左边框的样式。
2
border-left-width
3
border-top-right-radius
定义边框右下角的形状。
3
box-decoration-break
3
box-shadow
向方框添加一个或多个阴影。
3
内边距属性(Padding)

图解CSS的padding,margin,border属性(详细介绍及举例说明)

图解CSS的padding,margin,border属性(详细介绍及举例说明)

2009-03-22 04:55图解CSS的padding,margin,border属性(详细介绍及举例说明)图解CSS的padding,margin,border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。

盒模型主要定义四个区域:内容(content)、边框距(padding)、边界(border)和边距(margin)。

对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次、关系和相互影响。

这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。

∙margin:层的边框以外留的空白∙background-color:背景颜色∙background-image:背景图片∙padding:层的边框到层的内容之间的空白∙border:边框∙content:内容padding、margin两个重要属性的详细介绍及举例说明本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键.注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin 和padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混淆margin和padding的概念.如果有一点Html基础的话, 就应该了解一些基本元素(Element), 如p, h1~h6, br, div, li, ul, img等. 如果将这些元素细分, 又可以分别归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素.1. Block-level element: 指能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔. 常用的块级元素包括: p, h1~h6, div, ul等;2. Inline element: 指依附其他块级元素存在, 紧接于被联元素之间显示, 而不换行. 常用的内联元素包括: img, span, li, br等;3. Top-level element: 包括html, body, frameset, 表现如Block-level element, 属于高级块级元素.块级元素是构成一个html的主要和关键元素, 而任意一个块级元素均可以用Box model来解释说明.Box Model: 任意一个块级元素均由content(内容), padding, background(包括背景颜色和图片), border(边框), margin五个部分组成. 立体图如下(Fig.1):该立体图引自:/url.asp?url=/ (Under the Creative Commons License)平面图如下(Fig. 2):根据以上两图, 相信大家对于Box model会有个直观的认识.以下说明margin和padding属性:1. Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的, 对于Fig. 2所示的上右下左margin值均为40px, 因此代码为:margin-top: 40px;margin-right: 40px;margin-bottom: 40px;margin-left: 40px;根据上, 右, 下, 左的顺时针规则, 简写为margin: 40px 40px 40px 40px;为便于记忆, 请参考下图:当上下, 左右margin值分别一致, 可简写为:margin: 40px 40px;前一个40px代表上下margin值, 后一个40px代表左右margin值.当上下左右margin值均一致, 可简写为:margin: 40px;2. Padding: 包括padding-top, padding-right, padding-bottom,padding-left, 控制块级元素内部, content与border之间的距离, 其代码, 简写请参考margin属性的写法.至此, 我们已经基本了解margin和padding属性的基本用法. 但是, 在实际应用中, 却总是发生一些让你琢磨不透的事, 而它们又或多或少的与margin有关.注: 当你想让两个元素的content在垂直方向(vertically)分隔时, 既可以选择padding-top/bottom, 也可以选择margin-top/bottom, 再此Jorux建议你尽量使用padding-top/bottom来达到你的目的, 这是因为css中存在Collapsing margins(折叠的margins)的现象.Collapsing margins: margins折叠现象只存在于临近或有从属关系的元素, 垂直方向的margin中. 文字说明可能让人费解, 下面用一个例子说明margin-collapsing现象.例: 在html文件的<body></body>之间写入如下代码:<div id=”ID1″><h1 id=”ID2″>Margins of ID1 and ID2 collapse vertically.<br/>元素ID1与ID2的margins在垂直方向折叠.</h1></div>在与其外联的css文件中写入:* {padding:0;margin:0;}#ID1 {background-color: #333;color: #FFF;margin-top: 10px;margin-bottom: 10px;}#ID2 {font: normal 14px/1.5 Verdana, sans-serif;margin-top: 30px;margin-bottom: 30px;border: 1px solid #F00;}代码解释:1. 在html写入的代码表示, 在html中插入id分别为ID1和ID2的两个块级元素div, h1;2. *{padding:0; margin:0;}: 使浏览器默认的元素padding和margin值均归零;3. #ID1{…}: 使id为ID1的元素div的背景颜色为#333, 字体颜色为#FFF, margin-top/bottom为10px;4. #ID2{…}: 使id为ID2的元素h1的字体大小为14px, verdana字体, 行高为字体高的150%, 正常粗细. margin-top/bottom为30px, 边框为1px宽, 红色实线.依据以上解释, 我们应该得到如下效果(Fig. 3):即ID1的margin-top/bottom=ab=ef=10px;ID2的margin-top/bottom=bc=de=30px;但用浏览器打开html文件, 却得到Example4的效果, 如下图(Fig. 4):即ab=cd=30px, ID1的margin-top/bottom=10px被折叠了, 而且ID1应有的margin黑色背景也一同被折叠消失了.为什么会折叠: 造成以上现象的原因是, 我们在css中并没有声明id为ID1的元素div的height(高), 因此它的高便被设为auto(自动)了. 一旦其值被设为auto, 那么浏览器就会认为它的高为子元素ID2的border-top到border-bottom之间的距离, 即Fig. 4中bc的长度, 所以子元素ID2的margin-top/bottom(30px)就伸出到了父元素ID1之外, 出现了Fig. 4中ab与cd之间的空白区域. 因此父元素ID1的margin-top/bottom因子元素的”红杏出墙”而被折叠消失了.如何解决折叠问题: 可能大家最初想到的办法就是根据折叠发生的原因—auto, 来解决问题. 但是, 在实际操作中, 某些元素如div, h1, p等, 我们是不可能预先知道它的高是多少的, 因此在css文件中是不能常规通过声明元素的高来解决折叠问题.我们需要在css文件中加入如下代码(红色部分):#ID1 {background-color: #333;color: #FFF;margin-top: 10px;margin-bottom: 10px;padding-top:1px;padding-bottom:1px;}或是:#ID1 {background-color: #333;color: #FFF;margin-top: 10px;margin-bottom: 10px;border-top:1px solid #333;border-bottom:1px solid #333;}通过增加以上代码, 便可使浏览器重新计算ID1的高, 使其为子元素ID2的margin-top/bottom外缘(outer top/bottom)之间的距离, 即Fig. 3中be的距离.附加:CSS中Padding 属性中参数个数的定义,例如:body { padding: 20px;}body { padding: 20px 30px; }body { padding: 20px 30px 10px; }body { padding: 20px 30px 10px 20px; }详细说明如下:如果只提供一个,将用于全部的四条边;如果提供两个,第一个用于上-下,第二个用于左-右;如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。

CSS基本语法

CSS基本语法

CSS基本语法CSS常⽤选择器1、页⾯中,所有的CSS代码,需要写⼊到<style></style>标签中。

style标签的type属性应该选择text/css2、CSS 注释CSS修改页⾯中的所有标签,必须借助选择器选中。

选择器中,可以写多对CSS属性,⽤{}包裹:每个属性名与属性值之间⽤:分隔,多对属性之间,必须⽤;分隔。

3、【CSS常⽤选择器】①标签选择器写法: HTML标签名{}作⽤:可以选中页⾯中,所有与选择器同名的HTML标签。

②类选择器(class选择器)写法: .class名{}调⽤:在需要调⽤选择器样式的标签上,使⽤class="class名"调⽤选择器优先级: >标签选择器③ID 选择器写法: #ID名{}调⽤:需要调⽤样式的标签,起⼀个id="ID名"优先级: ID选择器>class选择器注意:⼀个页⾯中,不能出现同名ID【Class选择器与ID选择器的区别】写法不同:class选择器⽤.声明,ID选择器⽤#声明;优先级不同: ID选择器>class选择器作⽤范围不同: class选择器可以多次调⽤,ID选择器只能使⽤⼀次。

【选择器的命名规范】只能有字母、数字、下划线、减号组成;开头不能是数字。

也不能是只有⼀个减号。

⼀般,起名要求有语义,使⽤英⽂单词与数字的组合。

④通⽤选择器写法: *{}作⽤:可以选中页⾯中所有的HTML标签。

优先级:最低⑤并集选择器写法:选择器1,选择器2,……,选择器n{}⽣效规则:多个选择器取并集,只要标签满⾜其中任意⼀个选择器,样式即可⽣效。

⑥交集选择器写法:选择器1选择器2……选择器n{} 所有选择器紧挨着,没有分隔⽣效规则:多个选择器取交集,则必须满⾜所有选择器的要求,才能⽣效⑦后代选择器写法:选择器1 选择器2 …… 选择器n{} 选择器之间空格分隔⽣效规则:只要满⾜,后⼀选择器是前⼀个选择器的后代,即可成效。

CSS属性大全(完整版)

CSS属性大全(完整版)

参数:
name : 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格,则应使用引号括起
第二种声明方式使用所列出的字体序列名称。如果使用fantasy序列,将提供默认字体序列
说明:
设置或检索用于对象中文本的字体名称序列。
默认值由浏览器确定。
序列可包含嵌入字体字体。请参阅@font-face规则。
p { font-style: italic; }
p { font-style: oblique; }
font-weight : normal | bold | bolder | lighter | number
参数:
normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
示例:
p { font-family: arial, courier; font-size-adjust: none; }
p { font-family: verdana, courier; font-size-adjust: .56; }
font-size-adjust : none | number
参数:
normal : 正常的字体
italic : 斜体。对于没有斜体变量的特殊字体,将应用oblique
oblique : 倾斜的字体
说明:
设置或检索对象中的字体样式。
对应的脚本特性为fontStyle。请参阅我编写的其他书目。
示例:
p { font-style: normal; }
对应的脚本特性为fontFamily。请参阅我编写的其他书目。
示例:
div.fixedwidth { font-family: Courier, "Courier New", monospace }

DW-CS5-CSS规则英汉对照表

DW-CS5-CSS规则英汉对照表

一、类型Font-family:字体Font-size:字体大小Font-style:字体风格,如斜体、正常等Line-height:行高(用来设定字行间距)Font-weight:字体浓淡Font-variant:字体变量(用来设定字体是正常显示,还是以小型大写字母显示)Text-transform:文本转换(用来设定字体的大小写转换)Text-decoration(字体装饰):underline下划线Overline上划线line-through线-穿过blink闪光none 无二、背景Background-color:背景颜色Background-image:背景图片Background-repeat:背景重复Background-attachment:背景附着(用来设定背景图片是否随文档滚动)Background-position:背景位置XBackground-position:背景位置Y三、区块Word-spacing:词间距Letter-spacing:字符间距Vertical-align:垂直对齐Text-align:水平对齐Text-indent:文本缩进White-space:空白Display:显示四、方块Width:宽度Height:高度Float:浮动Clear:规定元素的哪一侧不允许出现其他浮动元素Padding间隙(用来填充一些空白,参考如下图):Top 上Right 右Bottom 下Left 左Margin:边距(用来设定边距的宽度)五、边框Style:样式(如:虚线等)Width:宽度Color:颜色六、列表List-style-type:列表样式类型(用来设定列表项标记(list-item marker)的类型)List-style-image:列表列表样式图片(用来设定列表样式图片标记的地址)List-style-Position:列表样式位置(用来设定列表样式标记的位置)七、定位Position:位置Width:宽度Height:高度Visibility:规定元素是否可见(即使不可见,但仍占用空间,建议使用display来创建不占页面空间的元素)Z-index:设置元素的堆叠顺序(该属性设置一个定位元素沿Z轴定义为垂直延伸到显示区的轴,如果为正数,则离用户更近,为负数则表示离用户更远)Overflow:规定当内容溢出元素框时发生的事情Placement:放置Clip:裁剪绝对定位元素八、扩展Page-break-before:属性设置元素前Page-breaking行为Page-break-after:属性设置元素后Page-breaking行为Cursor:规定要显示的光标的类型(鼠标放在指定位置鼠标的形状)Filter:过滤友情提醒:尽量少的使用分页属性,并且在表格、浮动元素、带有边框的元素中使用分页属性。

CSS基础以及属性大全

CSS基础以及属性大全

CSS基础以及属性⼤全⼀、CSS偷个懒,啥是CSS我就不介绍啦⼆、CSS语法 CSS语法:选择符{属性:属性值;属性:属性值;}选择符表⽰要定义样式的对象,可以是元素本⾝,也可以是⼀类元素或者制定名称的元素.属性:属性是指定选择符所具有的属性,它是css的核⼼,css2共有150多个属性属性值:属性值包括法定属性值及常见的数值加单位,如25px,或颜⾊值等。

说明:1)每个CSS样式由两部分组成,即选择符和声明,声明⼜分为属性和属性值;2)属性必须放在花括号中,属性与属性值⽤冒号连接。

3)每条声明⽤分号结束。

4)当⼀个属性有多个属性值的时候,属性值与属性值不分先后顺序。

5)在书写样式过程中,空格、换⾏等操作不影响属性显⽰。

css中的注释:/* 我是css的注释 */三、样式的创建(内部样式外部样式内联样式)、两种引⼊外部样式表的区别A、内部样式语法:<style type="text/css">/*css语句*/</style>注:使⽤style标记创建样式时,最好将该标记写在<head></head>;B、外部样式*⽅法⼀:外部样式表的创建:<link rel="stylesheet" type="text/css" href="⽬标⽂件的路径及⽂件名全称" />说明:使⽤link元素导⼊外部样式表时,需将该元素写在⽂档头部,即<head>与</head>之间。

rel(relation):⽤于定义⽂档关联,表⽰关联样式表;type:定义⽂档类型;*⽅法⼆:外部样式表的导⼊<style type="text/css">@import url(⽬标⽂件的路径及⽂件名全称);</style>注:@和import之间没有空格 url和⼩括号之间也没有空格;必须结尾以分号结束;C、内联样式(⾏间样式,⾏内样式,嵌⼊式样式)语法:<标签 style="属性:属性值;属性:属性值;"></标签>四、CSS选择符(选择器)常⽤的选择符有⼗种左右类型选择符,id选择符,class选择符,通配符,群组选择符、包含选择符,伪类选择符(伪类选择符CSS中已经定义好的选择器,不能随便取名),伪对象选择符(设置在对象后发⽣的内容。

CSS属性大全完整版

CSS属性大全完整版

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; (下标)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; (大写字母)位置list-style-position:outside; (外) inside; (里)图像list-style-image: url(..);定位属性:(Position)位置Position:absolute; 绝对位置|relative; 相对位置|static; 静止可见性visibility:inherit; 继承父元素| visible; 可见| hidden; 隐藏内容超出时overflow:visible; 可见| hidden; 隐藏| scroll; 滚动| auto; 自动裁切clip: rect(12px,auto,12px,auto)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 水平对齐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; /*实心圆形符号*/list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/list-style-image:url(/dot.gif); /*图片式符号*/list-style-position: outside; /*凸排*/list-style-position:inside; /*缩进*/四、CSS背景样式:background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/background-position : center; /*居中对齐*/五、CSS连接属性:a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标经过链接*/鼠标光标样式:链接手指CURSOR: hand十字体cursor:crosshair箭头朝下cursor:s-resize十字箭头cursor:move箭头朝右cursor:move加一问号cursor:help箭头朝左cursor:w-resize箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize箭头朝左上cursor:nw-resize文字I型cursor:text箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize漏斗cursor:wait光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}六、CSS框线一览表:border-top : 1px solid #6699cc; /*上框线*/border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下: border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*立体内凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用:<div><form><p>用户: <input type="text" class="text"></p>...</form></div>type属性取值单行文本域<p>用户: <input type="text" class="text"></p><input type="text" size="" maxlength="">单行的文本输入区域,size与maxlength属性用来定义此种输入区域显示的尺寸大小与输入的最大字符数多行文本域<p> <textarea cols="45" rows="5"></textarea></p>Cols:字符宽度rows:行数提交重置<p> <input type="submit" id="按钮" value="提交" /><input type="reset" id="重置" value="重置" /></p>提交到服务器的按钮,当这个按钮被点击时,就会连接到表单form属性action指定的url地址。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

规定如何对齐框的子元素。 3 规定框的子元素的显示方向。 3 规定框的子元素是否可伸缩。 3 将可伸缩元素分配到柔性分组。 3 规定当超出父元素框的空间时,是否换行显示。 3 规定框的子元素的显示次序。 3 规定框的子元素是否应水平或垂直排列。 3 规定水平框中的水平位置或者垂直框中的垂直位置。 3 描述 CSS 规定动画。 3 所有动画属性的简写属性,除了 animation-play-state 属性。 3 规定 @keyframes 动画的名称。 3 规定动画完成一个周期所花费的秒或毫秒。 3 规定动画的速度曲线。 3 规定动画何时开始。 3 规定动画被播放的次数。 3
CSS属性学习
第1页 共6页
CSS 参考手册(CSS 属性组)
background-color background-image background-position background-repeat background-clip background-origin background-size 边框属性(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-outset border-image-repeat border-image-slice border-image-source border-image-width border-radius
CSS属性学习
设置元素的背景颜色。 设置元素的背景图像。 设置背景图像的开始位置。 设置是否及如何重复背景图像。 规定背景的绘制区域。 规定背景图片的定位区域。 规定背景图片的尺寸。 描述 在一个声明中设置所有的边框属性。 在一个声明中设置所有的下边框属性。 设置下边框的颜色。 设置下边框的样式。 设置下边框的宽度。 设置四条边框的颜色。 在一个声明中设置所有的左边框属性。 设置左边框的颜色。 设置左边框的样式。 设置左边框的宽度。 在一个声明中设置所有的右边框属性。 设置右边框的颜色。 设置右边框的样式。 设置右边框的宽度。 设置四条边框的样式。 在一个声明中设置所有的上边框属性。 设置上边框的颜色。 设置上边框的样式。 设置上边框的宽度。 设置四条边框的宽度。 在一个声明中设置所有的轮廓属性。 设置轮廓的颜色。 设置轮廓的样式。 设置轮廓的宽度。 定义边框左下角的形状。 定义边框右下角的形状。 简写属性,设置所有 border-image-* 属性。 规定边框图像区域超出边框的量。
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
1 1 1 1 3 3 3 CSS 1 1 2 2 1 1 1 2 2 1 1 2 2 1 1 1 2 2 1 1 2 2 2 2 3 3 3 3 3 3 3 3ቤተ መጻሕፍቲ ባይዱ3
规定图像边框的向内偏移。 规定用作边框的图片。 规定图片边框的宽度。 简写属性,设置所有四个 border-*-radius 属性。
CSS 参考手册(CSS 属性组)
字体属性(Font) font font-family font-size font-size-adjust font-stretch font-style font-variant font-weight 颜色属性(Color) color-profile opacity rendering-intent 文本属性(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-outline text-overflow text-shadow text-wrap word-break word-wrap 背景属性(Background) background background-attachment 描述 CSS 在一个声明中设置所有字体属性。 1 规定文本的字体系列。 1 规定文本的字体尺寸。 1 为元素规定 aspect 值。 2 收缩或拉伸当前的字体系列。 2 规定文本的字体样式。 1 规定是否以小型大写字母的字体显示文本。 1 规定字体的粗细。 1 描述 CSS 允许使用源的颜色配置文件的默认以外的规范。 3 规定书签的级别。 3 允许使用颜色配置文件渲染意图的默认以外的规范。 3 描述 CSS 设置文本的颜色。 规定文本的方向 / 书写方向。 设置字符间距。 设置行高。 规定文本的水平对齐方式。 规定添加到文本的装饰效果。 规定文本块首行的缩进。 规定添加到文本的阴影效果。 控制文本的大小写。 设置文本方向。 规定如何处理元素中的空白。 设置单词间距。 规定标点字符是否位于线框之外。 规定是否对标点字符进行修剪。 设置如何对齐最后一行或紧挨着强制换行符之前的行。 向元素的文本应用重点标记以及重点标记的前景色。 1 2 1 1 1 1 1 2 1 2 1 1 3 3 3 3 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3 规定文本的轮廓。 3 规定当文本溢出包含元素时发生的事情。 3 向文本添加阴影。 3 规定文本的换行规则。 3 规定非中日韩文本的换行规则。 3 允许对长的不可分割的单词进行分割并换行到下一行。 3 描述 CSS 在一个声明中设置所有的背景属性。 设置背景图像是否固定或者随着页面的其余部分滚动。 1 1
CSS属性学习
第3页 共6页
CSS 参考手册(CSS 属性组)
animation-direction animation-play-state animation-fill-mode Box 属性 overflow-x overflow-y overflow-style rotation rotation-point Paged Media 属性 fit fit-position image-orientation page size Content for Paged Media 属性 bookmark-label bookmark-level bookmark-target float-offset hyphenate-after hyphenate-before hyphenate-character hyphenate-lines hyphenate-resource hyphens image-resolution marks string-set 3 3 3 CSS 如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪。 3 如果内容溢出了元素内容区域,是否对内容的上/下边缘进行裁剪。 3 规定溢出元素的首选滚动方法。 3 围绕由 rotation-point 属性定义的点对元素进行旋转。 3 定义距离上左边框边缘的偏移点。 3 描述 CSS 示意如何对width和height属性均不是auto的被替换元素进行缩放。 3 定义盒内对象的对齐方式。 3 规定用户代理应用于图像的顺时针方向旋转。 3 规定元素应该被显示的页面特定类型。 3 规定页面内容包含框的尺寸和方向。 3 描述 CSS 规定书签的标记。 3 规定书签的级别。 3 规定书签链接的目标。 3 将元素放在 float 属性通常放置的位置的相反方向。 3 规定连字单词中连字符之后的最小字符数。 3 规定连字单词中连字符之前的最小字符数。 3 规定当发生断字时显示的字符串。 3 指示元素中连续断字连线的最大数。 3 规定帮助浏览器确定断字点的外部资源(逗号分隔的列表)。 3 设置如何对单词进行拆分,以改善段落的布局。 3 规定图像的正确分辨率。 3 向文档添加裁切标记或十字标记。 3 3 内容生成(Generated Content) 描述 CSS 与 :before 以及 :after 伪元素配合使用,来插入生成内容。 content 2 counter-increment 递增或递减一个或多个计数器。 2 counter-reset 创建或重置一个或多个计数器。 2 quotes 设置嵌套引用的引号类型。 2 允许被替换元素仅仅是对象的矩形区域,而不是整个对象。 3 crop 从流中删除元素,然后在文档中后面的点上重新插入。 3 move-to 确定元素基于页面的 occurrence 应用于计数器还是字符串值。 page-policy 3 Grid 属性 描述 CSS grid-columns 规定网格中每个列的宽度。 3 grid-rows 规定网格中每个列的高度。 3 规定动画是否在下一周期逆向地播放。 规定动画是否正在运行或暂停。 规定对象动画时间之外的状态。 描述
第2页 共6页
CSS 参考手册(CSS 属性组)
border-top-left-radius border-top-right-radius box-decoration-break box-shadow 内边距属性(Padding) padding padding-bottom padding-left padding-right padding-top 外边距属性(Margin) margin margin-bottom margin-left margin-right margin-top 尺寸属性(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 动画属性(Animation) @keyframes animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count 定义边框左上角的形状。 定义边框右下角的形状。 向方框添加一个或多个阴影。 描述 在一个声明中设置所有内边距属性。 设置元素的下内边距。 设置元素的左内边距。 设置元素的右内边距。 设置元素的上内边距。 描述 在一个声明中设置所有外边距属性。 设置元素的下外边距。 设置元素的左外边距。 设置元素的右外边距。 设置元素的上外边距。 描述 设置元素高度。 设置元素的最大高度。 设置元素的最大宽度。 设置元素的最小高度。 设置元素的最小宽度。 设置元素的宽度。 描述 3 3 3 3 CSS 1 1 1 1 1 CSS 1 1 1 1 1 CSS 1 2 2 2 2 1 CSS
相关文档
最新文档