目录
css介绍
css介绍：当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
css实例：每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
'''
思考:页面都是由HTML构成的 并且页面上有很多相同的HTML标签 但是相同的HTML标签在不同的位置可能有不同的样式 我们如何区分标签
标签的两大重要属性>>>:区分标签
1.class属性
分门别类 主要用于批量查找
2.id属性
精确查找 主要用于点对点
'''
css语法
1.css的注释
/*这是单行注释*/
/*
这是多行注释
这是多行注释
这是多行注释
这是多行注释
这是多行注释
*/
2.CSS的语法结构：
选择器 {
属性名1：属性值1;
属性名2：属性值2;
属性名3：属性值3;
属性名4：属性值4;
属性名5：属性值5;
}
css引入方式
CSS的几种引入方式
1. head内style标签内部编写(学习的时候使用)
<style>
p{
background-color: #2b99ff;
}
</style>
2. head内link标签引入(标准的方式)
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
3. 行内式
<h1 style="color: red">
开始学习CSS了
</h1>
选择器
基本选择器
1. id #根据标签的id值精准查找标签，不可重复选择
<style>
#d1{color: bisque;
font-size: 50px;
}
</style>
</head>
<body>
<h1 style="color: aquamarine">
学习
</h1>
<div id="d1">
很帅很帅很帅很帅很帅!!! 很很帅很帅很帅帅!!!
</div>
<div id="d2">
很帅很帅很帅很帅很帅!!! 很帅很帅很帅很帅很帅
</div>
2. 类选择器 #按照标签的class值查找，可重复选择
<style>
.c1{color:magenta;}
</style>
</head>
<body>
<h1 style="color: aquamarine">
学习
</h1>
<div class="c1">
很帅很帅很帅很帅很帅!!! 很很帅很帅很帅帅!!!
</div>
<div class="c2">
很帅很帅很帅很帅很帅!!! 很帅很帅很帅很帅很帅
</div>
3. 标签选择器#直接按照标签名查找，该标签下的内容生效
<style>
span{
color: plum;
}
</style>
</head>
<body>
<span>啦啦啦啦啦</span>
</body>
4. 通用选择器*#所有的标签都生效
*{color: blue}
</style>
</head>
<body>
<h1 style="color: aquamarine">
学习
</h1>
<div class="c1">
很帅很帅很帅很帅很帅!!! 很很帅很帅很帅帅!!!
</div>
<div class="c2">
很帅很帅很帅很帅很帅!!! 很帅很帅很帅很帅很帅
</div>
组合选择器
# 我们使用亲戚关系来表示标签之间的关系
"""
<div>
<p></p>
<p>
<span></span>
</p>
<span></span>
<span></span>
</div>
"""
div里面的p和span都是div的后代
div里面的p是div的儿子
div里面的p里面的span是p的儿子，div 的孙子
...
1.后代选择器(空格)
div span {
color: red;
}
2.儿子选择器(大于)
div>span {
color: yellow;
}
3.毗邻选择器(加号)
div+span {
color: yellow;
}
4.弟弟选择器(小波浪号)
div~span {
color: yellow;
}
属性选择器
/*[]括起来的属性，用于选取带有指定属性的元素。*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[username]{color: magenta;}
[username='jack']{color: blue}
input[username='jasson']{background-color:palevioletred;}
</style>
</head>
<body>
<div id="" class="" username="kevin">qwwe</div>
<div id="" class="" username="jack">567</div>
<div id="" class="" password="123">123</div>
<input type="text" username="jasson">
</body>
</html>
分组和嵌套
- 分组
用，隔开的，代码为div标签和p标签span标签统一设置字体为红色
div,p,span { /*# 逗号隔开是并列关系*/
color: red;
}
-
嵌套
用空格隔开的,多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色 .c1 p { color: red; }
伪类选择器
link:默认显示的样子,未访问的链接
hover ：鼠标悬浮的时候显示的样子
active：鼠标选定的链接显示的样子
visited:已访问的链接显示的样子
focus: 获取焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*link:默认显示的样子*/
a {
color: red;
}
/*鼠标悬浮的时候显示的样子, 掌握主这个*/
a:hover {
color: brown;
}
/*鼠标点击左键不放的时候显示的样子*/
/*a:active {*/
/* color: green;*/
/*}*/
/*访问过之后显示的样子*/
a:visited {
color: blue;
}
/*获取焦点*/
/*input:focus {*/
/* background-color: red;*/
/*}*/
</style>
</head>
<body>
<a href="">点我</a>
<input type="text" id="inp1">
</body>
</html>
伪元素选择器
- first-letter
- before
- after
first-letter:给首字母设置特殊样式
before:在元素之前插入内容
after：元素之后插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-letter{
font-size: 32px;
color:navajowhite;
}
p:before{content:'加在前面';font-size: 30px}
div:after{content:'加在后面';font-size:30px}
</style>
</head>
<body>
<p>hello</p>
<div>侬好</div>
</body>
</html>
选择器的优先级
# 1. 选择器相同的情况下,导入方式不同
就近原则：标签离谁近就听谁的
# 2. 选择器不相同的情况下，导入方式相同
行内式 > id > 类 > 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{color:khaki;}
#p1{color:red;}
.c1{color:yellow;}
</style>
<link rel="stylesheet" href="选择器优先级.css">
</head>
<body>
<p id="p1" class="c1" style="color: blue">uuuuuuuuuuuu</p>
</body>
</html>
CSS属性相关
宽和高
1. 对于块儿级元素可以设置长和宽
2. 对于行内元素设置行高不展示，仅展示自身大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{width: 200px;
height:200px;
background-color: darkcyan}
span{width: 200px;
height: 200px;
background-color: palevioletred}
</style>
</head>
<body>
<div>div块</div>
<span>span行</span>
</body>
</html>
字体属性
font-size:14px 24px 28px 36px 字体大小
font-weight: lighter; 字体粗细
color:三种模式
/*color: red;*/
/*color: #3d3d3d;*/
color: rgb(186,11,98);
rgba()最后一个参数还可以控制透明度 0~1
text-align: center 文本居中
text-decoration: none; 主要用于a标签取消下划线
text-indent: 32px; 首行缩进
#字重（粗细）
font-weight:normal默认值，标准粗细
font-weight:bold粗体
font-weight:bolder更粗
font-weight:lighter更细
100~900设置具体粗细，400等同于normal，而700等同于bold
font-weight:inherit继承父元素字体的粗细值
#字体大小
font-size: 14px
#首行缩进
text-indent: 32px
#取色器工具
1.pycharm
2.截图功能
#文本颜色
● 十六进制值 - 如: ＃FF0000
color: #FF0000
● 一个RGB值 - 如: RGB(255,0,0)
color: rgba(255,0,0,1)
第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0到1之间
#文字对齐
text-align:left左边对齐 默认值
text-align:right右对齐
text-align:center居中对齐
text-align:justify两端对齐
#文字装饰
text-decoration:underline下划线
text-decoration:line-through中划线
text-decoration:overline上划线
text-decoration:none默认，取消下划线
text-decoration:inherit继承父元素的text-decoration属性的值
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
/*text-align: left; *//*!*这个是文本左对齐*!*/
/*text-align: right;*//*!*这个是文本右对齐*!*/
/*text-align: center; !*这个是文本内容居中*!*/
text-align: justify;
text-indent: 30px;
}
a {
/*text-decoration: overline;*/
/*text-decoration: underline;*/
/*text-decoration: line-through;*/
text-decoration: none; /*去掉a标签的下划线*/
}
</style>
</head>
<body>
<p>pppppppppppppppppppppp</p>
<!--<a href="">这是a链接</a>-->
</body>
背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*背景重复*/
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
background-repeat: no-repeat不重复背景图片
/*背景位置*/
background-position: left top控制位置
<style>
div {
width: 800px;
height: 800px;
/*background-color: red;*/
/*background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");*/
/*background-image: url("666.png");*/
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*background-position: center center;居中展示*/
background: url("666.png") blue no-repeat center center;
}
</style>
</head>
<body>
<div></div>
</body>
#当多个属性名有相同的前缀 那么可以简写一次性完成background: url("666.png") blue no-repeat center center;
边框
#边框属性
border-width
border-style
border-color
border-radius: 50%这个属性能实现圆角边框
#边框样式
none无边框
dotted点状虚线边框
dashed矩形虚线边框
solid实线边
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
border-width:4px;
border-color:silver;
border-style:dotted; }
#d2{border-left-color: yellowgreen;
border-left-width:10px;
border-left-style:solid;
border-right-color: mediumaquamarine;
border-right-width:10px;
border-right-style:none;
border-top-color:magenta;
border-top-width:10px;
border-top-style:dashed;
border-bottom-color:chocolate;
border-bottom-width:10px;
border-bottom-style:dotted;}
p{}
</style>
</head>
<body>
<div id="d1">ppppp</div>
<p>
<span id="d2">uuuuuu</span>
</p>
</body>
</html>
display属性
"""
行内标签是无法设置长宽 只有块儿级可以设置
"""
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点
display:inline-block既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
display:none 彻彻底底的隐藏标签(页面上不会显示 也不会保留标签的位置)
visibility: hidden 页面隐藏了标签但是还保留位置
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{width:100px;
height:100px;
display:inline-block /*使块级标签拥有行内标签样式*/
}
#d2{width: 100px;
height: 100px;
display:inline-block
}
.c1{
width: 50px;
height: 50px;
display: block
}
.c2{width: 50px;
height: 50px;
display:block
}
</style>
</head>
<body>
<div id="d1" style="width:100px;height: 100px;background: red">d1</div>
<div id="d2" style="width:100px;height: 100px;background: deepskyblue;display: none">d2</div>
<span class="c1" style="width: 100px;height: 100px;background: yellow">c1</span>
<span class="c2" style="width: 100px;height: 100px;background: powderblue;visibility:hidden">c2</span>
</body>
</html>
CSS盒子模型
我们可以将标签看成是一个盒子(快递盒)
1.快递包里面的实际物体 content(内容)
2.物体与内部盒子墙的距离 padding(内边距、内填充)
3.快递盒的厚度 border(边框)
4.快递盒之间的距离 margin(外边距)
● margin: 用于控制元素与元素之间的距离，margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
● padding: 用于控制内容与边框之间的距离
● Border(边框): 围绕在内边距和内容外的边框
● Content(内容): 盒子的内容，显示文本和图像
补充padding的常用简写方式：
/* !*padding: 20px; 上下左右*!*/
/* !*padding: 20px 40px;第1个值代表上下，第2个值代表左右*!*/
/* !*padding: 10px 20px 30px;上 左右 下*!*/
/* !*padding: 10px 20px 30px 40px;上 右 下 左*!*/
margin与padding用法一致
margin: 0 auto;针对标签的嵌套 水平方向可以居中
# 调整标签与标签之间的距离调整margin值
两个盒子的margin会不会叠加？不会，margin值大的覆盖小的