CSS
CSS简介
- 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
- CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]
1.层叠
- 多个样式可以作用在同一个html的标签上
2.样式表
提供了丰富的样式修饰内容
3.作用
- 样式丰富，功能强大
- 内容和样式分离(解耦)
CSS的使用
1.行内样式
- 在标签中使用style属性进行CSS样式设置
- 样式名与样式值之间用冒号隔开
- 样式与样式之间用分号隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width:500px;height:500px;background-color: rgb(90, 139, 102);"></div>
</body>
</html>
2.内部样式
在<head>标签中使用<style>标签进行设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
3.外部样式
- 将CSS样式独立到.css的文件中
- 再将这个文件导入到需要使用这些样式的HTML文件中，使用标签。
（1）index.html 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/demo.css" rel="stylesheet">
</head>
<body>
<div></div>
<div></div>
</body>
</html>
(2) demo.css css文件
div{
width: 200px;
height: 200px;
background-color: red;
}
4.三种样式的优先级 (就近原则)
- 行内样式>(内部样式&外部样式)
5.三种样式的生效范围
- 外部样式>内部样式>行内样式
CSS选择器
1.CSS选择器
（1）为什么需要选择器
- 内部样式和外部样式中，需要去找到要设置样式的标签，这时就需要选择器。
（2）语法
选择器{
样式名1:样式值1;
……
}
2.基本选择器
（1）标签选择器
- 通过标签名来获取标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
(2) ID选择器
- 通过标签的ID属性的值来获取标签
- 注意：ID属性值在当前页面上是唯一的
- 使用 ‘*’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div id="test">div3</div>
<div>div4</div>
</body>
</html>
（3）class选择器
- 通过标签的class属性值来获取标签
- 注意：class属性值可以重复
- 使用 ‘.’
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.demo{
color: red;
}
</style>
</head>
<body>
<div>div1</div>
<div class="demo">div2</div>
<div>div3</div>
<div>div4</div>
<p class="demo">p1</p>
</body>
</html>
（4）三大基本选择器的优先级
- ID选择器>class选择器>标签选择器
2.其他选择器
（1）全局选择器
- 选中当前页面上所有的标签
- 使用 ‘*’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
*{
background-color: red;
}
</style>
</head>
<body>
<div>这是DIV</div>
<div>这是DIV</div>
<div class="last">这是DIV</div>
<p>这是P标签</p>
<p class="last">这是P标签</p>
</body>
</html>
（2）组合选择器
- 选中当前页面上 所选中的标签
- 使用 ‘,’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的选择器</title>
<style>
#test,p,span{
color: red;
}
</style>
</head>
<body>
<div>这是DIV</div>
<div id="test">这是DIV</div>
<div>这是DIV</div>
<p>这是P标签</p>
<p>这是P标签</p>
<span>这是span</span>
</body>
</html>
（3）层级选择器（后代选择器）
- 使用 空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的选择器</title>
<style>
div span{
color: red;
}
</style>
</head>
<body>
<div>
<p>
<span>这是最里面的span</span>
</p>
<span>这是div的儿子span</span>
</div>
<span>这是div的兄弟span</span>
</body>
</html>
（4）子选择器
- 选择定位到的标签
- 使用 ‘>’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的选择器</title>
<style>
div>span{
color: red;
}
</style>
</head>
<body>
<div>
<p>
<span>这是最里面的span</span>
</p>
<span>这是div的儿子span</span>
</div>
<span>这是div的兄弟span</span>
</body>
</html>
（5）属性选择器
- 使用：[属性名=属性值]
- 获取所有属性名是属性值的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的选择器</title>
<style>
[title=last]{
color: red;
}
</style>
</head>
<body>
<div title="first">这是DIV</div>
<div>这是DIV</div>
<div title="last">这是DIV</div>
<div>这是DIV</div>
<div title="last">这是DIV</div>
<p title="last">这是P</p>
</body>
</html>
（6）伪类选择器
-
主要针对超链接
-
a:link{}：未被访问时
-
a:visited{}：访问过后
-
a:hover{}： 鼠标悬浮时（hover也可以用于其他标签）
-
a:active{}：鼠标激活时，点击未释放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的选择器</title>
<style>
a:link{
color: black;
text-decoration: none;
}
a:visited{
color: gainsboro;
}
a:hover{
color: pink;
}
a:active{
color: aqua;
}
</style>
</head>
<body>
<a href="http://www.taobao.com">淘宝</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的选择器</title>
<style>
div:hover{
color: pink;
}
</style>
</head>
<body>
<div>这是DIV</div>
</body>
</html>
CSS常见样式
1.尺寸样式
-
height：设置元素的高度
-
width：设置元素的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>这是DIV</div>
这是测试
</body>
</html>
2.字体样式
- font-size：字体大小
- font-style：字体风格(取值：italic/normal…)
- italic 斜体
- normal : 默认值。正常的字体
- font-family：字体类型(取值：隶书/微软雅黑…)
- font-weight：字体粗细取值:Normal 默认值。
- bold 粗体字符
- bolder 更粗的字符
- lighter 定义更细的字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
span{
font-size: 42px;
font-style: italic;
font-family: '宋体';
font-weight: bold;
}
</style>
</head>
<body>
<span>这是SPAN</span>
</body>
</html>
3.字体样式
- color：文本颜色（取值：colorname或#0000FF）
- text-align：文本对齐（取值：left/right/center…）
- text-decoration：文本装饰，取值:none默认。
- underline下划线。
- overline上划线
- line-through删除线
- line-height：设置行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
div{
width: 400px;
height: 200px;
background-color: aquamarine;
color: red;
text-align: center;
text-decoration: line-through;
line-height: 200px;
}
</style>
</head>
<body>
<div>
这是DIV
</div>
</body>
</html>
4.边框样式
- border-width：边框宽度，按方向设置：border-(left/right/top/bottom)-width
- border-color：边框颜色，按方向设置：border-(left/right/top/bottom)-color
- border-style：边框风格，按方向设置：border-(left/right/top/bottom)-style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
/* border: 10px black solid; */
border-top-width: 10px;
border-right-width: 20px;
border-bottom-width: 30px;
border-left-width: 40px;
border-top-color: red;
border-right-color: gray;
border-bottom-color: yellow;
border-left-color: orange;
border-top-style: solid;
border-right-style: double;
border-bottom-style: dashed;
border-left-style: dotted;
}
</style>
</head>
<body>
<div>这是DIV</div>
</body>
</html>
- border-radius：圆角边框按方向设置值：border-(top/bottom)-(left/right)-radius
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
/* border-radius: 1px; */
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.背景样式
- background-color：yellow;背景颜色
- background-image：url(img/1.jpeg);背景图片
- background-repeat：背景是否平铺，
- 取值:repeat-x:水平方向平
- repeat-y :垂直方向平，
- repeat :水平和垂直方向同时平
- no - repeat : 不平铺
- background-size：背景图片大小
- background-position：center;背景偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
div{
width: 500px;
height: 500px;
background-color: red;
background-image: url(img/gouza.png);
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6.盒子模型
- content：内容
- padding：内边距
- border：边框
- margin：外边距
（1）内边距
-
padding：内容与边框之间的距离
-
常用样式
- padding：
- padding-top：
- padding-right：
- padding-bottom：
- padding-left：
-
主要作用：调整标签内容的位置，但是，会导致整个标签大小的变化
padding:10px;代表四个方向的内边距都是10个像素
padding:10px 20px;代表上下内边距是10像素，左右内边距是20像素
padding:10px 20px 30px;代表上内边距10像素，右内边距20像素，下内边距30像素，左内边距同右
padding:10px 20px 30px 40px;分别代表上，右，下，左内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
border: 10px black solid;
/* padding: 50px; */
/* padding: 50px 100px; */
/* padding: 50px 100px 150px; */
padding: 50px 100px 150px 200px;
}
</style>
</head>
<body>
<div>
这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
</div>
</body>
</html>
（2）外边距
- margin：边框与父容器之间的距离
- 常用样式
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
- 主要作用：调整标签本身相对于父标签的位置
- 外边距的常用方式：设置标签水平居中
- margin: auto;
margin:10px;代表四个方向的外边距都是10个像素
margin:10px 20px;代表上下外边距是10像素，左右外边距是20像素
margin:10px 20px 30px;代表外内边距10像素，右外边距20像素，下外边距30像素，左外边距同右
margin:10px 20px 30px 40px;分别代表上，右，下，左外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
border: 10px black solid;
/* margin: 50px; */
/* margin: 50px 100px; */
/* margin: 50px 100px 150px; */
/* margin: 50px 100px 150px 200px; */
}
</style>
</head>
<body>
<div>
这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
</div>
</body>
</html>
7.布局样式
（1）样式
- float
（2）常用值
- left
- right
（3）理解
- 在Z轴上往人的方向移动，再进行左移和右移。
- 左移或右移时，碰到父标签边框或者碰到另一个浮动框的边框就会停下来。
- 实现框横向排列：将需要横向排列的框往同一个方向浮动就行了。
（4）出现问题
- 由于浮动脱离了原本的平面，所以原本的位置会被后面的标签挤占掉，能不能让后面的标签不去挤占呢？
（5）解决方案
-
清除前面浮动对后面的标签造成的影响
-
样式：clear
-
常用值：left，right，both
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
#first{
width: 100px;
height: 100px;
background-color: red;
}
#second{
width: 200px;
height: 200px;
background-color: gray;
float: left;
}
#third{
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
#fourth{
width: 400px;
height: 400px;
background-color: purple;
float: left;
}
#five{
width: 1000px;
height: 500px;
background-color: black;
clear:left
}
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
<div id="five"></div>
</body>
</html>
8.定位样式
- 为了将标签放到指定的位置上。
- 通常情况下，能用盒子模型解决，就不要用定位。
（1）样式
- position
（2）常用值
- absolute：绝对定位
- relative：相对定位
- fixed：固定定位
（3）调整位置的样式
- left
- right
- top
- bottom
（4）绝对样式
- Z轴上往人的方向移动，原本的位置会空出来，后面的标签就会去挤占掉
- 相对于页面的顶点进行移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
#first{
width: 100px;
height: 100px;
background-color: red;
}
#second{
width: 200px;
height: 200px;
background-color: gray;
position: absolute;
left: 100px;
top: 50px;
}
#third{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</body>
</html>
（5）相对定位
- 原本的位置会一直保留
- 相对于原来的位置进行偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
#first{
width: 100px;
height: 100px;
background-color: red;
}
#second{
width: 200px;
height: 200px;
background-color: gray;
position: relative;
left: 0px;
top: 0px;
}
#third{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</body>
</html>
（6）固定定位
- 原来的位置不保留
- 相对于页面的顶点进行偏移
- 不受滚动条的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
#first{
width: 100px;
height: 100px;
background-color: red;
}
#second{
width: 200px;
height: 1000px;
background-color: gray;
}
#third{
width: 300px;
height: 300px;
background-color: pink;
}
#fourth{
width: 50px;
height: 50px;
position: fixed;
right: 50px;
bottom: 50px;
}
</style>
</head>
<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth">
<a href="#" style="font-size:40px;text-decoration: none;color: black;">^</a>
</div>
</body>
</html>
9.列表修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
li{
list-style-type: none;/*取消图标*/
/* list-style-image: url(img/gouza.png); */
float: left;
}
</style>
</head>
<body>
<ul>
<li>橘子</li>
<li>香蕉</li>
<li>火龙果</li>
</ul>
</body>
</html>
标签的分类
1.块标签
- 独占一行，自动换行
- 可以手动设置宽高
<div>,<p>,<h*>,<ol>,<ul>,<li>,<table>,<form>……
2.行标签
- 不会自动换行
- 不能设置宽高
<span>,<font>,<strong>,<b>,<em>,<i>,<a>,<input>,<select>……
3.行块标签
- 不能自动换行
- 可以设置宽高
<img>
4.标签类型的转换
（1）样式
- display
（2）常用值
- block(：转成块标签
- inline：转成行标签
- inline-block：转成行块标签
- none：隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
img{
width: 100px;
height: 100px;
display: block;
}
</style>
</head>
<body>
<div>
这是DIV
</div>
<span>
这是Span
</span>
<img src="img/gouza.png">
</body>
</html>
综合练习
1.实现如下效果
2.浮动完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
li{
list-style-type: none;
float: left;
background-color: green;
color: white;
text-align: center;
width: 80px;
height: 30px;
line-height: 30px;
border-radius: 5px;
}
ul{
width: 400px;
margin: auto;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>天猫</li>
<li>聚划算</li>
<li>超市</li>
<li>支付宝</li>
</ul>
</body>
</html>
3.使用标签类型转换完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
li{
list-style-type: none;
background-color: green;
color: white;
text-align: center;
width: 80px;
height: 30px;
line-height: 30px;
border-radius: 5px;
display: inline-block;
margin-left: -5px;
}
ul{
width: 400px;
margin: auto;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>天猫</li>
<li>聚划算</li>
<li>超市</li>
<li>支付宝</li>
</ul>
</body>
</html>
enter;
width: 80px;
height: 30px;
line-height: 30px;
border-radius: 5px;
}
ul{
width: 400px;
margin: auto;
}
- 首页
- 天猫
- 聚划算
- 超市
- 支付宝
3.使用标签类型转换完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的使用</title>
<style>
li{
list-style-type: none;
background-color: green;
color: white;
text-align: center;
width: 80px;
height: 30px;
line-height: 30px;
border-radius: 5px;
display: inline-block;
margin-left: -5px;
}
ul{
width: 400px;
margin: auto;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>天猫</li>
<li>聚划算</li>
<li>超市</li>
<li>支付宝</li>
</ul>
</body>
</html>
