目录
一、CSS思维导图
二、注释 /*.......*/
三、选择器
选择器用于定位(选择)需要添加样式的网页元素
（一）标签选择器
标签名(元素)作为选择器名称，如：div 、h1 、p
div {
color: blue;
font-size: 30px;
}
（二）类选择器
类用于描述一组标签的样式，class 可以用在多个标签中
.title {
color: red; /* 红色 */
font-size: 30px;
}
......
<div class=“title”>CSS</div>
<div class=“title” >快速入门</div>
（三）ID选择器
#title {
color: green; /* 绿色 */
font-size: 30px;
}
......
<div id=“title”>CSS</div>
（四）通配选择器
利用 * 为指定范围内的所有标签设置样式
* {
color: purple; /* 紫色 */
font-size: 30px;
}
（五）包含选择器
为父元素(标签)下的子元素设置样式
div p {
color: gold; /* 金色 */
font-size: 30px;
}
.............
<div>
<p>CSS</p>
</div>
<div>为父元素，<p>为子元素
（六）选择器分组
为一组元素设置相同样式，利用逗号分割多个选择器
#title , .logo {
color: brown; /* 棕色 */
font-size: 30px;
}
（七）示例
应用的是ID选择器
<style>
#b1{
width:129px;
height:50px;
float:left;
margin-left: 10px;
background:url(素材/images/bg1.png);}
</style>
<body>
<button id="b1"><h2>五彩导航</h2></button>
</body>四、背景
（一）背景颜色 background-color
background-color: blue;
（二）背景图片 background-image
background-image: url(‘bg.png’);
background-repeat: no-repeat; /*图片不重复*/
（三）图片位置 background-position
background-position: right top;/*图片的位置*/
图片可选的位置有：
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
五、引入方式
css中引入方式有内嵌式、内部式和外部式。
1.内嵌式：又称行内式，在HTML标签上编写样式，如：<p style="color:red">
2.内部式：包含在HTML的<head></head>中，只对当前页面有效，如:<style>...</style>
3.外部式：链接引入外部样式表文件，如：<link href="style.css" ...>。需要用link标明
103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
