web学习—css样式表—css属性(一)
2012-08-19 15:54
218 查看
前面也已经学了css的基本语法。但是,我们仍然还是没法实际应用,因为对于前边提到的三种选择符,比较好理解,但是对于声明部分就比较困难了,最主要的原因还是我们知道了它的格式,可是具体声明的属性是什么呢?这方面确实很迷茫。所以,尽管还有许多的css语法要学习,但是我觉得还是先把一些属性学一下吧。毕竟 学习编程只有真正的去实际做些东西才会有更深的体会啊。再可以初步的编写一些和文档后再来学习那些剩余的语法。
opacity属性:定义透明度。取值为0.0~1.0。
background-image属性:定义背景图片,值为url(图片的url)或者none。图片推荐使用jpg,gif格式。
background-repeat属性:定义背景图片的重复方式,取值如下:
repeat: 平铺整个页面,左右与上下
repeat-x: 在x轴上平铺,左右
repeat-y: 在y轴上平铺,上下
no-repeat: 图片不重复
background-position属性:定义背景图片的位置,值为两个百分比或数值(带单位),top、left、center、right、bottom(可两两组
合使用)。
background-attachment属性:定义背景图片随滚动轴的移动方式,值为:scroll(随内容固定),fixed(背景图像固定)。
background属性:以上5个属性可以同时定义在这个属性中。
word-spacing属性:定义以空格间隔文字的间距,即空格本身的宽度。值为normal(正常)或者长度。
text-decoration属性:定义文本是否有划线以及划线的方式。取值如下:
none: 定义正常显示的文本。
underline: 定义有下划线的文本。
overline: 定义有上划线的文本。
line-through: 定义直线穿过文本。
blink: 定义闪烁的文本。
除了none外,其他的属性可以任意结合。
text-align属性:定义文本的对齐方式,值为:left、right、center、justify(对齐每行的文字)。
text-indent属性:定义文本首行的缩进。值为长度或这百分数。默认为0。
text-transform属性:定义文本的大小写状态(此属性对中文无意义)。值为
capitalize: 首字母大写。
lowercase: 小写。
uppercase: 大写。
none: 正常无变化 (默认)。
white-space属性:空格内元素的显示方式。取值如下:
normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)。
pre: 保持HTML源代码的空格与换行,等同与<pre>标签。
nowrap: 强制文本在一行,除非遇到<br />换行标签。
pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行。
pre-line: 同pre属性,但是遇到连续空格会被看作一个空格。
line-height属性:定义行高,值为normal(正常)、百分比或长度。
4、字体的属性:
font-family属性:定义使用的字体。取值如下:
字体名称,例如:font-family:Arial, "宋体", Tahoma; 定义多个字体是防止系统找不到定义的字体。
一般性字体名称:取值:serif,sans-serif,cursive,fantasy,monospace。
[b][b]Generic字体名与可取字体对照表[/b][/b]
font-size属性:定义字体的大小。取值如下:
绝对字体表示法:xx-small:最小、x-small:较小(h6)、small:小(h5)、medium:正常(默认值)(h4)、
large:大(h3)、x-large:较大(h2)、xx-large:最大(h1)。
相对字体表示法:larger与smaller,相对于父容器的字体进行相应调整。
长度表示法:长度值。
百分比表示法:相对于父容器中字体尺寸进行相应调整
font-type属性:定义字体显示的方式,值为normal(正常)、italic(斜体)、oblique(倾斜)。
font-weight属性:定义字体的粗细,取值为:
字体粗细的绝对值:100,200,300,400,500,600,700,800,900。
normal(正常,等同于400)。
bold(粗体,等同于 700)。
bolder(更粗)。
lighter(更细)。
font-variant属性:定义小型的大写字母字体,对中文没什么意义。值为normal(正常)、small-caps(小型的大写字母)。
font属性:以上5个属性可以同时定义在这个属性中。
对与许多讲css的书都有自己的顺序。我选的这个顺序还是借鉴与一个学习的网站,我觉得对于初学者,这是一个很里的顺序。这个网站是:http://www.dreamdu.com/css/ 。
1、前景色属性:
color属性:定义前景色,即文字的颜色。值为颜色名或者颜色值。opacity属性:定义透明度。取值为0.0~1.0。
2.背景色属性:
background-color属性:定义背景颜色,值为任何有效的颜色值或颜色名,transparent表示透明。background-image属性:定义背景图片,值为url(图片的url)或者none。图片推荐使用jpg,gif格式。
background-repeat属性:定义背景图片的重复方式,取值如下:
repeat: 平铺整个页面,左右与上下
repeat-x: 在x轴上平铺,左右
repeat-y: 在y轴上平铺,上下
no-repeat: 图片不重复
background-position属性:定义背景图片的位置,值为两个百分比或数值(带单位),top、left、center、right、bottom(可两两组
合使用)。
background-attachment属性:定义背景图片随滚动轴的移动方式,值为:scroll(随内容固定),fixed(背景图像固定)。
background属性:以上5个属性可以同时定义在这个属性中。
3、文本的属性:
letter-spacing属性:定义文本中字符的间距。值为normal(正常)或者长度。word-spacing属性:定义以空格间隔文字的间距,即空格本身的宽度。值为normal(正常)或者长度。
text-decoration属性:定义文本是否有划线以及划线的方式。取值如下:
none: 定义正常显示的文本。
underline: 定义有下划线的文本。
overline: 定义有上划线的文本。
line-through: 定义直线穿过文本。
blink: 定义闪烁的文本。
除了none外,其他的属性可以任意结合。
text-align属性:定义文本的对齐方式,值为:left、right、center、justify(对齐每行的文字)。
text-indent属性:定义文本首行的缩进。值为长度或这百分数。默认为0。
text-transform属性:定义文本的大小写状态(此属性对中文无意义)。值为
capitalize: 首字母大写。
lowercase: 小写。
uppercase: 大写。
none: 正常无变化 (默认)。
white-space属性:空格内元素的显示方式。取值如下:
normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)。
pre: 保持HTML源代码的空格与换行,等同与<pre>标签。
nowrap: 强制文本在一行,除非遇到<br />换行标签。
pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行。
pre-line: 同pre属性,但是遇到连续空格会被看作一个空格。
line-height属性:定义行高,值为normal(正常)、百分比或长度。
4、字体的属性:
font-family属性:定义使用的字体。取值如下:字体名称,例如:font-family:Arial, "宋体", Tahoma; 定义多个字体是防止系统找不到定义的字体。
一般性字体名称:取值:serif,sans-serif,cursive,fantasy,monospace。
[b][b]Generic字体名与可取字体对照表[/b][/b]
Generic font 名称 | 可以显示的字体 |
---|---|
serif | Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit |
sans-serif | MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica |
cursive | Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery |
fantasy | Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz |
monospace | Courier, MS Courier New, Prestige, Everson Mono |
font-size属性:定义字体的大小。取值如下:
绝对字体表示法:xx-small:最小、x-small:较小(h6)、small:小(h5)、medium:正常(默认值)(h4)、
large:大(h3)、x-large:较大(h2)、xx-large:最大(h1)。
相对字体表示法:larger与smaller,相对于父容器的字体进行相应调整。
长度表示法:长度值。
百分比表示法:相对于父容器中字体尺寸进行相应调整
font-type属性:定义字体显示的方式,值为normal(正常)、italic(斜体)、oblique(倾斜)。
font-weight属性:定义字体的粗细,取值为:
字体粗细的绝对值:100,200,300,400,500,600,700,800,900。
normal(正常,等同于400)。
bold(粗体,等同于 700)。
bolder(更粗)。
lighter(更细)。
font-variant属性:定义小型的大写字母字体,对中文没什么意义。值为normal(正常)、small-caps(小型的大写字母)。
font属性:以上5个属性可以同时定义在这个属性中。
对与许多讲css的书都有自己的顺序。我选的这个顺序还是借鉴与一个学习的网站,我觉得对于初学者,这是一个很里的顺序。这个网站是:http://www.dreamdu.com/css/ 。
相关文章推荐
- web学习—css样式表—css属性(二)
- web学习—css样式表—css初识
- <学习CSS>第三天笔记-css外观属性(颜色、行间距、对齐、首行缩进、字间距、单词间距 、颜色半透明、阴影)快捷方式、综合案例、引入CSS样式表(内部样式表、行内式、外部样式表)、三种样式表总结
- web学习—css样式表—css基础语法
- HTML入门学习笔记--CSS属性(2)
- 前端学习 -- Css -- 字体的几个属性学习
- CSS的Position属性学习
- Vue 学习笔记 — css属性计算的问题
- 每日学习总结:CSS:Clear属性的用法、重复交易提示框、弹出提示框后页面变形、asp.net调用smtp服务发送邮件问题
- 从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门
- jQuery:基础学习(2)属性,CSS,文档,元素筛选
- (一)学习CSS之z-index属性
- (八)学习CSS之line-style-type属性
- CSS学习(2)--CSS属性
- CSS学习之 文本属性
- CSS学习(12)--内补丁属性
- html学习笔记(3)-CSS padding margin border属性详解
- html+css2次学习----a链接的href属性的使用
- 学习CSS自定义属性
- 学习CSS之clear属性