CSS
CSS是Cascading Style Sheets（层叠样式表）的简称，是负责美化页面的
CSS基础语法
选择器 {
属性1: 值1;
属性2: 值2;
...
属性N: 值N;
}
选择器就是用来选择需要美化的html标签。
html中属性的格式是： 属性=”属性值”
css中属性的格式是： 属性: 值;
CSS引入
方式一：行内式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css引入_行内式</title> </head> <!-- 多个样式之间以分号“ ; ”隔开 字体大小样式：font-size:100px 字体颜色样式：color:red --> <!-- 行内式：在标签的内部 通过添加style样式来进行修理 优点:方便，针对要处理的内容，可以直观的看到结果 缺点:复用性太差，在需要添加样式的地方都要添加样式,代码重复 --> <body> <!-- css行内式： 就是使用标签的style属性添加样式 优点：编写方便 缺点：样式只能作用在当前单个标签，多个标签不能共享该样式 --> <span style="color: red;">段落1</span> <span style="color: red;">段落2</span> </body> </html>方式二：嵌入式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css引入_嵌入式</title> <!-- 嵌入式通过在head标签中添加style标签，在style标签 内部编写css代码 type="text/css" text是大的类型 css是小的类型 -- MIME类型 --> <!-- 嵌入式： 优点：同一个页面中的标签可以共享样式 缺点：同一个项目的不同页面不能共享样式 --> <style type="text/css"> /* 选择器： 标签选择器，使用标签的名称 按照css的语法，设置样式 作用：针对当前文档中的所有符合标签名称的标签内容，按照设置的样式进行展示 */ span{ color: red; } </style> </head> <body> <p>段落1</p> <p>段落2</p> </body> </html>方式三：外链式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css引入_外链式</title> <!-- 外链式:也就说css和html不在同一个页面，css从html中独立出去成为一个css文件 然后在html中引入css文件 外链式： 优点：复用性强，css和html解耦了，所以css可以被多个html页面共享 缺点：可读性差，样式覆盖性问题，使用的样式采用的是就近原则 --> <!-- 通过link标签引入外部css文件 rel="stylesheet" rel属性表示关联的是样式表 type : 是类型，关联样式表的类型 href : 属性就是样式文件的路径 --> <link rel="stylesheet" type="text/css" href="css/base.css"/> </head> <body> <p>段落1</p> <p>段落2</p> </body> </html>
样式的优先级
多重样式：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。
样式优先级总结：谁离得近，谁优先级高！行内样式优先级最高！
CSS选择器
基础选择器
标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<style type="text/css">
/*
标签选择器的语法格式：
标签名{
属性:值;
}
*/
/*
标签选择器的短板，只能给符合标签名称的所有标签设置样式
比如：给相同标签中的部分标签设置样式，是做不到的
以下选择器表示选中当前页面中的所有div标签
*/
div{
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
div01
</div>
<hr >
<div>
div02
</div>
</body>
</html>
类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<!--
类选择器的语法格式：
.类名{
属性:值;
}
注意：类名是通过标签的class属性设置的.
相同的类名可以用在多个标签上
一个标签可以有多个类名
class属性：叫做了类选择器，可以有多个类名
-->
<style type="text/css">
.c1{
width: 100px;
height: 100px;
background-color: skyblue;
}
.c2{
width: 200px;
height: 200px;
background-color: red;
}
.c{
/* color属性表示文字的颜色 */
color: white;
}
</style>
</head>
<body>
<!-- 一个标签可以有多个类名，类名之间使用空格分开 -->
<div class="c1 c">
div01
</div>
<hr >
<div class="c2 c">
div02
</div>
<hr >
<div class="c1 c">
div03
</div>
</body>
</html>
id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style type="text/css">
/*
id选择器语法格式：
#id号{
属性:值;
}
注意：id号是通过标签的id属性设置的.
规范要求：每个标签的id号唯一，在当前文档中每个id名只能有一个。因为id主要是为了配合js代码。
注意：id选择器是以#号开头
id选择器很少被使用
*/
#p1{
color: red;
}
</style>
</head>
<body>
<p>段落1</p>
<p id="p1">段落2</p>
<p>段落3</p>
</body>
</html>
通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通配符选择器</title>
<!--
通配符选择器的语法格式：
*{
属性:值;
}
*表示选中body页面中的所有标签
-->
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<span>span</span>
<br>
<b>我爱你祖国</b>
</body>
</html>
基础选择器的优先级
不同选择器的相同样式作用在同一个标签上才需要区分优先级。
范围越小优先级越高
!important > 行内式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础选择器的优先级</title>
<style type="text/css">
p{
/*
!important 用来提升优先级
*/
color: red !important;
}
#p1{
color: blue;
}
.c1{
color: green;
}
</style>
</head>
<body>
<p id="p1" class="c1" style="color: yellow">段落1</p>
</body>
</html>
复合选择器
复合选择器就是多个基础选择器组成的选择器
后代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type="text/css">
/*
后代选择器语法格式：
选择器1 选择器n{
属性:值;
}
后代：子子孙孙
*/
.c1 span{
color: red;
}
</style>
</head>
<body>
<div class="c1">
<p>
<span>
内容1
</span>
</p>
<span>
内容2
</span>
<br>
<b>粗体</b>
</div>
</body>
</html>
子代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子代选择器</title>
<style type="text/css">
/*
子代选择器语法格式：
选择器1>选择器n{
属性:值;
}
子代：亲儿子
*/
div>span{
color: blue;
}
</style>
</head>
<body>
<div class="c1">
<p>
<span>
内容1
</span>
</p>
<span>
内容2
</span>
<br>
<b>粗体</b>
</div>
</body>
</html>
相邻兄弟选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
/*
相邻兄弟选择器的语法格式：
选择器1+选择器n{
属性:值;
}
相邻兄弟选择器必须是紧挨着的，且只能向下查找
*/
div+p{
color: red;
}
</style>
</head>
<body>
<p>段落0</p>
<div>
</div>
<p>段落1</p>
<p>段落2</p>
<span>span</span>
</body>
</html>
通用兄弟选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通用兄弟选择器</title>
<style type="text/css">
/*
通用兄弟选择器语法格式：
选择器1~选择器n{
属性:值;
}
通用兄弟选择器只要是指定的兄弟标签即可
div~* 表示div下的所有兄弟，不过很少这样使用
*/
div~p{
color: red;
}
</style>
</head>
<body>
<p>段落0</p>
<div>
</div>
<p>段落1</p>
<p>段落2</p>
<span>span</span>
</body>
</html>
交集选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>交集选择器</title>
<style type="text/css">
/*
交集选择器语法格式：
选择器1选择器n{
属性:值;
}
注意：标签选择器只能位于最前面
*/
/*
理解：获取同时满足有几个选择器的标签中的内容
p.c1表示选择p标签且类名是c1的
*/
p.c1{
color: red;
}
</style>
</head>
<body>
<p class="c1">段落1</p>
<p>段落2</p>
<p>段落3</p>
<span class="c1">span</span>
</body>
</html>
并集选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>并集选择器</title>
<style type="text/css">
/*
并集选择器语法格式：
选择器1,选择器n{
属性:值;
}
理解：获取满足随便一个选择器的标签的内容
*/
.c1,b,i,span{
color: red;
}
</style>
</head>
<body>
<p class="c1">段落1</p>
<b>段落2</b>
<i>段落3</i>
<span>span</span>
</body>
</html>
复合选择器的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器的优先级</title>
<style type="text/css">
/*
复合选择器的优先级需要根据基础选择器的优先级来判断
id选择器 > 类选择器 > 标签选择器
100 10 1 ---- 虚拟的优先级权重
复合选择器的虚拟的优先级权重累加，结果最大的优先级最高；
如果累加的结果一样，就按照就近原则
*/
div p span{
color: red;
}
#d1>.c2>span{
color: blue;
}
#d1>#p1>#s1{
color: green;
}
.c1>#p1>.c3{
color: deeppink;
}
#d1>.c2>.c3{
color: yellow;
}
</style>
</head>
<body>
<div id="d1" class="c1">
<p id="p1" class="c2">
<span id="s1" class="c3">
内容1
</span>
</p>
</div>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
/*
属性选择器的语法格式：
格式一：
[属性名]{
属性：值；
}
*/
[type]{
border: 2px solid blue;
}
/*
格式二：
[属性名="值"]{
属性：值；
}
*/
[type="text"]{
border: 2px solid blue;
}
</style>
</head>
<body>
<form action="#" method="get">
账号：
<input type="text" name="username"/>
<br>
<br>
密码：
<input type="password" name="username"/>
</form>
</body>
</html>
伪类选择器
伪类通过冒号来定义，它定义了元素的状态，伪类不是我们自己定义的类，而是css值已经定义好的类.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style type="text/css">
/*
:link 表示默认的状态
*/
a:link{
color: red;
}
/*
:visited 表示被访问后的状态
*/
a:visited{
color: green;
}
/*
:visited 表示鼠标停留在上面的状态
*/
a:hover{
color: blue;
}
/*
:active 表示鼠标点击按下的状态
*/
a:active{
color: black;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
背景属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景属性</title>
<style type="text/css">
body{
background-color: skyblue;
/* 背景图片会覆盖背景色 */
background-image: url(image/bg.png);
/*
是否重复
repeat 表示重复，就是平铺 -- 默认
no-repeat 表示不重复，就是不平铺
*/
background-repeat: repeat;
}
</style>
</head>
<body>
</body>
</html>
文字属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style type="text/css">
/*
所有的颜色都是由三原色组成
三原色： 红-red,绿-green，蓝-blue
css的中颜色可以使用英文、十进制、十六进制表示
英文： red green skyblue pink
十六进制：
- 三位表示法：#000-#fff
000 黑色 fff 白色
f00 红色 0f0 绿色 00f 蓝色
- 六位表示法: #000000-#ffffff
ff0000 红色
ffff00 黄色
十进制：
0-255
RGB(255,0,0)
RGBA(255,0,0,)
A：alpha通道 表示透明度 0-1
0表示透明，内容看不到 1表示不透明，内容看得到
*/
span{
/*
文字的颜色
*/
color: red;
/*
文字的大小
*/
font-size: 20px;
/*
文字的样式
normal: 正常
italic: 斜体
*/
font-style: italic;
/*
文字的权重：加粗
*/
font-weight: bold;
/*
文字的字体
如果属性值中有特殊符号，属性值需要使用""引起来
*/
font-family: 华文彩云;
}
p{
color: blue;
/*
font的简写注意点：
font简写必须包含font-size和font-family，必须是font-size font-family的
顺序且必须在最后
font-style和font-weight在前面，两者之间没有顺序要求
*/
font:bold italic 20px 华文彩云 ;
}
</style>
</head>
<body>
<span>好好学习，天天向上</span>
<br>
<p>好好学习</p>
</body>
</html>
文本属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本属性</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
background-color: skyblue;
/*
文本装饰:
none 什么装饰都没有，如果是a标签就会取消默认的下划线
underline 下划线
line-through 删除线
overline 顶格线
*/
text-decoration: underline;
/*
文本水平对齐方式
*/
text-align: center;
/*
行高: 从文字的中央基线向上和向下延伸的距离
将行高设置成父容器的高度就可以做到单行文本的垂直居中
*/
line-height: 300px;
/*
设置字与字之间,字母和字母之间的间距。
*/
letter-spacing: 10px;
}
p{
/*
文本缩进
2em 表示2个文字的大小
*/
text-indent: 2em;
/*
opacity用来设置透明度，默认值为1，1为不透明，0为完全透明。
隐藏一个元素 ，完全不显示，但是会占空间，只是看不到。
*/
opacity: 0;
}
</style>
</head>
<body>
<div>
<span>
好好学习,good
</span>
</div>
<p>浙江品诺机械有限公司车间里热火朝天，电机声隆隆，每台设备上装着传感器，通过5G技术联上“轴承产业大脑”，设备状况、产品产量及质量等数据在LED显示屏上一目了然。经过数字化改造后，该车间产出效率提升8%，自动采集的数据上传汇总还能让管理事半功倍。</p>
</body>
</html>
扩展
实现溢出文本eclipsis的解决，让溢出的文字以省略号显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现溢出文本eclipsis的解决</title>
<style type="text/css">
div{
width: 5em;
background-color: skyblue;
/*设置文本不能换行*/
white-space:nowrap;
/*设置文本超出文本框时隐藏文本*/
overflow:hidden;
/*用略符号来代表被修剪的文本*/
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div>
好好学习，天天向上
</div>
</body>
</html>
边框线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框线</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
border: 3px solid blue;
/* 半径是宽高的一半，就是圆 */
border-radius: 50px;
/* border-bottom-width: 3px;
border-bottom-color: #0000FF;
border-bottom-style: solid; */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
列表属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表属性</title>
<style type="text/css">
ul{
/* 设置列表编号类型 */
/* list-style-type: circle; */
/*
取消列表的编号
*/
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</body>
</html>
元素的分类
html元素分为行内元素、块级元素、行内块元素
行内元素
- 不能设置宽高，宽高是包裹内容的
- 一行可以显示多个行内元素
- 常见的行内元素：span、a，em，strong, i, u, del
块级元素
- 可以设置宽高。宽度默认独占一行，高度默认包裹内容
- 一行只能显示一个元素
- 常见的块级元素：div, body,p，h1~h6，ul，ol，li，pre
行内块元素
- 可以设置宽高
- 一行可以显示多个行内块元素
- 常见的行内块元素： img、input
元素类型的转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素的分类</title>
<style type="text/css">
#s1{
width: 100px;
height: 100px;
background-color: red;
/* 转成块级元素 */
display: block;
}
#s2{
background-color: skyblue;
}
.c1{
width: 300px;
height: 300px;
background-color: pink;
/* 转换成行内元素 */
/* display: inline; */
/*
转换成行内块元素，
一行可以显示多个，元素之间默认有间距
*/
display: inline-block;
}
.c2{
width: 300px;
height: 300px;
background-color: peru;
display: inline-block;
}
</style>
</head>
<body>
<span id="s1">内容1</span>
<span id="s2">内容1</span>
<br>
<div class="c1">
div1
</div>
<div class="c2">
div1
</div>
</body>
</html>
盒子模型
盒子模型不是html中的一个元素，也不是css的一个样式，而是对css中一组属性的形象化描述。
宽高、边框线、内边距、外边距就是盒子模型的形象化描述
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
.c1{
/*
盒子内容的宽高
*/
width: 96px;
height: 96px;
background-color: salmon;
/*
border会撑大盒子的大小
*/
border: 1px solid blue;
/*
padding表示盒子的内边距，盒子内容和盒子边框的距离
padding: 1px 2px 3px 4px 上右下左的内边距
padding: 1px 2px 3px; 上右下，左和右的值一样
padding: 1px 2px; 上右，下和上一样，左和右的值一样
padding: 1px; 上右下左都一样
*/
/*
padding会撑大盒子的大小
*/
padding: 1px;
/*
margin盒子的外边距，盒子和盒子外其他内容之间的距离
margin: 1px; 上右下左都一样
*/
/*
margin 不会撑大盒子的大小
*/
margin: 1px;
}
.c2{
width: 100px;
height: 100px;
background-color: red;
border: 2px solid blue;
padding: 2px;
/* css3的属性
使用box-sizing: border-box;这个后
宽高就是盒子的宽高，内容的宽高自动减少了
*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="c1">
div1
</div>
<div class="c2">
div1
</div>
</body>
</html>
盒子水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子水平居中</title>
<style type="text/css">
/*
清除页面默认的外边距和内边距
0可以不带px单位
*/
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: red;
/* 盒子水平居中 */
margin: 0 auto;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
css页面的布局
css中页面的布局分为：标准流、浮动流、定位流
标准流
页面默认就是标准流，也就是从上到下，从左到右的显示布局
浮动流
浮动流是一种脱离标准流的水平布局方式
