一.选择器
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">
#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
;
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
{
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">
[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
;
}
