CSS 设置字型属性

CSS样式表分别提供了字体属性和文本属性来对页面进行更精确的布局。在本节中，将详细介绍字体属性。

在HTML中的字体标记只能提供字体颜色color、字体大小size和字体类型face三种设置，而CSS样式表则提供了多个字体属性使设计者对字体有更详细的设置，从而能够更加丰富页面效果。

1、font-family属性

font-family属性用于指定页面使用的字体类型，比如宋体、华文行楷、Times

该样式规则表示页面中段落使用的字体类型是华文行楷。font-family属性可以预置多个供页面使用的字体类型，即字体类型序列。如果前面的字体类型不能够正确显示，则系统将自动选择后一种字体类型，依次类推。例如：

如果浏览器不能正确显示方正卡通简体的字体，那么将以黑体的形式显示，如果黑体也没有，则将使用宋体。所以，在设计页面时，一定要考虑字体的显示问题，为了保证页面达到预计的效果，最好提供多种字体类型，而且最好以最基本的字体类型作为最后一个。

当font-family属性值中的字体类型由多个字符串和空格组成，比如Times New Roman，那么，该值就需要使用双引号引起来。如果属性值没有使用引号，那么处理器就会忽略指定的字体类型，该样式规则也就无效了。

2、font-weight属性

font-weight属性为CSS样式表的加粗属性，该属性有13个有效值，分别是bo ld、bolder、lighter、normal、100~900。如果没有设置该属性，则使用其默认值nor mal。属性值设置为100~900，值越大，加粗的程度就越高，如表4-1列出了相关信息。

DIV+CSS：网站首页布局实例教程

DIV+CSS：网站首页布局实例教程第一步：页面布局与规划在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/

├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。第二步：写入整体层结构和CSS 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：无标题文档这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。下面，我们在标签对中写入DIV的基本结构，代码如下：

