day33 前端之css
css简介
CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素。
# 语法结构
选择器 {
属性名1，属性值
属性名2，属性值
}
# css注释
/*单行注释*/
/*
多行注释
多行注释
*/
/*功能注释注释*/
# css的三种引入方式
1.<style>
h1 {
color:red;
}
2.<link rel="stylesheet" href="mycss.css">
3.<h1 style="color:blue"> hello baby<h1> # 行内式
基本选择器
1.id选择器
2.类选择器
3.标签选择器
4.通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器*/
#d1 {
color: green;
}
/*类选择器*/
.c1 {
color: green;
}
/*标签选择器*/
span {
color: gray;
}
/* 通用选择器*/
* {
color: red;
}
</style>
</head>
<body>
<div id="d1">div1</div>
<div>div2</div>
<span class="c1">span1</span>
<span class="c2">span2</span>
</body>
</html>
属性选择器
<style>
[username] { # 根据属性查找
color: red;
}
[username='ly'] { # 根据条件查找
color: red;
}
div[username='ly'] { # 可以加div限制
color: red;
}
</style>
</head>
<body>
<div username="ly">div</div>
<span username>span</span>
<p username="ly">p</p>
</body>
组合和嵌套
后代选择器：
/*li内部的a标签设置字体颜色*/
li a {
color: green;
}
# /*逗号表示并列关系*/
#d1, .c1 {
color: red;
}
伪类选择器
<style>
a {
color: gray;
}
# /*鼠标悬浮时候的样式， 掌握主*/
a:hover {
color: red;
}
# /*按住鼠标左键不放松的样式*/
a:active {
color: green;
}
# /*访问之后的样式*/
a:visited {
color: blue;
}
</style>
</head>
<body>
<a href="">点我哦</a>
</body>
伪元素选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-letter { # 设置首字母颜色
color: red;
font-size: 24px; # 设置字体大小
}
p:before { # 给字体前面加字，但不能选择加的字
content: 'ly is nb';
font-size: 28px;
color: red;
}
/*解决父标签塌陷问题*/
p:after {
content: 'ly is nb';
font-size: 28px;
color: green;
}
</style>
</head>
<body>
<p>
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，
</p>
</body>
选择器的优先级
选择器优先级
1. 选择器相同的情况
离谁越近就听谁的
2. 选择器不同的情况
行内式 > id选择器 > 类选择器 > 标签选择器
设置长宽
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background: red; # 背景颜色
}
span {
# /*行内元素不能设置宽和高*/
/*width: 100px;*/
/*height: 100px;*/
background: green;
}
</style>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
字体属性
font-size: 20px;
/*颜色的英文名*/
color: limegreen;
/*范围是0-255*/
color: rgb(101,119,120); # rgb颜色设置
/*a的范围是0-1*/
color: rgba(101,119,120, 0.9); # 透明度
/*颜色编号，表示的颜色最多，1600w*/
/*color: #757575;*/ # rgb颜色编号
/*color: red;*/
font-weight: bolder; # 字体加粗
/* 范围是100-900的整数*/
font-weight: 800; # 自定义设置字体粗细
文字属性
p {
text-align: left; # 文字靠左对齐
text-align: center; # 文字居中
text-align: right; # 文字靠右对齐
text-decoration: underline; # 文字加下划线
text-decoration: line-through; # 文字加中划线
text-decoration: overline; # 文字加上划线
font-size: 20px; # 设置文字大小
text-indent: 40px; # 首行缩进
}
a { # 去掉“点我”的下划线
# 重点掌握
text-decoration:none;
}
<a href="">点我</a>
背景属性
<style>
div {
width: 400px;
height: 400px;
background: red; # 背景颜色
background-color: red;
background-image: url("1234.png"); # 导入背景图片的地址
background-repeat: repeat-x; # 设置x轴不重复
background-repeat: repeat-y; # 设置y轴不重复
background-repeat: no-repeat; # 设置不重复
background-position: center center; # 设置图片居中
background-position: 20px 50px; # 移动图片
/*只要前缀一样的情况，都可以简写*/
background: no-repeat center center url("1234.png"); #这行就表示上面一串了
border: 3px solid red;
}
</style>
边框
简写的：
border-radius: 50% # 把正方形变成一个圆形:
border: 3px solid red; # 简写代表上面一串代码
边框样式：
1.none：无边框
2.dotted：点状虚线边框
3.dashed：矩形虚线边框
4.solid：实线边框
p {
border: 1px solid red;
border-width: 3px;
border-style: dotted;
border-color: red;
border-left-color: red; # 设置左边边框
border-left-style: solid; # 设置边框实心
border-left-width: 10px; # 设置边框的粗细
border-top-color: green; # 设置边框上边
border-top-style: dotted;
border-top-width: 5px;
border-right-color: green; # 设置右边
border-right-style: dotted;
border-right-width: 5px;
border-bottom-color: green; # 设置上面
border-bottom-style: dotted;
border-bottom-width: 5px;
border: 3px solid red; # 简写代表上面一串代码
}
div {
width: 200px;
height: 200px; # 成一个正方形
background: red;
border-radius: 100px; # 把四个角往里面缩成一个圆形
border-bottom-left-radius: 100px; # 左下方缩角
border-bottom-right-radius: 100px; # 右下方缩角
border-radius: 50%; # 简写，直接成圆角
}
</style>
display属性
隐藏两种方式：
1.display: block;隐藏之后，被隐藏的位置还在
2.display: none;隐藏之后，被隐藏的位置不在
#d1 {
width: 100px;
height: 100px; # 需求是两个块级元素在一行
background: red;
display: inline-block; # 块级元素和行内元素都具备
}
#d2 {
width: 100px;
height: 100px;
background: green;
display: inline-block; # 块级元素和行内元素都具备
}
#d3 { # 需求是把两个行内元素放在两行
width: 100px;
height: 100px;
display: block; # 把行内元素设置为块级元素
background: red;
}
#d4 {
width: 100px;
height: 100px;
display: block; # 把行内元素设置为块级元素
background: green;
}
#d5 {
width: 100px;
height: 100px;
/*隐藏*/
display: none; # 用来隐藏之后，被隐藏的位置不在
background: red;
}
#d6 {
width: 100px;
height: 100px;
display: block; # 用来隐藏之后，被隐藏的位置还在
background: green;
}
</style>
css盒子模型
盒子属性：
1.margin:用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
2.padding:用于控制内容与边框之间的距离；
3.Border(边框):围绕在内边距和内容外的边框。
4.Content(内容):盒子的内容，显示文本和图像。
外边距简写：margin: 5px 10px 15px 20px;
顺序：上、右、下、左
居中：margin: 0 auto;
内填充：padding: 5px 10px 15px 20px;
# 第一个值代表上下，第二个代表左右
margin:10px 20px;
# 第一个值代表上，第二个代表左右,第三个代表下
margin:10px 20px 30px;
# 上 右 下 左
margin:10px 20px 30px 40px;
# 面试题：盒子和盒子之间margin取最大的值，它们是不叠加的。
#d1 {
width: 100px;
height: 100px;
background: red;
margin-bottom: 20px;
}
#d2 {
width: 100px;
height: 100px;
background: green;
margin-top: 50px;
}
# 在盒子水平居中
#d1 {
width: 200px;
height: 200px;
border: 3px solid red;
}
p {
width: 20px;
height: 20px;
background: green;
/*margin-left: 90px;*/
/*水平居中*/
margin: 0 auto; # 水平居中
}
浮动
float（浮动）：
在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
1.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2.由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值：
1.left：向左浮动
2.right：向右浮动
3.none：默认值，不浮动
clear属性规定元素的哪一侧不允许其他浮动元素：
1.left：在左侧不允许浮动元素。
2.right：在右侧不允许浮动元素。
3.both：在左右两侧均不允许浮动元素。
4.none：默认值。允许浮动元素出现在两侧。
5.inherit：规定应该从父元素继承 clear 属性的值。
<style>
#d1 {
width: 100px;
height: 100px;
background: green;
float: left; # 让背景颜色浮动
}
#d2 {
width: 110px;
height: 110px;
background: red;
/*float: left;*/
}
</style>
浮动带来的塌陷问题
<style>
#d1 {
border: 3px solid blue;
}
#d2 {
width: 100px;
height: 100px;
background: green;
float: left;
}
#d3 {
width: 100px;
height: 100px;
background: red;
float: left;
}
/*#d4 {*/
/* !*height: 100px;*!*/
/* !*清除浮动*!*/ # 不让左边出现浮动的盒子
/* clear: left;*/
/*}*/
# 谁塌陷给给加clearfix:after（通用解决方式）
.clearfix:after { # 伪元素选择器
content: '';
display: block; # 改为块级元素
clear: both;
}
</style>
overflow溢出属性
溢出属性：
1.visible:默认值。内容不会被修剪，会呈现在元素框之外。
2.hidden:内容会被修剪，并且其余内容是不可见的。
3.scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4.auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5.inherit:规定应该从父元素继承 overflow 属性的值。
代码：文本溢出
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
width: 100px;
height: 100px;
border: 3px solid red;
/*overflow: hidden;*/ # 设置内容会被修剪
overflow: scroll; # 设置滚动条属性
}
</style>
</head>
<body>
<p>由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。</p>
</body>
溢出的案例
圆形头像：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: #4e4e4e; # 设置背景颜色
}
#d1 {
width: 100px;
height: 100px;
border: 3px solid white; # 设置一个框
border-radius: 50%;
margin: 0 auto;
overflow: hidden;
}
#d1 img {
width: 100%; # 设置图片的宽度100%
}
</style>
</head>
<body>
<div id="d1">
<img src="1234.png" alt="">
定位
1.relative（相对定位）：relative的一个主要用法：方便绝对定位元素找到参照物。
2.absolute（绝对定位）：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。
3.fixed（固定）：fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
<style>
#d1 {
width: 100px;
height: 100px;
background: red;
/*默认值，不能移动位置*/
/*position: static;*/
/*相对定位了， 只要改为relative， 那么就算你位置不发生移动，标签的性质也已经发生了改变
有不能移动位置改为可以移动位置
*/
position: relative; # 相对定位
left: 100px;
top: 100px;
#d2 {
width: 100px;
height: 100px;
background: red;
position: relative;
margin-left: 100px; # 绝对定位的父类
}
#d3 {
width: 100px;
height: 100px;
background: green;
position: absolute; # 绝对定位
left: 100px;
top: 100px;
}
#d4 {
width: 50px;
height: 200px;
background: red;
/*固定定位*/
position: fixed; # 固定定位
right: 20px;
bottom: 100px;
}
</style>
opacity
opacity:用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: red;
opacity: 0.2; # 设置透明的效果
}
</style>
</head>