尺寸单位
• %:百分比
• 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>