[color=#aaaaaa][/color]

为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS 信息，代码如下： /*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

CSS_style属性大全

CSS style属性大全显示: 标签属性/属性行为集合事件滤镜方法对象样式一、标签属性属性描述 ALIGN align 设置或获取表格排列。 ALLOWTRANSPARENCY allowTransparency 设置或获取对象是否可为透明。 APPLICATION APPLICATION 表明对象的内容是否为HTML 应用程序(HTA)，以便免除浏览器安全模式。ATOMICSELECTION 指定元素及其内容是否可以一不可见单位统一选择。 BEGIN begin 设置或获取时间线在该元素上播放前的延迟时间。 BORDER border 设置或获取框架间的空间，包括3D 边框。 canHaveChildren 获取表明对象是否可以包含子对象的值。 canHaveHTML 获取表明对象是否可以包含丰富的HTML 标签的值。 CLASS className 设置或获取对象的类。 contentWindow 获取指定的frame 或iframe 的window 对象。 DA TAFLD dataFld 设置或获取由dataSrc 属性指定的绑定到指定对象的给定数据源的字段。 DA TASRC dataSrc 设置或获取用于数据绑定的数据源。 disabled 获取表明用户是否可与该对象交互的值。 END end 设置或获取表明元素结束时间的值，或者元素设置为重复的简单持续终止时间。 firstChild 获取对象的childNodes 集合的第一个子对象的引用。 FRAMEBORDER frameBorder 设置或获取是否显示框架的边框。 hasMedia 获取一个表明元素是否为HTML+TIME 媒体元素的Boolean 值。 HEIGHT height 设置或获取对象的高度。 HIDEFOCUS hideFocus 设置或获取表明对象是否显式标明焦点的值。 HSPACE hspace 设置或获取对象的水平边距。 ID id 获取标识对象的字符串。 innerText 设置或获取位于对象起始和结束标签内的文本。 isContentEditable 获取表明用户是否可编辑对象内容的值。 isDisabled 获取表明用户是否可与该对象交互的值。 isMultiLine 获取表明对象的内容是包含一行还是多行的值。 isTextEdit 获取是否可使用该对象创建一个TextRange 对象。 LANG lang 设置或获取要使用的语言。 LANGUAGE language 设置或获取当前脚本编写用的语言。

HTML+CSS标签属性大全

HTML CSS标签属性大全 a卷标, 属性名称, 简介批注 1、跑马灯 …普通卷动 …滑动 …预设卷动 …来回卷动 …向下卷动 …向上卷动向右卷动向左卷动 …卷动次数 …设定宽度 …设定高度 …设定背景颜色 …设定卷动距离 …设定卷动时间 2、字体效果

…

标题字(最大)

…

标题字(最小) …粗体字 …粗体字(强调) …斜体字 …斜体字(强调) …斜体字(表示定义) …底线 …底线(表示插入文字) …横线 …删除线 …删除线(表示删除) …键盘文字 … 打字体 …固定宽度字体(在文件中空白、换行、定位功能有效) …</plaintext>固定宽度字体(不执行标记符号) <listing>…</listing> 固定宽度小字体 <font color=00ff00>…</font>字体颜色 <font size=1>…</font>最小字体 <font style =font-size:100 px>…</font>无限增大 3、区断标记 <hr>水平线 <hr size=9>水平线(设定大小) <hr width=80%>水平线(设定宽度) <hr color=ff0000>水平线(设定颜色) <br>(换行) <nobr>…</nobr>水域(不换行)</p><h2>jQuery Mobile中文手册</h2><p>jQuery Mobile开发入门手册——入门篇作者：张勇辉更新日期2010-11-03 Blog：https://www.360docs.net/doc/912841640.html,</p><p>目录 jQuery Mobile开发入门手册——入门篇 (1) 概述 (3) 框架特性 (3) 版本约定 (3) 初始配置 (4) 页面声明 (4) 技术理论 (4) WebKit 和HTML5 (4) 移动Web 应用程序的考虑 (5) 一般站点的呈现 (5) 组件 (7) 页面 (7) 模态对话框 (8) 工具条 (9) 标题容器 (9) 页脚容器 (10) 导航 (11) 按钮 (11) 表单应用 (13) 列表应用 (14)</p><p>概述此文档是基于jQuery Mobile框架的移动设备Web应用开发知识而编制，目的是为了方便开发人员快速的掌握此框架的开发应用，其中包含了框架的基础应用知识和在团队协作开发中的常规约定。框架特性 JQuery Mobile以“Write Less, Do More”作为目标，为所有的主流移动操作系统平台提供了高度统一的UI框架：jQuery的移动框架可以让你为所有流行的移动平台设计一个高度定制和品牌化的Web应用程序，而不必为每个移动设备编写独特的应用程序或操作系统。 jQuery Mobile目前支持的移动平台有苹果公司的iOS（iPhone，ipad，iPod Touch），Android，Black Berry OS6.0，惠普WebOS，Mozilla的Fennec和Opera Mobile。今后，将增加包括Windows Mobile，Symbian和MeeGo在内的更多移动平台。根据jQuery Mobile项目网站，目前jQuery Mobile的特性包括： ?jQuery核心——与jQuery桌面版一致的jQuery核心和语法，以及最小的学习曲线。?兼容所有主流的移动平台——iOS、Android、BlackBerry，Palm WebOS、Symbian、Windows Mobile、BaDa、MeeGo以及所有支持HTML的移动平台。 ?轻量级alpha版本的jQuery Mobile 其JavaScript 大小仅为12KB ，CSS 文件也只有6KB大小。 ?标记驱动的配置jQuery Mobile采用完全的标记驱动而不需要JavaScript的配置。 ?渐进增强jQuery Mobile采用完全的渐进增强原则：通过一个全功能的HTML网页，和额外的JavaScript功能层，提供顶级的在线体验。这意味着即使移动浏览器不支持JavaScript，基于jQuery Mobile的移动应用程序仍能正常的使用。 ?自动初始化通过使用mobilize()函数自动初始化页面上的所有jQuery部件。 ?无障碍包括WAI-ARIA在内的无障碍功能以确保页面能在类似于VoiceOver等语音辅助程序和其他辅助技术下正常使用。 ?简单的API 为用户提供鼠标、触摸和光标焦点简单的输入法支持。 ?强大的主题化框架jQuery Mobile提供强大的主题化框架和UI接口。版本约定为了避免由于版本不统一等引发的问题，在此次撰写中对框架的版本进行了如下约定：jQuery核心：V 1.50 Mobile核心：V 1.0 ALPHA 3</p><h2>CSS属性代码大全</h2><p>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: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; /*实心圆形符号*/</p><h2>css样式大全(精华版)</h2><p>字体属性：(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;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)</p><h2>W3cSchool_DIV+CSS2_参考手册</h2><p>CSS 参考手册 CSS背景属性属性描述值 background 简写属性，作用是将背景属性设置在一个声明中。background-color background-image background-repeat background-attachment background-position background-attachment 设置是否背景图像是固定的或随页面其余部分滚动。scroll fixed background-color 设置元素的背景颜色。color-rgb color-hex color-name transparent background-image 将图像设置为背景。url none background-position 设置背景图像的起始位置。top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos background-repeat 设置背景图像是否及如何重复。repeat repeat-x repeat-y no-repeat CSS 边框属性(border) 属性描述值 border 简写属性。作用是在一个声明中用来设置四个边框的所有属性。border-width border-style border-color border-bottom 简写属性。作用是在一个声明中用来设置底边框的所有属性。border-bottom-width border-style border-color border-bottom-color 设置底边框的颜色。border-color border-bottom-style 设置底边框的样式。border-style border-bottom-width 设置底边框的宽度。thin medium thick length border-color 设置四个边框的颜色，可以设置一到四个颜色。color</p><h2>css样式大全(整理版)</h2><p>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;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值</p><h2>CSS3常用属性大全</h2><p>CSS3 动画属性（Animation） @keyframes //规定动画。 animation //所有动画属性的简写属性，除了animation-play-state 属性。animation-name //规定@keyframes 动画的名称。 animation-duration //规定动画完成一个周期所花费的秒或毫秒。 animation-timing-function //规定动画的速度曲线。 animation-delay //规定动画何时开始。 animation-iteration-count //规定动画被播放的次数。 animation-direction //规定动画是否在下一周期逆向地播放。 animation-play-state //规定动画是否正在运行或暂停。 animation-fill-mode //规定对象动画时间之外的状态。 CSS 背景属性（Background） background //在一个声明中设置所有的背景属性。 background-attachment //设置背景图像是否固定或者随着页面的其余部分滚动。background-color //设置元素的背景颜色。 background-image //设置元素的背景图像。 background-position //设置背景图像的开始位置。 background-repeat //设置是否及如何重复背景图像。 background-clip //规定背景的绘制区域。 background-origin //规定背景图片的定位区域。 background-size //规定背景图片的尺寸。 CSS 边框属性（Border 和Outline） border //在一个声明中设置所有的边框属性。 border-bottom //在一个声明中设置所有的下边框属性。 border-bottom-color //设置下边框的颜色。 border-bottom-style //设置下边框的样式。 border-bottom-width //设置下边框的宽度。</p><h2>悦动使用手册说明书电子版</h2><p>悦动使用手册说明书电子版 Pleasure Group Office【T985AB-B866SYT-B182C-BS682T-STT18】</p><p>悦动使用手册（说明书）电子版1．驾驶席安全气囊……………3-25 2．灯光控制／转向信号………4-45 3．仪表盘………………………4-30 4．雨刮器／喷水器……………4-49 5．点火开关………………………5-4 6．方向盘………………………4-26 7．数字钟………………………4-77 8．危险警告灯开关……………4-44 9．空调控制系统*……………4-54 10．组合箱………………………4-74 11．变速杆…………………………5-9 12．点烟器………………………4-75 13．AUX………………………4-79 14．烟灰缸………………………4—75 15．助手席安全气囊……………3-25</p><p>17．手套箱………………………4-73 *：如有配备。 1．门锁闭锁/锁机械操纵……4-8 2．室外后视镜控制开关*……4-27 3．中央控制门锁操纵开关*……4-9 4．电动门窗锁止开关…………4-16 5．电动门窗开关*……………4-13 6．行李箱盖释放杆……………4-12 7．保险丝盒……………………7-44 8．后雾灯开关…………………4-48 9．语音警报系统开关*……4-41 10．方向盘倾斜杆………………4-26 11．发动机罩释放杆……………4-17 12．制动踏板…………………5-15 13．加速踏板………………………5-5</p><p>*：如有配备。</p><p>悦动自动档使用说明~ 自动档的使用说起来简单也不简单，说难也不难，很多朋友买了自动档就是为了一d到底，自动档确实简单，只要手握方向，眼观八方，工作的事全交给右脚，就能翻山越岭，跋山涉水，无所不去也。但是我本人作为一个资深工薪族，准备把车保养的好点开个十年的人，还是对这个简单的东西进行了深入的研究，发现自动档的驾驶那是大有学问。以正常驾驶为例，先说说自动档的分布，咱们悦动的自动波箱由上至下分别为 p-r-n-d-3（d往右边拨下就是）-2-l。从起步开始说，众所周知，夏天不需要热车，冬天要热车，悦动车本身没水温表，手动档热车就比较简单了，有时间的原地等会，没时间的在起步的前两公里以慢速度＜ 30km的时候热下，也就可以了。但是自动档的比较麻烦，我有段时间在p档踩刹车点火，凭感觉热得差不多了，踩刹车挂到d档，结果一挂上就感觉整台车往前窜了下，吓了我一跳，后来去4s询问了下，才明白是热车不当所致，据说很伤变速箱。正确的做法是：先在p档点火，接下来看转数表，刚开始发动时车子声音大很正常，是因为车子的发动机在提高转速热车，因为是电喷车，所以自动完成这工作。接下来，一般转速会在1500以上，我们就坐着等到指针降到1000左右的时候，就可以挂d档走人了，当然正常怠速的时候转速都在800，走一会儿就会自己降下来了。还有我偶尔遇到的情况，刚点火转速只上升到1100左右，这时候是不能走的，直接挂d档车子也还是会窜一下，这种情况就要等到转速降到800才能走。</p><h2>CSS中的各属性意思</h2><p>1、字体属性这是最基本的属性，您经常都会用到。它主要包括以下这些属性： 2、颜色和背景属性下面我们就讲一下CSS的颜色和背景属性。先来看一下CSS下的颜色和背景都有哪些属性吧（如下表）： 3、文本属性 ※定义间距前面说了如何用CSS定义字体、颜色和背景属性，那么定义好的文本我们怎么对它进行排版呢？下面我们讲述一下CSS的文本属性，还是先来看一下文本属性的详细列表：</p><p>※装饰超链接网页默认的链接方式是这样的：未访问过的链接是蓝色文字并带蓝色的下划线，访问过的超级链接是深紫色的文字并带深紫色的下划线。如果您所有的网页都是这种样式，是不是很单调呢？ 4、“容器”属性 ※边距属性听起来是不是很有趣，什么叫“容器”属性呢？CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。您想，网页中的内容肯定是都需要“装”进这个“容器”里。“容器”属性是CSS中非常重要的一种属性，我们将分类进行学习。先来看一下边距属性的详细列表： ※填充距属性本节我将向您介绍填充距属性。我们先来看一下填充距的属性列表： ※边框属性本节我们来看一下种类繁多的边框属性，先来看一下属性列表：</p><p>※图文混排我们在来看看“容器”属性还有什么其他的属性，请看属性列表： 5、分级属性如果您使用过Word，那您一定知道Word中有一个“项目符号和编号”的功能。在html中，您无需使用前面提到的一些字体、颜色、容器属性来对字体、颜色和边距、填充距等进行初始化。因为在CSS中，已经提供了进行分级的专用分级属性。分级属性包括了“list-style”（列表样式）、“list-item”（列表项）等多种属性，我们先来看一下分级属性的详细列表： 6、鼠标属性</p><h2>CSS3 选择器</h2><p>我们会定期对W3School 的CSS 参考手册进行浏览器测试。 CSS3 选择器在CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个CSS 版本中定义的。（CSS1、CSS2 还是CSS3。）选择器例子例子描述C S S .class.intro 选择class="intro" 的所有元素。 1 #id#firstname 选择id="firstname" 的所有元素。 1 ** 选择所有元素。 2 element p 选择所有元素。 1 element,element div,p 选择所有<div> 元素和所有元素。 1 element element div p 选择<div> 元素内部的所有元素。 1 element>element div>p 选择父元素为<div> 元素的所有元素。 2 element+element div+p 选择紧接在<div> 元素之后的所有元素。 2 [attribute][target] 选择带有target 属性所有元素。 2 [attribute=value][target=_blank] 选择target="_blank" 的所有元素。 2 [attribute~=value][title~=flower] 选择title 属性包含单词"flower" 的所有元素。 2 [attribute|=value][lang|=en] 选择lang 属性值以"en" 开头的所有元素。 2 :link a:link 选择所有未被访问的链接。 1 :visited a:visited 选择所有已被访问的链接。 1 :active a:active 选择活动链接。 1 :hover a:hover 选择鼠标指针位于其上的链接。 1 :focus input:focus 选择获得焦点的input 元素。 2 :first-letter p:first-letter 选择每个元素的首字母。 1 :first-line p:first-line 选择每个元素的首行。 1 :first-child p:first-child 选择属于父元素的第一个子元素的每个元素。 2 :before p:before 在每个元素的内容之前插入内容。 2 :after p:after 在每个元素的内容之后插入内容。 2</p><h2>CSS属性大全完整版</h2><p>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; (闪烁) 常用字体</p><p>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; (居中) 缩进</p><h2>css常用的属性大全</h2><p>CSS常用属性大全 2011-04-22 12:51 字体属性：(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;(闪烁) 字体投影效果：filter:dropshadow(color=#FFFFFF, offx=1, offy=1, positive=1); 背景属性： (background) 色彩background-color: #FFFFFF; 图片background-image: url(); 重复background-repeat: repeat; no-repeat; repeat-x; repeat-y;滚动background-attachment: fixed;(固定) scroll;(滚动) 位置background-position: left(水平) top(垂直);bottom; right; center; 简写方法 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;(下标) top; text-top; middle; bottom; text-bottom; 单词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)</p><h2>CSS常用文本属性</h2><p>CSS常用文本属性文本对齐属性(text-align) 这个属性用来设定文本的对齐方式。有以下值： ?left (居左，缺省值) ?right (居右) ?center (居中) ?justify (两端对齐) 示例代码如下： .p2 {text-align:right} 演示示例文本修饰属性(text-decoration) 这个属性主要设定文本划线的属性。有以下值： ?none (无，缺省值) ?underline (下划线) ?overline (上划线) ?line-through (当中划线) 示例代码如下： .p2 {text-decoration: underline} 演示示例文本缩进属性(text-indent) 这个属性设定文本首行缩进。其值有以下设定方法： ?length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位(em, ex, px)) ?percentage (百分比，相当于父对象宽度的百分比) 示例代码如下： .p1 {text-indent: 8mm} 演示示例行高属性(line-height) 这个属性设定每行之间的距离。其值有以下设定方法： ?normal (缺省值) ?length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位(em, ex, px)) ?percentage (百分比，相当于父对象高度的百分比) 示例代码如下： .p1 {line-height:1cm} 演示示例字间距属性(letter-spacing) 这个属性用来设定字符之间的距离。 ?normal (缺省值) ?length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位(em, ex, px)) 示例代码如下： .p1 {letter-spacing: 3mm}</p><h2>DivCSS布局入门教程相当经典</h2><p>在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。有了以上的分析，我们就可以很容易的布局了，我们设计层如下图: 根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#H eader {} /*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：</p><h2>css属性列表和属性值含义</h2><p>css属性列表和属性值含义css属性列表属性名称字体属性（Font） font-family font-style font-variant font-weight font-size 颜色和背景属性 Color Background-color Background-image Background-repeat Background-attachment Background-position 文本属性 Word-spacing Letter-spacing Text-decoration Vertical-align Text-transform Text-align Text-indent Line-height 边距属性 Margin-top Margin-right Margin-bottom Margin-left Margin 属性含义使用什么字体字体是否斜体是否用小体大写字体的粗细字体的大小定义前景色定义背景色定义背景图案重复方式设置滚动初始位置单词之间的间距字母之间的间距文字的装饰样式垂直方向的位置文本转换对齐方式首行的缩进方式文本的行高分别设置上右下左，一个值属性值所有的字体 Normal、italic、oblique Normal、small-caps Normal、bold、bolder、lithter等 Absolute-size、relative-size、length、 percentage等颜色颜色路径 Repeat-x、repeat-y、no-repeat Scroll、Fixed Percentage、length、top、left、 right、bottom等 Normal <length> 同上 None|underline|overline|line- through|blink Baseline|sub|super|top|text-top|middl e|bottom|text-bottom| Capitalize|uppercase| lowercase|none Left|right|center|justify <length>|<percentage> Normal|<number>|<length>| <percentage> Length|percentage|auto 同上同上同上</p></div> <div class="rtopicdocs"> <div class="coltitle">相关主题</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="15163481"><a href="/topic/15163481/" target="_blank">css参考手册</a></li> <li id="12818138"><a href="/topic/12818138/" target="_blank">css属性列表</a></li> <li id="10868298"><a href="/topic/10868298/" target="_blank">css属性大全</a></li> </ul> </div> </div> </div> </div> <div id="rightcol" class="viewcol"> <div class="coltitle">相关文档</div> <ul class="lista"> <li><a href="/doc/2f17187842.html" target="_blank">悦动使用手册说明书电子版</a></li> <li><a href="/doc/4f5064937.html" target="_blank">CSS14甲板集装箱安全系固作业指南</a></li> <li><a href="/doc/6812871990.html" target="_blank">CSS3.0参考手册</a></li> <li><a href="/doc/b36602432.html" target="_blank">css手册</a></li> <li><a href="/doc/0b7787661.html" target="_blank">DIV+CSS：网站首页布局实例教程</a></li> <li><a href="/doc/fd17289211.html" target="_blank">Web组件(EditGrid)使用手册</a></li> <li><a href="/doc/3e9031535.html" target="_blank">CSS常用文本属性</a></li> <li><a href="/doc/54781863.html" target="_blank">用户使用手册</a></li> <li><a href="/doc/8e1788176.html" target="_blank">css中文对照手册</a></li> <li><a href="/doc/da14422903.html" target="_blank">HTML5网页设计基础</a></li> <li><a href="/doc/1c2827752.html" target="_blank">W3cSchool_DIV+CSS2_参考手册</a></li> <li><a href="/doc/402311185.html" target="_blank">CSS和DOM属性用法速查手册</a></li> <li><a href="/doc/5414863596.html" target="_blank">最新css样式大全(整理版)</a></li> <li><a href="/doc/a713383252.html" target="_blank">CSS帮助文档</a></li> <li><a href="/doc/f716837635.html" target="_blank">使用手册数据中心查询工具</a></li> <li><a href="/doc/3f7520970.html" target="_blank">css参考手册(完美整理版)</a></li> <li><a href="/doc/4113086795.html" target="_blank">CSS样式表-手实用手册与讲解</a></li> <li><a href="/doc/7218291569.html" target="_blank">emlog模板制作帮助手册</a></li> <li><a href="/doc/d85093453.html" target="_blank">HTML标记大全参考手册</a></li> <li><a href="/doc/0219202069.html" target="_blank">全局 CSS 样式 · Bootstrap 中文文档</a></li> </ul> <div class="coltitle">最新文档</div> <ul class="lista"> <li><a href="/doc/0f19509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0119509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9b19184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/d819211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/a419240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9d19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8a19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8519195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7119336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6619035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4a19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3b19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2619396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2b19396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1419338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/ed19066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/bd19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "9259b7193b3567ec102d8a5d"; </script> <div class="clearfloat"></div> <div id="footer"> <div class="ft_info"> <a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a>  ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br /> 本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈 </div> <script type="text/javascript">foot()</script> </div> </body> </html>