1.CSS引入方法
内联式：通过标签的style属性，在标签上直接写样式。如：
<div style="width: 200px;height: 400px;background: red">这是一个div标签</div>
<p style="width: 300px;height: 80px;background: green">这是一个段落。</p>嵌入式：通过style标签，在网页上创建嵌入的样式表。如：
<style type="text/css">
div {
width: 200px;
height: 400px;
background: red;
}
p {
width: 300px;
height: 80px;
background: green;
}
</style>外联式：通用样式，写在专门的css文件中，直接在本文件中引用。如：
<head>
<title>CSS外联式</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
</head>2.CSS选择器
(1).标签选择器：此选择器影响范围大，一般用来做一些通用设置，或用在层级选择器中，通用格式如下：
标签名 {
属性名：属性值；
...
}示例：
p {
width: 300px;
height: 80px;
background: green;
}注：一旦使用标签选择器，则当前页面上的所有该标签全部都用该样式。
(2).类选择器：通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
常见格式：
.类名 {
属性名: 值;
...
}示例：
<h1 class="header">这是一个标题标签</h1>
<div class="red header">这是一个div标签</div>
<p class="header">这是一个段落标签</p>
<style>
.red {
color: red;
}
.header {
font-size: 18px;
}
</style>(3).层级选择器：主要应用在标签嵌套的结构中，层级选择器是结合上面两种选择器来写的选择器，它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。按照标签的层级来匹配对应的标签。示例如下：
<div class="con">
<span>这是span标签的内容</span>
<div class="pink">这是div中包含的div标签, 我是粉色</div>
</div>
<style>
.con {
width: 200px;
height: 200px;
}
.con span {
color: green;
}
.con .pink {
color: pink;
}
</style>(4).id选择器：通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能服用，id名一般给程序使用，所以不推荐使用id作为选择器。
使用格式：
#id名 {
属性名: 值
}示例：
<p id="box">这是第一个段落标签</p>
<p>这是第二个段落标签</p>
<p>这是第三个段落标签</p>
<style>
#box {
color: red
}
</style>(5).伪类选择器：常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。
示例：
<div class="box">常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。</div>
<style>
.box {
width: 200px;
height: 200px;
background: red;
}
.box:hover {
width: 500px;
}
</style>a:link {color: red} /* 未访问时的状态 */ a:visited {color: orange} /* 已访问过的状态 */ a:hover {color: pink} /* 鼠标移动到链接上时的状态 */ a:active {color: yellow} /* 鼠标按下去时的状态 */
1440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
