一、字体
1.字体样式
font-size属性用于设置字号。推荐使用像素单位px
a.浏览器支持的字体大小:最小 12px
b. 浏览器默认的字体大小:16px
<!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>Document</title>
<!-- 内部样式表 -->
<style>
.con {
font-size: 30px;
}
span {
font-size: 1em;
/* 1em和父元素字体大小一样,2em是父元素字体大小2倍 */
}
</style>
</head>
<body>
<!-- 选择器 -->
<div class="con"></div>大爷六元买到军事机密!
<span>你好</span>
<span>范德萨</span>
</div>
</body>
</html>
运行结果为:
2.字体家族
font-family属性用于设置字体。
a.浏览器的默认字体是微软雅黑
b.多个字体用逗号隔开
c.注意:这是错误写法:font-family: 宋体,Arial;----正确写法---英文应该写在前面
<!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>Document</title>
<style>
.wrap {
font-family: Arial, 宋体;
}
</style>
</head>
<body>
<div class="wrap">hello 你是谁</div>
</body>
</html>
3.字体粗细
a.加粗使用 bold和700
b. 正常体使用 normal和400
<!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>Document</title>
<style>
.con1 {
/* 字体粗细:粗的 */
font-weight: bold;
}
.con2 {
/* 字体粗细:更粗的 */
font-weight: bolder;
}
.con3 {
/* 字体粗细:更细的 */
font-weight: lighter;
}
.con4 {
/* 字体粗细:加粗100-900 */
font-weight: 700;
}
strong {
font-weight: normal;
font-weight: 400;
}
</style>
</head>
<body>
<div class="con1">字体粗细表示</div>
<div class="con2">字体粗细表示</div>
<div class="con3">字体粗细表示</div>
<div class="con4">字体粗细表示</div>
<div class="con5">字体粗细表示</div>
<strong>邓超</strong>
</body>
</html>
结果为:
4.字体风格
a. 又想使用em加重语气,又不想让字体是斜体,这时设置字体风格样式
/* 正常体 */ font-style: normal;
/* 斜体 */ font-style: italic;
5.字体简写
/* font: font-style font-weight font-size font-family; */可以简写为 font: italic 700 32px 宋体;
二、链接伪类选择器
<!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>Document</title>
<style>
/* 1.未访问的链接 */
a:link {
color: yellow;
}
/* 2.已访问的链接 */
a:visited {
color: blue;
}
/* 3.鼠标移动到目标元素上 */
a:hover {
color: aquamarine;
}
/* 4.选定的链接 */
a:active {
color: green;
}
</style>
</head>
<注意!-- a标签的href不允许删除,如果href内容没有或者不确定时,建议用#号 -->
<body>
<a href="#">百度一下</a>
<a href="http://www.mi.com">小米我是米粉</a>
</body>
三、color样式设置
1. 预定义的值 color: red;
2.十六进制表示法 0-9 A-f ,最小的是0, 最大的是f
/* color: #ff ff ff;
color: #000000;黑色
color: #ff0000;红色
color: #00ff00;绿色
color: #0000ff;蓝色
3.rgb red green blue 0-255
color: rgb(255, 255, 255);白色
color: rgb(0, 0, 0);黑色
color: rgb(255, 0, 0);红色
4.rgba alpha 透明度 0-1
color: rgba(255, 0, 0, 0.5);
color: rgba(255, 0, 0, .5);
四、行高的用法
1.行与行之间的间距变大 line-height: 50px;
2. line-height的值和盒子的高度相同
3.行高=本身字体大小+上半行距+下半行距
<!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>Document</title>
<style>
/* 单行文本在垂直方向居中----垂直居中*/
.box {
width: 150px;
height: 50px;
border: 1px solid red;
line-height: 50px;
}
</style>
</head>
<body>
<div class="box">走起来</div>
</body>
</html>
运行结果: