CSS的字体属性

Манго нектар2024-09-26 20:58

color属性

规定文本颜色

html 复制代码

<p id="p1">文本颜色</p>
   <p id="p2">文本颜色</p>
   <p id="p3">文本颜色</p>
   <p id="p4">文本颜色</p>

css 复制代码

#p1{
color: red;
}

#p2{
color: #ff0000;
}

#p3{
color: rgb(255, 0, 0);
}

#p4{
color: rgba(255,0,0,.5);
}

font-size属性

设置文本的字体大小（单位px)

css 复制代码

font-size: 20px;

font-weight属性

设置文本的粗细

normal:默认粗细

bold: 定义粗体文字

bolder: 定义更粗的字符

lighter: 定义更细的字符

100~900：定义由细到粗，400等同于默认，700等同于bold

html 复制代码

  <p id="p1">文本颜色</p>
   <p id="p2">文本颜色</p>
   <p id="p3">文本颜色</p>
   <p id="p4">文本颜色</p>
   <p id="p5">文本颜色</p>
   <p id="p6">文本颜色</p>

css 复制代码

#p1{
font-weight: normal;
}

#p2{
font-weight: bold;
}

#p3{
font-weight: bolder;
}

#p4{
font-weight: lighter;;
}

#p5{
    font-weight: 400;
}

#p6{
    font-weight: 700;
}

font-style属性

指定文本的字体样式

normal: 默认值

italic: 定义斜体

html 复制代码

<p id="p1">文本颜色</p>
   <p id="p2">文本颜色</p>

css 复制代码

#p1{
font-style: normal;
}

#p2{
font-style: italic;
}

font-family属性

定义元素字体

html 复制代码

   <p id="p1">文本颜色</p>
   <p id="p2">文本颜色</p>

css 复制代码

#p1{
font-family: 微软雅黑;
}

#p2{
font-family: 宋体;
}