Adobe推出的一套拥有可视化编辑界面,用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页(通常是标准通用标记语言下的一个应用HTML),对于初级人员,你可以无需编写任何代码就能快速创建web页面。
工欲善其事必先利其器,相关链接:Adobe Dreamweaver CS6精简绿色简体中文版
类型 :
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色):
背景 :
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 值。
区块:
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>)
方框 :
Width:固定宽度 height固定高度 Float:浮动方式 Left:左浮动 Right:右浮动 Clear:清除浮动
left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
Padding:内边距 margin:外边距(左右自动边距是设置块居中)
边框 :
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 的值。
列表 :
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 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
定位:
Position:
absolute 生成绝对定位的元素 fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。(可以用来设置浮动的页面上的元素)
relative生成相对定位的元素 static 默认值。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。这些属性都是参考它的父亲,就是上一个进行过定位的
Width和height的值用来设定这个区域的大小 Visibility:
visible 默认值。元素是可见的。 hidden 元素是不可见的。
collapse当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 z-index:
auto默认。堆叠顺序与父元素相等。 number设置元素的堆叠顺序。
Clip:这个属性用于定义一个剪裁矩形。对于一个绝对定义元素,在这个矩形内的内容才
可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大,也可能比内容区小。
分页 :
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 此光标指示可用的帮助(通常是一个问号或一个气球)。
评论