css3拾遗

Css3拾遗

对页面样式进行设置，要实现一对一或者一对多的控制，就要通过选择器进行匹配的操作。在这之前简单记录下css的书写顺序和一般规范；

css书写顺序

1. 位置（position，top，right、z-index\display\float）
2. 大小（width、height、padding、margin）
3. 文字（font、line-height、letter-spaacingcolor-text-align）
4. 背景（background、border）
5. 其他（animation，transition）
   讲真一般开发中很少有人在意css的书写顺序，但是按照上述顺序是皮裤套棉裤，他必定有缘故；
   理由：一方面规范的书写顺序利于协同开发及预览，另外更重要的是，可以减少浏览器的回流，优化dom渲染，浏览器的渲染的过程不在这里赘述，展开说的话那是另外一个帖子了，这里可以先马克下；粗糙的说，浏览器在讲css tree 和dom tree合并渲染时，假设先绘制了50*50的div，紧接着发现位置发生change,那么原先绘制的div就要整体清除，重新在目标位置绘制，造成性能浪费；

连字符css选择器命名规范

1. 长名称或词组可以使用中划线来为选择器命名
2. 不能用_下划线命名css选择器以便于区分js变量命名
3. 不要随意使用id，id在js下是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先于class所以id应该谨慎使用。

优先级

刚刚规范说道优先级，索性这里就展开说下选择器权重的问题；
权重计算规则：

1. 内联样式，行内style描述属性，权重最高为1000;
2. ID选择器，#id，权重为100;
3. 伪类和属性选择器，像:link,:last-child,input[submit]，权重为10;
4. 类型选择器和伪元素选择器，如div,::after，权重为1;
5. 通配符、子选择器、相邻选择器等的。如*、>、+,权重为0;
6. 继承的样式没有权值。

当然important没人干的过，同个元素都存在important时再去进行选择器的权重比较，非必要的情况下不要使用

注释的写法

/*header*/
	your style
/*End Header*/

最好在注释区，写明所属页面，所属区块，最近改动内容，我通常还会要求加上工号以便出了问题或不得不更改时更好的沟通不会出现莫名其妙的问题；

css选择器

大部头来了；

*，通用元素选择器，匹配任何元素
E，标签选择器，匹配所有使用E标签的元素
.info E.info，class选择器，匹配所有class属性中包含info的元素
#info E#info，id选择器，匹配所有id属性等于info的元素。
E，F，多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔。
E F，后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
E>F，子元素选择器，匹配所有E元素的直接子元素F
E+F，比邻元素选择器，匹配所有紧随E元素之后的同级元素F， P+P{}
E[att],匹配所有具有att属性的E元素，不考虑他的值。（注意：E在此处可以省略，比如“[cheached]”以下同），P[title]{}（input[type]{}）
E[att=val],匹配所有att属性等于“val”的E元素为唯一的，div[class=“error”]{}
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的元素，td[class~=“name”]{}
E[att|=val]匹配所有att属性具有多个连字符链接（hyphen-separated）的值，其中一个值以“val”开头的E元素，主要用于lang属性，比如‘en’、“en-us”、“en-gb”等，p[lang|=en]{}
E：first-child匹配父元素的第一个子元素
E：link匹配所有未被点击的链接
E：visited匹配所有已被点击的链接
E：active匹配鼠标已经其上按下，还没有释放的E元素
E：hover匹配鼠标悬停其上的E元素
E：foucus匹配获得当前焦点的E元素
E：after在E元素之后插入生成的内容
E：before在E元素之前插入生成的内容
E：first-line匹配E元素中的第一行
E：first-letter匹配E元素中的第一个字母
E：before在E元素之前插入生成的内容
E：after在E元素之后插入生成的内容
E~F匹配任何在E元素之后的同级F元素
E[att^=“val”]属性att值以"val"开头的元素
E[att$=“val”]属性att值以"val"结束的元素
E[att*=“val”]属性att值包含"val"的元素
E：enable匹配表单中激活的元素input[type=“text”]：enable
E：disabled匹配表单中禁用的元素input[type=“text”]:disabled
E：checked匹配表单中被选中的radio（单选框）或checkbox（复选框）
E：selection匹配用户当前选中的元素
css3结构性伪类
E:root匹配文档的根元素，对于html文档，就是Html元素
E：nth-child（n）匹配其父元素的第n个子元素，第一个编号为1
E：last-child匹配父元素的最后一个子元素，等同于nth-last-child（1）
E：only-child匹配父元素下仅有一个字元素等同于first-child:last-child
E：only-of-type匹配父元素下使用同种标签的唯一一个子元素
E：empty匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素。
E：not（s）匹配不符合当前选择器的任何元素
E：target匹配文档中特定“id”点击后的效果

兼容性前缀

随着各个浏览器支持性趋于统一，现在已经很少使用到了，毕竟大部分开发时ui组件的泛用或者postcss之类的工具已经帮我们解决了此类问题，但是存在就有了解掌握的必要。
-webkit-适用于低版chorme和safari
-moz-适用于低版firefox
-ms-适用于低版ie
-o-适用于低版opera

css3新增文本效果

css3包含多个新的文本特性
新增文本属性
text-shadow
word-wrap
css3文本阴影text-shadow：水平位置，垂直位置，模糊距离，颜色
您能够规定水平阴影垂直阴影模糊阴影阴影颜色等

css3自动换行、英文录入无自动折行，需用word-wrap：break-word|normal

text-overflow：clip：修剪文本。
text-overflow：ellipsis超出用省略号替换需要连用
{overflow：hidden；white-space：nowrap设置文本不换行； }
text-overflow：string使用给定的字符串来代表被修剪得文本。

正好想到一个经常用的2、3行文本展示，超出。。显示的demo;一并放在这里了

	div{
          width: 50px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          text-shadow:1px 1px 1px black;
          color: red; 
      }

其他新增属性

css3圆角边框border-radius

在css3中border-radius属性用于创建圆角
边框阴影box-shadow：水平 垂直 模糊 尺寸 颜色 内部inset或外部outset阴影

Border-image

很少用，通过css3的border-image属性，您可以使用图片来创建边框例：border-image：url（border.png） 30 30 round；

box-sizing属性

定义和用法box-sizing属性允许您以特定的方式定义匹配摸个区域的特定元素
语法box-sizing:content-box | border-box | inherit；
content-box：宽高分别应用到元素的内容内容框，在宽度和高度之外绘制元素的内边距和边框；
border-box：为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
Inherit：规定应从父级继承box-sizing属性的值。

resize属性

resize属性规定是否可由用户调整元素的尺寸，，要配合overfolw：auto使用
语法resize：none | both | horizontall | vertical
None：用户无法调整元素的尺寸；
Both：用户可调整元素的高度和宽度；
Horizontal：用户可调整元素的宽高；
Vertical：用户可调整元素的宽高。

background-size属性

语法：background-size: length | percentage | cover | contain
宽度高度 | 百分比 | 覆盖全部 | 把图像扩展到最大

background-origin属性

background-origin：padding-box|centent-box|border-box背景图像相对于内边距框来定位|背景图像相对于内容框来定位|背景图像相对于边框盒来定位

background多重背景

background：url（1.png），url（2.png）

linear gradients线性渐变

使用角度45deg（deg度），语法：.calssname{background：linear-gradient（direction，color-stop1，color-stop2，…）}
Direction：起始方向

radial-gradient(径向渐变

Background:-webkit-radial-gradient(20% 20%,blue,green,yellow,black)

渐变这里正好整理出个demo对于理解使用有比较直观的方式，0积分下载，欢迎随意取用；https://download.csdn.net/download/I1326/12475145