使用CSS美化页面
作为一个程序员,在我们开发网站的时候，虽然不需要像专业的美工那样对CSS的各种属性或技术了如指掌，但是我们还是需要了解一些最基本的属性的用法和如何使用现有页面样式，这样当美工人员完成一套样式时，我们就可以很方便的套用和修改网站的样式。当然如果实际工作中美工的工作也由我们完成的话，我们可以通过查相关资料来完成，做到现学现用即可，这种能力也是一个程序员所不可缺少的。引入样式的四种方式和”选择器”我们都已经介绍完了，这章我们主要来了解CSS的常用属性。
CSS的常用属性主要有文本、段落、背景属性三种。
文本属性
1.font-size：字体大小，值为数字。可以使用的单位有两种：绝对单位和相对单位。绝对单位比如厘米cm、毫米mm、英寸in、磅pt，相对单位 像素px(密度单位 全称pixel)。通常我们都使用相对单位,例如30px.
补充另一个相对单位:em
<style type="text/css">
p {
text-indent: 2em;/*首行缩进两个字符 em为相对单位 1em代表1个字符的大小
浏览器默认1字符为16px*/
}
</style>
2.color:字体颜色，可以用英文，例如red、green、blue,也可以用16进制#000000-#ffffff表示,例如#ff0000表示红色、#00ff00表示绿色、#0000ff表示蓝色等。还有一种是通过rgb所占比例表示颜色,比如rgb(100%,0%,0%)表示红色。比较常用的是16进制的方式。
英文、16进制(短16进制)、rgb(255,255,255)、rgb(100%,100%,100%)
其他文本属性
3.font:它是文字的一个复合属性，可同时控制文字的大小、字体等，但是为了精确控制，一般不采用此属性。
演示代码:
京东登录页面, “京东会员” 字样,代码如下
font: 20px "microsoft yahei","\5b8b\4f53";
应该写成
font:20px “微软雅黑”,”宋体”
4.font-weight:设置文字是否加粗，该属性的值为文字加粗的程度，加粗的程度有lighter、normal、bold、bolder,分别是更细、正常、加粗、更粗。也可以使用数值100-900来控制文字的粗细。
5.font-family:设置文字文体，该属性需要浏览器的内嵌字体支持，可以设置多个显示字体，浏览器按该属性指定的多个字体依次搜索，以最先找到的字体来显示文字，多个属性值以逗号隔开。例如font-family:楷体,宋体.
段落属性(空白处理)
line-height:段落中每行的行高度。
text-align:文本对齐方式，值可以是left、center、right,分别是左对齐、居中对齐、右对齐。
letter-spacing:文字之间的间距。
text-decoration:文本修饰，例如underline表示带下划线。
white-space:空白处理,例如nowrap表示不换行，即使段落里的文字超过了屏幕显示的宽度也不换行。
演示代码如下:
/*文本、段落属性*/
li {
font: 12px 宋体;
text-align: left;
line-height: 28px;
}
.title {
letter-spacing: 5px;
white-space: nowrap;
text-decoration: underline;
}
.bigFont {
font-size: 16px;
color: red;
}
---------------------------------------------------页面文件----------------------------------------------
<html>
<head>
<title>文本、段落属性</title>
<link rel="stylesheet" href="css/textAttribute.css" type="text/css"></link>
</head>
<body>
<ul>
<li class="title">【新闻】[设搜狐为首页] 10月1日,xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </li>
<li class="bigFont">六十年国庆阅兵规格堪比奥运会</li>
<li>我国商务部对美国增收中国轮胎关税提出严正交涉</li>
</ul>
</body>
</html>
运行结果
通过上图我们可以看到文本和段落属性所产生的效果，值得一提的是列表第一列文字并没有显示全，但是由于加了white-space: nowrap 属性，所以并没有换行，用户可以通过拖拽滚动条浏览右边的内容。如果想让文本自动换行的话可以把该属性去掉，去掉后的效果如下图：
去掉white-space属性后显示不全自动换行
演示white-space
具体参见w3cschool
如果文章中有多个空格,千万不要使用多个 这样影响可读性 ,可以使用
p {white-space: pre;}
空格和换行都会保留
http://www.w3school.com.cn/tiy/t.asp?f=csse_text_white-space_pre
背景属性
background-color:设置背景颜色。
其他背景属性
background:它是背景的一个复合属性，可以同时设置背景颜色、背景图像等属性。
background-image:设置背景图片，该属性需要通过url(图片位置)这个函数来设置。如果同时设置了背景图片和背景颜色，则背景图片将覆盖背景颜色。
background-repeat:背景图片重复(平铺)方式。该属性值可以为repeat、no-repeat、repeat-x、repeat-y四个值，分别是xy轴都重复、不重复、x轴重复、y轴重复。注意指定该属性之前，必须先指定backgroud-image属性。
background-position:设置背景图像的位置。如果只指定了一个值，该值将对应 x轴，纵坐标默认为50%.(您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。)如果指定两个值则第二个值为纵坐标。注意指定该属性之前，必须先指定backgroud-image属性。
下面给网页添加一张背景图片，来演示一下以上属性的使用，以下代码所有的页面文件都是空的，页面文件只是单纯引入CSS文件，在此就不重复写页面文件代码了，读者只需关注CSS文件即可。
CSS文件
body {
background-image:url(../img/javaPic.png);
}
运行结果
从上图可以看出，如果只添加background-image属性时，默认的重复方式为x、y轴都重复。
如果我们想控制图片重复的方式，可以加上background-repeat属性
body {
background-image:url(../img/javaPic.png);
background-repeat:repeat;
}
运行结果
通过上图可以看出background-repeat设置成repeat和不设置background-repeat效果一样也是x、y轴都重复
如果只想水平方向重复可以把background-repeat设置为repeat-x
如果只想垂直方向重复，可以设置background-repeat属性为repeat-y,请读者们自己练习一下这里就不演示了。
如果不想重复可以设置background-repeat属性为no-repeat
body {
background-image:url(../img/javaPic.png);
background-repeat:no-repeat;
}
或
background:url("../img/javaPic.png") no-repeat;
运行结果
如果这时候想控制图片的位置，可以使用background-position属性
(不推荐使用,一般都使用定位来控制一个元素的位置)
body {
background-image:url(../img/javaPic.png);
background-repeat:no-repeat;
background-position:50px;
}
IE运行结果
从上图可以看出如果只设定一个值，这个值为x轴的偏移量，y轴这时候采用的是50%位置。
Firefox运行结果不一样,同学们自行实验
如果设置两个值，第二个值为y轴的偏移量
演示代码:
body {
background-image:url(../img/javaPic.png);
background-repeat:no-repeat;
background-position:50px 50px
}
background-color属性我们实际项目中可以用它达到表格隔行换色效果，这一点我们在HTML章节已经有了演示，在此就不重复了.
background-attachment属性
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
body {
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed;
}
参见w3school网站
http://www.w3school.com.cn/tiy/t.asp?f=csse_background-attachment
二、图片偏移技术
目的：如果没有图片偏移，我们需要为每一个图标或图片存储成一个小文件，有了图片偏移技术后，我们可以把需要的小图片放在一张图片里，使用技术让部分图片内容显示，做到我们需要的效果。
示例：
<style>
div.pianyi{
width:300px;
height:150px;
background:url(image.png) no-repeat;
/*显示剩余的部分，向左移动60px*/
background-position:-60px 0;
}
</style>
<div class="pianyi">
</div>
这样即使图片中有大部分的内容，我们也可以通过偏移技术只显示部分图标。
使用div可以显示出图片,但如果把div改成label就不行,why?
<label class="login-label"></label>
因为调整的是行内元素的宽度、高度,行内元素的特点,高、宽、边距不可调(下一章学),如果需要调整宽度,需要加入如下代码:
display:inline-block;/*把行内元素转换成 行内块 即水平排列的块级元素*/
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
