dreamweavercs5css规则面板中英对照及详解

常用的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/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（方形）/decimal（阿拉伯数字）/lower-roman(小写罗马数字)/upper-roman(大写罗马数字)/lower-alpha(小写英文字母)/upper-alpha(大写英文字母)/norelist-style-tyle(在列表前加图案):<url>/nonelist-style-position(决定列表项中第二行的起邕位置)list-style(一次性定义所有属性)7、定位（positioning）即层属性Type：设定对象的定位方式。

第十课：CSS样式表10-1 认识CSS (1) 10-2 认识CSS (2)如果说目前在Web设计和开发技术领域，什么是非常“火”的新技术，CSS/DIV页面的布局无疑是其中之一CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。

但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。

本课从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。

（其实我们在前面的课程中已经接触到）作用：例子演示。

从CSS对标记的控制入手，讲解CSS的初步知识以及编辑方法。

希望大家能够掌握下一面几个方面的内容：①、标记的概念②、传统HTML的缺点③、CSS的引入1、传统HTML标记，在批量编辑时效率低，不够标准利用CSS样式编辑网页，可以大大挺高效率，规范网页的设计标准。

2、CSS样式代码在网页代码中的位置CSS代码style type="text/css"><!--body,td,th {font-size: 12px;color: #FF0000;}--></style>特点：1）灵活控制网页中的每个元素的样式2）把内容和格式处理相分离，提高工作效率3、CSS样式的链接10-3 编辑CSS样式(1) 10-4 编辑CSS样式(2) 如何编辑CSS样式█1) 属性面板快捷操作1、在下方的属性面板对选中的目标建立CSS规则创建的CSS规则将会应用到所有同类目标上2、建立的CSS规则代码自动添加在网页代码＜head＞部分中3、对建立的CSS样式修改：把鼠标光标在设计页面中放置到需要修改的内容上边，在下方的属性面板中修改，即可对所有应用了此CSS规则的目标修改█2）使用CSS样式面板打开“CSS样式”面板：全部﹤style﹥中显示的是当前网页中的所有CSS样式P表示CSS样式应用的标签的类型，下方显示的是当前CSS样式设置的属性下方修改当前CSS样式的属性修改CSS样式后将会全部应用到同类标签1、利用CSS样式给图片添加边框：选中图片，在CSS样式面板中点击“新建规则”设置“新建CSS规则”的应用属性设置成功，全部﹤style﹥中显示刚刚设置的“img”的属性2、属性的显示方式从下方的按钮中设置█3）手工输入代码10-5 CSS选择器选择器（selector）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。

1、(盒子)布局排版类loat - 浮动：设置块元素的浮动效果。

可选常用到参数left、right ；width - 宽：确定盒子本身的宽度，可以使盒子的宽度不依靠它所包含的内容多少。

height - 高：确定盒子本身的高度；clear - 清除：用于清除设置的浮动效果，常用参数both 、left、right；margin- 边距：控制围绕边框的边距大小。

其中包含4个属性：margin-top控制上边距的宽度、margin-right控制右边距的宽度、margin-bottom控制下边距的宽度、margin-left控制左边距的宽度。

padding-内边界：确定围绕块元素的空格填充数量，其中包含4个属性“padding-top控制上留白的宽度、padding-right控制右留白的宽度、padding-bottom控制下留白宽度、padding-left 控制左留白的宽度。

2、边框border-width -宽：控制边框的宽度，其中分为4个属性：border-top-width顶边框的宽度、border-right-width右边框的宽度、border-bottom-width底边框的宽度、border-left-width左边框的宽度。

border-color -颜色：设置各边框的颜色。

若要使边框的四边显示不同的颜色，可在设置中分别列出。

如，p{: #ff0000 #009900 #0000ff #55cc00}浏览器将四种颜色依次理解为：上边框、右边框、底边框和左边框（自上开始顺时针）。

border-style -样式：设定边框的样式，共有无（none）、虚线（dotted）、点划线线（dotted）、点划线（dashed）、实线（solid）、双线（double）、槽状（grove）、脊状（ridge）、凹陷（inset）和凸起（outset）等9种。

3、CSS文字属性font-family- 字体：设定时，需考虑浏览器中有无该字体。

Dreamweaver用法——Dreamweaver中CSS规则详解1. 引言Adobe Dreamweaver是一款功能强大的网页设计和开发工具，是许多专业网页设计师和开发者的首选。

本文将详细介绍在Dreamweaver中使用CSS规则的方法和技巧，帮助您更好地利用Dreamweaver进行网站设计和开发。

2. Dreamweaver中CSS规则的基本概念在Dreamweaver中，CSS规则是用来控制网页样式和布局的指令集。

CSS规则由选择器和声明块组成，选择器用于选择要应用样式的HTML元素，声明块则包含了一系列属性和属性值，用于定义所选元素的样式。

Dreamweaver提供了全面的CSS规则编辑和管理功能，可以方便地创建和修改CSS规则，并实时预览样式效果。

3. 创建CSS规则在Dreamweaver中创建CSS规则非常简单。

首先，打开Dreamweaver并打开您想要编辑的HTML文件。

接下来，点击页面底部的“CSS规则”面板（或使用快捷键Ctrl+Alt+2），然后点击“新样式”按钮。

在弹出的对话框中，您可以选择要应用样式的选择器类型（如标签名、类名、ID等），并为选择器命名。

然后，您可以选择要应用的样式属性和属性值，并对这些样式进行设置。

最后，单击“应用”按钮，您的新CSS规则就创建好了。

4. 编辑和管理CSS规则Dreamweaver提供了方便的CSS规则编辑和管理功能，帮助您快速修改和管理页面的样式。

通过单击“CSS规则”面板中的规则名称，您可以直接编辑CSS规则中的属性和属性值。

另外，您还可以使用右键菜单来复制、删除和重新排序CSS规则。

另外，Dreamweaver还提供了CSS样式表的导入和导出功能，方便您在多个项目中复用样式。

5. Dreamweaver中的CSS选择器在Dreamweaver中，CSS选择器用于选择要应用样式的HTML元素。

常见的CSS选择器包括：•标签选择器：选择指定标签名的元素，例如p选择所有<p>元素。

DW中CSS属性详解ver的CSS样式里包含了W3C规范定义的所有CSS1的属性，Dreamweaver把这些属性分为Type（类ckground（背景）、Block（块）、Box（盒子）、Border（边框）、 List （列表）、Positioning、Extensions（扩展）八个部分，如下图，下面我们分别详细讲解。

Type（类型）板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。

设置时，我们只对要改变的属性，没有必要改变的属性就空着。

性名带*号的是指样式效果不能在编辑文档时显示，要用浏览器打开才能看到效果。

置字体系列。

什么叫字体系列呢？是指对文字设定几个字体，当遇到第一个字体不能显示的文字用系列中的第二个字体或后面的字体显示。

相对应的CSS属性是”font-family”。

eamweaver4已经内置设定了6个系列的英文字体，一般英文字体我们用“Verdana, Arial, a, sans-serif”这个系列比较好看。

如果不用这些字体系列，你就需要自己编辑字体系列，你可拉框最下面的“Edit Font List”来创建新的字体系列，也可以直接手动在下拉框里写字体名，用逗号隔开。

中文网页默认字体是宋体，一般就空着不要选取任何字体。

义文字的大小。

你可以通过选取数字和度量单位来选择具体的字体大小，或者你也可以选择一个体大小。

最好使用Pixels作为单位，这样不会在浏览器中文本变形。

一般小字体用比较标准的对应的CSS属性是”font-size”。

S中长度的单位分绝对长度单位和相对长度单位，一般我们常用的绝对长度单位有：素）根据显示器的分辨率来确定长度。

号）根据windows系统定义的字号大小来确定长度。

in：（毫米、厘米、英寸）根据显示的实际尺寸来确定长度。

此类单位不随显示器的分辨率改变单位有：文本的尺寸。

例如：{ font-size:2em}是指文字大小为原来的2倍。

字母“x”的高度，一般为字体尺寸的一半。

边框：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 ：背景图像相对于窗体固定。

ver的CSS样式里包含了W3C规范定义的所有CSS1的属性，Dreamweaver把这些属性分为Type（类ckground（背景）、Block（块）、Box（盒子）、Border（边框）、 List（列表）、Positioning 、Extensions（扩展）八个部分，如下图，下面我们分别详细讲解。

Type（类型）板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。

设置时，我们只对要改变的属性，没有必要改变的属性就空着。

性名带*号的是指样式效果不能在编辑文档时显示，要用浏览器打开才能看到效果。

置字体系列。

什么叫字体系列呢？是指对文字设定几个字体，当遇到第一个字体不能显示的文字用系列中的第二个字体或后面的字体显示。

相对应的CSS属性是”font-family”。

eamweaver4已经内置设定了6个系列的英文字体，一般英文字体我们用“Verdana, Arial,a, sans-serif”这个系列比较好看。

如果不用这些字体系列，你就需要自己编辑字体系列，你可拉框最下面的“Edit Font List”来创建新的字体系列，也可以直接手动在下拉框里写字体名，用逗号隔开。

中文网页默认字体是宋体，一般就空着不要选取任何字体。

义文字的大小。

你可以通过选取数字和度量单位来选择具体的字体大小，或者你也可以选择一个体大小。

最好使用Pixels作为单位，这样不会在浏览器中文本变形。

一般小字体用比较标准的对应的CSS属性是”font-size”。

S中长度的单位分绝对长度单位和相对长度单位，一般我们常用的绝对长度单位有：素）根据显示器的分辨率来确定长度。

号）根据windows系统定义的字号大小来确定长度。

in：（毫米、厘米、英寸）根据显示的实际尺寸来确定长度。

此类单位不随显示器的分辨率改变单位有：文本的尺寸。

例如：{ font-size:2em}是指文字大小为原来的2倍。

字母“x”的高度，一般为字体尺寸的一半。

dw css翻译CSS（CascadingStyleSheets），中文翻译为层叠样式表，是一种样式表语言，用来描述网页的布局、样式和结构，它能够使网页的外观与内容分离，使 HTML结构与表现形式分离，从而使网页变得更加美观大方。

CSS web发中最重要的技术之一，它被用于定义网页的排版、样式和布局，是 web计的基础技术，也是一种可以定制 HTML素的标记语言，它可以定义 HTML 中的每个元素如何显示，比如，它可以定义文本的颜色、大小、字体等等。

CSS结构特别简单，支持以多种方式定义样式，并且可以将这些样式应用到 HTML件中的任何元素上。

例如，在网页中，CSS以用来设置文本颜色，定义元素的尺寸、形状和边距，以及设置背景图片等等。

此外，CSS支持其他一些特性，比如 box model（盒子模型），它使我们可以调整和控制 HTML素的宽度、高度、边框等，协助我们定义元素在页面中的大小和位置。

而且，CSS可以用来定义如何显示 HTML素，例如，它可以用来定义页面文字的大小、颜色、样式，以及控制页面中元素的排版，以及定义图片在文本中的位置等等。

此外，CSS支持两种选择器，ID class，它们允许用户通过标记HTML素来定义它们的样式。

通过将 ID class予单个 HTML素，可以轻松定义这个元素的样式，而不会影响到其他的 HTML素。

CSS支持非替换样式表（Non-replacing Style Sheets），这种样式可用于将不同的 HTML素放在一起，以便进行更复杂的设计。

CSS一种极其有用的技术，它有许多优点，包括：-能够让用户更快地完成网站设计，而且可以保障网站的一致性和统一性；-可以精确定义 HTML素的样式，从而使得网站的设计更加精致； -使得在团队开发网站时，设计师可以更轻松地与程序员共同开发网站；-可以帮助用户更轻松地管理网站的样式，而不必手动调整每个文件。

总之，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:过滤友情提醒：尽量少的使用分页属性，并且在表格、浮动元素、带有边框的元素中使用分页属性。

一、类型font—family字体font-size字体大小font—style 字体样式(斜体/偏斜体）line-height行高text- decoration下划线/上划线font—weight字体粗细font—variant变体text-transform大小写color字体颜色二、背景background-color背景颜色background-image背景图片background-repeat背景重复方式background-attachment背景滚动或固定background-position背景水平位置三、区块word-spacing单词间距letter—spacing字幕间距vertical—align垂直对齐方式text—align文本对齐方式text—indent文本缩进方式white-space保密方式display保留方式四、方框Width宽Height高Float浮动方式Clear清除方式Padding填充/内边距Top上边Right右边Bottom下边Left左边Margin边框/外边框五、边框/Border Style 样式 /width 宽度/ color 颜色六、列表list-style—type列表标记符号类型list-style-image列表项目符号图象list—style-position列表位置七、定位Position位置Visibility显示/规定元素是否可见z—index：z轴/设置元素的堆叠顺序Overflow谊位/规定内容溢出元素发生的事情Placement放置Top上置入Right右置入Bottom下置入Left左置入Clip裁剪绝对定位元素Top上Right右Bottom下Left左八、扩展分页Page-break-before扩展之前视觉效果Page-break-after扩展之后视觉效果Cursor光标Filter过滤器（滤镜)。