CSS——字体、英⽂间距、⼤⼩写及下划线字体属性
1. font-weight(设置⽂字的粗细)
2. font-style（设置⽂字倾斜加粗）
3. font-variant（设置⼩型⼤写字母）
4. font-family（设置字体）
字体⼤⼩（相对单位）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体⼤⼩</title>
<style type="text/css">
p{font-size: 50px;}
.larger{font-size: larger;}
.smaller{font-size: smaller;}
.em{font-size: 2em;}
.percent{font-size: 150%;}/*p标签的的⼤⼩*150%*/
</style>
</head>
<body>
<!-- 相对单位 -->
<p>⽂字⼤⼩px，受显⽰器分辨率影响</p>
<p>⽂字⼤⼩<span class="larger">相对⽗元素的⽂字⼤⼩变⼤</span></p>
<p>⽂字⼤⼩<span class="smaller">相对⽗元素的⽂字⼤⼩变⼩</span></p>
<div id="fontSize">
<p>⽂字⼤⼩<span class="em">相对值em</span></p>
<p class="percent">⽂字⼤⼩<span class="percent">相对值%</span></p>
<!-- span标签相对于⽗元素p标签再乘以150% -->
</div>
</body>
</html>
字体⼤⼩（绝对单位）
<style type="text/css">
.
in{font-size: 0.5in;}
.cm{font-size: 0.5cm;}
.mm{font-size: 5mm;}
.pt{font-size: 15pt;}
.pc{font-size: 2pc;}
.xx-small{font-size: xx-small;}
.x-small{font-size: x-small;}
.small{font-size: small;}
.medium{font-size: medium;}
.large{font-size: large;}
fontweight属性bold
.x-large{font-size: x-large;}
.
xx-large{font-size: xx-large;}
/*每个浏览器下对于small等字体⼤⼩是不固定的*/
</style>
<body>
<!-- 绝对单位 -->
<p>默认字体⼤⼩</p>
<p class="in">⽂字⼤⼩是0.5in</p>
<p class="cm">⽂字⼤⼩是0.5cm</p>
<p class="mm">⽂字⼤⼩是5mm</p>
<p class="pt">⽂字⼤⼩是15pt</p>
<p class="pc">⽂字⼤⼩是2pc</p>
<p class="xx-small">⽂字⼤⼩是xx-small</p>
<p class="x-small">⽂字⼤⼩是x-small</p>
<p class="small">⽂字⼤⼩是small</p>
<p class="medium">⽂字⼤⼩是medium</p>
<p class="large">⽂字⼤⼩是large</p>
<p class="x-large">⽂字⼤⼩是x-large</p>
<p class="xx-large">⽂字⼤⼩是xx-large</p>
</body>
字体颜⾊
h1{color: red;}
/*具体颜⾊名称*/
p{color: rgb(0%,100%,0%);}
/*两种⽅法表⽰：数字：0~255；百分⽐：0%~100% 分别代表红绿蓝*/
div{color: #;}
/*⼗六进制：#开头，六位，0~F，相邻两位可以缩写，如#008800可以缩写成#080*/字体简写
div
{  font-variant: small-caps;
font-style: italic;
font-weight: bold;
font-size: 50px;
font-family: "微软雅⿊",serif;
}
/
*简写要按照这个顺序，且最少要有后两个属性*/
div{font: italic small-caps bold 50px "微软雅⿊",serif;}
英语间距⼤⼩写及下划线
.word{word-spacing: 1em;}
/*针对英⽂单词，但是单词之间的识别法办法是空格，所以只要p标签内中⽂打了空格的话也会被识别成英⽂单词*/  .letter{letter-spacing: 2em;}
/*每个字母之间的距离，也适⽤于中⽂*/
.one{text-transform: capitalize;}
/*⾸字母⼤写*/
.two{text-transform: uppercase;}
/*全部⼤写*/
.three{text-transform: lowercase;}
/*全部⼩写*/
.four{text-transform: none;}
/*没有样式*/
.xhx{text-decoration: underline;}
/*下划线*/
.shx{text-decoration: overline;}
/*上划线*/
.scx{text-decoration: line-through;}
/*穿越线、也就是删除线*/
.none{text-decoration: none;}
/*⽆样式*/
/
*还有个blink样式是闪烁效果，存在兼容性问题，⼤多不适⽤*/
.dg{text-decoration: underline overline line-through;}
/*可以设置多个样式全部实现，但是加上none就会清空所有效果*/
/*下划线的颜⾊会跟⽂字颜⾊⼀样*/
a{text-decoration: none;}
/*可以⽤此⽅法设置链接不带下划线*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。