B站JavaWeb 广陵散课程
CSS
1、css的简介
Cascading Style Sheets层叠样式表
** 层叠：一层一层的
** 样式表：
很多的属性和属性值
* 使页面显示效果更加好，html太基础了
* CSS将网页内容和显示样式进行分离，提高了显示功能。
原来html将代码和样式都放到一起写了，css使分离
2、css和html的结合方式（四种结合方式）
（1）在每个html标签上面都有一个属性 style，把css和html结合在一起.
背景与字体颜色，分号隔开，冒号分隔键值
<html>
<head>
<title>HTML示例</title>
</head>
<body>
<div style="background-color:red;color:green;">天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
</body>
</html>
（2）使用html的一个标签实现
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
background-color:green;
color: red;
}
</style>
</head>
<body>
<div>其意博，其理奥，其趣深，天地之象分，阴阳之候列。</div>
</body>
</html>
（3）在style标签里面 使用语句（在某些浏览器下不起作用）
首先要写一个css文件，然后在html中import@import url(css文件的路径);
在div.css文件中写入：
/*
div 注释
*/
div {
background-color: gray;
color: black;
}
---------------css结束-------------------
在html文件中写入：
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
@import url(div.css);
</style>
</head>
<body>
<div>变化之由表，死生之兆彰，不谋而遗迹自同，</div>
</body>
</html>
上例就得到了分离
（4）使用头标签 link，引入外部css文件
首先要有一个css文件。最常用
<html>
<head>
<title>HTML示例</title>
<link rel="stylesheet" type="text/css" href="div.css" />
</head>
<body>
<div>变化之由表，死生之兆彰，不谋而遗迹自同，</div>
</body>
</html>
div优先级：
*** 第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式
*** 优先级（一般情况）
由上到下，由外到内。优先级由低到高。
*** 后加载的优先级高。即第一句依照的是第一个css，第二三句会依靠第二个css
*** 格式 选择器名称 { 属性名：属性值；属性名：属性值；…….}
3、css的基本选择器（三种）
选择器名称 { 属性名：属性值；属性名：属性值；…….}
（1）标签选择器
** 要对哪个标签里面的数据进行操作
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
background-color: red;
}
p {
background-color: green;
}
</style>
</head>
<body>
<div>变化之由表，死生之兆彰，不谋而遗迹自同，1111</div>
<p>勿约而幽明斯契，稽其言有微，验之事不忒，诚可谓至道之宗，</p>
</body>
</html>
（2）class选择器
- 每个html标签都有一个属性 class
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
/*div.haha { //div这个标签上haha这个标签
background-color: yellow;
}
p.haha {//和上面的haha重复了，所以改用下面匿名标签的方式，简写成下面的
background-color: yellow;
}*/
.haha {
background-color: orange;
}
</style>
</head>
<body>
<div class="haha">变化之由表，死生之兆彰，不谋而遗迹自同，1111</div>
<p class="haha">变化之由表aaaaaaaaaa</p>
</body>
</html>
（3）id选择器
? * 每个html标签上面有一个属性 id
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
/*div#hehe {
background-color: gray;
}
p#hehe {
background-color: gray;
}*/同理如果id一样的话，也可以简写
#hehe {
background-color: #333300;
}
</style>
</head>
<body>
<div id="hehe">故动则有成，犹鬼神幽赞，而命世奇杰，时时间出焉</div>
<p id="hehe">aaaaaaaaaaaaaaaaaaaaaa</p>
</body>
</html>
*** 优先级
style > id选择器 > class选择器 > 标签选择器
优先级例子
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
#hehe1 {
background-color: orange;
}
.haha1 {
background-color: green;
}
div {
background-color: red;
}
</style>
</head>
<body>
<div class="haha1" id="hehe1" style="background-color: gray;">故动则有成，犹鬼神幽赞，而命世奇杰，时时间出焉</div>
<div>aaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>
4、css的扩展选择器
关联 组合 伪元素
? （1）关联选择器
<div><p>wwwwwwww</p></div>设置div标签里面p标签的样式，嵌套标签里面的样式
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div p {//只写p的话下面的css扩展选择器和WWWWWWW都会变颜色
//此时表示在div里面的p标签
background-color: green;
}
</style>
</head>
<body>
<div><p>CSS的扩展选择器</p></div>
<p>WWWWWWWWWWWWWWWWWWWWWW</p>
</body>
</html>
（2）组合选择器
把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
* <div>1111</div>
<p>22222</p>
* div,p {
background-color: orange;
}
-----------------------------------------
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div,p {
background-color: orange;
}
</style>
</head>
<body>
<div>QQQQQQQQQQQQQQQQQ</div>
<p>AAAAAAAAAAAAAAAAAAAAAAA</p>
</body>
</html>
（3）伪元素选择器(了解，浏览器的兼容性比较差)
伪元素选择器：css里面提供了一些定义好的样式，可以拿过来使用
* 比如超链接
** 比如：超链接的状态
原始状态 鼠标放上去状态 点击 点击之后
:link :hover :active :visited
** 记忆的方法
lv ha
------------------------------
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
/*原始状态*/
a:link {
background-color: red;
}
/*悬停状态*/
a:hover {
background-color: green;
}
/*点击状态*/
a:active {
background-color: blue;
}
/*点击之后的状态*/
a:visited {
background-color: gray;
}
</style>
</head>
<body>
<a href="http://www.sina1.com.cn" target="_blank">CSS概述和与HTML的结合方式超链接一</a>
</body>
</html>
5、css的盒子模型
很久之前做网站用的都是表格，现在都是div+css做网站布局。在进行布局前需要把数据封装到一块一块的div区域内（div，如微博，QQ），只需要移动即可，因为看起来像盒子来回移动，所以称之为盒子模型
（1）边框
border: 2px solid blue;
border：统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
---------------------------
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
width: 200px;
height: 100px;
border: 2px solid blue;
}
#div12 {
border-right: 2px dashed yellow;
}//在div的基础上，单独设置了一个12的，盒子大小还是div的
</style>
</head>
<body>
<div id="div11">AAAAAAAAAAAAAAA</div>
<div id="div12">BBBBBBBBBBBBBBB</div>
<div id="div13">CCCCCCCCCCCCCCC</div>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wm0OpfFa-1569774309607)(C:\Users\55373\AppData\Roaming\Typora\typora-user-images\1569767086881.png)]
（2）内边距
padding:20px;
使用padding统一设置
也可以分别设置
上下左右四个内边距(中间文本到内边的距离)
---------------------------
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
width: 200px;
height: 100px;
border: 2px solid blue;
}
#div22 {
padding: 20px;
}
#div23 {
padding-left: 30px;
}
</style>
</head>
<body>
<div id="div21">AAAAAAAAAAAAAAA</div>
<div id="div22">BBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div id="div23">CCCCCCCCCCCCCCC</div>
</body>
</html>
（3）外边距
margin: 20px;
可以使用margin统一设置
也可以分别设置
上下左右四个外边距
---------------------------
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
border: 2px solid blue;
}
#div32 {
margin: 20px;
}
#div33 {
margin-left : 30px;
}
</style>
</head>
<body>
<div id="div31">AAAAAAAAAAAAAAA</div>
<div id="div32">BBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div id="div33">CCCCCCCCCCCCCCC</div>
</body>
</html>
6、css的布局的漂浮(了解)
? float：
? ** 属性值
? left : 文本流向对象的右边
? right : 文本流向对象的左边
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
width: 200px;
height:150px;
border: 2px solid blue;
}
#div41 {
float:left;
}
#div42 {
float:left;
}
</style>
</head>
<body>
<div id="div41">AAAAAAAAAAAAAAA</div>
<div id="div42">BBBBBBBBBBBBBBB</div>
<div id="div43">CCCCCCCCCCCCCCC</div>
</body>
</html>
7、css的布局的定位（了解）
? position：
? ** 属性值
? - absolute ：
? *** 将对象从文档流中拖出
? *** 可以是top、bottom等属性进行定位
? - relative ：
? *** 不会把对象从文档流中拖出
? *** 可以使用top、bottom等属性进行定位
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
width: 200px;
height:150px;
border: 2px solid blue;
}
#div51 {
background-color: red;
position:absolute;
top: 80px;
left: 120px;
}
#div52 {
background-color: green;
width: 250px;
height:150px;
}
#div53 {
background-color: orange;
}
</style>
</head>
<body>
<div id="div51">AAAAAAAAAAAAAAA</div>
<div id="div52">BBBBBBBBBBBBBBB</div>
<div id="div53">CCCCCCCCCCCCCCC</div>
</body>
</html>
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div {
width: 200px;
height:150px;
border: 2px solid blue;
}
#div51 {
background-color: red;
position: relative;
top: 80px;
left:120px;
}
#div52 {
background-color: green;
}
#div53 {
background-color: orange;
}
</style>
</head>
<body>
<div id="div51">AAAAAAAAAAAAAAA</div>
<div id="div52">BBBBBBBBBBBBBBB</div>
<div id="div53">CCCCCCCCCCCCCCC</div>
</body>
</html>
8、案例 图文混排案例
? ** 图片和文字在一起显示
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
#imgtex11 {
width: 400px;
height: 300px;
border:2px dashed orange;
}
#img11 {
/*float:left;*/
float:right;
}
#tex11 {
color: green;
}
</style>
</head>
<body>
<div id="imgtex11">
<div id="img11"><img src="aa.jpg" width="250" height="200"/></div>
<div id="tex11">奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于</div>
</div>
</body>
</html>
9、案例 图像签名
? ** 在图片上面显示文字
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
#tex21 {
position: absolute;
top: 50px;
left: 30px;
color: red;
}
</style>
</head>
<body>
<div id="img21"><img src="aa.jpg" width="450" height="350"/></div>
<div id="tex21">这是很多美女</div>
</body>
</html>
10、上午内容总结
? 1、css和html的四种结合方式（****）
2、css的基本选择器（****）
* 标签选择器 使用标签名
* class选择器 .名称
* id选择器 #名称
** 优先级
style > id > class > 标签
3、css的扩展选择器(了解)
* 关联选择器
- 设置嵌套标签的样式 div p {}
* 组合选择器
- 不同的标签具有相同的样式 div,p{}
* 伪元素选择器
* 超链接的状态
- 原始 :link
- 悬停 :hover
- 点击 :active
- 点击之后 :visited
4、盒子模型(了解)
* 边框 border:2px solid red;
上下左右 border-top border-bottom border-left border-right
* 内边距 padding:20px
上下左右
* 外边距 margin:20px
上下左右
* 对数据进行操作，需要把数据放到一个区域里面（div）
5、布局的漂浮(了解)
float
- left: 后面的div到右边
- right：后面的div到左边
6、布局的定位(了解)
position
- absolute
** 从文档流中拖出
- relative
** 不会从文档流中拖出
一般在目录里面，标出符号
（********）：重点，代码看懂，代码会写，代码理解
- （*重点中的重点）
（了解）：代码看懂
（理解）：能够把原理讲清楚
扫一扫
5731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
