CSS
一，CSS概述
1.1 什么是CSS
CSS，全称是Cascading Style Sheet 层叠样式表
Word文档多个样式层层叠加，相互之间共同修饰一个文本...这里就是一个层叠样式
CSS里面也是使用各种样式，各种修饰完成对于HTML页面的美化过程。
1.2 CSS能干什么
1. 美化HTML
2. 提高代码的复用性，提高开发效率
3. HTML和CSS样式分离，后期好维护
4. HTML和CSS样式分离，还能降低公司成本，带宽成本
1.3 CSS的三种引入方式和初识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
内联样式
head标签内定义一个style标签，在style标签内都是CSS样式
-->
<style>
/*
.cls选择器 修饰HTML标签属性class为cls的标签
大括号内是CSS样式
*/
.cls {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<!--
外联样式
使用link标签连接外联样式表
rel 声明连接的类型
type text/css 可视化的CSS样式
href 表示CSS样式的地址，该地址可以是一个网络地址
-->
<link rel="stylesheet" type="text/css" href="./css/03-CSS三种引入方式.css">
</head>
<body>
<!--
行内样式表
HTML标签的Style属性
CSS样式是一个键值对形式 width:200px;
属性名:属性值;
-->
<div style="width: 200px; height: 200px; background-color: blue;"></div>
<div class="cls"></div>
<div id="id1"></div>
</body>
</html>
/* 外联样式表，这里使用的ID选择器 */
#id1 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
三种引入方式对比
1. 行内样式表权重最高
2. 外联样式表墙裂推荐，这里可以节约资源，同时提高复用度
二，CSS选择器
用于明确当前CSS样式，尤其是内联样式表和外联样式表考虑当前CSS样式修饰的是哪一个，或者那些HTML标签
2.1 三个基本选择器
元素选择器
HTML标签名作为选择器名字，可以用于修饰所有的对应当前标签名的HTML标签
ID选择器
针对HTML标签ID属性进行选择修饰，并且ID属性具有唯一性
class选择器
针对HTML标签class属性进行选择修饰，class属性可以复用多个HTML标签
以上三个选择器权重排序
id > class > 元素
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-三大基本选择器</title>
<style>
/* 标签选择器 */
div {
font-size: 50px;
color: red;
}
/* ID选择器 【要求】#号开头*/
#id1 {
font-size: 30px;
color: brown;
}
#id2 {
font-size: 30px;
color: red;
}
#id3 {
font-size: 30px;
color: blueviolet;
}
#id4 {
font-size: 60px;
color: indianred;
}
/* class选择器 */
.cls1 {
font-size: 30px;
color: chocolate;
}
</style>
</head>
<body>
<!-- 标签选择器 -->
<div>烤羊排</div>
<div>羊肉串</div>
<div>羊肉汤</div>
<!-- ID选择器 【要求】ID不可以重复-->
<span id="id1">胡辣汤</span>
<span id="id2">羊杂汤</span>
<span id="id3">羊肉烩面</span>
<!-- class选择器 class属性可以复用 -->
<div id="id4" class="cls1">擀面皮</div>
<div class="cls1">肉夹馍</div>
<div class="cls1">冰峰</div>
<div class="cls1">油泼面</div>
</body>
</html>
2.2 属性选择器
根据属性名以及属性值进行选择元素，from ==> input标签
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>05-属性选择器</title>
<style>
/* 属性选择器 */
/* 根据属性名和属性值来约束修饰的HTML标签 */
input[type='text'] {
background-color: lightpink;
}
input[type='password'] {
background-color: #7c1823;
}
/* 根据属性名来约束修饰的HTML标签 */
font[size] {
color: greenyellow;
}
font[face] {
color: #7c1823;
font-size: 30px;
}
</style>
</head>
<body>
<font size="7">你好CSS</font> <br>
<font face="黑体">你好CSS</font> <br>
<form action="02-特殊字符.html" method="get">
<span>姓名:</span><input type="text" name="name"><br>
<span>密码:</span><input type="password" name="password"><br>
<span>头像:</span><input type="file" name="icon"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
2.3 伪类选择器
伪类选择器语法
静止状态 a:link
鼠标悬浮 a:hover
触发状态 a:active
已访问状态 a:visited
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
text-decoration: none;
}
/*
a标签伪类选择器是有严格顺序的
hover必须跟在link和visited的后面
active必须跟在hover的后面
*/
a:link {
color: chocolate;
}
a:visited {
color: purple;
}
a:hover {
color: lightpink;
}
a:active {
color: greenyellow;
}
</style>
</head>
<body>
<h1><a href="http://www.dangdang.com">当当网</a></h1>
</body>
</html>
2.4 层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07-层级选择器</title>
<style>
/* 层级选择器 */
#id1 .cls1 {
color: red;
font-size: 30px;
}
#id2 .cls1 {
color: greenyellow;
font-size: 50px;
}
</style>
</head>
<body>
<div id="id1">
<div class="cls1">
82的农夫山泉
</div>
</div>
<div id="id2">
<div class="cls1">
20年雪碧
</div>
</div>
2.5 组合选择器
1. CSS样式中多个选择器使用
2. HTML标签class属性可以有多个值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-组合选择器</title>
<style>
div, span, p, strong {
color: red;
font-size: 30px;
}
.size_class {
width: 200px;
height: 200px;
}
.font_class {
color: #7c1823;
font-size: 30px;
}
.bg_class {
background-color: greenyellow;
}
</style>
</head>
<body>
<div>外星人</div>
<span>MacBook Pro</span>
<p>ThinkPad P</p>
<strong>神舟笔记本</strong>
<hr>
<!-- class属性有多个，空格隔开 -->
<div class="size_class font_class">烤面筋</div>
<div class="size_class bg_class">炸鸡</div>
<hr>
</body>
</html>
三，CSS属性
3.1 文字属性
1. font-size: 字体大小
2. font-family: 文字字体，例如:楷体，微软雅黑
3. font-style: 斜体字
normal 默认值正常显示
italic 斜体
4. font-weight: 文本字体的粗细 bold
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-文字属性</title>
<style>
div {
/* 字体大小 */
font-size: 30px;
/* 字体样式 */
font-family: 楷体;
/* 斜体 italic 默认 normal正常显示*/
font-style: italic;
/* 加粗字体 */
font-weight: bold;
}
</style>
</head>
<body>
<div>
美国新冠肺炎确诊人数达到8W，超过中国
</div>
</body>
</html>
3.2 文本属性
1. color文本颜色
2. text-indent: 文本缩进
3. text-decoration:
none 文本什么标记都没有【默认】
underline: 下划线
overline: 上划线
line-through: 删除线
blink
4. text-align:
文本的对齐方式，center，left，right
5. line-height:
行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#id1 {
font-size: 30px;
color: red;
text-decoration: underline;
}
#id2 {
font-size: 30px;
color: blueviolet;
text-decoration: line-through;
text-indent: 2em;
line-height: 100px;
}
</style>
</head>
<body>
<div id="id1">
壮哉我大中华！！！
</div>
<div id="id2">
预祝下一届美国总统还是特朗普！！！
</div>
</body>
</html>
3.3 背景属性
1. backgroud-color: 背景颜色，默认是透明
2. backgroud-img: url("图片路径")可以是网络地址，也可以是本地地址
3. backgroud-repeat:重复方式
默认情况下是全屏平铺
repeat-x 水平方向平铺
repeat-y 垂直方法平铺
no-repeat 显示一张
4. backgroud-position:背景图片的位置 top left bottom right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-背景属性</title>
<style>
body {
/*background-color: #7c1823;*/
background-image: url("img/QQ图片20200326112539.png");
background-repeat: no-repeat;
/* 50px 100px 从左上角，50px是水平，100px垂直 */
background-position: -50px -100px;
/*background-position-x: 100px;*/
/*background-position-y: 100px;*/
}
</style>
</head>
<body>
</body>
</html>
3.4 列表属性
list-style-type:列表标记样式 disc none square circle
list-style-image:url("图片地址") 列表图片
list-style-position:inside 图片内部展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-列表属性</title>
<style>
li {
font-size: 30px;
/*list-style-type: none;*/
list-style-image: url("img/QQ图片20200326112539.png");
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>奥巴马</li>
<li>武大郎</li>
<li>罗斯福</li>
<li>华盛顿</li>
<li>特朗普</li>
</ul>
</body>
</html>
3.5 尺寸属性
width: 像素 px
heigth: 像素 px
3.6 显示属性
display:
none:
不显示
block:
块级显示
inline:
行级显示
3.7 float浮动属性
HTML页面中所有元素的解析过程是存在文档流操作的，HTML页面解析从上至下，从左至右依次完成，如果元素使用了float浮动操作，会脱离文档流。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13-浮动float属性</title>
<style>
div {
width: 200px;
height: 200px;
margin-right: 20px;
background-image: url("img/QQ图片20200326112539.png");
background-repeat: no-repeat;
}
.float-class {
float: left;
}
/*#id1 {*/
/* float: left;*/
/*}*/
/*#id2 {*/
/* float: left;*/
/*}*/
</style>
</head>
<body>
<div style="width: 1200px; height: 200px;">
<div class="float-class" style="background-color: red"></div>
<div class="float-class" style="background-color: yellow"></div>
<div class="float-class" style="background-color: blue"></div>
<div class="float-class" style="background-color: green"></div>
<div class="float-class" style="background-color: paleturquoise"></div>
</div>
<div style="width: 1200px; height: 200px; margin-top: 20px">
<div class="float-class" style="background-color: red"></div>
<div class="float-class" style="background-color: yellow"></div>
<div class="float-class" style="background-color: blue"></div>
<div class="float-class" style="background-color: green"></div>
<div class="float-class" style="background-color: paleturquoise"></div>
</body>
</html>
-------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14-list列表float浮动</title>
<style>
ul {
list-style-type: none;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
</style>
</head>
<body>
<ul style="float:left;">
<li class="float-left">JavaEE </li>
<li class="float-left">HTML5 </li>
<li class="float-left">Python </li>
<li class="float-left">C/C++ </li>
<li class="float-left">C# </li>
</ul>
<ul style="float:right;">
<li class="float-left">Perl </li>
<li class="float-left">Swift </li>
<li class="float-left">OC </li>
<li class="float-left">PHP </li>
<li class="float-left">JavaScript </li>
</ul>
</body>
</html>
3.8 定位属性
相对定位
绝对定位
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15-相对定位</title>
<style>
div {
width: 200px;
height: 200px;
}
#id1 {
/* 相对定位，相对于原本位置的定位 */
position: relative;
/*left: 200px;*/
}
</style>
</head>
<body>
<div style="background-color: red">我是一个参照物</div>
<div id="id1" style="background-color: green">这里要进行相对定位
<div style="background-color: yellow; width: 100px; height: 100px; position: relative; left: 150px;"></div>
</div>
<div style="background-color: red">我是一个参照物</div>
</body>
</html>
------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16-绝对定位</title>
<style>
#outer {
position: absolute;
left: 100px;
}
#inner {
/* 绝对定位 */
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div id="outer" style="background-color: red; width: 200px; height: 200px"></div>
<div id="inner" style="background-color: yellow; width: 100px; height: 100px;"></div>
</body>
</html>
----------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17-固定定位</title>
<style>
div {
width: 200px;
height: 200px;
}
#left {
background-color: red;
position: fixed;
top: 0;
left: 50px;
}
#right {
background-color: green;
position: fixed;
bottom: 0;
right: 50px;
}
</style>
</head>
<body>
<div id="left">帕萨特撞断A柱</div>
<div id="right">丰田机油增多</div>
<p>特朗普很厉害，新冠和流感一样，自己就好了！！！而且不检查就是没有新增病例</p>
</body>
</html>
四，CSS盒子模型
4.1 什么是盒子模型
盒子模型是CSS样式修饰之后一个元素占用整个HTML页面的空间大小操作方式
存在外边距，边框，内边距和元素本身
4.2 边框，内外边距的界限
border-width:边框宽度
border-style:边框样式
solid 实线 double 双实线/空心线
dashed 虚线 dotted 圆点虚线
border-color:边框颜色
border: 边框宽度, 边框样式, 边框颜色;
例如: border: 10px solid black;
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>18-盒子模型边框</title>
<style>
div {
width: 200px;
height: 200px;
b ackground-color: red;
/* 边框的宽度，样式和颜色 */
border: 10px solid black;
/*border-width: 10px;*/
/*border-style: dashed;*/
/*border-color: green;*/
}
</style>
</head>
<body>
<div>
</div>
4.3 内边距，边框以内的世界
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>19-盒子内边距</title>
<style>
div {
width: 200px;
height: 200px;
background-color: greenyellow;
border: 5px solid red;
/* 内边距 padding */
/*padding-top: 50px;*/
/*padding-left: 100px;*/
/*padding-right: 200px;*/
/*padding-bottom: 150px;*/
/*
一个尺寸：所有的内边距都是该尺寸
二个尺寸: 第一个尺寸对应上下内边距，第二个尺寸对应左右内边距
三个尺寸: 第一个尺寸对应上内边距，第二个尺寸对应左右内边距，第三个尺寸对应下内边距
四个尺寸: 顺时针顺序，上右下左
*/
padding: 100px 200px 150px 50px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
4.4 外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20-盒子外边距</title>
<style>
div {
width: 200px;
height: 200px;
background-color: greenyellow;
border: 5px solid red;
float: left;
}
#id1 {
/*外边距 margin */
/*margin-top: 50px;*/
/*margin-left: 100px;*/
/*margin-right: 200px;*/
/*margin-bottom: 150px;*/
/*
一个尺寸：所有的外边距都是该尺寸
二个尺寸: 第一个尺寸对应上下外边距，第二个尺寸对应左右外边距
三个尺寸: 第一个尺寸对应上外边距，第二个尺寸对应左右外边距，第三个尺寸对应下外边距
四个尺寸: 顺时针顺序，上右下左
*/
/*margin: 100px 200px 150px 50px;*/
}
</style>
</head>
<body>
<div id="id1"></div>
<div></div>
</body>
</html>
4.5 margin问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21-margin问题</title>
<style>
/*
问题1
HTML中body标签和一些其他标签都带有一定的内外边距
通常情况下，在在css样式表中适用 * 通配选择器 去除HTML标签自带
的margin padding
*/
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<!--
问题2:
以下两个元素，margin外边距实际展示效果为100px
这里存在一个margin合并问题，为了更好的展示页面
margin合并
-->
<div style="margin-bottom: 100px"></div>
<div style="margin-top: 100px"></div>
<div style="background-color: blue; border: 1px solid black">
<!--
问题3:
内部元素div，绿色如果在蓝色div没有边框的情况下，会影响原本的蓝色
div展示问题，但是如果蓝色div存在一个边框，绿色内容margin会根据
蓝色div参照物展示
margin塌陷
-->
<div style="margin: 100px; background-color: greenyellow"></div>
</div>
</body>
</html>
4.6 CSS3.0拓展属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-边框CSS3样式</title>
<style>
div {
width: 200px;
height: 50px;
background-color: red;
color: white;
font-size: 30px;
text-align: center;
line-height: 50px;
border: 1px solid black;
/* 边框圆角 */
border-radius: 25px;
/*
阴影效果
第一个参数是水平阴影偏移
第二个参数是垂直阴影偏移
第三个参数是阴影发散程度
第四个参数是阴影颜色
*/
box-shadow: 10px 10px 5px navy;
}
body {
/* 背景图片尺寸设置 */
background-size: 1000px 1000px;
background-repeat: no-repeat;
/* 背景图片 */
/*background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585371219400&di=f0366a885f9f399ddf6dfa38cd6972e3&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F96daaba25629e9948a4683e89a8b8e749b97d31b.jpg");*/
}
p {
font-size: 30px;
text-shadow: 5px 5px 5px gray;
}
</style>
</head>
<body>
<div>圆角属性</div>
<p>
美国确诊人数超10W，欧洲预期感染人数会超过60W
</p>
</body>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
