css文字与排版

谁践踏了优雅 2021-06-26 16:06 595阅读 0赞

## 文字与排版样式 ##

### `font`文字样式 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
   <th align="left">属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">font-family</td> 
   <td align="left">字体族科</td> 
   <td align="left">任意的字体族科名称，如果有多个中间用逗号隔开，以防止该浏览器无法解析</td> 
  </tr> 
  <tr> 
   <td align="left">font-size</td> 
   <td align="left">字体大小</td> 
   <td align="left">可以使用绝对大小、相对大小、长度和百分比</td> 
  </tr> 
  <tr> 
   <td align="left">font-style</td> 
   <td align="left">字体样式</td> 
   <td align="left">normal(普通)，italic(斜体)或oblique(倾斜)</td> 
  </tr> 
  <tr> 
   <td align="left">font-weight</td> 
   <td align="left">字体加粗</td> 
   <td align="left">normal、bold或lighter</td> 
  </tr> 
  <tr> 
   <td align="left">font-variant</td> 
   <td align="left">字体变形</td> 
   <td align="left">normal(普通)或small-caps(小型大写字母)</td> 
  </tr> 
 </tbody> 
</table>

注意：使用`font`同时设置多个文字属性时，属性之间用空格隔开。

### 排版样式(text) ###

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
   <th align="left">属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">letter-spacing</td> 
   <td align="left">字母间隔</td> 
   <td align="left">必须符合长度格式，运行使用负值</td> 
  </tr> 
  <tr> 
   <td align="left">word-spacing</td> 
   <td align="left">文字间隔</td> 
   <td align="left">必须符合长度格式，运行使用负值</td> 
  </tr> 
  <tr> 
   <td align="left">text-decoration</td> 
   <td align="left">文字修饰</td> 
   <td align="left">underline(下划线),overline(上划线),line-through(删除线),blink(闪耀)或默认无</td> 
  </tr> 
  <tr> 
   <td align="left">text-transform</td> 
   <td align="left">改变大小写</td> 
   <td align="left">uppercase(大写),lowercase(小写),capitalize(首字母大写)或者none(默认值)</td> 
  </tr> 
  <tr> 
   <td align="left">text-align</td> 
   <td align="left">横向排列</td> 
   <td align="left">left,right,center或justify</td> 
  </tr> 
  <tr> 
   <td align="left">text-indent</td> 
   <td align="left">文字缩进</td> 
   <td align="left">一个长度或者百分比</td> 
  </tr> 
  <tr> 
   <td align="left">line-height</td> 
   <td align="left">行高</td> 
   <td align="left">数字或者百分比，允许负值，当取值和盒子高度一样时，则居中</td> 
  </tr> 
  <tr> 
   <td align="left">vertical-align</td> 
   <td align="left">垂直方式</td> 
   <td align="left">baseline,top,middle或bottom</td> 
  </tr> 
 </tbody> 
</table>

### 文字半透明 ###

`color: rgba(r,g,b,a)`; a 是alpha 透明的意思 取值范围 0~1之间

### 文字阴影 ###

`text-shadow`:水平位置 垂直位置 模糊距离 阴影颜色;

*  `h-shadow`：必需，水平阴影的位置，运行负值
 *  `v-shadow`：必需，垂直阴影的位置，运行负值
 *  `blur`：可选，模糊的距离
 *  `color`：可选，阴影的颜色

## 背景和颜色 ##

### 基本 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
   <th align="left">属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">background-color</td> 
   <td align="left">背景颜色</td> 
   <td align="left">与color设置相同，也可以使用transparent(透明)值，必须设置高（宽），要不然无法显示</td> 
  </tr> 
  <tr> 
   <td align="left">background-image</td> 
   <td align="left">背景图片</td> 
   <td align="left">图片URL</td> 
  </tr> 
  <tr> 
   <td align="left">barkground-repet</td> 
   <td align="left">背景重复</td> 
   <td align="left">repeat(默认),repeat-x,repeat-y,no-repeat</td> 
  </tr> 
  <tr> 
   <td align="left">barkground-attachment</td> 
   <td align="left">背景附件</td> 
   <td align="left">scroll(滚动),fixed(固定)</td> 
  </tr> 
  <tr> 
   <td align="left">barkground-position</td> 
   <td align="left">背景位置</td> 
   <td align="left">横向的关键字(left、center或right),纵向的关键字(top、center或bottom)百分比和长度也可以用做安排背景图像的位置</td> 
  </tr> 
 </tbody> 
</table>

### 背景位置使用 ###

background-position : length || length
    background-position : position || position

先指定`background-image`属性。默认值为：(0% 0%)。  
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为`50%`，第二个值将用于纵坐标。`position` 后面是x坐标和y坐标，且如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 `background-position: 15px top;` 则 `15px` 一定是 x坐标 `top`是 y坐标。

### 背景附着 ###

background-attachment : scroll | fixed

**基本参数：**

*  `scroll`：背景图像是随对象内容滚动
 *  `fixed`：背景图像固定

### 背景简写 ###

`background`属性的值的书写顺序官方并没有强制标准的，不过我们这样建议：

background: transparent url(image.jpg) repeat-y  scroll 50% 0;

### 背景透明 ###

