Dreamweaver cs6中css属性

悲酥清风 CSS评论4,746,975阅读模式

Adobe推出的一套拥有可视化编辑界面,用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页(通常是标准通用标记语言下的一个应用HTML),对于初级人员,你可以无需编写任何代码就能快速创建web页面。

工欲善其事必先利其器,相关链接:Adobe Dreamweaver CS6精简绿色简体中文版

Dreamweaver cs6中css属性

类型 :

Font-family(文本字体):选择系统已有的字体根据规范优先去选择些大家的计算机都会有的,比如中文的微软雅黑,黑体,宋体。

Font-size(文本字号):可以按照自己测需求来设置,最大设置到36像素,当是自己还是可以输入更大的像素值。 Font-style:用到的也不多 (1)normal - 文本正常显示 (2)italic - 文本斜体显示 (3)oblique - 文本倾斜显示

*斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本作者觉得这个东西用到的更少,把斜体设置掉我倒是用过。

Line-hight(行间距):(我觉得最有用的一个方法是除了设置行高,当行高等于区块高度的时候,文本时垂直居中的,这个可以用来设置导航栏的文本垂直居中效果) normal 默认。设置合理的行间距。

number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。

length 设置固定的行间距。

% 基于当前字体尺寸的百分比行间距。

Text-decation(文本样式):链接的时候用到很多 none 默认。定义标准的文本。

underline 定义文本下的一条线(下划线)。 overline    定义文本上的一条线(上划线)。

line-through 定义穿过文本下的一条线(就是删除线的效果<del>的样式标签替代)。 blink 定义闪烁的文本(其实我真的不知道这个是什么效果,知道的可以告诉我)。 Font-weight(文本粗细):一般就是没有或者blod就可以 normal 默认值。定义标准的字符。 bold 定义粗体字符。 bolder 定义更粗的字符。 lighter 定义更细的字符。

100,200,300,400,500,600,700,800,900

定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 Font-variant(我不知道有什么用):

normal 默认值。浏览器会显示一个标准的字体。 small-caps 浏览器会显示小型大写字母的字体。 Text-tranform(大概就这么回事):

none 默认。定义带有小写字母和大写字母的标准的文本。 capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。

lowercase 定义无大写字母,仅有小写字母。 Color(就是rgb色):

Dreamweaver cs6中css属性

背景 :

background-color设置元素的背景颜色。 background-image把图像设置为背景。

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

repeat  默认。背景图像将在垂直方向和水平方向重复。 repeat-x  背景图像将在水平方向重复。 repeat-y  背景图像将在垂直方向重复。 no-repeat  背景图像将仅显示一次。

background-attachment背景图像是否固定或者随着页面的其余部分滚动。 scroll  默认值。背景图像会随着页面其余部分的滚动而移动。(相对屏幕的位置移动) fixed  当页面的其余部分滚动时,背景图像不会移动(相对屏幕的位置不动)。 background-position设置背景图像的起始位置。 (top left top center top right) (center left center center center right) (bottom left bottom center bottom right

这个九大块的定位应该比下面的用的更多)

如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0%。 x% y%

第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。 xpos ypos

第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。您可以混合使用 % 和 position 值。

Dreamweaver cs6中css属性

区块: 

Word-spacing:定义单词间距(“abc  abc  abc”这个效果) normal  默认。定义单词间的标准空间。 length  定义单词间的固定空间。

Letter-spacing:定义字母间距(“a b c  a b c  ”这个效果,中文的字间距要用这个) normal  默认。定义单词间的标准空间。 length  定义单词间的固定空间。

Vertical-align:定义元素和文字的位置关系 baseline  默认。元素放置在父元素的基线上。 sub  垂直对齐文本的下标。 super  垂直对齐文本的上标

top  把元素的顶端与行中最高元素的顶端对齐 text-top  把元素的顶端与父元素字体的顶端对齐 middle  把此元素放置在父元素的中部。

bottom  把元素的顶端与行中最低的元素的顶端对齐。 text-bottom  把元素的底端与父元素字体的底端对齐。

%  使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 Text-align:定义文字的位置(设置盒内居中的效果可以用这个) left  把文本排列到左边。默认值:由浏览器决定。 right  把文本排列到右边。 center  把文本排列到中间。

justify  实现两端对齐文本效果。 Text-indent:首行缩进

只介绍个em,其余的自己试效果,em的大小就相当于是目前流中的单字大小,所有中文的首行缩进就是2em

Write-space:设置文本换行

normal  默认。空白会被浏览器忽略。

pre  空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap  文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 pre-wrap  保留空白符序列,但是正常地进行换行。 pre-line  合并空白符序列,但是保留换行符。 Display:

none  此元素不会被显示。

block  此元素将显示为块级元素,此元素前后会带有换行符。(我觉得除了块级或者内联,其余的不知道有什么好用的呀,反正就是那些不能设计什么长宽外边距的,就打成块就ok) inline  默认。此元素会被显示为内联元素,元素前后没有换行符。 inline-block  行内块元素。(CSS2.1 新增的值) list-item  此元素会作为列表显示。

run-in  此元素会根据上下文作为块级元素或内联元素显示。

