CSS总结

电玩女神 2022-05-13 07:18 176阅读 0赞

## 字体样式 ##

1、`font-size` ： 设置字体的大小，最常用的值时长度（14px）  
2、`xx-small | x-small | small | medium | large | x-large | xx-large`  
通过上面的属性值把字体的尺寸设置为不同的尺寸，从 `xx-small` 到 `xx-lage` 。  
3、`large|smaller` ： 把 `font-size` 设置为比父元素更大或更小的尺寸。  
4、`length` ： 把 `font-size` 设置为一个固定的值。  
5、`percentage` ：把 `font-size` 设置为基于父元素的一个百分比值。  
6、`font-family:` ：设置字体，可以同时指定多种字体，以英文状态下的逗号隔开，表示如果浏览器不支持第一种字体，则会尝试下一个字体，直到找到合适的字体。中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当有英文字体名时必须位于中文字体名之前。如果字体名中包含空格、\#、$ 等符号，则该字体必须加英文状态下的单引号或双引号，例如： `font-family: "Times New Roman";` 。  
**各种字体：**  
`<generic-family>` 下表列出了各个字体家族以及家族中的字体成员:

<table> 
 <thead> 
  <tr> 
   <th>generic-family</th> 
   <th>字体</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>serif</code></td> 
   <td>Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit</td> 
  </tr> 
  <tr> 
   <td><code>sans-serif</code></td> 
   <td>Helvetica, MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk</td> 
  </tr> 
  <tr> 
   <td><code>cursive</code></td> 
   <td>Zapf-Chancery, Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand</td> 
  </tr> 
  <tr> 
   <td><code>fantasy</code></td> 
   <td>Western, Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz</td> 
  </tr> 
  <tr> 
   <td><code>monospace</code></td> 
   <td>Courier, MS Courier New, Prestige, Everson Mono</td> 
  </tr> 
 </tbody> 
</table>

`font-style：` 默认值为 `normal`，`italic`斜体版本，`oblique`强制将字体倾斜。  
`font-variant：` 设置小号的大写字母，只对英文有效，作为了解内容。  
`font-weight：` 设置字体的粗细。`normal bold bolder lighter 100~900`。  
`font：` 综合写法，选择器`{font: style weight size/line-height family;}`

## 文本的样式 ##

*  **文本颜色：** `color` : 十六进制的颜色值 / rgb(255, 0, 0) / 表示颜色的单词
 *  **文本对齐：** `text-align` : `left / center / right /justify`
 *  **文本装饰：** `text-decoration: none / underline / line-through / overline`
 *  **文本行高：** `line-height` : 长度（20px）/ 数字 / 百分比 / `normal`
 *  **文本间距：** `letter-spacing`: 长度(4px) / `normal`
 *  **字符间距：** `word-spacing`：长度(4px) / `normal`
 *  **文本大小写：** `text-transform`：`capitalize | uppercase | lowercase | none`
 *  **capitalize：** 将每个单词的第一个字母转换成大写
 *  **uppercase：** 将每个单词转换成大写
 *  **lowercase：** 将每个单词转换成小写
 *  **none：** 无转换

## 背景样式 ##

*  **设置背景颜色：** `background-color`: 十六进制的颜色值 / `rgb(255, 0, 0)` / 表示颜色的单词
 *  **设置背景图片：** `background-image: url(./img/cat.jpg)`
 *  **设置背景图片的重复方式：** `background-repeat: repeat / no-repeat / repeat-x /repeat-y`
 *  **设置背景图片的位置：** `background-position: 20px 30px/ top right bottom left`
 *  **设置背景图片是否固定：** `background-attachment: scroll / fixed`
 *  **背景样式的简写属性：** `background：#ff0 url(./img/cat.jpg) no-repeat center fixed`

## 超链接样式 ##

*  **a:link：** 选择未被点击过的链接。
 *  **a:visited：** 选择被点击过之后的链接。
 *  **a:hover：** 选择鼠标悬停在其上的超链接。
 *  **a:active：** 选择正在被点击的超链接（点着不放）。

## 样式的优先级 ##

#### 1. 基本选择器的优先级 ####

ID 选择器 > Class 选择器 > 标签选择器 > 通配符（\*）选择器

#### 2. 引入方式的优先级 ####

行内样式 > 内联样式 > 外部样式 > 用户样式（浏览网页的用户） > 浏览器样式（浏览器应用的默认样式）

### 伪类 ###

<table> 
 <thead> 
  <tr> 
   <th><code>:link</code></th> 
   <th>伪类将应用于未被访问过的链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>:hover</code></td> 
   <td>伪类将应用于有鼠标指针悬停于其上的元素。</td> 
  </tr> 
  <tr> 
   <td><code>:active</code></td> 
   <td>伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。</td> 
  </tr> 
  <tr> 
   <td><code>:visited</code></td> 
   <td>伪类将应用于已经被访问过的链接</td> 
  </tr> 
  <tr> 
   <td><code>:focus</code></td> 
   <td>伪类将应用于拥有键盘输入焦点的元素。（ie8以上支持）</td> 
  </tr> 
 </tbody> 
</table>

**注意：**  
链接伪类，他们规定执行有顺序的，不能随便更改位置：  
要按照 `:link` \--> `:visited` \--> `:hover` \--> `:active` 的顺序。 （LV包包 hao）

### 伪元素 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>:first-letter</code></td> 
   <td>向文本的第一个字母添加特殊样式。</td> 
  </tr> 
  <tr> 
   <td><code>:first-line</code></td> 
   <td>向文本的首行添加特殊样式。</td> 
  </tr> 
  <tr> 
   <td><code>:before</code></td> 
   <td>在元素的内容之前添加内容。</td> 
  </tr> 
  <tr> 
   <td><code>:after</code></td> 
   <td>在元素的内容之后添加内容。</td> 
  </tr> 
 </tbody> 
</table>

### 透明度 ###

**1.opacity属性定义元素的不透明度**

**语法 :** `opacity: number` (0-1之间的数值)  
`opacity` 的值为1的元素是完全不透明的反之，值为0的是完全透明的。  
`opacity: 0.8;`  
**2. IE的半透明滤镜**  
**语法:** `filter:alpha(opacity=number);`  
`number` 的取值为100-0之间的数值  
因为 `ie` 不支持 `opacity` ，只支持自己的滤镜`filter:alpha(opacity=50);`

### 改变光标的形状 ###

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>说明</th> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>default</td> 
   <td>默认光标</td> 
   <td>wait</td> 
   <td>等待效果</td> 
  </tr> 
  <tr> 
   <td>pointer</td> 
   <td>小手</td> 
   <td>help</td> 
   <td>问号</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>文本指示</td> 
   <td>crosshair</td> 
   <td>十字状</td> 
  </tr> 
 </tbody> 
</table>