css操作手册

2017-10-29

css使用记录及速查手册

1. 基本概念

css基本语法

SELECTOR DECLARATION
#page-header { font-szie : 10px;}
/*对了，我找了半天，发现这个page-header和大括号之间有没有空格无所谓的*/
#page-header{ font-szie : 10px;}
/*也就是这么写也无所谓，反正最终部署都会删掉空格*/

例如

.better{
  background-color: gray;
  border: none !important;
}

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

css中的长度单位有px,em,以及rem（ ios：6.1系统以上都支持. android：2.1系统以上都支持.），当然还有百分比。

<img src="https://avatars0.githubusercontent.com/u/1?v=4" width="70" height="70">

不写单位就默认是px了

2. 引用方式

html中引用css有三种方式:

InLine Styling(内联样式) 只在非常特殊的情况下才使用

<div>
  <p id='content' style="position: absolute; top:0; left:0; width: 100%">Inline style are bad</p>
</div>

Embedded style sheets(嵌入样式) 在当前页面中添加一个样式，不能复用

<!doctype html>
<html>
<head>
 <title>Embedded style</title>
 <style>
  p{
    font-size : 10px;
    color: red;
  }

  .welcome{
    color: blue;
  }
 </style>
</head>
<body>
  <p> now every p tag in this page will have my style</p>
  <p class="welcome"> this one will have blue text color</p>
</body>
</html>

External style sheets(外部样式)

<!doctype html>
<html>
<head>
 <title>Embedded style</title>
 <link rel="stylesheet" type="text/css" href="css/syntax.css">
</head>
<body>
  <p> now every p tag in this page will have my style</p>
</body>
</html>

注意上面那个rel表示relation.

3. 选择器及优先级，各种Selector的写法

派生选择器，两种不同的效果

3.1 基于类的，很多时候看到中间有一个空格，意思就是在前者的基础上，再加上一些限定条件进行查找

<td class="fancy">

td.fancy {
color: #f60;
background: #666;
}

所有class是fancy的td将是带有灰色背景的橙色。

<div class='fancy'>
  <td>
  </td>
</div>

.fancy td {
  color: #f60;
  background: #666;
}

所有class是fancy的元素，里面的td都将是带有灰色背景的橙色。

3.2 基于id的

#sidebar p {
  font-style: italic;
  text-align: right;
  margin-top: 0.5em;
}

所有id是sidebar的标签，内部的p段落全部应用上述样式

#sidebar {
  border: 1px dotted #000;
  padding: 10px;
}

div #sidebar {
  border: 1px dotted #000;
  padding: 10px;
}

因为id 属性只能在每个 HTML 文档中出现一次，所以上面两个是一样的，后者指的是该元素所属的父标签。
css层叠优先级:

IDs、class 选择器优先于element选择器
比起class而言id优先级更高
!important具有最高的优先级，尽量不要使用
简单说!import > id > class > 普通的tag

关于~~important~~，能不用就不要用。有人开玩笑说，职业生涯中不要使用超过5次。

3.3 css Conflict

假如一个css文件里面出现了

.span{
  color : blue
}

.span{
  color: red
}

结果是底部红色的赢了，原因是css是Cascade的，从上往下读文件。前提是两个选择器一模一样

body span{
  color : blue
}

.span{
  color: red
}

这种情况还是蓝色的赢

3.4 css的继承

在一个页面中，父tag定义的样式是会传递给子tag的，如果子tag没有复写掉，那么就会propogate整个父tag的范围
例如

body {
  color : red;
}

div {
  color : yellow
}

p {
  color: blue
}

上面body的红色字体颜色会传递给当前页面所有tag的字体中，但div和p各自定义了自己的字体颜色，所以等于复写了。需要注意的是，这个时候有些tag，例如a tag是会获得浏览器默认属性的

a {
  color: blue;
  text-decoration: underline;
}

类似于浏览器默认给你加上了这么一行css。
browser 的default browser style,如果什么css都不加的话，就能看出来了

3.5 Targeting Multipe Elements

p{
  color: red;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial;
}

span{
  color: red;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial;
}

a{
  color: red;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial;
}

/*还不如写成这样*/
p, span, a{
  color: red;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial;
}

3.6 Descendant Selector（后代选择器）

/*这个意思就是，把content这个class里面的所有p tag的字体颜色都改成红色*/
#content p{
  color: red;
}

/*这个更进一步，一层层嵌套下去，指定的p tag才会获得属性*/
#content #child-content p{
  color: red;
}

这么嵌套多少层其实没关系，实践中，不要嵌套太多层，不方便维护

3.7 Child Selector（子选择器）

碰到下面这种html，如果只想给Direct Child赋属性，可以使用child selector

