选择器
css属性相关
分组与嵌套
/*div {*/
/* color: red;*/
/*}*/
/*p {*/
/* color: red;*/
/*}*/
/*span {*/
/* color: red;*/
/*}*/
/*可以写成以下 减少代码冗余*/
div,p,span { /*逗号表示并列关系*/
color: red;
}
#d1,.c1,span { /*逗号表示并列关系*/
color: orange;
}
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*访问之前的状态*/
a:link {
color: red;
}
/*鼠标悬浮态*/
a:hover {
color: aqua;
}
/*鼠标点击不松开的状态 激活态*/
a:active {
color: black;
}
/*访问之后的状态*/
a:visited {
color: darkgray;
}
/*input框获取焦点(鼠标点了input框)*/
input:focus {
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.jd.com/">小轩在不在?</a>
<input type="text">
</body>
</html>
伪元素选择器
before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* first-letter开头第一个字 */
p:first-letter {
font-size: 48px;
color: orange;
}
/*在文本开头 用css添加内容 但是无法选中*/
p:before {
content: '你说的对';
color: blue;
}
/*在文本结尾 用css添加内容 但是无法选中*/
p:after {
content: '雨露均沾';
color: orange;
}
</style>
</head>
<body>
<p>装备差进任何本都是血赚,装备差进任何本都是血赚</p>
</body>
</html>
选择器优先级
id选择器
类选择器
标签选择器
行内式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*
1.选择器相同 书写顺序不同
就近原则:谁离标签更近就听谁的
2.选择器不同 ...
行内 > id选择器 > 类选择器 > 标签选择器
总结:
精确度越高越有效
*/
#d1 {
color: aqua;
}
.c1 {
color: orange;
}
p {
color: red;
}
</style>
</head>
<body>
<p id="d1" class="c1" style="color: blue">贤妻果然很识趣，有前途~</p>
</body>
</html>
ps:!important强制让标签采用你的样式 不推荐使用
![]()
css属性相关
设置长宽
<style>
/*设置长宽*/
p {
background-color: red;
height: 200px;
width: 400px;
}
/*行内标签无法设置长宽 就算你写了 也不会生效*/
span {
background-color: green;
height: 200px;
width: 400px;
}
</style>
字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
/*第一个不生效就用后面的 写多个备用*/
font-family: "Arial Black","微软雅黑","...";
/*字体大小*/
font-size: 24px;
/*bolder 加粗 lighter 变细 用数字调节粗细:100~900 inherit继承父元素的粗细值*/
font-weight: 500;
/*直接写颜色英文*/
color: red;
/*颜色编号*/
/*color: #ee762e; */
/*三基色 数字 范围0-255*/
/*color: rgb(128,23,45); */
/*第四个参数是颜色的透明度 范围是0-1*/
/*color: rgba(23, 128, 91, 0.9); */
/*当你想要一些颜色的时候 可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能
*/
}
</style>
</head>
<body>
<p>曹老板 抬人！！！fuck off!</p>
</body>
</html>
文字属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
/*文字对齐*/
/*居中*/
/*text-align: center;*/
/*右对齐*/
/*text-align: right;*/
/*左对齐*/
/*text-align: left;*/
/*两端对齐*/
/*text-align: justify; */
/*文字装饰*/
/*下划线*/
/*text-decoration: underline;*/
/*上划线*/
/*text-decoration: overline;*/
/*删除线*/
/*text-decoration: line-through;*/
/*无装饰（去装饰）*/
/*text-decoration: none;*/
/*在html中 有很多标签渲染出来的样式效果是一样的*/
/*字体大小16px*/
font-size: 16px;
/*缩进32px 缩进2格 或 2em */
text-indent: 32px;
}
a {
/*无装饰（去装饰）*/
text-decoration: none; /*主要用于给a标签去掉自带的下划线*/
}
</style>
</head>
<body>
<!--<p>我要感谢我的导师，要不是他，我论文早写完了（狗头）</p>-->
<a href="https://www.mzitu.com/">点我</a>
<p>我要感谢我的导师，要不是他，我论文早写完了（狗头）</p>
</body>
</html>
背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
/*图片大小*/
height: 800px;
width: 800px;
/*背景颜色*/
/*background-color: red;*/
/*背景图片 默认会全部铺满*/
/*background-image: url("222.png");*/
/*设置不平铺*/
/*background-repeat: no-repeat; */
/*其实浏览器不是一个平面 是一个三维立体结构
z轴指向用户 越大离用户越近*/
/*设置x轴平铺*/
/*background-repeat:repeat-x; */
/*设置y轴平铺*/
/*background-repeat:repeat-y; */
/*第一个左右 第二个上下*/
/*background-position:200px 200px;*/
/*第一个左右居中 第二个上下居中*/
/*background-position:center center; */
/*以上可以简写*/
/*如果出现了多个属性名前缀是一样的情况 一般情况下都可以简写 只写前缀*/
/*只需要填上你想要加的参数即可 位置没有关系 参数个数也不做限制 加就显示不加就用默认的设置*/
/*background: red url("222.png") no-repeat center center; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
背景图片小案例
![]()
![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#d1 {
height: 500px;
background-color: red;
}
#d2 {
height: 500px;
background-color: green;
}
#d3 {
height: 500px;
background-image: url("222.png");
/*复制粘贴 自行体会*/
background-attachment: fixed;
}
#d4 {
height: 500px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>
View Code
边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
/*背景色*/
background-color: red;
/*边框宽度*/
border-width: 5px;
/*边框的样式*/
border-style: solid;
/*边框的颜色*/
border-color: green;
}
div {
/*左边框*/
/*border-left-width: 5px;*/
/*border-left-color: red;*/
/*border-left-style: dotted;*/
/*右边框*/
/*border-right-width: 10px;*/
/*border-right-color: greenyellow;*/
/*border-right-style: solid;*/
/*上边款*/
/*border-top-width: 15px;*/
/*border-top-color: deeppink;*/
/*border-top-style: dashed;*/
/*下边款*/
/*border-bottom-width: 10px;*/
/*border-bottom-color: tomato;*/
/*border-bottom-style: solid;*/
/*简写*/
border: 3px solid red;
}
#d1 {
background-color: greenyellow;
height: 800px;
width: 800px;
/*变圆*/
/*直接写50%即可 长宽一样就是圆 不一样就是椭圆 或者 写长宽的一半px也可以变圆*/
border-radius: 50%;
}
</style>
</head>
<body>
<p>111111</p>
<div>22222</div>
<div id="d1"></div>
</body>
</html>
display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*#d1 {*/
/*隐藏标签不展示到前端页面并且原来的位置也不在了 被占有了 但是还存在于文档上*/
/*display: none; */
/*将标签设置为行内标签的特点*/
/*display: inline; */
/*}*/
/*#d2 {*/
/* display: inline;*/
/*}*/
/*#d1 {*/
/*将标签设置成块儿级标签的特点*/
/* display: block; */
/*}*/
/*#d2 {*/
/* display: block;*/
/*}*/
/*#d1 {*/
/*标签即可以在一行显示又可以设置长宽*/
/* display: inline-block;*/
/*}*/
/*#d2 {*/
/* display: inline-block; */
/*}*/
</style>
</head>
<body>
<div style="display: none">隐藏 位置也被占有了</div>
<div>div2</div>
<div style="visibility: hidden">单纯的隐藏 位置还在</div>
<div>div4</div>
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
<!--<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>-->
<!--<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>-->
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
</body>
</html>
盒子模型
就以快递盒为例
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)
如果你想要调整标签与标签之间的距离 你就可以调整margin
浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
/*上下左右全是0*/
margin: 0;
/* 第一个上下 第二个左右*/
/*margin: 10px 20px; */
/*第一个上 第二个左右 第三个下*/
/*margin: 10px 20px 30px; */
/*上 右 下 左*/
/*margin: 10px 20px 30px 40px; */
}
/*p {*/
/* margin-left: 0;*/
/* margin-top: 0;*/
/* margin-right: 0;*/
/* margin-bottom: 0;*/
/*}*/
/*不叠加 只取大的*/
#d1 {
margin-bottom: 50px;
}
#d2 {
margin-top: 20px;
}
/*只能做到标签的水平居中*/
#dd {
margin: 0 auto;
}
p {
border: 3px solid red;
/*padding-left: 10px;*/
/*padding-top: 20px;*/
/*padding-right: 20px;*/
/*padding-bottom: 50px;*/
/*规律和margin一模一样*/
/*上下左右全是10*/
/*padding: 10px;*/
/* 第一个上下 第二个左右*/
/*padding: 10px 20px;*/
/*第一个上 第二个左右 第三个下*/
/*padding: 10px 20px 30px;*/
/*上 右 下 左*/
/*padding: 10px 20px 30px 40px;*/
}
</style>
</head>
<body>
<!-- <p style="border: 1px solid red;" id="d1">ppp</p>-->
<!-- <p style="border: 1px solid orange;" id="d2">ppp</p>-->
<!--<div style="border: 3px solid red;height: 400px;width: 400px">-->
<!-- <div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>-->
<!--</div>-->
<p>ppp</p>
</body>
</html>
浮动
只要是前期页面布局 一般都是用浮动来设计页面
能够让标签脱离正常的文档流漂浮到空中(距离用户更近)
浮动的元素没有块儿级和行内一说 标签多大浮动起来之后就占多大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
#d1 {
height: 200px;
width: 200px;
background-color: red;
/*左浮动*/
float: left; /*浮动 浮到空中往左飘*/
}
#d2 {
height: 200px;
width: 200px;
background-color: greenyellow;
/*右浮动*/
float: right;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
浙公网安备 33010602011771号