尺寸单位
• %：百分比
• in：英寸
• cm：厘米
• mm：毫米
• pt：磅(1pt等于1/72英寸)
• px：像素(计算机屏幕上的一个点)
• em：1em等于当前的字体尺寸，2em等于当前字体尺寸的两倍，继承父级元素的字体大小
• rem：与em类似，但是相对于根元素设置字体尺寸的倍数
样式表中：
Html {font-size:10pt;}
div {font-size:2rem;}
p {font-size:2em;}
HTML文档中：
<body>
aa
<div>
bb
<p>cc<p>
</div>
</body>
颜色单位
• rgb(x,x,x)：RGB 值，如 rgb(255,0,0)
• rgb(x%,x%,x%)：RGB百分比值，如rgb(100%,0%,0%)
• #rrggbb：十六进制数，如#ff0000
• #rgb：简写的十六进制数，如#f00
• 表示颜色的英文单词，如 red
• 尺寸属性是用于设置元素的宽度和高度
– 单位一般为像素或百分比
• 宽度属性
– width
– max-width
– min-width
• 高度属性
– height
– max-height
– min-height
框模型
边框 • 简写方式
– border:width style color;
• 单边定义
– border-left/right/top/bottom:width style color;
• border-width
– border-left/right/top/bottom-width
• border-style
– border-left/right/top/bottom-style
• border-color
– border-left/right/top/bottom-color
边框颜色，可设置为值 transparent（用于创建有宽度的不可见边框）
框模型
• 框模型（Box Model）定义了元素框处理元素内容、内 边距、边框和外边距的方式
• width 和 height 指内容区域的宽度和高度
• 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸
#box
{
width: 70px;
margin: 10px;
padding: 5px;
}
对象实际宽度 = 左侧外边距 + 左侧边框 + 左侧内边距 + 宽度 + 右侧内边距 + 右侧边框 + 右侧外边距
样式表中：
div.box
{
width:200px;
height:100px;
padding:20px;
margin:40px;
border:1px solid black;
}
html文档中：
<div class="box">
This is content.
This is content.This is content.
</div>
- 外边距
围绕在元素边框周围的空白区域是外边距
– 会在元素外创建额外的空白
– 外边距是透明的
div
{
border:2px solid red;
width:200px;
height:50px;
}
#d1 {margin-top:15px;}
外边距 margin
• 外边距：与下一个元素之间的空间量
– margin：value;
• 单边设置
– margin-top/right/bottom/left：value;
• 外边距的属性值可能为px(像素)，百分比(%)或自动(auto)，也可以为负值
div {
width:150px;
height:150px;
border:2px solid #0f0;
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
}
默认情况下，以下 HTML 块级元素都存在外边距
– body
– h1,h2,h3,h4,h5,h6
– p…
• 声明 margin 属性，可以覆盖默认样式
body,p,div,h1,h2,h3,h4,h5,h6,pre {
margin:0;
}
margin 可取值为 auto，由浏览器计算外边距
– 实现水平方向居中显示的效果
div
{
width:100px;
height:100px;
border:1px solid black;
margin:auto;
}
设置水平方向居中
- 内边距
内容区域和边框之间的空间
– 会扩大元素边框所占用的区域
div
{
border:2px solid red;
width:200px;
height:50px;
}
#d1 {padding:20px;}
内边距 padding
• 内边距：内容与框线之间的距离
– padding：value;
• 内边距属性值可以为像素、百分比，但不能为负数
• 单边设置
– padding-top/right/bottom/left：value;
样式属性
背景属性
背景色 background-color 用于为元素设置背景色
– 接受任何合法的颜色值
– 可取值为 transparent
为元素背景设置一种纯色
– 会填充元素的内容、内边距和边框区域
– 如果边框有透明部分，会透过这些透明部分显示出背景色。
div
{
border:2px dashed black;
width:200px;
height:50px;
background-color:#ccc;
}
背景图片 background-image
• 默认值是 none，表示背景上没有放置任何图像
• 如果需要设置一个背景图像，需要用起始字母 url 附带一个图像的 URL 值
– 可以是相对 URL 或者绝对 URL
body
{
background-image: url("image/bg_01.gif");
}
字体属性
控制字体
• 指定字体
– font-family : value1,value2;
• 字体大小
– font-size : value;
• 字体加粗
– font-weight : normal/bold/value;
• 字体样式
– font-style : normal/italic;
• 小型大写字母显示
– font-variant : normal/small-caps;
样式表中:
p {
font-family : Times, 'New York', serif ;
font-size : 14pt ;
font-weight : bold ;
font-style : italic;
font-variant : small-caps;
}
html文档中:
<p>this is a paragraph.</p>
字体属性 font
• 字体属性 font 用于把所有针对字体的属性设置在一个声明中
• 为简写属性，包含6个值，可以按顺序设置
– font : font-style font-variant font-weight font-size
font-family;
– 不设置的值，则使用默认设置
控制文本格式 • 文本颜色 color : value;
• 文本排列 text-align : left/right/center;
• 文字修饰 text-decoration : none/underline;
• 行高 line-height : value;
样式表中:
div {
color : #FF0000 ;
text-align : left ;
text-decoration : underline ;
height:50px;
border : 1px solid black;
}
--------------------------------------------
div {
color : #FF0000 ;
text-align : left ;
text-decoration : underline ;
height:50px;
border:1px solid black;
line-height:50px;
}
html文档中:
<div>div中的文本</div>