<div class="content">
  <p>Direct child</p>
  <p>Direct child</p>
  <p>Direct child</p>
  <div>
    <p>Indirect child</p>
  </div>
</div>

/*这个向右的箭头就表示child selector*/
#content > p{
  color: pink;
}
/*这个时候不会对Indirect child生效*/

这种方式能够在不影响其他Descendant的情况下设置属性

3.8 Adjacent Selector（相邻选择器）

给一个tag之后下一个tag赋属性

<div id='all-posts'>
  <h2>First Article</h2>
  <p>Published by Smith</p>
  <p>something specific about the article content</p>
  <p>something specific about the article content</p>
  <p>something specific about the article content</p>
  <p>something specific about the article content</p>
  <p>something specific about the article content</p>

  <h2>Second Article</h2>
  <p>Published by John</p>
  <p>something specific about the article content</p>
  <p>something specific about the article content</p>
  <p>something specific about the article content</p>
  <p>something specific about the article content</p>
  <p>something specific about the article content</p>

  <h2>Third Article</h2>
  <p>Published by Ted</p>
  <p>something specific about the article content</p>
  <p>something specific about the article content</p>
  <p>something specific about the article content</p>
  <p>something specific about the article content</p>
  <p>something specific about the article content</p>
</div>

现在想要把所有紧跟着h2标签后面的那个p tag装饰下

.all-posts h2 + p{
  color: green;
}

Adjacent Selector必须是follow directly after first element

3.8 Attribute Selector（属性选择器）

首先明确什么是attribute，href,class,id,rel,type,title这些全都是Attribute。

<span>Span without an class Attribute</span>
<span class="Deck"></span>
<span class="Deck"></span>
<span class="Deck"></span>

span[class]{
  color: purple;
}
/*这样就能选中所有上面带有class属性的tag*/

同样的，只要用一个方括号括起来的选择器，就能选中带有特定属性的标签
当然还能更具体一点，例如

<a href='#'></a>
<a href='http://www.google.com' title='Google'></a>
<a href='http://www.baidu.com' title='Baidu'></a>

a[title='google']{
  color : red;
}
/*这样只有上面的Google标签才变成红色*/

还有更高级的Pattern Matching

<span>Span without an class Attribute</span>
<span class="deck halls"></span>
<span class="deck tails"></span>
<span class="deck"></span>

span[class~='deck']{
  color: purple;
}
/*这样上面三个都会变成紫色,或者~符号的意思是只要属性值里面包含了这个deck单词就算*/

<a href="http://www.baidu.com">web page</a>
<a href="something.pdf">View as pdf</a>

span[href$='pdf']{
  color: purple;
}
/*这个美元符号的意思是任何以pdf结尾的href，如果要算上以xx开头的话，这样*/

span[href^='http']{
  color: yellow;
}

3.9 Pseudo selector

<a class="site" href="http://www.baidu.com">站点</a>

a:hover{
  text-weight: bold;
}

a:visited{
  color: red;
}

a:active{
  color: yellow;
}
/*active的状态是指鼠标点上去，但还没有跳转页面那一瞬间。其实你也可以鼠标点上去不放开，就是active了*/

3.10还有first child等

例如

<article>
  <p>First line,or first child</p>
  <p>center and other stuffs</p>
  <p>center and other stuffs</p>
  <p>center and other stuffs</p>
  <p>this is the last child</p>
</article>

article p:first-child{
  color :blue;
}

article p:last-child{
  color: green;
}

关键词就是first-child和last-child这么简单
还有first-of-type,last-of-type

4. 常用属性

顺便说一下，mrakDown里面是能直接插入img标签的

background-size : cover;(比如说你要拿一张很大的图片作为body的background，但图片的大小已经超出了浏览器的大小，这时候就用cover缩放一下，就能填满了)

box-sizing

如果两个element都有margin，挤在一起的话，最终的margin不是两个元素之间的margin相加

<div>
    <span></span>
    <span></span>
</div>

span{
  margin: 0px 10px
}

因为这俩都是inline-elements，最终生成的margin不是10+10=20px ,而是10px

flex box可以实现有效的居中。外部容器添加display:flex属性，子元素可以设置自己的order(越小越靠前/左，负数最小)。
父容器可以设置的属性包括：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
/*子元素可以设置的属性包括:*/
order
align-self
flex-grow
flex-shrink
flex-basis

更多参考MDN

5. blcok，inline和inline-block

display
可能的值包括inline,block,inline-block.
参考MDN网站，inline的说法是相较block来说的，就是默认不会另起一行：

An inline element does not start on a new line and only takes up as much width as necessary.

inline和block以及inline-block的区别

block-level elements(块级元素)和inline elements(内联元素)；block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。

display:block

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。

