1 CSS 定义
Cascading Style Sheet 级联样式表
2 CSS基本的语法格式
selector { property: value; }
selector:选择器，表示｛｝中的属性设置将应用于哪些html元素，例如body
property:属性，例如用于设置背景色的属性“backgroud-color”等等
value:值，比如说backgroud-color的值可以是#FF0000
3 CSS代码需要放置的位置--为一个HTML文档应用CSS
为HTML文档应用CSS，有三种方法可以选择，最长使用为第三种：
①行内样式表
<body style="backgroud-color:#FF0000;">
</body>
②内部样式表
将下面该段代码放在<head></head>之间
<style type="text/css">
body {backgroud-color:#FF0000;}
</style>
③外部样式表（引用一个样式表文件）
在项目的style文件夹下新建一个文件style.css文件，
style.css文件内容为：
body {
backgroud-color:#FF0000;
}
在html文档里创建一个指向外部样式表文件的链接，放在<head></head>标签之间
<link rel="stylesheet" type="text/css" href="style/style.css"/>
4 利用css控制html的颜色与背景
① color 属性，用于设置元素的前景色
例：设置h1元素的前景色为红色（#FF0000）
h1{
color:#FF0000;
}
②background-color属性，用于设置元素的背景色
例：设置h1的背景色为#FFCC66，h1的前景色为#990000；设置body的背景色为#FC9804
h1{
color:#990000;
backgroud-color:#FFCC66;
}
body{
background-color:#FC9804;
}
③background-image属性，用于设置背景图片
例：设置body的背景图片为pic.gif
body{
background-image:url("pic.gif");
}
注意：设置图片的位置方式为url("图片位置"); 图片位置可以为本地文件，也可以为网络上的文件。
④background-repeat属性，用于设置图片的平铺方式
可选的值有repeat-x，repeat-y，repeat，no-repeat
例：上例中为避免图像平铺，代码如下：
body{
background-image:url("pic.gif");
background-repeat:no-repeat;
}
⑤background-attachment属性，用于设置图片是否随html元素的滚动而滚动，两个值可选：scroll、fixed
例：上例中，当滚动body时，让图片静止，可添加一行
background-attachment:fixed;
⑥background-position属性，用于设置背景图片的位置
背景图像默认放在左上角，可以以坐标的格式设置该属性，调整背景图像的位置；
设置该属性的方式有如下几种：
background-position:2cm 2cm;--设置背景图像距离左边2cm，距离页面内上侧2cm
background-position:50% 25%;--图片被设置在水平居中，离顶部四分之一处
background-position:top right;--图片被设置在右上角
background-position:100px 255px;--图片距离左边100px，距离上侧255px
⑦background属性，是上述所有与背景有关的属性的缩写写法
下面五行代码，可替换为background属性的一行代码：
background-color:#FFCC00;
background-image:url("pic.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:10px 20px;
使用background可写为：
background:#FFCC00 url("pic.gif") no-repeat fixed 10px 20px;
属性值之间以空格间隔；
各个值的次序：
[background-color]|[background-image]|[background-repeat]|[background-attachment]|[background-position]
如果某个值省略不写，会自动赋默认值 。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
