一.选择器
1.html和css结合的三种方式
1.内联样式:
<div id="" style="width: 300px;height: 200px;">
一次只能控制一个标签的展示样式,代码复用低
2.内部样式:
配合选择器使用,一次可以控制多个标签的展示样式,代码复用率较强
选择器:选择一个或多个标签
3.外部样式:
将css代码放到文件里,在html文件里通过link标签引入
2.id选择器
格式:
#id名{
属性值1;
属性值2;
}
注意事项:
1.id具有唯一性,多个标签的id不能相同
2.id选择器一次只能更改一个标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* id选择器
id是唯一的,即在一个页面中id="myid"的标签只能有一个
id选择器一次只能更改一个标签
*/
#myid {
color: red;
width: 100px;
background-color: aqua;
}
#h1{
color: red;
}
</style>
</head>
<body>
<div id="myid">
芜湖,起飞
</div>
<h1 id="h1">一级大标题</h1>
</body>
</html>
3.类选择器
类选择器一次可以更改多个标签
格式:
.class名{
属性值1;
属性值2;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div{
color: red;
font-size: 100px;
}
</style>
</head>
<body>
<!-- 类选择器 -->
<!-- class的值一样,归成一类来处理 -->
<div class="div">111</div>
<div class="div">222</div>
<div class="div">222</div>
<div id="">
111
</div>
<div id="">
222
</div>
<div id="">
333
</div>
</body>
</html>
4.标签名选择器
一次可以更改多个标签的样式
格式:
标签名{
属性值1;
属性值2;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
color: red;
font-size: 100px;
}
h1{
background-color: #0000FF;
}
</style>
</head>
<body>
<div id="">芜湖,起飞</div>
<div id="">芜湖,起飞</div>
<div id="">芜湖,起飞</div>
<h1>一级标题</h1>
</body>
</html>
5.选择器的优先级
如果多个选择器控制的的标签不冲突,样式会叠加呈现.
如果多个选择器控制的标签冲突,会按照优先级来呈现;
如果优先级相同,后面选择器控制的样式会覆盖前面选择器控制的样式.
优先级:
内联样式>id选择器>类选择器>标签名选择器
内联样式>id选择器>类选择器=属性选择器=伪类选择器>标签名选择器=伪元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#h1{
color: red;
}
.h1class{
color: blue;
font-size: 100px;
}
h1{
color: aqua;
font-size: 200px;
}
</style>
</head>
<body>
<!-- 选择器的优先级 -->
<!-- 内联>id选择器>类选择器>标签名选择器 -->
<h1 id="h1" class="h1class" style="color: aquamarine;">我是标题</h1>
</body>
</html>
6.伪类选择器
伪类选择器:针对超链接标签的选择器
超链接有四种状态:
a.链接状态
b.鼠标悬浮状态
c.鼠标按下状态
d.链接访问完成后的状态
针对这四种状态,提供了四种选择器
注意:鼠标悬浮状态和鼠标按下状态也可使用于其他标签
链接状态:
a:linked{
属性值;
}
鼠标悬浮状态:
a:hover{
属性值;
}
鼠标按下状态:
a:active{
属性值;
}
访问完成后的状态:
a:visited{
属性值;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 链接状态 */
a:link{
color: red;
/* 控制线条,none表示没有线条,underline表示下划线,默认就是下划线;
line-through表示删除线,overline表示上划线
*/
text-decoration:overline;
}
/* 鼠标悬浮状态 */
a:hover{
color: aqua;
}
/* 鼠标按下状态 */
a:active{
color: #0000FF;
}
/* 访问完后的状态 */
a:visited{
font-size: 100px;
}
</style>
</head>
<body>
<!-- 伪类选择器:对超链接标签进行操作 -->
<a href="http://www.baidu.com">进入百度</a>
<a href="http://www.baidu.com">进入百度2</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签名选择器 */
div{
background: #0000FF;
}
/* 伪类选择器的鼠标悬浮状态 */
/* 选择器优先级 */
div:hover{
background: #00FFFF;
}
div:active{
background: #A52A2A;
}
.div{
background: #FAEBD7;
}
</style>
</head>
<body>
<div id="" class="div">
啊哈,金色传说
</div>
</body>
</html>
7.包含选择器
包含选择器其实就是嵌套关系,即一个选择器中可以嵌套其他选择器
注意事项:
两个元素之间的层次间隔可以是无限的.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 包含选择器:嵌套关系 -->
<style type="text/css">
#h1 #div h2 {
color: red;
}
h1 div .myh2 {
width: 6.25rem;
height: 6.25rem;
}
/* 两个元素之间的层次间隔可以是无限的 */
/* 更改table下的所有h1标签 */
table h1{
color: #ADFF2F;
}
</style>
</head>
<body>
<h1 id="h1">
<div id="div">
<h2 id="h2" class="myh2">啊哈,金色传说</h2>
</div>
</h1>
<table border="1" cellspacing="0" cellpadding="" width="200px" height="200px">
<tr>
<td>Data</td>
</tr>
<tr>
<td><h1>芜湖,起飞</h1></td>
</tr>
<tr>
<td>Data</td>
</tr>
</table>
</body>
</html>
8.子选择器
格式:
标签名1>标签名2{
属性值1;
属性值2;
}
注意事项:
1.子选择器只能更改子元素,功能上弱于包含选择器
2.子标签没有设置样式时,会去继承父标签的样式
3.子选择器想去控制孙子级别的标签,先要控制子级别的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子选择器</title>
<!-- 子选择器只能更改子元素 -->
<style type="text/css">
ul>li{
color: red;
}
ul>li>h1{
color: azure;
}
#div{
width: 12.5rem;
background-color: red;
}
</style>
</head>
<body>
<ul>
<li><h1>芜湖</h1></li>
<li>222</li>
<li>333</li>
</ul>
<!-- 子标签没有设置样式时,会去继承父类的样式 -->
<div id="div">
<div id="div2">
啊哈
</div>
</div>
</body>
</html>
9.相邻选择器
格式:
标签名1+标签名2{
属性值1;
属性值2;
}
注意:
1.相邻选择器+号两端的元素需要有相同的父元素
2.用+只能选择两个相邻兄弟中的第二个元素,即会选择下一个开始,第一个不受影响
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li+li{
color: red;
}
/* 相邻所有选择器 */
#div1~div{
color: #FF0000;
}
</style>
</head>
<body>
<ul>
<li>外币外币</li>
<li>外币八部</li>
<li>外币八部</li>
</ul>
<ul>
<li>啊有good马来西亚</li>
<li>芜湖</li>
<li>外币八部</li>
</ul>
<ul>
<li>起飞</li>
<li>这边我门就遇到了高手了</li>
<li>外币八部</li>
</ul>
<div id="div1">111</div>
<div id="div2">222</div>
<div id="div3">333</div>
<div id="div4">444</div>
</body>
</html>
10.通配符选择器
格式:
*{
属性值1;
属性值2;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 全局通配 */
*{
color: red;
}
/* 局部通配 */
#h1>span{
font-size: 200px;
}
</style>
</head>
<body>
<h1 id="h1"><span>芜湖</span></h1>
<h2 id="h2">起飞</h2>
<h3 id="h3">啊哈</h3>
</body>
</html>
11.属性选择器
格式:
标签名[属性值]{
属性值1;
属性值2;
}
*[title] {color:red;}表示把所有包含标题（title）属性的所有元素变为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 把h1里包含title标签的转为aliceblue色 */
/* h1[title]{
color: aliceblue;
} */
/* 所有包含title的转为红色 */
[title]{
color: red;
}
</style>
</head>
<body>
<h1 title="芜湖">芜湖</h1>
<a href="http://www.baidu.com" title="百度一下">百度一下</a>
</body>
</html>
二.外部样式
外部样式:
将css代码放到文件里,在html文件里通过link标签引入
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/div1.css"/>
<link rel="stylesheet" type="text/css" href="css/div2.css"/>
</head>
<body>
<div id="div1">
芜湖,起飞
</div>
<div id="div2">
啊哈,金色传说
</div>
</body>
</html>
css代码:
#div1{
color: red;
font-size: 100px;
}
#div2{
color: aliceblue;
font-size: 300px;
}
1115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
