一、字体相关样式
1、font-family：字体类型
font-family 属性用于设置字体。网页中常用的字体有宋体，微软雅黑，黑体等
注意：汉字，需要用引号引起来。
<style>
.word{
font-family: "宋体";
}
.word2{
font-family: "微软雅黑";
}
</style>
<body>
<p class="word">段落标签p</p>
<p class="word2">p标签</p>
</body>2、font-size：字体大小
pc端，一般最小字体给到12px；
注意：实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。
<style>
div{
font-size: 30px;
}
p{
font-size: 18px;
}
</style>
<body>
<div>你好漂亮。</div>
<p>谢谢夸奖</p>
</body>3、font-weight：字体粗细
注意：数字值 400 相当于 关键字 normal，700 等价于 bold。
<style>
div{
font-weight: 500;
}
p{
font-weight: bold;
}
h1{
font-weight: normal;
}
</style>
<body>
<div>大家好，I am 渣渣辉。</div>
<p>嘿，siri</p>
<h1>我来啦...</h1>
</body>4、font-style：字体风格
注意：该属性设置使用斜体、倾斜或正常字体。
font-style: oblique 倾斜的字体样式
font-style: italic 斜体的字体样式
font-style: normal 默认值。标准的字体样式。
<style>
div{
font-style: oblique;
}
p{
font-style: italic;
}
h1{
font-style: normal;
}
</style>
<body>
<div>大家好，I am 渣渣辉。</div>
<p>嘿，siri</p>
<h1>我来啦...</h1>
</body>二、文本相关样式
1、color：字体颜色
color：颜色单词、#色号、rgb（r，g，b）
<style>
div{
color: red;
}
p{
color: #2000FF;
}
h1{
color: rgb(150,300,210);
}
</style>
<body>
<div>大家好，I am 渣渣辉。</div>
<p>嘿，siri</p>
<h1>我来啦...</h1>
</body2、text-align：文本水平对齐方式
text-align: left 把文本排列到左边
text-align: right 把文本排列到右边
text-align: center 把文本排列到中间
<style>
.one{
text-align: left;
}
.two{
text-align: right;
}
.three{
text-align: center;
}
</style>
<body>
<div class="one">div1</div>
<div class="two">div2</div>
<div class="three">div3</div>
</body>3、text-decoration
text-decoration: none 默认。定义标准的文本
text-decoration: underline 定义文本下的一条线
text-decoration: overline 定义文本上的一条线
text-decoration: line-through 定义穿过文本下的一条线（删除线）
<style>
.one{
text-decoration: none;
}
.two{
text-decoration: underline;
}
.three{
text-decoration: overline;
}
.four{
text-decoration: line-through;
}
</style>
<body>
<div class="one">div1</div>
<div class="two">div2</div>
<div class="three">div3</div>
<div class="four">div4</div>
</body>4、text-transform：文本内容大小写
text-transform: none 默认。定义带有小写字母和大写字母的标准的文本。
text-transform: capitalize 文本中的每个单词以大写字母开头。
text-transform: uppercase 定义仅有大写字母。
text-transform: lowercase 定义无大写字母，仅有小写字母。
<style>
.one{
text-transform: none;
}
.two{
text-transform: capitalize;
}
.three{
text-transform: uppercase;
}
.four{
text-transform: lowercase;
}
</style>
<body>
<div class="one">hello WORLD 前端</div>
<div class="two">hello WORLD 前端</div>
<div class="three">hello WORLD 前端</div>
<div class="four">hello WORLD 前端</div>
</body>5、letter-spacing：文本内容间距
letter-spacing: normal normal 就相当于值为 0
letter-spacing: 数值px
<style>
p{
letter-spacing: normal;
}
.box{
letter-spacing: 15px;
}
</style>
<body>
<p>北京时间7月6日下午，在阿塞拜疆首都巴库举行的联合国教科文组织第43届世界遗产委员会会议上，随着大会主席阿布法斯·加拉耶夫落槌，位于浙江杭州的“良渚古城遗址”成功列入《世界遗产名录》，中华文明五千多年历史得到实证，遗产地的价值以及真实性、完整性得到了世界范围的认可。至此，我国世界遗产总数已达到55处，位居世界第一。
</p>
<p class="box">北京时间7月6日下午，在阿塞拜疆首都巴库举行的联合国教科文组织第43届世界遗产委员会会议上，随着大会主席阿布法斯·加拉耶夫落槌，位于浙江杭州的“良渚古城遗址”成功列入《世界遗产名录》，中华文明五千多年历史得到实证，遗产地的价值以及真实性、完整性得到了世界范围的认可。至此，我国世界遗产总数已达到55处，位居世界第一。
</p>
</body>6、line-heigth：设置行间的距离（行高）
line-height: normal 默认。设置合理的行间距。
line-height: 35px 设置固定的行间距。
<style>
p{
line-height: normal;
}
.box{
line-height: 35px;
}
</style>
<body>
<p>北京时间7月6日下午，在阿塞拜疆首都巴库举行的联合国教科文组织第43届世界遗产委员会会议上，随着大会主席阿布法斯·加拉耶夫落槌，位于浙江杭州的“良渚古城遗址”成功列入《世界遗产名录》，中华文明五千多年历史得到实证，遗产地的价值以及真实性、完整性得到了世界范围的认可。至此，我国世界遗产总数已达到55处，位居世界第一。
</p>
<p class="box">北京时间7月6日下午，在阿塞拜疆首都巴库举行的联合国教科文组织第43届世界遗产委员会会议上，随着大会主席阿布法斯·加拉耶夫落槌，位于浙江杭州的“良渚古城遗址”成功列入《世界遗产名录》，中华文明五千多年历史得到实证，遗产地的价值以及真实性、完整性得到了世界范围的认可。至此，我国世界遗产总数已达到55处，位居世界第一。
</p>
</body>7、white-space:控制换行
white-space: normal 默认。会换行
white-space: nowrap 文本不会换行
<style>
p{
white-space: nowrap;
}
.box{
white-space: normal;
}
</style>
<body>
<p>北京时间7月6日下午，在阿塞拜疆首都巴库举行的联合国教科文组织第43届世界遗产委员会会议上，随着大会主席阿布法斯·加拉耶夫落槌，位于浙江杭州的“良渚古城遗址”成功列入《世界遗产名录》，中华文明五千多年历史得到实证，遗产地的价值以及真实性、完整性得到了世界范围的认可。至此，我国世界遗产总数已达到55处，位居世界第一。
</p>
<p class="box">北京时间7月6日下午，在阿塞拜疆首都巴库举行的联合国教科文组织第43届世界遗产委员会会议上，随着大会主席阿布法斯·加拉耶夫落槌，位于浙江杭州的“良渚古城遗址”成功列入《世界遗产名录》，中华文明五千多年历史得到实证，遗产地的价值以及真实性、完整性得到了世界范围的认可。至此，我国世界遗产总数已达到55处，位居世界第一。
</p>
</body>8、overflow：规定当内容溢出元素框时发生的事情
overflow: visible 默认值。内容不会被修剪，会呈现在元素框之外。
overflow: hidden 内容会被修剪，并且其余内容是不可见的。
overflow: scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow: auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
<style>
.box{
width: 50px;
height: 50px;
border: 1px solid red;
}
.aa{
overflow: visible;
}
.bb{
overflow: hidden;
}
.cc{
overflow: scroll;
}
.dd{
overflow: auto;
}
</style>
<body>
<p class="aa box">这是一条神奇的天路</p>
<p class="bb box">这是一条神奇的天路</p>
<p class="cc box">这是一条神奇的天路</p>
<p class="dd box">这是一条神奇的天路</p>
</body>
9、text-overflow：规定当文本溢出包含元素时发生的事情。
注意：text-overflow: ellipsis 需要和 overflow: hidden 和 white-space: nowrap一起使用才有效果
text-overflow: clip 修剪文本。
text-overflow: ellipsis 显示省略符号来代表被修剪的文本。
<style>
.box{
width: 100px;
height: 50px;
border: 1px solid red;
overflow: hidden;
white-space: nowrap;
}
.aa{
text-overflow: clip;
}
.bb{
text-overflow: ellipsis;
}
</style>
<body>
<p class="aa box">这是一条神奇的天路这是一条神奇的天路这是一条神奇的天路这是一条神奇的天路</p>
<p class="bb box">这是一条神奇的天路这是一条神奇的天路这是一条神奇的天路这是一条神奇的天路</p>
</body>
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
