一、字体设置和文本设置
1、文字的字体
(1)字体的复合属性
复合属性是指该属性是由多种属性组合而成。CSS中字体用font表示。
font:font-style||font-variant||font-weight||font-size||font-height||font-family
属性分别为设置:字体的样式、字母大小写、文本的粗细、文本字体的大小、文本字体名称序列。ong
(2)字体的颜色
Color:颜色值
颜色表示方法有三种:#RRGGBB、rbg和颜色名
(3)字体的大小
font-size:xx-small;
字体大小:可以用xx-small、x-small等字体尺寸值。也可以用具体数值+px单位表示。
(4)字体的粗细
font-weight:bold;
字体的粗细又称为字体的重量。
可以用bold等关键字也可以用100-900中的数字表示文本的粗细。
(5)字体类型
font-family:fontname;
fontname指字体类型,有宋体、黑体、Courier等。
2、行距设置
行距指行与行之间的距离。
line-height:30px;
3、文本间距与间隔
(1)文本间距
文本间距指单词(包括汉字与字母)之间插入的空格数。
word-spacing: normal|长度单位
(2)文本间隔
文本间隔指文本中字符、单词的间隔,即文字间隔和字母间隔,包括设定字与字之间,字母与字母之间的距离。
letter-spacing: normal|长度单位
4、字母大小写转换
text-transform:capitalize|uppercase|lowercase|none
5、文本的修饰
修饰包括对文本添加下划线、上划线、删除线、闪烁等。
text-decoration:underline|overline|line-through|bink|none
6、空格处理方式
空格处理应用在该对象处理文本间的空格时。
语法:
while-space:normal |pre |nowrap
7、设置文本垂直与水平对齐
(1)文本垂直对齐
vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom
(2)文本水平对齐
text-align:left | right |center |justify
8、文本缩进
文本缩进可以用于块级元素(P、H1等)。
text-indent:<长度>|<百分比>
长度的单位是px
如:text-indent:20px;
百分比:表示该文本缩进在对象中占有的百分比。
二、设置背景和尺寸
1、背景的基本语法
背景是指对象在网页中显示的背景颜色或图像。背景的对象可以是HTML标记、CSS中的ID或CLASS对象。
背景语法:
Background:background-color | background-image | background-repeat | background-attachment | background-position
背景的对象可以是HTML标记、也可以是CSS中的ID或CLASS对象。
2、设置背景颜色
background-color:transparent|color
前者表示背景色透明,后者表示颜色值。
应用:
#id1
{
background:red;
}
<body>
<div id="id1">背景颜色测试</div>
</body>
3、设置背景图像
background-image:none | url
none是默认值,表示设置成没有图像的背景,url为图像的路径。
#id2{
padding: 400px;
background-image:url("image/小兔子.jpg");
}
<body>
<div id="id2">背景颜色测试</div>
</body>
(1)设置背景图像滚动
如下的滚动用background-attachment
语法:
background-attachment:scroll|fixed
scroll表示图像因内容的滚动而滚动,而参数fixed表示背景图像固定在网页中。
(2)设置背景图像的位置
控制图像在对象背景中的位置。有两种形式:
方式一:
background-position:length | length
length可以为百分数或者由浮点数字和单位标识符组成的长度值。
如:
background-position: 30px 20%;
方式二:
background-position:position | position
position后面可接top、center、bottom、left、right等方向值。
(3)设置背景的铺排
background-repeat: repeat | no-repeat | repeat-x |repeat-y
4、设置尺寸
(1)设置宽度
width:auto | length
auto根据浏览器窗口调节对象的宽度,length具体值来设置。
(2)设置高度
height:auto | length
三、设置外边距和内边距
外边距(margin)指对象与外面距离或外延距离。内边距(padding)表示对象内部填充距离。
1、外边距的基本语法
语法:
margin:auto | length
margin是复合属性,内联对象要用margin时,必须先设定对象的height或width属性。
2、外边距的四边设置
(1)顶端外边距的用法
顶端外边距,又称上端外延距离,是对象与父对象的上端距离,
margin-top:auto | length
属性值接auto表示相对边的值。
(2)右端外边距
margin-right:auto | length
(3)底端外边距
margin-bottom:auto | length
(4)左端外边距
margin-left:auto | length
应用案例:
css文件:
#mybody
{
width: 778px;/*设置宽为778px*/
margin: auto;/*容器层上下左右的外边距为自动*/
font-size: 14px;/*字体大小*/
border: 0;/*容器层边框为0*/
}
div
{
border: 1px solid red;/*设置所有层为1像素的红色实线*/
}
#header
{
margin: auto;
width: 100%;/*设置宽度为100%*/
height: 80px;
}
#contentleft
{
width: 180px;
height: 450px;
float: left;/*设置层向左漂移*/
}
#contentcenter
{
width: 410px;
height: 450px;
float: left;
margin-left: 6px;
}
#contentright
{
width: 170px;
height: 450px;
float: right;
margin-left: 6px;
}
#bottom
{
width: 100%;
margin-top: 450px;/*设置外边距上下为5px,左右为自动*/
height: 60px;
}
html文件
<body>
<div id="mybody">
<div id="header">
这是网页头部,放置logo
</div>
<div id="contentleft">
网页内容左栏
</div>
<div id="contentcenter">
网页中间栏
</div>
<div id="contentright">
网页内容右栏
</div>
<div id="bottom">
网页底部
</div>
</div>
</body>
3、内边距的基本语法
内边距用在对象的内部,表示对象中的内部填充距离。
基本语法:
padding:length
length表示相对于父对象的百分比或具体数值。
应用测试:
css编码:
#m1{
width: 200px;
height: 150px;
background: #ccc;
padding: 20px;/*设置内边距*/
}
#m2{
height: 100%;
background: green;
}
html编码:
<body>
<div id="m1">
<div id="m2"></div>
</div>
</body>
4、内边距的四边属性
基本语法如下:
padding-top:length;
padding-right:length;
padding-bottom:length;
padding-left:length;