1、关联选择器
标签是可以嵌套的,要让相同的标签中的不同标签显示不同样式,就可以使用此选择器
p { color:#00FF00; }
p b { color:#FF0000; }
<p>P标签<b>刘德华</b>段落样式</p>
<p>P标签段落</p>
2、组合选择器
对于多个不同选择器进行相同样式设置的时候应用此选择器。
p,div { color:#FF0000; }
<p>P标签显示段落。</p>
<div>DIV标签显示段落</div>
多个不同的选择器要用逗号分隔开。
3、伪元素选择器
其实就是在html中预先定义好的一些选择器。称为伪元素。是因为 CSS 的术语。
格式:标签名:伪元素。类名 标签名。 类名:伪元素。 都可以。
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移动到超链接上的状态(未点击)。
a:active 点击超链接时的状态。
使用顺序: L - V - H - A
P:first-line 段落的第一行文本。
P:first-letter 段落的第一个字母。
:focus 具有焦点的元素。IE6浏览器不支持,在FireFox中可以看到效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*!*关联选择器,选择器中的选择器*!
span b{
background-color: #09F;
color: #FFF;
}
!*组合选择器,对多种选择器进行相同样式定义*!
.haha, div b {
background-color: #000;
color: #F00;
}*/
/*超连接的状态*/
/*未访问*/
a:link {
background-color: #06F;
color: #FFF;
text-decoration: none;
font-size: 18px;
}
/*鼠标悬停*/
a:hover {
background-color: #FFF;
color: #F00;
font-size: 24px;
}
/*点击效果*/
a:active {
background-color: #000;
color: #FFF;
font-size: 36px;
}
/*访问后效果*/
a:visited {
background-color: #FF9;
color: #000;
text-decoration: line-through;
}
div:hover{
background-color: #FF0000;
color: #FFFFFF;
}
input:focus {
background: #090;
color: #FFF;
}
</style>
</head>
<body>
<input type="text"/>
<input type="text"/>
<hr />
<a href="http://www.baidu.com" target="_blank">伪元素选择器演示</a>
<hr />
<!--
css 和 html 结合的第一种方式。
1、每个html标签中都有一个style样式属性。该属性就的值就是css代码。
2、使用style标签的方式。一般都定义在head标签中。
优先级:
标签选择器 < 类选择器 < id选择器 < style属性
-->
<br>
<div id="qq" >这是一个<b>div区域</b></div>
<div class="haha">这是一个div区域2</div>
<span>span<b>区域1</b></span>
<span>span区域2</span>
<p>这个一个<b>段落1</b></p>
<p>这个一个段落2</p>
</body>
</html>
css样式结合运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css演示</title>
<style type="text/css">
ul{
list-style-type: none;
}
table {
border-bottom: #00CC00 double 3px;
border-left: #FF0000 solid 3px;
border-right: #FFFF00 dashed 3px;
border-top: #00CC00 groove 3px;
width: 500px;
}
table td {
border:#0CF dotted 1px;
padding: 20px;
}
div {
border:#FF9900 dotted 1px;
height: 200px;
width: 400px;
}
input {
border: none;
border-bottom:#000000 1px solid;
}
.haha {
border: none;
}
</style>
</head>
<body>
姓名:<input type="text"/>成绩:<input type="text"/>
<hr/>
<div>div区域</div>
<table>
<tr>
<td><input type="text" class="haha"/></td>
<td><input type="text" class="haha"/></td>
</tr> <tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
<ul>
<li>无序项目列表</li>
<li>无序项目列表</li>
<li>无序项目列表</li>
<li>无序项目列表</li>
</ul>
</body>
</html>
CSS布局
1、图文混排
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文混排</title>
<style type="text/css">
#imgtext {
border: #0066FF dashed 1px;
width: 500px;
}
#img{
float: right;
}
#text {
color: #FF66CC;
font-family: "华文隶书";
}
</style>
</head>
<body>
<div id="imgtext">
<div id="img">
<img src="../image/1.PNG"/>
</div>
<div id="text">
这是一张图片,
哇哇哇!
</div>
</div>
</body>
</html>
2、图像签名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像签名</title>
</head>
<style type="text/css">
#imgtext {
position: absolute;
top: 80px;
left: 200px;
}
#text {
font-family: "宋体";
font-size: 24px;
position: absolute;
top: 50px;
left: 10px;
}
#imgtext {
border: #FF6600 dashed 1px;
width: 500px;
}
</style>
<body>
<div id="imgtext">
<div id="img">
<img src="../image/1.PNG" height="300" width="500"/>
</div>
<div id="text">我的截图,哈哈哈哈哈哈呵呵呵呵呵呵呵!</div>
</div>
</body>
</html>