CSS样式属性介绍（字体、外观、行高、背景、标签显示模式）

ゞ浴缸里的玫瑰 2024-04-18 08:38 27阅读 0赞

### CSS样式属性介绍 ###

*  CSS样式属性介绍
 *   *  1. 字体
     *  2. CSS外观
     *  3. 背景
     *  4. 标签显示模式
     *   *  4.1 块级元素
         *  4.2 行内元素
         *  4.3 行内块元素
         *  4.4 标签显示模式转换

# CSS样式属性介绍 #

## 1. 字体 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">表示</th> 
   <th align="left">注意点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">font-size</td> 
   <td align="left">字号</td> 
   <td align="left">我们通常用的单位是px 像素，我们尽量给一个明确值，一般给body指定整个页面文字的大小；谷歌浏览器的默认文字大小为<strong>16px</strong></td> 
  </tr> 
  <tr> 
   <td align="left">font-family</td> 
   <td align="left">字体</td> 
   <td align="left">实际工作中按照团队约定来写字体（<strong>默认字体为电脑的默认字体</strong>）</td> 
  </tr> 
  <tr> 
   <td align="left">font-weight</td> 
   <td align="left">字体粗细</td> 
   <td align="left">记住加粗是 700 或者 bold ，<strong>不加粗 是 normal 或者 400（默认值）</strong> ，记住数字不要跟单位，<strong>我们更喜欢用数字来表示加粗和不加粗</strong></td> 
  </tr> 
  <tr> 
   <td align="left">font-style</td> 
   <td align="left">字体样式</td> 
   <td align="left">记住倾斜是 italic， 不倾斜 是 normal ， <strong>工作中我们最常用 normal（默认值）</strong></td> 
  </tr> 
  <tr> 
   <td align="left">font</td> 
   <td align="left">字体连写</td> 
   <td align="left"><strong>选择器 { font: font-style font-weight font-size/line-height font-family;}</strong> 1. 字体连写是有顺序的 ，不能随意换位置，各属性以空格隔开 2. 不需要设置的属性可以省略（取默认值），其中字号 （font-size）和 字体(font-family) 必须同时出现</td> 
  </tr> 
 </tbody> 
</table>

**注意：1.font-family字体补充如下**  
**常用技巧：**

1.  各种字体之间必须使用英文状态下的逗号隔开。
2.  中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
3.  如果字体名中包含空格、\#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
4.  尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

**CSS Unicode字体：**

<table> 
 <thead> 
  <tr> 
   <th>字体名称</th> 
   <th>英文名称</th> 
   <th>Unicode 编码</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>宋体</td> 
   <td>SimSun</td> 
   <td>\5B8B\4F53</td> 
  </tr> 
  <tr> 
   <td>新宋体</td> 
   <td>NSimSun</td> 
   <td>\65B0\5B8B\4F53</td> 
  </tr> 
  <tr> 
   <td>黑体</td> 
   <td>SimHei</td> 
   <td>\9ED1\4F53</td> 
  </tr> 
  <tr> 
   <td>微软雅黑</td> 
   <td>Microsoft YaHei</td> 
   <td>\5FAE\8F6F\96C5\9ED1</td> 
  </tr> 
  <tr> 
   <td>楷体_GB2312</td> 
   <td>KaiTi_GB2312</td> 
   <td>\6977\4F53_GB2312</td> 
  </tr> 
  <tr> 
   <td>隶书</td> 
   <td>LiSu</td> 
   <td>\96B6\4E66</td> 
  </tr> 
  <tr> 
   <td>幼园</td> 
   <td>YouYuan</td> 
   <td>\5E7C\5706</td> 
  </tr> 
  <tr> 
   <td>华文细黑</td> 
   <td>STXihei</td> 
   <td>\534E\6587\7EC6\9ED1</td> 
  </tr> 
  <tr> 
   <td>细明体</td> 
   <td>MingLiU</td> 
   <td>\7EC6\660E\4F53</td> 
  </tr> 
  <tr> 
   <td>新细明体</td> 
   <td>PMingLiU</td> 
   <td>\65B0\7EC6\660E\4F53</td> 
  </tr> 
 </tbody> 
</table>

我们尽量只使用宋体和微软雅黑中文字体。

## 2. CSS外观 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">表示</th> 
   <th align="left">注意点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">color</td> 
   <td align="left">定义文本颜色</td> 
   <td align="left">可以用red英语单词表示，但常用十六进制表示 如#FF6600， 这种可以简写为#F60</td> 
  </tr> 
  <tr> 
   <td align="left">line-height</td> 
   <td align="left">行高（也称行间距）</td> 
   <td align="left">控制行与行之间的距离，一般称为行高；<strong>一般情况下，行距比字号大7，8像素左右就可以了。</strong></td> 
  </tr> 
  <tr> 
   <td align="left">text-align</td> 
   <td align="left">文本水平对齐</td> 
   <td align="left">left：左对齐（默认值）；right：右对齐；center：居中对齐；<strong>注意这里是让盒子里面的内容水平居中，而不是让盒子居中对齐</strong></td> 
  </tr> 
  <tr> 
   <td align="left">text-indent</td> 
   <td align="left">首行缩进</td> 
   <td align="left">通常我们用于段落首行缩进2个字的距离 text-indent: 2em;<strong>建议使用em作为设置单位，1em就是一个字的宽度</strong></td> 
  </tr> 
  <tr> 
   <td align="left">text-decoration</td> 
   <td align="left">文本修饰</td> 
   <td align="left">text-decoration 通常我们用于给链接修改装饰效果；<strong>none：默认，定义标准的文本，取消下划线</strong>；<strong>underline</strong>:定义文本下的一条线，下划线也是链接自带的；<strong>overline</strong>：定义文本上的一条线；<strong>line-through</strong>:定义文本下的一条线。</td> 
  </tr> 
 </tbody> 
