CSS总结------文本字体类

我会带着你远行 2022-06-08 08:13 197阅读 0赞

这一章主要对文本和背景的CSS\*\*常用\*\*属性做出总结  
CSS的东西太多了，不常用的有精力的可以试着知道。一般都查表  
包括

下面一一来归纳：

# 1.文字属性 #

## 1.font-style：文字样式 ##

<table> 
 <thead> 
  <tr> 
   <th align="center">名称</th> 
   <th align="center">格式</th> 
   <th align="center">解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">正常</td> 
   <td align="center">normal</td> 
   <td align="center">默认，使用正常</td> 
  </tr> 
  <tr> 
   <td align="center">斜体</td> 
   <td align="center">italic</td> 
   <td align="center">使用文字的斜体</td> 
  </tr> 
  <tr> 
   <td align="center">倾斜</td> 
   <td align="center">oblique</td> 
   <td align="center">使文字倾斜</td> 
  </tr> 
  <tr> 
   <td align="center">继承</td> 
   <td align="center">inherit</td> 
   <td align="center">规定应该从父元素继承字体样式</td> 
  </tr> 
 </tbody> 
</table>

注意点：

*  italic是使用某个字体的斜体，如果字体没有斜体，就没有用
 *  oblique是直接让字体倾斜
 *  inherit往往用于继承不会被自动继承的属性

## 2.font-weight:字体粗细 ##

<table> 
 <thead> 
  <tr> 
   <th align="center">名称</th> 
   <th align="center">格式</th> 
   <th align="center">解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">正常</td> 
   <td align="center">normal</td> 
   <td align="center">默认，使用正常–400</td> 
  </tr> 
  <tr> 
   <td align="center">粗体</td> 
   <td align="center">bold</td> 
   <td align="center">显示文字的粗体—700</td> 
  </tr> 
  <tr> 
   <td align="center">更粗</td> 
   <td align="center">bolder</td> 
   <td align="center">显示文字的超粗体</td> 
  </tr> 
  <tr> 
   <td align="center">细斜</td> 
   <td align="center">oblique</td> 
   <td align="center">文字更细</td> 
  </tr> 
  <tr> 
   <td align="center">自定义</td> 
   <td align="center">100-900</td> 
   <td align="center">自定义粗细</td> 
  </tr> 
  <tr> 
   <td align="center">继承</td> 
   <td align="center">inherit</td> 
   <td align="center">规定应该从父元素继承字体样式</td> 
  </tr> 
 </tbody> 
</table>

## 3.font-size:字体大小 ##

<table> 
 <thead> 
  <tr> 
   <th align="center">名称</th> 
   <th align="center">格式</th> 
   <th align="center">解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">细体</td> 
   <td align="center">xx-small&gt; x-small &gt;small</td> 
   <td align="center">非常小，很小，小</td> 
  </tr> 
  <tr> 
   <td align="center">正常</td> 
   <td align="center">medium</td> 
   <td align="center">默认</td> 
  </tr> 
  <tr> 
   <td align="center">粗体</td> 
   <td align="center">large&gt;x-large&gt;xx-large</td> 
   <td align="center">三种</td> 
  </tr> 
  <tr> 
   <td align="center">长度表示法</td> 
   <td align="center">20em；/20px；/20pt；</td> 
   <td align="center">在后面接上像素值等</td> 
  </tr> 
  <tr> 
   <td align="center">相对比较</td> 
   <td align="center">larger 、smaller</td> 
   <td align="center">相对于父元素</td> 
  </tr> 
  <tr> 
   <td align="center">百分比值</td> 
   <td align="center">50%</td> 
   <td align="center">父元素百分比</td> 
  </tr> 
  <tr> 
   <td align="center">继承</td> 
   <td align="center">inherit</td> 
   <td align="center">规定应该从父元素继承字体样式</td> 
  </tr> 
 </tbody> 
</table>

## 4.font-family:字体种类 ##

<table> 
 <thead> 
  <tr> 
   <th align="center">名称</th> 
   <th align="center">格式</th> 
   <th align="center">解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">中文</td> 
   <td align="center">“”/”</td> 
   <td align="center">中文需要括起来</td> 
  </tr> 
  <tr> 
   <td align="center">英文</td> 
   <td align="center">任意</td> 
   <td align="center"></td> 
  </tr> 
 </tbody> 
