一.概述 :
css概述：表现
Cascading Style Sheets 层叠式样式表
1.html与css的结合方式：
① 行内式：html中的标签属性 style ：适用于单纯只有一个标签需要设置时的特殊样式。如果多个标签需要应用同一个样式，建议采用内嵌式。
格式：样式名称：样式值;
样式名称：样式值;
样式名称：样式值;
② 内嵌式：建议在head中使用，使用标签 style.适用于当前页面多个标签使用同一个样式。
<style type="text/css">
</style>
格式：
选择器：要应用样式的内个标签或元素。
选择器{
样式名称:样式值;
样式名称:样式值;
样式名称:样式值;
}
③ 外链式：link:适用于多个页面使用同一个样式时。
<link rel="stylesheet" href="css/main.css" />
注意：link中href属性必须有，表示链接的css文件。
2.常见样式：
① font-size：字体大小 px
② color：字体颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--内嵌式-->
<style type="text/css">
p{
font-size: 40px;
color: pink;
}
</style>
</head>
<body>
<!--css概述：表现
Cascading Style Sheets 层叠式样式表
1.html与css的结合方式：
① 行内式：html中的标签属性 style ：适用于单纯只有一个标签需要设置时的特殊样式。如果多个标签需要应用同一个样式，建议采用内嵌式。
格式：
样式名称：样式值;
样式名称：样式值;
样式名称：样式值;
② 内嵌式：建议在head中使用，使用标签 style.适用于当前页面多个标签使用同一个样式。
<style type="text/css">
</style>
格式：
选择器：要应用样式的内个标签或元素。
选择器{
样式名称:样式值;
样式名称:样式值;
样式名称:样式值;
}
③ 外链式：link:适用于多个页面使用同一个样式时。
<link rel="stylesheet" href="css/main.css" />
注意：
link中href属性必须有，表示链接的css文件。
2.常见样式：
① font-size：字体大小 px
② color：字体颜色
-->
<!--行内式-->
<!--<span style="font-size: 100px;color:blue;">文字显示蓝色</span> <br />
<span style="font-size: 100px;color:blue;">文字显示蓝色</span> <br />-->
<!--内嵌式 字体大小为20px ，颜色为pink-->
<p>这是一个段落标签1</p>
<p>这是一个段落标签2</p>
<p>这是一个段落标签2</p>
</body>
</html>外链式 :
<link rel="stylesheet" href="css/main.css" />二.CSS基本选择器
1.概述 ：
css的基本选择器
①.id选择器:# 建议id选择器只有一个
②.class选择器:. class类选择器可以有多个
③.标签选择器：元素标签
④.通配符选择器:*
优先级： id选择器优先级高于class选择器。
所有的样式只要不冲突，就叠加，冲突，根据优先级来显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*id选择器*/
#p1{
font-size: 40px;
}
/*class选择器*/
.p2{
color: red;
font-size: 30px;
}
/*标签选择器*/
p{
color: yellow;
}
/*通配符选择器*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<!--css的基本选择器
1.id选择器:# 建议id选择器只有一个
2.class选择器:. class类选择器可以有多个
3.标签选择器：元素标签
4.通配符选择器:*
优先级： id选择器优先级高于class选择器。
所有的样式只要不冲突，就叠加，冲突，根据优先级来显示。
-->
<!--id选择器-->
<p class="p2" id="p1" >这是一个p标签1</p>
<!--class选择器 颜色变为红色-->
<p class="p2">这是一个p标签2</p>
<p>这是一个p标签3</p>
<p class="p2">这是一个p标签4</p>
<div class="p2">
这是div1
</div>
</body>
</html>三：CSS扩展选择器
1.概述
css的扩展选择器
①.css并集选择器：
格式：
选择器1,选择器2,选择器3
②.css交集选择器：
格式：
选择器1选择器2
③.css的后代选择器:
格式：
选择器1 选择器2 选择器3
④.css的子代选择器:
格式：
选择器1 > 选择器2>选择器3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*并集选择器*/
/*p,div{
font-size: 20px;
color: red;
}*/
/*交集选择器*/
/*p.p1{
font-size:30px ;
}*/
/*后代选择器*/
div > span{
color: pink;
}
</style>
</head>
<body>
<!--css的扩展选择器
1.css并集选择器：
格式：
选择器1,选择器2,选择器3
2.css交集选择器：
格式：
选择器1选择器2
3.css的后代选择器:
格式：
选择器1 选择器2 选择器3
4.css的子代选择器:
格式：
选择器1 > 选择器2>选择器3
5.伪类选择器
-->
<!--<p class="p1">这是p标签1</p>
<p>这是p标签2</p>
<div class="p1">这是div1</div>
<div>这是div2</div>-->
<div>
<span>这是一个div3中的span标签</span>
<br />
<p>
这是div3中的p标签
<br />
<span>这是p标签中的span标签</span>
</p>
</div>
</body>
</html>四.CSS伪类选择器
1.概述
伪类选择器
①.超链接
:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 激活状态 */
②.css的下划线 ：
text-decoration：none /underline 下划线 /overline 上划线 /line-through 中划线
③.超链接定义样式时，有顺序：LVHA
一般情况下，未访问与已经访问过的链接，都是一个样式，鼠标划上和激活状态都是一个样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
:link{
color: black;
font-size:20px ;
text-decoration: none;
}
:visited{
color: grey;
}
a:hover{
color: red;
font-size:30px ;
}
:active{
font-size: 20px;
color: blue;
}
#div1:hover{
color: pink;
}
</style>
</head>
<body>
<!--伪类选择器
1.超链接
:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 激活状态 */
2.css的下划线 ：
text-decoration：none /underline 下划线 /overline 上划线 /line-through 中划线
3.超链接定义样式时，有顺序：
LVHA
一般情况下，未访问与已经访问过的链接，都是一个样式，鼠标划上和激活状态都是一个样式。
-->
<a href="http://www.baidu.com">点我跳转到百度</a>
<div id="div1"> 这是div1</div>
</body>
</html>
五.CSS背景样式
1.概述
css背景样式
①.background-color 背景色
②.background-image 背景图
③.background-repeat 设置是否重复
④.background-position 规定背景图的位置。
注意：
写法一： top center bottom left center right
第一个参数表示垂直方向对齐
第二个参数表示水平方向对齐
写法二：像素或百分比，第一个参数表示水平，第二个参数表示垂直。
⑤.css背景滚动设置
background-attachment：
scroll：景图像会随着页面其余部分的滚动而移动。
fixed：当页面的其余部分滚动时，背景图像不会移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
background-color: pink;
}
/*div{
background-color: blue;
background-image: url(img/1.jpg);
width: 1000px;
height: 600px;
background-repeat: /*no-repeat*//*repeat-x;
}*/
div {
background-image: url(img/1.jpg);
width: 1000px;
height: 600px;
background-repeat: no-repeat;
border: 1px solid black;
/*background-position: center left;*/
background-position: 100px 200px;
}
</style>
</head>
<body>
<!--css背景样式
1.background-color 背景色
2.background-image 背景图
3.background-repeat 设置是否重复
4.background-position 规定背景图的位置。
注意：
① 写法一： top center bottom left center right
第一个参数表示垂直方向对齐
第二个参数表示水平方向对齐
② 写法二：
像素或百分比，第一个参数表示水平，第二个参数表示垂直。
-->
<p>这是一个p标签</p>
<p>这是一个p标签</p>
<div>
这是div1
</div>
<!--<div>
这是div2
</div>-->
</body>
</html>雪碧图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
background-image: url(../img/背景定位图.png);
width: 100px;
height: 100px;
background-position: -300px 0;
}
#div2{
background-image: url(../img/背景定位图.png);
width: 100px;
height: 100px;
background-position: -200px 0;
}
#div3{
background-image: url(../img/背景定位图.png);
width: 100px;
height: 100px;
background-position: -100px 0;
}
#div4{
background-image: url(../img/背景定位图.png);
width: 100px;
height: 100px;
background-position: 0 0;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>背景滚动设置代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
background-color: pink;
}
/*div{
background-color: blue;
background-image: url(img/1.jpg);
width: 1000px;
height: 600px;
background-repeat: /*no-repeat*//*repeat-x;
}*/
div {
background-image: url(img/1.jpg);
width: 1000px;
height: 600px;
background-repeat: no-repeat;
border: 1px solid black;
/*background-position: center left;*/
background-position: 100px 200px;
}
</style>
</head>
<body>
<!--css背景样式
1.background-color 背景色
2.background-image 背景图
3.background-repeat 设置是否重复
4.background-position 规定背景图的位置。
注意：
① 写法一： top center bottom left center right
第一个参数表示垂直方向对齐
第二个参数表示水平方向对齐
② 写法二：
像素或百分比，第一个参数表示水平，第二个参数表示垂直。
-->
<p>这是一个p标签</p>
<p>这是一个p标签</p>
<div>
这是div1
</div>
<!--<div>
这是div2
</div>-->
</body>
</html>
6310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
