dreamweavercs6css样式解释.docx

上传人:b****6 文档编号:5578341 上传时间:2022-12-28 格式:DOCX 页数:13 大小:118.84KB
下载 相关 举报
dreamweavercs6css样式解释.docx_第1页
第1页 / 共13页
dreamweavercs6css样式解释.docx_第2页
第2页 / 共13页
dreamweavercs6css样式解释.docx_第3页
第3页 / 共13页
dreamweavercs6css样式解释.docx_第4页
第4页 / 共13页
dreamweavercs6css样式解释.docx_第5页
第5页 / 共13页
点击查看更多>>
下载资源
资源描述

dreamweavercs6css样式解释.docx

《dreamweavercs6css样式解释.docx》由会员分享,可在线阅读,更多相关《dreamweavercs6css样式解释.docx(13页珍藏版)》请在冰豆网上搜索。

dreamweavercs6css样式解释.docx

dreamweavercs6css样式解释

Dreamweavercs6中css属性的解释

参考w3c。

()

目录:

类型>>背景>>区块>>方框>>列表>>定位>>扩展>>分页>>视觉效果>>过渡>>

全文按照DW_cs6中css的分类来解释,以方便查阅。

文章针对对css2熟悉程度不够的朋友,不喜有误可以直接指出,勿喷。

类型

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定义穿过文本下的一条线(就是删除线的效果的样式标签替代)。

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设置背景图像的起始位置。

(topleft

topcenter

topright)

(centerleft

centercenter

centerright)

(bottomleft

bottomcenter

bottomright

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

如果您仅规定了一个关键词,那么第二个值将是"center"。

默认值:

0%0%。

x%y%

第一个值是水平位置,第二个值是垂直位置。

左上角是0%0%。

右下角是100%100%。

如果您仅规定了一个值,另一个值将是50%。

xposypos

第一个值是水平位置,第二个值是垂直位置。

左上角是00。

单位是像素(0px0px)或任何其他的CSS单位。

如果您仅规定了一个值,另一个值将是50%。

您可以混合使用%和position值。

区块:

Word-spacing:

定义单词间距(“abcabcabc”这个效果)

normal默认。

定义单词间的标准空间。

length定义单词间的固定空间。

Letter-spacing:

定义字母间距(“abcabc”这个效果,中文的字间距要用这个)

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中的

标签。

nowrap文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。

pre-wrap保留空白符序列,但是正常地进行换行。

pre-line合并空白符序列,但是保留换行符。

Display:

none此元素不会被显示。

block此元素将显示为块级元素,此元素前后会带有换行符。

(我觉得除了块级或者内联,其余的不知道有什么好用的呀,反正就是那些不能设计什么长宽外边距的,就打成块就ok)

inline默认。

此元素会被显示为内联元素,元素前后没有换行符。

inline-block行内块元素。

(CSS2.1新增的值)

list-item此元素会作为列表显示。

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

compactCSS中有值compact,不过由于缺乏广泛支持,已经从CSS2.1中删除。

markerCSS中有值marker,不过由于缺乏广泛支持,已经从CSS2.1中删除。

table此元素会作为块级表格来显示(类似

),表格前后带有换行符。

inline-table此元素会作为内联表格来显示(类似

),表格前后没有换行符。

table-row-group此元素会作为一个或多个行的分组来显示(类似

)。

table-header-group此元素会作为一个或多个行的分组来显示(类似

)。

table-footer-group此元素会作为一个或多个行的分组来显示(类似

)。

table-row此元素会作为一个表格行显示(类似

)。

table-column-group此元素会作为一个或多个列的分组来显示(类似

)。

table-column此元素会作为一个单元格列显示(类似

table-cell此元素会作为一个表格单元格显示(类似

table-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定义3Dinset边框。

其效果取决于border-color的值。

outset定义3Doutset边框。

其效果取决于border-color的值。

列表

List-style-type:

定义列表的记号

(通常都是把列表设置到none)

none无标记。

disc默认。

标记是实心圆。

circle标记是空心圆。

square标记是实心方块。

decimal标记是数字。

decimal-leading-zero0开头的数字标记。

(01,02,03,等。

lower-roman小写罗马数字(i,ii,iii,iv,v,等。

upper-roman大写罗马数字(I,II,III,IV,V,等。

lower-alpha小写英文字母Themarkerislower-alpha(a,b,c,d,e,等。

upper-alpha大写英文字母Themarkerisupper-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此光标指示可用的帮助(通常是一个问号或一个气球)。

Filter:

过渡,略

展开阅读全文
相关搜索

当前位置:首页 > 经管营销 > 经济市场

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1