</table>

注意点：  
1.用户电脑得有  
2.备用字体用逗号隔开  
3.不存在会使用默认  
4.中文字体可以用英文代号  
5.分别设置中英文，英文要在前面

## 5.连写 ##

连写是设置字体属性的一个很方便的方法  
格式：

font:style weight size family
    //1.style,weight可以省略。
    //2.style,weight可以交换。
    //3.其余不可省略，不可交换

# 2.文本属性 #

## 1.text-decoration：文本装饰 ##

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th align="center">格式</th> 
   <th align="center">解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>无</td> 
   <td align="center">none</td> 
   <td align="center">默认。定义标准的文本</td> 
  </tr> 
  <tr> 
   <td>下划线</td> 
   <td align="center">underline</td> 
   <td align="center">定义文本下的一条线</td> 
  </tr> 
  <tr> 
   <td>上划线</td> 
   <td align="center">overline</td> 
   <td align="center">定义文本上的一条线</td> 
  </tr> 
  <tr> 
   <td>删除线</td> 
   <td align="center">line-through</td> 
   <td align="center">定义穿过文本下的一条线</td> 
  </tr> 
  <tr> 
   <td>闪烁</td> 
   <td align="center">blink</td> 
   <td align="center">定义闪烁的文本</td> 
  </tr> 
  <tr> 
   <td>继承</td> 
   <td align="center">inherit</td> 
   <td align="center">规定应该从父元素继承字体样式</td> 
  </tr> 
 </tbody> 
</table>

## 2.text-align：文本对其 ##

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th align="center">格式</th> 
   <th align="center">解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>中</td> 
   <td align="center">center</td> 
   <td align="center">把文本排列到中间</td> 
  </tr> 
  <tr> 
   <td>左</td> 
   <td align="center">left</td> 
   <td align="center">把文本排列到左边(默认)</td> 
  </tr> 
  <tr> 
   <td>右</td> 
   <td align="center">right</td> 
   <td align="center">把文本排列到右边</td> 
  </tr> 
  <tr> 
   <td>两端</td> 
   <td align="center">justify</td> 
   <td align="center">实现两端对齐文本效果</td> 
  </tr> 
  <tr> 
   <td>继承</td> 
   <td align="center">inherit</td> 
   <td align="center">规定应该从父元素继承字体样式</td> 
  </tr> 
 </tbody> 
</table>

## 3.text-indent：文本缩进 ##

length 定义固定的缩进。默认值：0。  
% 定义基于父元素宽度的百分比的缩进。  
inherit 规定应该从父元素继承 text-indent 属性的值。

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th align="center">格式</th> 
   <th align="center">解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>绝对值</td> 
   <td align="center">length</td> 
   <td align="center">常用的表示，em</td> 
  </tr> 
  <tr> 
   <td>百分比</td> 
   <td align="center">%</td> 
   <td align="center">定义基于父元素宽度的百分比的缩进</td> 
  </tr> 
  <tr> 
   <td>继承</td> 
   <td align="center">inherit</td> 
   <td align="center">规定应该从父元素继承字体样式</td> 
  </tr> 
 </tbody> 
</table>

# 3.颜色属性 #

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th align="center">格式</th> 
   <th align="center">解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>英文</td> 
   <td align="center">red/blue</td> 
   <td align="center">直接使用英文</td> 
  </tr> 
  <tr> 
   <td>三原色</td> 
   <td align="center">rgb(0,0,0)</td> 
   <td align="center">红绿蓝为参照</td> 
  </tr> 
  <tr> 
   <td>三原色+</td> 
   <td align="center">rgb(0,0,0，0)</td> 
   <td align="center">a代表透明度</td> 
  </tr> 
  <tr> 
   <td>十六进制</td> 
   <td align="center">FFEE00</td> 
   <td align="center">使用十六进制</td> 
  </tr> 
 </tbody> 
</table>

网上无意中看到的一个，感觉还行，可以查查  
[颜色对照表][Link 1]

# 4.总结 #

**一天一篇，莫急，莫慌**

[Link 1]: http://jsxzjh.bokee.com/3744988.html