compact  CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 marker  CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 table  此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 inline-table  此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 table-row-group  此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 table-header-group  此元素会作为一个或多个行的分组来显示(类似 <thead>)。 table-footer-group  此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 table-row  此元素会作为一个表格行显示(类似 <tr>)。

table-column-group  此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 table-column  此元素会作为一个单元格列显示(类似 <col>)

table-cell  此元素会作为一个表格单元格显示(类似 <td> 和 <th>) table-caption  此元素会作为一个表格标题显示(类似 <caption>)Dreamweaver cs6中css属性

方框 :

Width:固定宽度 height固定高度 Float:浮动方式 Left:左浮动 Right:右浮动 Clear:清除浮动

left  在左侧不允许浮动元素。 right  在右侧不允许浮动元素。

both  在左右两侧均不允许浮动元素。

Padding:内边距 margin:外边距(左右自动边距是设置块居中)Dreamweaver cs6中css属性

边框 :

Style:

none  定义无边框。

hidden  与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 dotted  定义点状边框。在大多数浏览器中呈现为实线。 dashed  定义虚线。在大多数浏览器中呈现为实线。 solid  定义实线。

double  定义双线。双线的宽度等于 border-width 的值。

groove  定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge  定义 3D 垄状边框。其效果取决于 border-color 的值。 inset  定义 3D inset 边框。其效果取决于 border-color 的值。 outset  定义 3D outset 边框。其效果取决于 border-color 的值。Dreamweaver cs6中css属性

列表 :

List-style-type:定义列表的记号 (通常都是把列表设置到none) none  无标记。

disc  默认。标记是实心圆。 circle  标记是空心圆。 square  标记是实心方块。 decimal  标记是数字。

decimal-leading-zero  0开头的数字标记。(01, 02, 03, 等。) lower-roman  小写罗马数字(i, ii, iii, iv, v, 等。) upper-roman  大写罗马数字(I, II, III, IV, V, 等。)

lower-alpha  小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) upper-alpha  大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) lower-greek  小写希腊字母(alpha, beta, gamma, 等。) lower-latin  小写拉丁字母(a, b, c, d, e, 等。) upper-latin  大写拉丁字母(A, B, C, D, E, 等。) hebrew  传统的希伯来编号方式

armenian  传统的亚美尼亚编号方式

georgian  传统的乔治亚编号方式(an, ban, gan, 等。) cjk-ideographic  简单的表意数字

hiragana  标记是:a, i, u, e, o, ka, ki, 等。(日文片假名) katakana  标记是:A, I, U, E, O, KA, KI, 等。(日文片假名) hiragana-iroha  标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名) katakana-iroha  标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名) List-style-image:用图片来显示列表

List-style-position:标记的位置

inside  列表项目标记放置在文本以内,且环绕文本根据标记对齐。

Outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。Dreamweaver cs6中css属性

定位: 

Position:

absolute 生成绝对定位的元素 fixed  生成绝对定位的元素,相对于浏览器窗口进行定位。(可以用来设置浮动的页面上的元素)

relative生成相对定位的元素 static  默认值。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。这些属性都是参考它的父亲,就是上一个进行过定位的

Width和height的值用来设定这个区域的大小 Visibility:

visible  默认值。元素是可见的。 hidden  元素是不可见的。

collapse当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 z-index:

auto默认。堆叠顺序与父元素相等。 number设置元素的堆叠顺序。

Clip:这个属性用于定义一个剪裁矩形。对于一个绝对定义元素,在这个矩形内的内容才

可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大,也可能比内容区小。Dreamweaver cs6中css属性

分页 :

Page-break-before: 分页

auto  默认值。如果必要则在元素前插入分页符。 always  在元素前插入分页符。 avoid  避免在元素前插入分页符。

left  在元素之前足够的分页符,一直到一张空白的左页为止。 right  在元素之前足够的分页符,一直到一张空白的右页为止。 Page-break-after:

视觉效果 :

Cursor:鼠标滑过这个区域的时候的光标 url需使用的自定义光标的 URL。

注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 default  默认光标(通常是一个箭头) auto  默认。浏览器设置的光标。 crosshair  光标呈现为十字线。

pointer  光标呈现为指示链接的指针(一只手){有时候会用这个} move  此光标指示某对象可被移动。

e-resize  此光标指示矩形框的边缘可被向右(东)移动。

ne-resize  此光标指示矩形框的边缘可被向上及向右移动(北/东)。 nw-resize  此光标指示矩形框的边缘可被向上及向左移动(北/西)。 n-resize  此光标指示矩形框的边缘可被向上(北)移动。

se-resize  此光标指示矩形框的边缘可被向下及向右移动(南/东)。 sw-resize  此光标指示矩形框的边缘可被向下及向左移动(南/西)。 s-resize  此光标指示矩形框的边缘可被向下移动(南)。 w-resize  此光标指示矩形框的边缘可被向左移动(西)。 text  此光标指示文本。

wait  此光标指示程序正忙(通常是一只表或沙漏)。

help  此光标指示可用的帮助(通常是一个问号或一个气球)。

历史上的今天
2月
27
悲酥清风
  • 本文由 发表于 2016年2月27日 22:10:55

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定