display:inline

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

5.css的简写多的不敢想,short-hand

下面这三个是一个意思，也就是说css是按照顺时针上，右，下，左的顺序来的

.content{
  margin 10px 20px 10px 20px;
}
.content {
  margin 10px 20px;
}
.content{
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

h2{
  color: #ffffff #0000000 ;
  /* 这个意思是平时是白色，鼠标移上去就变成黑色 */
}

除了margin以外,padding也是。至于那种倒角，例如border-radius,则是左上角,右上角，右下角，左下角这样的顺序

.round_corner{
  border-radius: 10px;
}

.round_corner{
  border-radius: 10px 20px;
  /* 左上角，右下角10px,右上角和左下角20px*/
}

.round_corner{
  border-radius: 10px 20px 30px 40px;
}

.circle{
  width: 100px;
  height:100px;
  border-radius: 50px;
  /* 糊一个圆*/
}

.back{
  background-color: #606060;
  background-image: url(#) ;
  background-repeat: no-repeat;
  /*repeat的意思是图片填不满容器的话，从左到右，从上到下重复一遍 */
  background-position: center;
  /*将图片居中摆放在容器中，还有bottom-center，bottom-right等*/
  background-position: 10px 20px;
  /*距离左边10px,顶部20px*/
  background-size: 200px;
  /*图片的宽高，自动缩放*/
}

.simplyfy{
  background:  url (#) no-repeat top center;
  background-color: #606060;
}
/*这是一种简写的方式,注意backgroundColor和background最好分开写*/

.multiple_background{
  background-image: url('url1'),url('url2');
  /*多层背景，url1叠在最顶层，可以想象是z轴最上方，url2在下面，中间一定要有一个逗号。*/
  background-repeat: no-repeat,no-repeat;
  /*中间有一个逗号，no-repeat属性分别应用在url1和url2上。由于上面这俩一样的，所以只写一个也行*/
  background-position: center,top left;
  background-size: 300px,100%;
  /*都是一样的，分别一一对应*/
}

/*画三个圆*/
#circle{
  width: 400px;
  height: 400px;
  position: absolute;
  background: rgb(200, 200, 100);
  border-radius: 200px;
  top: 50px;
  left: 50px;
  opacity: 0;
  /* 这个是透明度，0表示完全透明*/
  text-align: center;
  background: rgba(200, 200, 100, 0.5);
  /*注意opacity会影响div里面text的透明 度，rgba不会影响*/
}
#circle-2{
  width: 400px;
  height: 400px;
  position: absolute;
  background: rgb(200, 100, 200);
  border-radius: 200px;
  top: 250px;
  left: 150px;
}
#circle-3{
  width: 400px;
  height: 400px;
  position: absolute;
  border-radius: 200px;
  top: 50px;
  left: 250px;
  background: #aadddd;
  background: linear-gradient(top,#aadddd,0%,#77aaaa,100%);
  /*Gradient在有些浏览器上不支持，毕竟是比较新的属性，这时候就会fallback到background上，所以支持的话就有渐变色，不支持的话就恢复到设定的颜色，这也就是一个属性写两遍的原因*/
  /*但是上面两行在chrome里面不会出现渐变色,需要vender-prefix*/
  background: -moz-linear-gradient(top,#aadddd,0%,#77aaaa,100%);
  background: -webkit-linear-gradient(top,#aadddd,0%,#77aaaa,100%);
  background: linear-gradient(top,#aadddd,0%,#77aaaa,100%);
  /*这个top的意思是从上开始渐变，写bottom也行，从下往上*/
}

.shadow_box{
  box-shadow: 2px 2px 4px 2px rgba(40,40,40,0.6);
  /*分别是阴影距离元素的右侧的距离和距离底部的距离以及阴影需要多深，越大越深，最后是阴影拓展的距离.外加阴影的颜色*/
}

cssmatic这个网站可以使用拖拽的方式生成shadow的css文件

======================================sass=============================

5. css positioning

首先是float,Float 可用于实现文字环绕图片(加在图片的属性上)
the float element no longer take any height in document flow

<div class="wrapper">
  <img src="picture.jpg" width="300px"></img>
  <p>这段文字默认会另起一行在图片下面</p>
</div>

.wrapper{
  background: #ffffff;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

/*margin auto 让这个wrapper在其父容器中横向居中显示*/

img{
  float: left;
  margin: 10px;
}

/*float: left的意思是让这个图片居左显示，同时，旁边的text会自动调整，不至于被图片挡住。就能实现图文混排的效果*/

/*更具体一点的意思就是，float属性的标签，在html计算是否需要换行的时候是不会考虑这个标签的，同时，将根据float:left或者right摆在父容器的左边或者右边。感觉就像是在z轴方向提升了一个层级。*/

/*但如果每一个标签都被提升到一个z层级,比如两个div都有float:left属性，后面一个会排在前面一个的右边*/

<div id='container'>
<div class="left_float">
  <p>First Tag</p>
</div>
<div class="left_float">
  <p>Second</p>
</div>
</div>

.left_float{
  float: left;
  margin: 10px
}
/*float有一点好处就是浏览器不会让文字被float的元素遮挡住，所以会挪到下面去，但文字标签的背景会延伸到float元素的下面*/
.clear_float_for_text{
  padding: 10px;
  background: #ddd;
  clear: both;
}
/*clear both的意思是让文字的左右和上下背景都不会延伸到float元素的下面*/

float的元素和下面的文字之间使用margin无效，一般在text前面加一个空的

或者在float的父元素加上

.folat_wrapper:after{
  content: '';
  display: block;
  clear: both;
}

这种方式更好，after被称为伪元素，就是在父容器后面插入一个空的元素

css3有一个transition效果，就是操作任何属性变换都设定一个事件，达到一种类似于动画演进的效果

list-style-type : none会把li标签前面的方块干掉
text-align: center;不仅会把文字居中，还会把这个容器中的img也居中

CSS Positioning

position : absolute意味着remove it from normal document flow;position:relative意味着相对原本应该的位置移动，但依然占据document flow;position:fixed意味着

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。

其实就是元素的postion:absolute之后，就可以添加top,right,bottom,left这些属性了。但是这些属性不是简单的说就直接相对于其parent元素的。而是相对于最近一个position不是static的父元素（static是default，所以如果直系父元素不写的话，子元素会忽略 top, bottom, left, right 或者 z-index 声明）。如果真的一个个往上找都没有的话，直接相对于body起效。

Definitely will center a text in div , both horizontally and verticallyCSS center text (horizontally and vertically) inside a div block

<div id="container">
  <div id="content">
    Line 1
  </div>
</div>

(function() {
  var toggle = true;
  setInterval(function() {
    if (toggle) {
      $("#content").html("Line 1");
    } else {
      $("#content").html("<div>Line 1</div><div>Line 2</div>");
    }
    toggle = !toggle;
  }, 1300);
}());

body {
  font: 36px Arial, sans-serif;
}

#container {
  color: white;
  background: #ffbd17;
  width: 400px;
  height: 260px;
}

#content {
  background: #06c;
  width: 120px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

css position z index and stack ordering
html文件从上到下，越是在下面的文件，在z轴方向上的高度就越高。所以顶部nav要写在最底下。这是默认情况
如果要放在顶部的话，需要添加z-index：1;默认所有的z-index=0。
使z-index生效的前提是给了一个position属性

Clipping Content
先加上一个max-height，然后使用over-flow : hidden; 这个属性默认值是visible。使用auto会在内容高度超过容器高度的时候带上一个scrollbar，内容可以滚动。使用scroll的时候会在右侧和底部加上scrollbar，无论是否超出了max-height

@Media(max-width=768){
  body{
    display: none;
  }
}

这里面的css只会在平板及手机上生效，其实768px也就是平板和一般电脑宽度像素的界限了

子元素的margin会移动父元素给parent加上overflow :auto就好了

有时候遇到重大灾难，一些门户网站会把自家首页变成黑白色的，这种情况其实不多见。2018年3月14日，霍金逝世，阿里云变成黑的了。F12了一下，直接改在body的style上了
原路粘贴至此

body{

   -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    filter: gray;

}

font awesome怎么用

直接下载下来一个zip文件，解压后得到font-awesome文件夹，整个丢到项目中，html中引用’./font-awesome/css/font-awesome.css.min’即可。一般是粘贴到一个a标签里面。

更新

cssmatic很多时候，手写css是一种奢侈，css这种东西本来就属于样式一类，尽量去复制粘贴，不要自己写
有些浏览器不支持特定样式的话，可以使用Modernizrz这个javaScript库
作为新手，多数时候css不起效是因为class和id在html中和css中拼写错了
比较合适的css布局教程

参考

css层叠优先级
 Material CSS
css选择器汇总
 谷歌的字体库自己去下，很多

文字居中的一种简单的方式

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
}

Pseudo Elemnet是在一个element的content前面或者后面添加内容，而不是添加了一个标签。注意，对img标签无效。
Pseudo Elemnet

p::before {
    content: "";
    background: red;
    font-size: 20px;
    color: white;
    font-weight: 900;
    vertical-align: middle;
    line-height: normal;
}

/*这种在左侧添加一个小图标的方式也是可以的*/
p::before {
    content: "https://www.baidu.com/img/bd_logo1.png";
    width: 20px;
    height: 20px;  
}