- 相关推荐
Dreamweaver8.0速记CSS属性
导语：CSS 规范允许使用称作速记 CSS 的简略语法创建样式。下面就由小编为大家介绍一下Dreamweaver8.0速记CSS属性，欢迎大家阅读!
Dreamweaver8.0速记CSS属性
速记 CSS 使您可以用一个属性标签指定多个属性的值。例如，您可以使用 font 属性在一行语法中设置 font-style、font-variant、font-weight、font-size、line-height 和 font-family 属性。
使用速记 CSS 时需要注意的关键问题是速记 CSS 属性省略的值会被指定为属性的默认值。当两个或多个 CSS 规则指定给同一标签时，这可能会导致页面无法正确显示。
例如，下面显示的 H1 标签使用了普通的 CSS 语法。注意，font-variant、font-stretch、font-size-adjust 和 font-style 属性的值都被指定为它们的默认值。
H1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
下面用一个速记属性重写这一标签：
H1 { font: bold 16pt/18pt Arial }
使用速记符号编写时，会自动将省略的值指定为它们的默认值。因此，上述速记示例省略了 font-variant、font-style、font-stretch 和 font-size-adjust 标签。
如果您使用 CSS 语法的速记形式和普通形式在不只一个位置定义了样式(如在 HTML 页面中嵌入样式并从外部样式表中导入样式)，一定要注意省略的属性可能会覆盖(或层叠)在其他位置明确设置的属性。
因此，Dreamweaver 默认情况下使用 CSS 符号的普通形式撰写语法。这样可以防止能够覆盖普通规则的速记规则所引起的潜在问题。在 Dreamweaver 中打开使用速记 CSS 符号编写代码的 Web 页面时，请注意 Dreamweaver 将使用普通形式创建新的 CSS 规则。通过更改"首选参数"对话框(在 Windows 中为"编辑">"首选参数";在 Macintosh 中为"Dreamweaver">"首选参数")中"CSS 样式"类别中的 CSS 编辑首选参数，您可以指定 Dreamweaver 创建和编辑 CSS 规则的方式。
注意
"CSS 样式"面板仅使用普通符号创建规则。如果您使用"CSS 样式"面板创建页面或 CSS 样式表，一定要知道对速记 CSS 规则进行手工编码可能会导致速记属性覆盖那些用普通形式创建的属性。因此，请使用普通的 CSS 符号创建您的样式。
CSS常用属性
一、字体属性：(font)
font-size:大小
font-size:x-large; (特大)
font-size:x-small; (特小)(一般情况下，中文用不到)
font-size:16px; (最常用)
font-size:16pd;
font-style:样式
font-style:oblique; (偏斜体)
font-style:italic; (斜体)
font-style:normal; (正常)
line-height:行高
line-height:normal;(正常)
line-height:16px:
line-height:16pd:
line-height:16em:
font-weight:粗细
font-weight:bold; (粗体)
font-weight:lighter; (细体)
font-weight:normal; (正常)
font-variant:变体
font-variant:small-caps; (小型大写字母)
font-variant:normal; (正常)
text-transform:大小写
text-transform:capitalize; (首字母大写)
text-transform:uppercase; (大写)
text-transform:lowercase; (小写)
text-transform:none; (无)
text-decoration:修饰
text-decoration:underline; (下划线)
text-decoration:overline; (上划线)
text-decoration:line-through; (删除线)
text-decoration:blink; (闪烁)
font-family:字体样式
font-family:"微软雅黑";
font-family:serif;
二、背景属性：(background)
background-color:色彩
background-color:#FFFFFF;
background-color:rgb(255,0,255);
background-color:yellow;
background-image:url();图片
background-image:url();
background-image:url(./images/123.jpg);
background-repeat:重复
background-repeat:repeat; (平铺)
background-repeat:no-repeat (不平铺)
background-repeat:repeat-x (横向平铺)
background-repeat:repeat-y (纵向平铺)
background-attachment:滚动
background-attachment:fixed; (固定)
background-attachment:scroll; (滚动)
background-position:位置
如果只规定了一个值，那么第二个值默认为center
background-position:left; (水平)
background-position:top; (垂直)
可用值：
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
background-position:20% 30%; (x为水平) (y为垂直) (如果只规定一个值，第二个值默认为50%)
简写方法
background:#000 url(..) repeat fixed left top;
三、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; (实心圆形符号)
list-style-type:circle; (空心圆形符号)
list-style-type:square; (实心方形符号)
list-style-image:url(/dot.gif); (图片式符号)
list-style-position:outside; (凸排)
list-style-position:inside; (缩进)
四、CSS连接属性
a (所有超链接)
a:link (超链接初始文字格式)
a:visited (浏览过的/点击过的链接文字格式)
a:active (按下链接的格式)
a:hover (鼠标滑过样式)
五、边框属性
border-style:边框样式
border-style:dotted; (点线)
border-style:dashed; (虚线)
border-style:solid; (固体)
border-style:double; (双线)
border-style:groove; (3D槽线)
border-style:ridge; (3D脊状)
border-style:inset; (3D凹陷)
border-style:outset; (3D开始)
border-width:边框宽度
border-width:10px;
border-color:边框颜色
border-color:#FFFFFF;
border-color:red;
border-color:rgb(255,0,255);
简写办法
border:width style color;
border:10px solid red;
六、区块属性
letter-spacing:字间距
letter-spacing:2px;
letter-spacing:-3px;
text-align:对齐
text-align:justify; (两端对齐)
text-align:left; (左对齐)
text-align:right; (右对齐)
text-align:center; (居中)
text-indent:缩进
text-indent:10px;
vertical-align:垂直对齐
vertical-align:baseline; (基线)
vertical-align:sub; (下标)
vertical-align:super; (下标)
vertical-align:top;
vertical-align:text-top;
vertical-align:middle;
vertical-align:bottom;
vertical-align:text-bottom;
word-spacing:词间距
word-spacing:16px;
white-space:段落中的文本不进行换行
white-space:pre; (保留回车和空格，不让文本换行)
white-space:nowrap; (不换行)
white-space:pre-wrap (保留回车和空格，让文本换行)
white-space:pre-line (保留回车，让文本换行)
display:显示
display:block; (元素将显示为块级元素，此元素前后会带有换行符。)
display:inline; (默认。元素会被显示为内联元素，元素前后没有换行符。)
display:list-item; (元素会作为列表显示。)
display:run-in; (元素会根据上下文作为块级元素或内联元素显示。)
七、方块属性
基本属性
width:100%;
height:100%;
width:100px;
height:100px;
float:浮动
float:left;
float:right;
float:none;
clear:元素的哪一侧不允许其他浮动元素
clear:both; (在两侧不允许浮动元素)
clear:left; (在左侧不允许浮动元素)
clear:right; (在右侧不允许浮动元素)
clear:both; (在左右两侧均不允许浮动元素)
clear:none; (默认值。允许浮动元素出现在两侧)
margin:外边距属性
margin:auto; (游览器计算属性)
margin:0 auto; (让当前元素在父元素里面左右居中)
margin:10px; (四周添加)
margin:10px 20px; (上下 左右)
margin:10px 20px 30px; (上 左右 下)
margin:10px 20px 30px 40px; (上 左 右 下)
margin:10%; (百分比外边距)
margin:left;单一方向添加
margin-left
margin-right
margin-top
margin-bottom
padding:内边距属性
padding:auto; (游览器计算属性)
padding:10px; (四周添加)
padding:10px 20px; (上下 左右)
padding:10px 20px 30px; (上 左右 下)
padding:10px 20px 30px 40px; (上 右 下 左)
pargin:10%; (百分比内边距)
padding:left;单一方向添加
padding-left
padding-right
padding-top
padding-bottom
八、定位属性
position:定位
position:absolute; (绝对定位)
position:relative; (相对定位)
position:static; (默认)
visibility：规定元素是否可见
visibility:inherit; (继承父元素) visibility:visible; (默认) visibility:hidden; (隐藏) ↓当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。
被行或列占据的空间会留给其他内容使用。
如果此值被用在其他的元素上，会呈现为 "hidden"。 visibility:collapse;
overflow:溢出属性
overflow:visible; (默认)
overflow:hidden; (隐藏)
overflow:scroll; (添加滚动条)
overflow:auto; (自动添加，超出的时候添加，不超出的时候不添加)
clip:裁剪
clip:rect(12px,auto,12px,auto) (遵循上右下左 顺时针)
clip:auto; (默认值，不裁剪)
clip:inherit (继承父元素)
【Dreamweaver8.0速记CSS属性】相关文章：
什么是CSS11-08
网页设计css教学02-07
让网站变灰的css代码实例12-02
科目一速记方法10-21
textarea属性设置详解04-14
科目一考试的速记口诀02-07
科目一考试速记口诀01-11
正确使用HTMLtitle属性的建议10-25
科目三灯光模拟速记技巧04-21
科目一快速记忆方法02-16