02 css 属性设置
css 属性设置
1. 行内标签和块级标签的区别
<style>
p {
background-color: red;
height: 200px;
width: 400px;
}
span {
background-color: green;
height: 200px;
width: 400px;
/*行内标签无法设置长宽 就算你写了 也不会生效*/
}
</style>
注意： 行内标签不可以设置长宽（但是行内标签和块级标签是可以转化的）
2. 字体属性
p {
/*font-family: "Arial Black","微软雅黑","..."; !*第一个不生效就用后面的 写多个备用*!*/
/*font-size: 24px; !*字体大小*!*/
/*font-weight: inherit; !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/
/*color: red; !*直接写颜色英文*!*/
/*color: #ee762e; !*颜色编号*!*/
/*color: rgb(128,23,45); !*三基色 数字 范围0-255*!*/
/*color: rgba(23, 128, 91, 0.9); !*第四个参数是颜色的透明度 范围是0-1*!*/
/*当你想要一些颜色的时候 可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能
也可以多软件结合使用
*/
}
3. 文字属性
- text-align: center;
- text-decoration: none; （去除a标签下划线）
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中 有很多标签渲染出来的样式效果是一样的*/
font-size: 16px;
text-indent: 32px; /*缩进32px*/
}
a {
text-decoration: none; /*主要用于给a标签去掉自带的下划线 需要掌握*/
}
4.背景图片
- background-repeat: no-repeat; 图片不铺（就一张），默认全部铺满（很多张）
- background-position:center center; 图片的位置调整 第一个参数左 第二个参数右
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
height: 800px;
width: 800px;
/*background-color: red;*/
/*背景图片*/
/*background-image: url("222.png"); !*默认要全部铺满*!*/
/*background-repeat: no-repeat; !*不铺*!*/
/*background-repeat: no-repeat; !*不铺*!*/
/*background-repeat:repeat-x; */
/*background-repeat:repeat-y; */
/*其实浏览器不是一个平面 是一个三维立体结构
z轴指向用户 越大离用户越近
*/
/*background-position:center center; !*第一个左 第二个上*!*/
/*如果出现了多个属性名前缀是一样的情况 一般情况下都可以简写 只写前缀*/
background: red url("111.png") no-repeat center center; /*只需要填上你想要加的参数即可 位置没有关系 参数个数也不做限制 加就显示不加就用默认的设置*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.1 背景图片例子
- 这个例子中多加了background-attachment: fixed;浏览器在下滑时d3对应的图片一直不动
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
height: 500px;
background-color: red;
}
#d2 {
height: 500px;
background-color: green;
}
#d3 {
height: 500px;
background-image: url("111.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>
5.边框
- border-radius: 50%; 直接写50%即可 长宽一样就是圆 不一样就是椭圆
- border-width: 5px; 边框大小
- border-style: solid; 边框风格（直线，点等）
- border-color: green; 边框颜色
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<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: red;*/
/* border-bottom-style: solid;*/
border: 3px solid red; /*三者位置可以随意写*/
}
#d1 {
background-color: greenyellow;
height: 400px;
width: 400px;
border-radius: 50%; /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
}
</style>
</head>
<body>
<p>lalalala</p>
<div>lalalalalala德玛西亚</div>
<div id="d1"></div>
</body>
</html>
6. display属性
- 块级标签和行内标签都可以相互转换
display: none /*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*/
<div style="display: none">div1</div>
<div style="visibility: hidden">单纯的隐藏 位置还在</div>
display: inline /*将标签设置为行内标签的特点，不占一行， 但是不可以设置长宽*/
display: block; /*将标签设置成块儿级标签的特点*/
display: inline-block; /*将标签设置为行内标签的特点，不占一行，还可以设置长宽*/
7. 盒子模型
- 解释
<!--
盒子模型
就以快递盒为例
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)
如果你想要调整标签与标签之间的距离 你就可以调整margin
浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
-->
show code
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0; /*上下左右全是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;*/
/*padding: 10px;*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px;*/
/*padding: 10px 20px 30px 40px;*/ /*规律和margin一模一样*/
}
</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>
8.浮动
"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
只要是设计到页面的布局一般都是用浮动来提前规划好
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
8.1 浮动小例子
show code
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
width: 20%;
height: 1000px;
background-color: #4e4e4e;
float: left;
}
#d2 {
width: 80%;
height: 1000px;
background-color: blue;
float: right;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2">
</div>
</body>
</html>
再坚持一下下，会越来越优秀
浙公网安备 33010602011771号