css帮助文档(css怎么使用)

admin 225 0

大家好,今天小编来为大家解答css帮助文档这个问题,css怎么使用很多人还不知道,现在让我们一起来看看吧!

一、css是什么意思

css是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。

CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。

在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。

而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程序的缩减了页面的体积,减少下载的时间。

CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。

无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

样式规则是可应用于网页中元素,如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中,外部样式单保存在独立的文档中,网页通过一个特殊标签链接外部样式单。

名称CSS中的“层叠(cascading)”表示样式单规则应用于HTML文档元素的方式。具体地说,CSS样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果。

二、怎么建立css外部样式文件

CSS是一门指定文档该如何呈现给用户的语言。

在与前面相同的目录中,新建另一个文本文件。该文件将成为您的样式表。请将它命名为:style1.css

在您的CSS文件中,复制、粘贴下面的行,并保存该文件:

为将您的文档和样式表相连,请编辑您的HTML文件。并添加下面高亮的行:

保存该文件并刷新您的浏览器。该样式表将首字母显示为红色,如下所示:

范例中呈现的是标准HTML<link>标签嵌入css档案的写法,其中「rel="stylesheet" type="text/css"」所代表的意思,就是告诉浏览器要导入一个在外部的css档案,透过href导入名为xxxx.css的样式档案。

三、求css超文本语言属性

1、http://www.w3school.com.cn/cssref/index.asp给你个参考属性网址

2、animation所有动画属性的简写属性,除了 animation-play-state属性。 3

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

4、animation-duration规定动画完成一个周期所花费的秒或毫秒。 3

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

6、animation-delay规定动画何时开始。 3

7、animation-iteration-count规定动画被播放的次数。 3

8、animation-direction规定动画是否在下一周期逆向地播放。 3

9、animation-play-state规定动画是否正在运行或暂停。 3

10、animation-fill-mode规定对象动画时间之外的状态。 3

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

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

13、background-color设置元素的背景颜色。 1

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

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

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

17、background-clip规定背景的绘制区域。 3

18、background-origin规定背景图片的定位区域。 3

19、background-size规定背景图片的尺寸。 3

20、CSS边框属性(Border和 Outline)

21、border在一个声明中设置所有的边框属性。 1

22、border-bottom在一个声明中设置所有的下边框属性。 1

23、border-bottom-color设置下边框的颜色。 2

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

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

26、border-color设置四条边框的颜色。 1

27、border-left在一个声明中设置所有的左边框属性。 1

28、border-left-color设置左边框的颜色。 2

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

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

31、border-right在一个声明中设置所有的右边框属性。 1

32、border-right-color设置右边框的颜色。 2

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

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

35、border-style设置四条边框的样式。 1

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

37、border-top-color设置上边框的颜色。 2

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

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

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

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

42、outline-color设置轮廓的颜色。 2

43、outline-style设置轮廓的样式。 2

44、outline-width设置轮廓的宽度。 2

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

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

47、border-image简写属性,设置所有 border-image-*属性。 3

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

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

50、border-image-slice规定图像边框的向内偏移。 3

51、border-image-source规定用作边框的图片。 3

52、border-image-width规定图片边框的宽度。 3

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

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

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

56、box-shadow向方框添加一个或多个阴影。 3

57、overflow-x如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪。 3

58、overflow-y如果内容溢出了元素内容区域,是否对内容的上/下边缘进行裁剪。 3

59、overflow-style规定溢出元素的首选滚动方法。 3

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

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

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

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

64、bookmark-label规定书签的标记。 3

65、bookmark-level规定书签的级别。 3

66、bookmark-target规定书签链接的目标。 3

67、float-offset将元素放在 float属性通常放置的位置的相反方向。 3

68、hyphenate-after规定连字单词中连字符之后的最小字符数。 3

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

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

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

72、hyphenate-resource规定帮助浏览器确定断字点的外部资源(逗号分隔的列表)。 3

73、hyphens设置如何对单词进行拆分,以改善段落的布局。 3

