学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频
⭐️前文回顾:前端 | (四)CSS基础及CSS选择器 | 尚硅谷前端html+css零基础教程2023最新
⭐️前文对应p57-p86
,本文对应p87-p112
⭐️补充网站:W3school,MDN
!important
>行内样式
>id选择器
>类选择器
>元素选择器
>*
>继承的样式
font-size
:控制字体的大小
div{
font-size:40px;
}
font-family
:控制字体类型
div{
font-family:"STCaiyun","Microsoft YaHei",sans-serif
}
font-style
:控制字体是否为斜体。
div{
font-style:italic;
}
font-weight
:控制字体的粗细。
div{
font-weight:bold;
}
div{
font-weight:600;
}
font
:可以把上述字体样式合并成一个属性。font-size
属性。DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本对齐_垂直方向title>
<style>
div{
font-size: 40px;
height: 400px;
/* 垂直居中:line-height=height */
/* line-height: 400px; */
/* 底部对齐,height*2 - font-size */
line-height: 760px;
background-color: pink;
}
style>
head>
<body>
<div>尚硅谷div>
body>
html>
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本对齐_垂直方向title>
<style>
div{
font-size: 100px;
height: 300px;
background-color: pink;
}
span{
font-size: 40px;
background-color: orange;
vertical-align: middle;
}
style>
head>
<body>
<div>
atguigu尚硅谷x<span>x前端span>
div>
body>
html>