2.2.21 CSS文本样式属性(六)变体：font-variant
常用css代码
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration: overline; /*加顶线*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
位置list-style-position: outside;(外) inside;
图像list-style-image: url(..);
定位属性： (Position)
Position: absolute; relative; static;
visibility: inherit; visible; hidden;
修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体： (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
border-width:; 边框宽度
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地址。
CSS样式详解
CSS样式表翻译类型（Type）面板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。
设置时，我们只对要改变的属性进行设置，没有必要改变的属性就空着。
注意：属性名带*号的是指样式效果不能在编辑文档时显示，要用浏览器打开才能看到效果。
类型·font-family：规定元素的字体系列family-name：用于某个元素的字体族名称或/及类族名称的一个优先表generic-family：默认值：取决于浏览器inherit：规定应该从父元素继承字体系列·font-size：属性可设置字体的尺寸xx-small、x-small、small、medium、large、x-large、xx-large：把字体的尺寸设置为不同的尺寸，从xx-small 到xx-large。
默认值：mediumSmaller：把font-size 设置为比父元素更小的尺寸Larger：把font-size 设置为比父元素更大的尺寸Length：把font-size 设置为一个固定的值%：把font-size 设置为基于父元素的一个百分比值Inherit：规定应该从父元素继承字体尺寸·font-weight：属性设置文本的粗细normal：默认值。
定义标准的字符bold：定义粗体字符bolder：定义更粗的字符lighter：定义更细的字符100、200、300、400、500、600、700、800、900：定义由粗到细的字符。
400 等同于normal，而700 等同于boldinherit：规定应该从父元素继承字体的粗细·font-style：属性定义字体的风格normal ：默认值。
浏览器显示一个标准的字体样式italic：浏览器会显示一个斜体的字体样式oblique：浏览器会显示一个倾斜的字体样式inherit：规定应该从父元素继承字体样式·font-variant：属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小normal ：默认值。
CSS样式属性
CSS样式属性.txt始终相信，这世间，相爱的原因有很多，但分开的理由只有一个--爱的还不够。
人生有四个存折：健康情感事业和金钱。
如果健康消失了，其他的存折都会过期。
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-image(定义背景图片)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/blink vertical-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（方形）/decimal（阿拉伯数字）/lower-roman(小写罗马数字)/upper-roman(大写罗马数字)/lower-alpha(小写英文字母)/upper-alpha(大写英文字母)/norelist-style-tyle(在列表前加图案):<url>/nonelist-style-position(决定列表项中第二行的起邕位置)list-style(一次性定义所有属性)7、定位（positioning）即层属性Type：设定对象的定位方式。
使用CSS属性定义文本的字体系列
使⽤CSS属性定义⽂本的字体系列CSS 字体属性定义⽂本的字体系列、⼤⼩、加粗、风格（如斜体）和变形（如⼩型⼤写字母）。
CSS 字体系列在 CSS 中，有两种不同类型的字体系列名称：通⽤字体系列 - 拥有相似外观的字体系统组合（⽐如 "Serif" 或 "Monospace"）特定字体系列 - 具体的字体系列（⽐如 "Times" 或 "Courier"）除了各种特定的字体系列外，CSS 定义了 5 种通⽤字体系列：Serif 字体Sans-serif 字体Monospace 字体Cursive 字体Fantasy 字体如果需要了解更多有关字体系列的知识，请阅读 CSS 字体系列。
指定字体系列使⽤ font-family 属性定义⽂本的字体系列。
使⽤通⽤字体系列如果你希望⽂档使⽤⼀种 sans-serif 字体，但是你并不关⼼是哪⼀种字体，以下就是⼀个合适的声明：body {font-family: sans-serif;}这样⽤户代理就会从 sans-serif 字体系列中选择⼀个字体（如 Helvetica），并将其应⽤到 body 元素。
因为有继承，这种字体选择还将应⽤到 body 元素中包含的所有元素，除⾮有⼀种更特定的选择器将其覆盖。
指定字体系列除了使⽤通⽤的字体系列，您还可以通过 font-family 属性设置更具体的字体。
下⾯的例⼦为所有 h1 元素设置了 Georgia 字体：h1 {font-family: Georgia;}这样的规则同时会产⽣另外⼀个问题，如果⽤户代理上没有安装 Georgia 字体，就只能使⽤⽤户代理的默认字体来显⽰ h1 元素。
我们可以通过结合特定字体名和通⽤字体系列来解决这个问题：h1 {font-family: Georgia, serif;}如果读者没有安装 Georgia，但安装了 Times 字体（serif 字体系列中的⼀种字体），⽤户代理就可能对 h1 元素使⽤ Times。
CSS语法手册(一)字体属性
1、font-family功能：用于改变HTML标志或元素的字体，你可设置一个可用字体清单。
浏览器由前向后选用字体。
语法：{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(字体高度)作为度量单位。
百分比 - 相对于其父元素字体大小的百分比。
例子：字体大小6、font功能：简写属性，提供了对字体所有属性进行设置的快捷方法。
CSS样式属性
font-family：[宋体]
字体风格
font-style：[normal(普通),italic(斜体)，oblique(倾斜)]
字体变形
font-variant:[normal(普通)，small-caps(小型大写字母)]
字体加粗
font-weight：[normal,(bold,bolder成比例),100...]
text-decoration：[none,underline,overline,linethrough,blink(闪烁)]
纵向排列
ertical-align：[sub(下标),super（上标）,...]
文本转换
text-transform：[none,capitalize(第一个字母大写),uppercase（每个大写）,lowercase（每个小写）]
背景图像
background-color：[url(../**.gif),/bg.png]
图像重复
background-repeat：[repeat，repeat-x，repeat-y，no-repeat]
背景附件
background-attachment：[scroll(滚动),fixed]
字体大小
font-size：[?px/large/x-large/xx-large...]
字体
font：[-family,-style,...]
颜色及背景属性
颜色
color：[blue,#000000,#0c0]
背景颜色
background-color：[white,#000000]
长度单位
css常用样式属性
网页布局常用样式属性一、PositionPosition有以下几个值：static，relative，absolute，fixed。
Static：静态定位。
如果你没有设置position属性，那么缺省就是static。
top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。
Relative：相对定位。
元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。
Absolute：绝对定位。
元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。
Fixed：固定定位。
元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。
形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。
需要注意的是IE6并不支持此属性。
注意：很多网页都是居中的，这样，当对元素进行绝对定位的时候，在不同的分辨率下显示会有偏差，这时，我们可以通过类似下面的方法来处理：<div style="position: relative;"><div style="position: absolute; top: 10px; left: 10px;"></div></div><div style="position: Fixed; top: 10px; left: 10px;"></div></div> //元素位置固定浏览器位置不变二、Floatfloat 是css 的定位属性, fload属性有四个可用的值：Left 和Right 分别浮动元素到各自的方向，None （默认的）使元素不浮动，Inherit 将会从父级元素获取float值。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.2.21 CSS文本样式属性（六）变体：font-variant
（CSS变体属性）
CSS变体属性
✧font-variant:变体
font-variant属性用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效。
其可用属性值如下：
●normal：默认值，浏览器会显示标准的字体。
●small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。
但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
如将段落中的英文设置为小型大写字母，可以使用如下CSS样式代码：
p{ font-variant:small-caps;}
效果如下图所示，大写字母不变，小写字母变小型大写字母。