74、image-resolution规定图像的正确分辨率。 3

75、marks向文档添加裁切标记或十字标记。 3

76、max-height设置元素的最大高度。 2

77、max-width设置元素的最大宽度。 2

78、min-height设置元素的最小高度。 2

79、min-width设置元素的最小宽度。 2

80、box-align规定如何对齐框的子元素。 3

81、box-direction规定框的子元素的显示方向。 3

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

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

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

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

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

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

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

89、font-family规定文本的字体系列。 1

90、font-size规定文本的字体尺寸。 1

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

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

93、font-style规定文本的字体样式。 1

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

95、content与:before以及:after伪元素配合使用,来插入生成内容。 2

96、counter-increment递增或递减一个或多个计数器。 2

97、counter-reset创建或重置一个或多个计数器。 2

98、quotes设置嵌套引用的引号类型。 2

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

100、move-to从流中删除元素,然后在文档中后面的点上重新插入。 3

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

102、grid-columns规定网格中每个列的宽度。 3

103、grid-rows规定网格中每个列的高度。 3

104、target简写属性,设置target-name、target-new以及target-position属性。 3

105、target-name规定在何处打开链接(链接的目标)。 3

106、target-new规定目标链接在新窗口还是在已有窗口的新标签页中打开。 3

107、target-position规定在何处放置新的目标链接。 3

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

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

110、list-style-position设置列表项标记的放置位置。 1

111、list-style-type设置列表项标记的类型。 1

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

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

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

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

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

117、marquee-direction设置移动内容的方向。 3

118、marquee-play-count设置内容移动多少次。 3

119、marquee-speed设置内容滚动得多快。 3

120、marquee-style设置移动内容的样式。 3

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

122、column-gap规定列之间的间隔。 3

123、column-rule设置所有 column-rule-*属性的简写属性。 3

124、column-rule-color规定列之间规则的颜色。 3

125、column-rule-style规定列之间规则的样式。 3

126、column-rule-width规定列之间规则的宽度。 3

127、column-span规定元素应该横跨的列数。 3

128、columns规定设置 column-width和 column-count的简写属性。 3

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

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

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

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

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

134、fit示意如何对width和height属性均不是auto的被替换元素进行缩放。 3

135、fit-position定义盒内对象的对齐方式。 3

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

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

138、size规定页面内容包含框的尺寸和方向。 3

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

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

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

142、display规定元素应该生成的框的类型。 1

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

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

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

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

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

148、vertical-align设置元素的垂直对齐方式。 1

149、visibility规定元素是否可见。 2

150、orphans设置当元素内部发生分页时必须在页面底部保留的最少行数。 2

151、page-break-after设置元素后的分页行为。 2

152、page-break-before设置元素前的分页行为。 2

153、page-break-inside设置元素内部的分页行为。 2

154、widows设置当元素内部发生分页时必须在页面顶部保留的最少行数。 2

155、border-collapse规定是否合并表格边框。 2

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

157、caption-side规定表格标题的位置。 2

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

159、table-layout设置用于表格的布局算法。 2

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

161、letter-spacing设置字符间距。 1

162、text-align规定文本的水平对齐方式。 1

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

164、text-indent规定文本块首行的缩进。 1

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

166、text-transform控制文本的大小写。 1

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

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

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

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

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

172、text-justify规定当 text-align设置为"justify"时所使用的对齐方法。 3

173、text-outline规定文本的轮廓。 3

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

175、text-wrap规定文本的换行规则。 3

176、word-break规定非中日韩文本的换行规则。 3

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

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

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

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

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

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

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

184、transition简写属性,用于在一个属性中设置四个过渡属性。 3

185、transition-property规定应用过渡的 CSS属性的名称。 3

186、transition-duration定义过渡效果花费的时间。 3

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

188、transition-delay规定过渡效果何时开始。 3

189、用户界面属性(User-interface)

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

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

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

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

194、nav-index设置元素的 tab键控制次序。 3

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

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

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

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

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

OK,本文到此结束,希望对大家有所帮助。