div和span标签
语法:
<div>.....</div>
效果:换行
<span>....</span>
效果:无
注意:
1,div由于只有换行效果所以无需修改默认样式就能将内容块级化(独占一行)。所以div又称为块级标签/块级元素。其他块级标签有:h1~h6,p,blockquote…【它们都能独占一行】
2,span没有效果,所以内容没有块级化(不会独占一行),所以span又称为行内标签/行内元素/内联元素。其他行内标签:font,a…
3,一般div标签用于页面布局,span标签用于修饰页面元素。
4,行内标签能嵌套块级标签,但块级标签不能嵌套行内标签。
<div><h1></h1><p></p></div> 正确
<a href="#"><span></span></a> 正确
<span><div></div></span> 错误
style标签:
语法:
<style>......</style>
注意:
1,style标签放置在head标签中。
2,style标签中存放CSS选择器。
3,type=“text/css” 是style标签属性,告诉浏览器其内容是css样式文本。
选择器:
注释:
/*........*/ 选择器中的注释
<!--注释内容--> 选择器外的注释
标签选择器:
语法:
标签吗{
样式名:样式;
}
作用:
对页面中的所有相同标签都使用一样的样式效果。
注意点:
1,标签选择器可以多次使用。
2,如果标签选择器相同,后面的样式会覆盖在前面的样式上方。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
p{
color:red;
}
</style>
</head>
<body>
<h2>相思</h2>
<p>红豆生南国,</p>
<p>春来发几枝。</p>
<p>愿君多采撷,</p>
<p>此物最相思。</p>
</body>
</html>
效果图:
类选择器:
语法:
类名{
样式名:样式值
..............
}
注意点:
1,自定义类名,需要见名思意。
2,定义类选择器后,需要通过 class=“类名” 进行调用。
3,定义类选择器时,类名前需要加 “ . ”(句号)。调用时 class=“类名” 不需要加 “ . ”
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
.red{
color:red;
}
</style>
</head>
<body>
<h2>相思</h2>
<p>红豆生南国,</p>
<p>春来发几枝。</p>
<p class="red">愿君多采撷,</p>
<p>此物最相思。</p>
</body>
</html>
效果图:
id选择器:
语法:
#id名{
样式名:样式值;
......................
}
注意点:
1,自定义id名,需要见名思意。
2,定义id选择器后,需要通过id=“id名” 进行调用。
3,定义id选择器时,id名前需要加“#”,调用时id=“id名”不需要加“#”。
4,id选择器只能在一个标签中使用一次。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
#last{
color: orange;
}
</style>
</head>
<body>
<h2>相思</h2>
<p>红豆生南国,</p>
<p>春来发几枝。</p>
<p>愿君多采撷,</p>
<p id="last">此物最相思。</p>
</body>
</html>
效果图:
并集选择器:
语法:
选择器名1,选择器名2,....{
样式名:样式值;
..........
}
作用:
并集中的所有选择器都使用相同的样式效果。
注意点:
可以是任意选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
.blue{
color: blue;
}
#last{
color: orange;
}
.blue,#last{//并集选择器
font-size: 30px;
}
</style>
</head>
<body>
<h2>相思</h2>
<p>红豆生南国,</p>
<p class="blue">春来发几枝。</p>
<p>愿君多采撷,</p>
<p id="last">此物最相思。</p>
</body>
</html>
效果图:
交集选择器:
语法:
标签选择器.类选择器{
样式名:样式值;
........
}
注意点:
1,第一个选择器必须是标签选择器,第二个选择器必须是类选择器。
2,选择器之间不能有间隔,必须连续书写。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
.blue{
color: blue;
}
span{
font-size: 20px;
}
span.blue{//交集选择器
font-weight: bolder;
}
</style>
</head>
<body>
<h2>相思</h2>
<p>红豆生南国,</p>
<p><span class="blue">春来发几枝。</span></p>
<p>愿君多采撷,</p>
<p>此物最相思。</p>
</body>
</html>
在标签选择器和类选择器的基础上添加交集选择器的内容
效果图:
后代选择器:
语法:
选择器1 选择器2{
样式名:样式值;
......
}
作用:
先定位选择器1,再定位其内部的选择器2,对选择器2的内容添加样式效果。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
p font{
font-size: 30px;
color: pink;
}
</style>
</head>
<body>
<h2>相思</h2>
<p>红豆生南国,</p>
<p>春来发几枝。</p>
<p>愿君多采撷,</p>
<p>此物最<font>相思</font>。</p>
</body>
</html>
效果图:
伪选择器:
**概念:**超链接标签中不同状态的样式选择器。
:link
向未被访问的超级链接添加样式,正常状态。
:visited
向已经被访问的超级链接添加样式,访问过后状态。
:hover
当鼠标悬浮在超级链接上方时,向超级链接添加样式,鼠标放上状态。
:active
鼠标放在超级链接上并且点击的一瞬间,向超级链接添加样式,激活状态。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>伪选择器</title>
<style type="text/css">
a:link{
color:orange;
text-decoration: none;//没有下划线
}
a:visited{
color: greenyellow;
}
a:hover{
color: red;
}
a:active{
font-size: 60px;
color: aqua;
}
</style>
</head>
<body>
<a href="#">link未访问前</a>
<a href="#">visited访问后</a>
<a href="#">hover鼠标经过的状态</a>
<a href="#">active激活时状态</a>
</body>
</html>
效果图:
正常状态:
鼠标放上状态:
访问后:
激活状态(鼠标点着不放):
注意点:
1,a标签需要设置四种状态选择器,该状态选择器必须按照顺序:link>>visited>>hover>>active设置,否则不起作用。
2,在真实开发中一般设置a标签选择器的样式以及a:hover伪选择器的样式即可。