</table>

**补充：**  
**1.颜色半透明 rgba**  
color：rgba（r, g, b, a）a是alpha透明的意思，取值为0到1。  
例如：color: rgba(0, 0, 0, 0.3)  
**2.文字阴影（text-shadow）**  
text-shadow： 水平位置 垂直位置 模糊距离 阴影颜色  
例如 text-shadow：1px 2px 3px rgba(0, 0, 0, 0.3)  
**3.行高补充（line-height）**  
**文本中各类线的定义：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70]  
**行高的测量方法：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 1]  
行高的定义：  
**行高 = 上距离 + 内容高度 + 下距离**  
行高中我们使用的最多的一个地方就是让单行文本在盒子中垂直居中对齐。  
方法：文字的行高等于盒子的高度。  
上距离和下距离总是相等的，因此文字看上去是垂直居中的。

## 3. 背景 ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="left">作用</th> 
   <th align="left">值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>background-color</td> 
   <td align="left">背景颜色</td> 
   <td align="left">预定义的颜色值/十六进制/RGB代码，默认值是transparent 透明的</td> 
  </tr> 
  <tr> 
   <td>background-image</td> 
   <td align="left">背景图片</td> 
   <td align="left"><strong>none</strong>（默认无背景图）或<strong>url</strong> (图片路径，<strong>使用时不需要加引号</strong>)</td> 
  </tr> 
  <tr> 
   <td>background-repeat</td> 
   <td align="left">是否平铺</td> 
   <td align="left"><strong>repeat</strong>（背景图像在纵向和横向上平铺【默认】）/<strong>no-repeat</strong>（背景图像不平铺）/<strong>repeat-x</strong>（背景图像在横向上平铺）/<strong>repeat-y</strong>（背景图像在纵向上平铺）</td> 
  </tr> 
  <tr> 
   <td>background-position</td> 
   <td align="left">背景位置</td> 
   <td align="left"><strong>length</strong>（精确长度）/<strong>position</strong>（方位名词） 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法</td> 
  </tr> 
  <tr> 
   <td>background-attachment</td> 
   <td align="left">背景固定还是滚动</td> 
   <td align="left"><strong>scroll</strong>（背景随对象内容滚动）/<strong>fixed</strong>（背景图像固定）</td> 
  </tr> 
  <tr> 
   <td>背景简写</td> 
   <td align="left">简写</td> 
   <td align="left">背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序；<strong>background: transparent url(image.jpg) repeat-y scroll center top ;</strong></td> 
  </tr> 
  <tr> 
   <td>背景透明</td> 
   <td align="left">让盒子半透明</td> 
   <td align="left"><strong>background: rgba(0,0,0,0.3);</strong> 后面必须是 4个值 与颜色半透明使用方法一致 ；<strong>注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响</strong></td> 
  </tr> 
 </tbody> 
</table>

**背景位置具体使用方法补充：**  
1.background-position: x坐标 y坐标;  
2.指定的两个值都是方位名词，两个值前后顺序无关  
background-position: right top; 右上角  
background-position: top right; 右上角  
3.如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中  
4.如果只指定了一个方位名词，另一个值默认居中对齐。  
background-position: 10px;  
5.position后面是精确坐标，那么第一个一定是x坐标，第二个一定是y坐标。  
background-position: 50px 10px;  
6. 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标  
background-position: 10px center;  
**注意：实际工作用得最多的就是背景图片居中对齐。**

## 4. 标签显示模式 ##

标签是以什么方式显示，比如div自己占一行，比如span一行可以放很多个；网页的标签非常多，不同的地方用到不同类型的标签，可以帮我们更好的完成我们的网页。

<table> 
 <thead> 
  <tr> 
   <th>元素模式</th> 
   <th>元素排列</th> 
   <th>设置样式</th> 
   <th>默认宽度</th> 
   <th>包含</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>块级元素</td> 
   <td>一行只能放一个块级元素</td> 
   <td>可以设置宽度高度</td> 
   <td>容器的100%</td> 
   <td>容器级可以包含任何标签</td> 
  </tr> 
  <tr> 
   <td>行内元素</td> 
   <td>一行可以放多个行内元素</td> 
   <td>不可以直接设置宽度高度</td> 
   <td>它本身内容的宽度</td> 
   <td>容纳文本或则其他行内元素</td> 
  </tr> 
  <tr> 
   <td>行内块元素</td> 
   <td>一行放多个行内块元素</td> 
   <td>可以设置宽度和高度</td> 
   <td>它本身内容的宽度</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

### 4.1 块级元素 ###

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

**- 块级元素的特点**

（1）比较霸道，自己独占一行

（2）高度，宽度、外边距以及内边距都可以控制。

（3）宽度默认是容器（父级宽度）的100%

（4）是一个容器及盒子，里面可以放行内或者块级元素。  
**注意**：p标签里面不能放块级元素，特别是p中不能放div，同理同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

### 4.2 行内元素 ###

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

**- 行内元素的特点：**

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）**行内元素只能容纳文本或则其他行内元素。**  
注意：链接里面不能再放链接，特殊a里面可以放块级元素，但是给a转换一下块级模式最安全。

### 4.3 行内块元素 ###

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

**- 行内块元素的特点：**

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个  
（2）默认宽度就是它本身内容的宽度。  
（3）高度，行高、外边距以及内边距都可以控制。

### 4.4 标签显示模式转换 ###

*  块转行内：display:inline;
 *  行内转块：display:block;
 *  块、行内元素转换为行内块： display: inline-block;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190904115247544.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190904115309806.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70