background: rgba(0,0,0,0.3); /*最后一个参数是alpha 透明度 取值范围 0~1之间*/
    border: 1px solid rgba(0,0,0,0.3);

### 背景缩放 ###

background-image: url('images/gyt.jpg');
    background-size: 300px 100px;
    /* background-size: contain;会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏 */
    /* background-size: cover; 会自动调整缩放比例，保证图片始终完整显示在背景区域*/

## 列表样式 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
   <th align="left">属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">list-style-type</td> 
   <td align="left">列表样式</td> 
   <td align="left">disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha或none</td> 
  </tr> 
  <tr> 
   <td align="left">list-style-image</td> 
   <td align="left">图像列表</td> 
   <td align="left">url或none</td> 
  </tr> 
  <tr> 
   <td align="left">list-style-position</td> 
   <td align="left">列表符号的缩进</td> 
   <td align="left">inside或outside</td> 
  </tr> 
 </tbody> 
</table>

## 表格样式 ##

### 表格边框样式 ###

我们可以使用如`{border:1px solid red;}`为`table、th`或`td`设置边框。

### 折叠边框 ###

{ border-collapse:collapse(合并边框)|separate(默认，边框独立)|inherit(继承父级样式)}

### 设置宽度和高度 ###

通过`width`和`height`这两个属性定义，可以是百分比也可以是绝地值

### 表格对齐方式 ###

我们使用`text-align`和`vertical-align`来设置表格中文本的对齐方式

### 定义表格标题位置 ###

### 设置表格布局 ###

使用`label-layout`属性来设置是否保证单元格宽度不被改变，其属性值如下：

*  `auto`：当内容超过宽度是能自动换行则自动换行，不能自动换行则增加宽度（默认值）
 *  `fixed`：无论内容是否超过宽度，都保持原来的宽度
 *  `inherit`：继承父级样式
 *

## 元素的隐藏和显示 ##

### `display`显示 ###

设置或检索对象是否及如何显示，且隐藏之后，不再保留位置。

*  `none`：隐藏对象
 *  `block`：显示元素

### `visibility`可见性 ###

设置或检索是否显示对象，隐藏之后，继续保留原有位置。

*  `visible`：对象可见
 *  `hidden`：对象隐藏

### `overflow`溢出 ###

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">visible</td> 
   <td align="left">不剪切内容也不添加滚动条</td> 
  </tr> 
  <tr> 
   <td align="left">auto</td> 
   <td align="left">超出自动显示滚动条，不超出不显示滚动条</td> 
  </tr> 
  <tr> 
   <td align="left">hidden</td> 
   <td align="left">不显示超过对象尺寸的内容，超出的部分隐藏掉</td> 
  </tr> 
  <tr> 
   <td align="left">scroll</td> 
   <td align="left">不管超出内容否，总是显示滚动条</td> 
  </tr> 
 </tbody> 
</table>

## 用户界面样式 ##

### 鼠标样式`cursor` ###

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状，语法如下：

`cursor : default`默认|pointer手形|move移动|text文本光标

### 轮廓`outline` ###

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，语法如下：

outline : outline-color ||outline-style || outline-width

不过我们平时都是使用`outline:0`或者`outline:none`来去掉。

### 防止拖拽文本域`resize` ###

`resize:none`这个单词可以防止火狐、谷歌等浏览器随意的拖动文本域。

## 溢出的文字隐藏 ##

### `word-break`：自动换行 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">属性值</th> 
   <th align="left">含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">normal</td> 
   <td align="left">使用浏览器默认的换行规则</td> 
  </tr> 
  <tr> 
   <td align="left">break-all</td> 
   <td align="left">允许在单词内换行</td> 
  </tr> 
  <tr> 
   <td align="left">keep-all</td> 
   <td align="left">只能在半角空格或连字符处换行</td> 
  </tr> 
 </tbody> 
</table>

### `white-space`：设置或检索对象内文本显示方式 ###

*  `normal`：默认处理方式
 *  `nowrap`：强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

### `text-overflow`：文字溢出 ###

设置或检索是否使用一个省略标记`...`标示对象内文本的溢出:

*  `clip`:不显示省略标记，而是简单的裁切
 *  `ellipsis`：对象内文本溢出时显示省略标记

## 其他特殊技术 ##

### 精灵图技术 ###

CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。最后，我们使用CSS的`background-image`、`background-repeat`和`background-position`属性进行背景定位，其中最关键的是使用`background-position`属性精确地定位。

### 滑动门技术 ###

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。其技术核心就是利用CSS精灵（主要是背景位置）和盒子`padding`撑开宽度, 以便能适应不同字数的导航栏。

### 字体图标技术 ###

字体图标是一种特殊的字体，它看起来像图标，但是却有着字体的各种功能，能自由的改变大小和颜色。  
首先，我们要在样式里面声明字体：

@font-face { 
      font-family: 'icomoon'; //可改变的值，用于命名
      src:  url('fonts/icomoon.eot?7kkyc2');
      src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
        url('fonts/icomoon.woff?7kkyc2') format('woff'),
        url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
    }

然后我们给盒子使用字体：

span { 
            font-family: "icomoon"; //对于曾经申明的名字
            }

最后给盒子里面添加结构：