服务端程序员学css记录

禁止缩放

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

链接颜色

#toolbar {...}
#toolbar a.link {color:white} /*需要这样添加，连接颜色才能变为白色*/

import url(xxx.css)

引入xxx.css,必须出现在其它样式之前

注释注意项

采用/* ** */,不能 //
sass支持//

selector {property: value}

selector {property: value}

link

<link type="text/css" rel="stylesheet" href="main.css">

body p td ul

通常body定义好样式后，相应的p，td，ul等都能适用，
但为了兼容，建议采用后一种写法

body  {
	font-family: Verdana, sans-serif;
}
p, td, ul, ol, li, dl, dt, dd  {
    font-family: Verdana, sans-serif;
}

简单属性选择

h1[class]{…}
选择有class属性的所有h1

字体垂直居中

div {height:25px;line-height:25px;overflow:hidden;}

只要div和字体高度一样就可以

<p style="border-style:none">无边框</p>
<p style="border-style:dotted">点线式边框</p>
<p style="border-style:dashed">破折线式边框</p>
<p style="border-style:solid">直线式边框</p>
<p style="border-style:double">双线式边框</p>
<p style="border-style:groove">槽线式边框</p>
<p style="border-style:ridge">脊线式边框</p>

如果要出现水平滚动条，则： overflow-x:auto
同理，垂直滚动条为： overflow-y:auto
如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative

<table class="count_table2" border="1">
    <tr>
        <th colspan="1" rowspan="2" >新增客户</th>
        <th colspan="2">办卡会员</th>
        <th rowspan="2">消费客户</th>
    </tr>
    <tr>
        <th>已办卡</th>
        <th>未办卡</th>
    </tr>
    <tr>
        <td id="new_num"></td>
        <td id="has_card_num"></td>
        <td id="no_card_num"></td>
        <td id="consume_num"></td>
    </tr>
</table>

选择相邻兄弟

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

li + li {font-weight:bold;background: #eef1f4;}
第一个元素不影响，后续的元素影响到

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

注释：在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！
注释：在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！

text-decoration:none; 文字底部不带下划线

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
注释：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。

p:first-letter
p:first-line

“:before” 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个<h1> 元素前面插入一幅图片：

h1:before {
  content:url(logo.gif);
}
h1:after {
    content:url(/i/w3school_logo_white.gif)
} 

块元素：

<h1> <p> <div>

使用 margin 属性来水平对齐

可通过将左和右外边距设置为 “auto”，来对齐块元素。
除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。
提示：如果宽度是 100%，则对齐没有效果

使用 float 属性来进行左和右对齐

对齐元素的另一种方法是使用 float 属性：
实例

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

CSS尺寸属性:

height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

span{display: block}
span显示成块级元素

p {display: inline}
p显示成行级元素

background-color 背景色
p {background-color: gray;}
background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。

background-image 背景图像
body {background-image: url(/i/eg_bg_04.gif);}

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性

背景定位

可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

top、bottom、left、right 和 center or background-position:50% 50%;

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，
可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
background-attachment:fixed
background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

链接的四种状态：

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

文本修饰

text-decoration 属性大多用于去掉链接中的下划线：
实例

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

布局

绝对布局脱离文档流，
相对布局不脱离文档流，相对自己原来的位置的移动。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

float:
relative
通过为元素指定一个值，元素相对于其原来位置移动。也可以使用margin来达到同样的效果。
fixed
为元素指定相对于窗口的确切位置 。即使文档的其它元素出现滚动，元素位置仍然不变。
absolute
为元素指定相对于其父元素的确切位置。只有在父元素使用 relative, fixed or absolute 时才有效。你可以为任何父元素指定 position: relative;因为它不会产生移动。
static
默认值。当明确要关闭位置属性时使用。

块级布局:
div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form
和HTML5中的新元素： header 、 footer 、 section 等等。

inline
span 是一个标准的行内元素。一个行内元素可以在段落中 像这样 包裹一些文字而不会打乱段落的布局。
a 元素是最常用的行内元素，它可以被用作链接。

#main {
  width: 600px;
  margin: 0 auto; 
}

设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。
元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

#main {
  max-width: 600px;
  margin: 0 auto; 
}

当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ：

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

display:inline-block 块状布局
.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}