CSS常用属性设置
3.字体
设置字体
font-family
①当font-family的属性值包含空格或特殊字符时，需要将font-family的属性值用引号括起来。
②font-family有“后备”机制，可以为元素设置多种字体，当浏览器不识别第一种字体时，会尝试找下一种字体。
③当font-family的属性值有多个时，使用逗号隔开。
font-family: 楷体;
font-family: "agency fb",楷体1,宋体;
font-size
/* 设置字体大小 */
font-size: 30px;
font-style
① normol：正常体；
② italic：斜体；
③ oblique：斜体（字体没有斜体时强制倾斜）
/* 设置字体风格 */
font-style: italic;
font-weight
① bold：粗体；
② 100~900：值越大，字体越粗（400正常字体，700粗体）
/* 设置字体粗细 */
font-weight: 700;
font-weight: bold;
- 代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体</title>
<style>
div {
/* 设置字体 */
font-family: 楷体;
/* font-family: "agency fb"; */
/* 设置字体大小 */
font-size: 30px;
/* 设置字体风格 */
font-style: italic;
/* 设置字体粗细 */
font-weight: 700;
}
p {
font-family: "agency fb",楷体1,宋体;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div>国破山河在，城春草木深。</div>
<p>感时花溅泪，恨别鸟惊心。</p>
</body>
</html>
4.对齐方式
设置元素中字体水平方向的对齐方式
text-align
left（默认）、right、center、justify
- 代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对齐方式</title>
<style>
p {
text-align: center;
}
#div2 {
text-align: justify;
}
</style>
</head>
<body>
<p>国破山河在，城春草木深。<br>
感时花溅泪，恨别鸟惊心。<br>
烽火连三月，家书抵万金。<br>
白头搔更短，浑欲不胜簪。</p>
<div>《春望》是唐代诗人杜甫的诗作。此诗前四句写春日长安凄惨破败的景象，饱含着兴衰感慨；后四句写诗人挂念亲人、心系国事的情怀，充溢着凄苦哀思。全诗格律严整，颔联分别以“感时花溅泪“应首联国破之叹，以“恨别鸟惊心”应颈联思家之忧，尾联则强调忧思之深导致发白而稀疏，对仗精巧，声情悲壮，充分地表现出诗人爱国之情。
</div>
<br>
<div id="div2">《春望》是唐代诗人杜甫的诗作。此诗前四句写春日长安凄惨破败的景象，饱含着兴衰感慨；后四句写诗人挂念亲人、心系国事的情怀，充溢着凄苦哀思。全诗格律严整，颔联分别以“感时花溅泪“应首联国破之叹，以“恨别鸟惊心”应颈联思家之忧，尾联则强调忧思之深导致发白而稀疏，对仗精巧，声情悲壮，充分地表现出诗人爱国之情。</div>
</body>
</html>
5.display属性
规定元素生成框的类型
block
元素会被显示，且元素会变成块级元素，元素前后会有换行符，可以设置宽高边距none
元素会被隐藏inline
元素会显示为行内元素，元素前后不会有换行符，不可以设置宽高边距inline-block
行内块级元素，可以设置宽高边距，元素不会自动换行
- 代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display属性</title>
<style>
#sp2 {
/* 隐藏元素 */
display: none;
}
#sp2 {
/* 设置元素显示且变成块级元素 */
display: block;
width: 200px;
height: 100px;
background-color: aqua;
}
#sp1 {
/* 行内元素没办法设置宽高 */
width: 100px;
height: 100px;
background-color: antiquewhite;
}
/* 设置元素为行内元素 */
#div1 {
background-color: antiquewhite;
}
#div2 {
background-color: aqua;
}
#div3 {
background-color: cadetblue;
}
/* 行内元素 */
div {
display: inline;
width: 100px;
height: 100px;
}
/* inline-block----行内块级元素 */
p {
width: 200px;
height: 100px;
background-color: aqua;
display: inline-block;
}
</style>
</head>
<body>
<span id="sp1">
这是一个span1
</span>
<span id="sp2">
这是一个span2
</span>
<span id="sp3">
这是一个span3
</span>
<br>
<br>
<hr>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<br>
<br>
<hr>
<p>文本1</p>
<p>文本2</p>
</body>
</html>
6.浮动
float的属性值有none、left、right
①只有横向浮动，并没有纵向浮动。
②会将元素的display属性变更为block。
③浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）
④浮动元素的前一个元素不会收到任何影响（如果你想让两个块级元素并排显示，必须让两个块级元素都应用float）
- 代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: antiquewhite;
float: left;
}
#div2 {
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
img {
width: 100px;
float: left;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<!-- 清除浮动 both:清除所有浮动-->
<div style="clear: both"></div>
<hr>
<div>六岁就随手干掉了妖王吞天蛤，作为一个无所不能的修真奇才，王令得隐藏自己的大能，在一群平凡的修真学生中活下去。普通人追求的钱财，仙术，法宝，声名，这个年轻人都不在意。
<img src="../0.img/img-1.jpeg">
无论豪门千金孙蓉的爱慕，影流顶级杀手的狙杀，父母无间断的啰嗦，都无法阻止他对干脆面的追求。不是在吃干脆面，就是在去小卖部买干脆面的路上。这样的他，和四个队友一起在论剑比赛中遭遇豪门高校的挑战，而之前暗杀失败的影流魔女教主江流影也不放弃的参合了进来。王令会碾压对手？还是低调的躺倒装死？
</div>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看