HTML5字体、伪元素、背景

1、字体样式：

　选择器  { font：font-style  font-weight  font-size / line-height   font-family；}

　例：p { font： italic  bold   14px / 1  ' 宋体 ' ；}

　注意：使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开

　不需要的属性可以省略，但必须保留 font-size 和 font-family 属性，否则 font 属性不起作用。

2、结构（位置）伪类选择器（CSS3）

　：first-child，选取第一个子元素

　：last-child，选取最后一个元素

　：nth-child（n），选取第 n 个元素，可以是 even 偶数， odd 奇数 ， 如果用公式 n 从 0 开始 ，倍数：2n，3n

　：nth-last-child（n），倒数，选取第 n 个元素

3、目标伪类选择器（：target）

　：target 目标伪类选择器，可用于选取当前活动的目标元素，更改样式。

　例如：

　<style>

　　:target{ color:red；font-size:18px；}

　</style>

　<a href=" #movie ">演艺经历</a>

　<a href=" #live ">个人生活</a>

　<h3 id="movie">演艺经历</h3>

　<h3 id="live">个人生活</h3>

4、文字设置

　line-height：行高，一般设置为比字体大7~8个像素

　text-indent：首行缩进，建议使用 em 作为设置单位，1 em 就是一个字的宽度

　letter-spacing：字间距，设置汉字之间的间距

　word-spacing：单词间距，设置英文单词之间的间距

　writing-mode：文本在水平或垂直显示

　horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom

　vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left

　vertical-lr：垂直方向内内容从上到下，水平方向从左到右

　sideways-rl：内容垂直方向从上到下排列

　sideways-lr：内容垂直方向从下到上排列

　word-break：自动换行，主要处理英文单词

　break-all，允许在单词内换行

　keep-all，只能在半角空格或连接符处换行

　white-space：强制文本在一行显示内容

　text-overflow：文字溢出，设置或检索是否使用一个省略标记（...），表示对象内容溢出

　　clip：文本溢出不显示省略标记（...）

　　ellipsis：文本溢出时，使用省略标记（...）

　　使用 text-overflow 属性，必须先强制在一行内显示，其次和 overflow:hidden 搭配使用

　　例：   white-space：nowrap；

　　　　　overflow：hidden；

　　　　　text-overflow：ellipsis；

　　字体颜色半透明（CSS3）

　　　　color：rgba（r,g,b,a） a 是 alpha 透明的意思  取值范围 0~1 之间。   例如：h1 { color：rgba( 255，0，0，0.3)；}

　　文字阴影（CSS3）

　　　　可以实现凹凸文字 text-shadow:1px 1px 1px #000,-1px -1px 1px #fff;

　　　　text-shadow：水平位置  垂直位置  模糊距离  阴影颜色 。  例如：h1{ text-shadow：5px  11px  3px raba(0，0，0，0.5)；}

5、选择器

　　交集选择器：div.p（找到两个选择器共同的元素）　　　　　 并集选择器：div，p，h1 （找选择器指定的元素）

　　后代选择器：div  p（儿子，孙子，重孙都找到）　　　　　　子元素选择器：.nav > li （只找亲儿子）

6、伪元素选择器（CSS3）

　　：：first-leeter，选择第一个字

　　：：first-line，选择第一行

　　：：selection，选中文字时，改变样式

　　：：before，：：after，在盒子div的内部前面或后面插入内容

　　例如：

　　　　div::before{ content:' 新增的内容 ' ;}

　　　　<div>正常内容显示区域</div>

7、背景固定（background-attachment）

　　scroll，默认，滚动

　　fixed，固定

　　简写方式：background：背景颜色  背景图片地址  背景平铺  背景滚动  背景位置  　

　　例如：  background：red  url(img.png)  repeat-y  scroll  center  -10px ;

　　背景半透明（CSS3）

　　　　background：rgba(0,0,0,0.7);

　　背景缩放（CSS3）

　　　　background-size，设置背景图片的尺寸，在移动web开发中做屏幕适配应用非常广泛。

　　参数：常用 cover

　　1，设置长度单位（px）或百分比

　　2，设置为 cover 时，图片进行等比例缩放，图片一定会保证宽度和高度同时满足盒子的大小，溢出部分则会被隐藏。

　　3，设置为 contain 图片进行等比例缩放，如果图片的高度或宽度有一个和盒子一样大，就不在缩放，保证了图片的完整。

　　　　background-image:url(img.png);

　　　　background-size:300px ； //  自动适应比例

　　　　background-size：contain；   // 自动缩放比例，但是盒子有部分会被裸露在外

　　　　background-size：cover；  // 自动缩放比例，溢出部分隐藏

　　多背景（CSS3）

　　　　逗号分隔可以设置多背景，多背景图之间存在重叠关系，前面的背景图会覆盖后面的背景图，背景色通常定义在最后一组。

　　　　background：url(test.png)  no-repeat  left  top, url(img.png)  no-repeat   bottom  right   pink；

8、字体图标

　　推荐网站：

　　　　icomoon字库：http://icomoon.io 国外服务器，打开网速较慢

　　　　阿里 icon font 字库：http://www.iconfont.cn/ 国内服务器，淘宝，阿里各类图标　　

　　　　第一步：在样式里面声明字体，告诉别人我们自己定义的字体

　　　　　　@font-face {

　　　　　　　　font-family: 'icomoon';

　　　　　　　　src: url('fonts/icomoon.eot?scij6h');

　　　　　　　　src: url('fonts/icomoon.eot?scij6h#iefix') format('embedded-opentype'),

　　　　　　　　　　url('fonts/icomoon.ttf?scij6h') format('truetype'),

　　　　　　　　　　url('fonts/icomoon.woff?scij6h') format('woff'),

　　　　　　　　　　url('fonts/icomoon.svg?scij6h#icomoon') format('svg');

　　　　　　　　　　　　font-weight: normal;

　　　　　　　　　　　　font-style: normal;

　　　　　　　　　　　　font-display: block;

　　　　　　　}

　　　　第二步：给盒子使用字体

　　　　　　　span{

　　　　　　　　font-family:'iconmoon';

　　　　　　　}

　　　　第三步：盒子里面添加结构

　　　　　　　span::brfore{

　　　　　　　　content:'\e900';

　　　　　　　}

　　　　或者直接复制图标粘贴在标签框中：<span></span>