一、高度宽度
- 高度(height): 可以为元素设置高度
- 宽度(width): 可以为元素设置宽度
注意:
块表签能设置高度宽度,内联标签不能设置高度宽度,内联标签的高度宽度是根据标签的内容来决定的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:200px;
height:100px;
background:green;
}
span{
width:200px;
height:100px;
background:yellow;
}
</style>
</head>
<body>
<div>
生当作人杰,死亦为鬼雄.
</div>
<span>
老骥伏枥,志在千里.
</span>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/3269e33105d68725521391d03cb435b0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/66962fbd1a68b2825dcd1f3fc2ce4269.png)
二、字体相关
1.字体属性:
1.1 文字字体:font-family (默认的是宋体)
div{
font-family: '楷体','黑体','宋体';
}
1.2 文字大小:font-size (默认的大小是16px)
div{
font-size: 20px;
}
1.3 字重(粗细):font-weight 用来设置字体的字重(粗细)。
div{
font-weight: bold; #粗体
}
值 | 描述 |
---|---|
normal | 默认值,标准粗细 |
bold | 粗体 |
bolder | 更粗 |
lighter | 更细 |
100~900 | 设置具体粗细,400等同于normal,而700等同于bold |
inherit | 继承父元素字体的粗细值 |
2.文本颜色:
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定:
1.十六进制值 如: #FF00FF #前两位是表示红,中间两位表示绿,后面两位表示蓝,F是最高级别,0表示最低级别(无色)
2.一个RGB值 如: RGB(255,255,0) #红绿蓝就是RGB的意思,第一个参数是红,最高255,最低0
3.颜色的名称 如: red还有rgba(255,0,0,0.5),第四个值为透明度, 指定了色彩的透明度/不透明度,它的范围为0.0到1.0之间。
3. 文字属性
3.1 文字对齐
text-align 属性规定元素中的文本的水平对齐方式。
div{
text-align: left;
}
值 | 描述 |
---|---|
left | 左边对齐 默认值 |
right | 右对齐 |
center | 居中对齐 |
justify | 两端对齐 |
3.2 文字装饰
text-decoration 属性用来给文字添加特殊效果。
常用来去掉a标签的下划线。
a{
text-decoration: none;
}
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 |
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
inherit | 继承父元素的text-decoration属性的值。 |
3.3 首行缩进
p{
text-indent: 32px; # 首行缩进两个字符
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
font-family:'楷体','黑体';
font-size: 20px;
font-weight: bold;
color:#ff0000;
text-align: center; /* 字体居中 */
text-decoration:underline; /* 添加下划线 */
}
a{
text-decoration:none;
}
p{
text-indent:32px;
}
</style>
</head>
<body>
<div>
举杯邀明月,对影成三人.
</div>
<a href="http://www.baidu.com" target="_blank">百度</a>
<p>
明月出天山,苍茫云海间。长风几万里,吹度玉门关。汉下白登道,胡窥青海湾。由来征战地,不见有人还。戍客望边色,思归多苦颜。高楼当此夜,叹息未应闲。
</p>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/8c43e3872635ea67f85ecf62048c345f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1302c383110a57ea18593956e44825e6.png)
三、背景属性
CSS的背景属性用于设置HTML元素的背景样式。在CSS中,背景相关的属性有很多,包括背景颜色、背景图片、背景重复、背景位置等等。这些属性可以让我们轻松控制元素的背景样式,让网页看起来更加美观。
1.背景颜色属性
背景颜色属性用于设置HTML元素的背景颜色,例如:
body {
background-color:#f2f2f2;
}
这个代码会将整个页面的背景颜色设置为#f2f2f2。
2.背景图片属性
背景图片属性用于设置HTML元素的背景图像,例如:
body {
background-image: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA');
}
这个代码会将整个页面的背景图像设置为 https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA。
3.背景重复属性
背景重复属性用于设置HTML元素的背景图像的重复方式,例如:
body {
background-image: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA');
background-repeat: no-repeat;
}
这个代码会将整个页面的背景图像设置为https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA,且不重复。
常用的属性值有:
- repeat:将整个背景图像重复平铺,直到填满整个元素。
- repeat-x:将背景图像沿着水平方向重复平铺,直到填满整个元素。
- repeat-y:将背景图像沿着垂直方向重复平铺,直到填满整个元素。
- no-repeat:不重复背景图像,只显示一次。
4.背景位置属性
背景位置属性用于设置HTML元素的背景图像的位置,例如:
body {
background-image: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA');
background-position: center;
}
这个代码会将整个页面的背景图像设置为 https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA,并使其在元素中心位置居中对齐。
常用的属性值有:
- top:背景图像在元素顶部对齐。
- center:背景图像在元素中心位置居中对齐。
- bottom:背景图像在元素底部对齐。
- left:背景图像在元素左侧对齐。
- right:背景图像在元素右侧对齐。
- x% y%:背景图像在元素按照指定百分比位置对齐。
5.背景大小属性
背景大小属性用于设置HTML元素的背景图像的尺寸,例如:
body {
background-image: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA');
background-size: cover;
}
这个代码会将整个页面的背景图像设置为 https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA,并让其自动扩展到填满整个元素。
常用的属性值有:
- auto:背景图像按照原始尺寸显示。
- cover:背景图像按照比例扩展,直到填满整个元素区域,可能会截取部分背景图。
- contain:背景图像按照比例缩小,直到可以完整地放入背景区域。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: #f0ad4e;
}
div {
border: 1px solid red;
height: 600px;
width: 600px;
background-image: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA');
background-repeat: repeat;
background-position: center top;
/*background-size: cover;*/
}
</head>
<body>
<p>
猪猪侠
</p>
<div>
<a href="http://www.baidu.com" target="_blank">百度</a>
</div>
</body>
</html>
6.背景不动
背景位于页面的固定位置,不会随着鼠标的滚动而移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
}
.box{
border: 1px solid red;
height:500px;
width:100%;
background: url('https://img1.baidu.com/it/u=1108125939,1487508865&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200') no-repeat center center;
background-attachment: fixed;
}
.div1{
height:500px;
background:blue;
}
.div2{
height:500px;
background:tomato;
}
.div3{
height:500px;
background:orange;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="box"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
CSS背景属性
四、边框属性
CSS的边框属性用于设置HTML元素的边框样式。在CSS中,边框相关的属性有很多,包括边框宽度、边框样式、边框颜色等等。这些属性可以让我们轻松控制元素的边框样式,让网页看起来更加美观。
1.边框宽度属性
边框宽度属性用于设置HTML元素的边框宽度,例如:
div {
border-width: 2px;
}
这个代码会将 div 元素的边框宽度设置为 2px。
常用的属性值有:
- thin:边框宽度为1px。
- medium:边框宽度为3px。
- thick:边框宽度为5px。也可以使用具体的像素值设置边框宽度。
2.边框样式属性
边框样式属性用于设置HTML元素的边框样式,例如:
div {
border-style: solid;
}
这个代码会将 div 元素的边框样式设置为实线边框。
常用的属性值有:
- solid:实线。
- dashed:虚线。
- dotted:点线。
- double:双实线。
也可以使用其他更具特点的边框样式,如:
div {
border-style: ridge; /* 3D凸起效果 */
border-style: groove; /* 3D凹陷效果 */
border-style: inset; /* 3D向内浮雕效果 */
border-style: outset; /* 3D向外浮雕效果 */
}
3.边框颜色属性
边框颜色属性用于设置HTML元素的边框颜色,例如:
div {
border-color: #ccc;
}
这个代码会将 div 元素的边框颜色设置为 #ccc。
也可以使用关键词设置颜色,如:
div {
border-color: red;
}
常用的属性值有:
- color name(颜色名):red、green、blue等。
- rgb(R,G,B):使用RGB数值。
- #RRGGBB:使用十六进制颜色值表示。
4.边框圆角属性
边框圆角属性用于设置HTML元素的边框圆角效果,例如:
div {
border-radius: 10px;
}
这个代码会将 div 元素的四个角都设置成为圆形。
通常 border-radius 可以设置两个值,第一个指定水平方向半径,第二个指定垂直方向半径。如果只有一个值,则指定圆角的半径是相同的。此外,也可以指定不同的半径值,例如:
div {
border-top-left-radius: 30px;
border-bottom-right-radius: 15px;
border-top-right-radius: 20px;
border-bottom-left-radius: 10px;
}
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border-style: dotted;
border-color: red;
border-width: 10px;
width: 400px;
height: 400px;
border-radius: 50%;
}
img{
border-radius: 50%;
}
</style>
</head>
<body>
<div>
</div>
<!--<img src="https://img1.baidu.com/it/u=1108125939,1487508865&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200" alt="IU李智恩" title="iu">-->
<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.bhJWd9qm-jlCtBcPwsMh4gAAAA" alt="猪猪侠" title="猪">
</body>
</html>
五、display和visiblity
display属性 : 用于控制HTML元素的显示效果。
display:"none" : HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" : 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。
display:"inline" : 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" : 使元素同时具有行内元素和块级元素的特点。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
border: 1px solid blue;
display: inline-block;
display:none;
}
span{
width: 300px;
height: 300px;
border: 1px solid pink;
display: inline-block;
}
</style>
</head>
<body>
<div>
xxxxx
</div>
<span>
ppppp
</span>
</body>
</html>
六、盒子模型
在css里面,每个标签可以称为一个盒子模型,看下面的图:
1.margin: 外边距:用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
2.padding: 内边距:用于控制内容与边框之间的距离;
3.Border(边框): 围绕在内边距和内容外的边框。
4.Content(内容): 盒子的内容,显示文本和图像。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
border: 10px solid yellow;
padding: 10px 20px 15px 10px;
margin: 20px 10px;
}
.c2{
width: 200px;
height: 200px;
border: 10px solid red;
margin: 2px 10px 6px 8px;
}
.c3{
width: 200px;
height: 200px;
border: 10px solid blue;
}
</style>
</head>
<body>
<div class="c1">div1</div>
<div class="c2">div2</div>
<div class="c3">div3</div>
</body>
</html>
四个方向单独设置 -- padding (一起设置时顺序是: 上 右 下 左)
padding-top: 10px
padding-right: 10px
padding-bottom: 10px
padding-left: 10px
四个特方向单独设置 -- margin
margin-top: 10px
margin-right: 10px
margin-bottom: 10px
margin-left: 10px
七、float浮动
- 一般用来进行页面布局
- 浮动会脱离正常文档流
- 会造成父级标签塌陷问题
- 清除浮动(解决塌陷问题)
方式1:
clear:both; /* clear清除浮动 */ left\right
方式1:
1.父级标签设置高度
2.通过伪元素选择器来进行清除浮动:如下
.clearfix:after{
content: '';
display: block;
clear: both;
}
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.c1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.c2{
width: 200px;
height: 200px;
background-color: green;
float: right;
}
.c3{
height: 200px;
background-color: deeppink;
clear: both;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="c1 clearfix">div1</div>
<div class="c2">div2</div>
<div class="c3">div3</div>
</body>
</html>
clear
clear属性规定元素的哪一侧不允许其他浮动元素。
值 | 描述 |
---|---|
left | 在左侧不允许浮动元素 |
right | 在右侧不允许浮动元素 |
both | 在左右两侧均不允许浮动元素 |
none | 默认值,允许浮动元素在两侧 |
inherit | 规定应该从父级元素继承clear属性的值 |
八、overflow
CSS的overflow属性用于定义一个元素的内容是否可溢出,如果设置了该属性,当内容超出元素的尺寸时,可以指定如何处理溢出的部分。
常用的属性值有:
- visible:元素内容可能会溢出到容器外面。
- hidden:溢出部分被隐藏,不可见。
- scroll:溢出部分被隐藏,但是滚动条可以操作以访问所有内容。
- auto:如果内容不超过容器,则行为与 visible 一致;否则,表现为 scroll。
例如,一个固定大小的 div 中,如果内容长于 div,设置 overflow 属性为 scroll 即可使内容超出 div 时出现滚动条:
div {
width: 200px;
height: 100px;
overflow: scroll;
}
如果使用了 overflow: hidden,那么溢出部分将被隐藏,看不到:
div {
width: 200px;
height: 100px;
overflow: hidden;
}
overflow 对于图像元素也是可以使用的。一般情况下,图像的溢出部分虽然不会显示在界面上,但是会占据实际的空间。当需要使用一张图像作为背景时,可以使用 overflow 样式的隐藏特性,使图像仅显示背景图片的可见部分,并占据实际空间的部分被隐藏。
<style>
.image-bg {
width: 400px;
height: 200px;
background-image: url("IMAGE-URL");
background-size: cover;
overflow: hidden;
}
</style>
<body>
<div class="image-bg"></div>
</body>
最后需要注意的是,`overflow`属性仅适用于设置了高度或宽度的块级元素和图像元素。对于行内元素,不支持此属性。需要先使用`display: inline-block`等样式,将元素转化为块级元素才能使用 overflow 属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid black;
overflow: scroll;
}
</style>
<!-- overflow: hidden; 隐藏溢出的文本内容 -->
<!-- overflow: scroll; 滚动条查看溢出的文本内容 -->
</head>
<body>
<div>
菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.菩提本无树,明镜亦非台. 本来无一物,何处惹尘埃.
</div>
</body>
</html>