css文字与排版

目录

• 文字与排版样式
  • ``font`文字样式
  • 排版样式(text)
  • 文字半透明
  • 文字阴影
• 背景和颜色
  • 基本
  • 背景位置使用
  • 背景附着
  • 背景简写
  • 背景透明
  • 背景缩放
• 列表样式
• 表格样式
  • 表格边框样式
  • 折叠边框
  • 设置宽度和高度
  • 表格对齐方式
  • 定义表格标题位置
  • 设置表格布局
• 元素的隐藏和显示
  • display显示
  • visibility可见性
  • overflow溢出
• 用户界面样式
  • 鼠标样式cursor
  • 轮廓outline
  • 防止拖拽文本域resize
• 溢出的文字隐藏
  • word-break：自动换行
  • white-space：设置或检索对象内文本显示方式
  • text-overflow：文字溢出
• 其他特殊技术
  • 精灵图技术
  • 滑动门技术
  • 字体图标技术

文字与排版样式

``font`文字样式

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

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

排版样式(text)

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

文字半透明

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

文字阴影

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

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

背景和颜色

基本

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

背景位置使用

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; 会自动调整缩放比例，保证图片始终完整显示在背景区域*/

列表样式

属性	描述	属性值
list-style-type	列表样式	disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha或none
list-style-image	图像列表	url或none
list-style-position	列表符号的缩进	inside或outside

表格样式

表格边框样式

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

折叠边框

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

设置宽度和高度

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

表格对齐方式

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

定义表格标题位置

caption-size:top|bottom|left|right|inherit|

设置表格布局

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

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

元素的隐藏和显示

display显示

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

• none：隐藏对象
• block：显示元素

visibility可见性

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

• visible：对象可见
• hidden：对象隐藏

overflow溢出

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

属性	含义
visible	不剪切内容也不添加滚动条
auto	超出自动显示滚动条，不超出不显示滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条

用户界面样式

鼠标样式cursor

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

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

轮廓outline

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

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

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

防止拖拽文本域resize

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

溢出的文字隐藏

word-break：自动换行

属性值	含义
normal	使用浏览器默认的换行规则
break-all	允许在单词内换行
keep-all	只能在半角空格或连字符处换行

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"; //对于曾经申明的名字
		}

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

<span></span>