CSS基础知识

CSS内联（html标签里style=""），嵌入式（<style type="text/css"></style>里），外部（<link href="" rel="stylesheet" type="text/css">）

优先级：就近原则，离得近就听谁的。

css具有 继承性 (某些不具有继承性，如boder:1px; solid:red;)

          特殊性 ( 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100 继承也有权值但很低0.1)

          层叠性(多个同样权值的样式会以就近原则来决定听命于谁)

          重要性(可以为某些样式设置最高权值)             样式!important;

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

CSS选择器

选择器与{}之间最好有一个空格，
元素选择器：
类型选择器     标签名E  { 样式；}

p {font-size:12px;-height:1.6em;}

类选择器     .类名称  {css样式代码;}

.stress {color:red;}/*类前面要加入一个英文圆点*/
<span class="stress">胆小如鼠</span>

ID选择器      #ID名  {css样式代码; }

#setGreen {
   color:green;
}
<span id="setGreen">公开课</span>

#和.的不同：

1. 在html代码中id是唯一的，不可多次出现使用，class可以多次出现使用
2. class可以为同一个元素同时设定多个样式，id不可以

通用选择器       * {样式代码}应用于所有元素

* {color:red;}

关系选择符
子选择器：选择器>子元素( 只能是子元素，孙元素，曾孙等元素不行)IE某些早期版本不兼容

.food>li {border:1px solid red;}

后代(包含)选择器：选择器 空格 后辈元素(所有的后辈元素都可以)

.food li {border:1px solid red;}

相邻选择器：E+F {}  选择紧贴在E之后的F元素
兄弟选择器：E~F {}   选择E后的所有兄弟F元素

<style>
/* 相邻选择符(E+F) */
p+p {color:#f00;}
/* 兄弟选择符(E~F) */
p~p {color:#f00;}
</style>
<p>p1</p>
<p>p2</p>
<h3>这是一个标题</h3>
<p>p3</p>
<h3>这是一个标题</h3>
<p>p4</p>
<p>p5</p>
<!--此例，如果使用p + p{color:#f00;}，那么p2, p5将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色；-->

伪类选择器：允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的 鼠标滑过的状态来设置字体颜色：

a:hover{color:red;}

关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的， 所以现在比较常用的还是 a:hover 的组合。

伪对象选择器：代表某个元素子元素，但是不实际存在文档树中。

p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
<p>今天，阳光明媚，晴空万里</p><!--首字下沉效果-->

伪对象和伪类区别，请看 http://blog.csdn.net/qq_21184771/article/details/56283806
分组选择器：选择器1，选择器2, .. . {样式代码}

h1,span,#second>span{color:red;}

属性选择器：
E[att] {}   选择具有att属性的E元素/标签
E[att="val"] {}   选择具有att属性且属性值等于val的E元素。   
E[att~="val"] {}  选择具有att属性且属性值为一用空格分隔的字词列表，其中一个值等于val的E元素（包含只有一个值且该值等于val的情况）。

E[att^="val"] {}  选择具有att属性且属性值为以val开头的字符串的E元素

E[att$="val"] {}  选择具有att属性且属性值为以val结尾的字符串的E元素

E[att*="val"] { }   选择具有att属性且属性值为包含val的字符串的E元素，~=是其中一个属性值等于val。

E[att|="val"] { }  选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

段落样式

设置字体

body{font-family:"宋体";}

body{font-family:"Microsoft Yahei";}

设置字体颜色、大小

body{font-size:12px;color:#666}

字体粗体

p span{font-weight:bold;}

文字斜体

p a{font-style:italic;}

文字下划线

p a{text-decoration:underline;}

文字删除线

.oldPrice{text-decoration:line-through;}

段落中 文字缩进  2em的意思就是文字的2倍大小。

p{text-indent:2em;}

段落中 行间距

p{line-height:2em;}

段落中 英文字母、中文间距

p{letter-spacing:50px;}

段落中 英文单词间距

p{word-spacing:50px;}

段落中 对齐

h1{ text-align:center;}

缩写

 网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：

body{

    font-style:italic;

    font-variant:small-caps;

    font-weight:bold;

   font-size:12px;

    line-height:1.5em;

   font-family:"宋体",sans-serif;

}

这么多行的代码其实可以缩写为一句：

body{

    font:italic  small-caps  bold 12px/1.5em  "宋体",sans-serif;

}

注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

body{

    font:12px/1.5em  "宋体",sans-serif;

}

只是有字号、行间距、中文字体、英文字体设置。

颜色

在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：1、1.英文命令颜色   p{color:red;}

2、RGB颜色    这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

             p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

                          p{color:rgb(20%,33%,25%);}

3、十六进制颜色     这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

                           p{color:#00ffff;}

关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。

例子1：p{color:#000000;}可以缩写为：p{color: #000;}

例子2：p{color: #336699;}可以缩写为：p{color: #369;}

配色表 d:/file/配色表

长度单位

长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

1、像素

像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

下面注意一个特殊情况：

但当给 font-size 设置单位为 em 时，此时计算的标准 以其的父元素的 font-size 为基础。如下代码：

html

<p>以这个<span>例子</span>为例。</p>

css:

p{font-size:14px} span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

3、百分比

p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

position:relative;

left:-50%;

相对于 父元素右移50%

居中问题：
这个可以测试居中问题  https://css-tricks.com/centering-css-complete-guide/
详细的居中问题在另一笔记中 http://blog.csdn.net/qq_21184771/article/details/56340210

水平居中设置

1.如果是图片和文本等内联元素要居中
 给父元素设置 text-align:center;（父元素是块级元素才有效）text-align是在块级元素设置，作用于块级元素中的子行内/块行内元素.

2.如果是要被设置的元素是块状元素且是定宽（width:~~px）
margin左右设置为auto： margin-left:auto;margin-right:auto;或者简写为 margin:0 auto;

3.如果是要被设置的元素是块状元素且是多个块级元素

• 加入table，利用table的自适应宽度，可看做是定宽块状元素， 设置margin左右为auto

首先 为元素外加入table，tbody, tr , td,将元素套入其中；   然后 为table添加CSS      table{margin:0 auto;} 

• 改变块级元素为内联元素 display:inline;然后外层父元素使用 text-align:center;实现居中效果

html代码：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码：

<style>
.container{
   text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
   display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
    margin-right:8px;
   display:inline;
}
</style>

这种方法相比第一种方法的优势是不用增加 无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了 行内元素，所以少了一些功能，比如设定长度值。

• 通过给父元素设置 float，然后给父元素设置position:relative和 left:50%，子元素设置position:relative 和 left: -50%来实现水平居中。

.wrap{float:left;position:relative;left:50%;}
.wrap-center{
background:#ccc;
left:-50%;
position:relative;
}
<body>
<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>

把父元素浮动到左边,同时向右偏移50%,相当于把父元素的左边缘对齐到整行的中间

把子元素向右偏移50%,这个50%是父元素的50%,即是wrap的50%,而此时wrap的宽度刚好就等于子元素的宽度,也是子元素本身的50%,这样刚好就居中

4.用flex

父元素：display：flex；[flex-flow:row;] justify-content:center;

.box{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

 -webkit-flex-flow: row wrap;
  flex-flow: row wrap; 
justify-content:center;
}

垂直居中设置

1.父元素高度确定的单行文本居中

设置 父元素height和line-height一致。 ( height: 该元素的高度， line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的  基线间的距离 ) 。

<div class="container">
    hi,imooc!
</div>
<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

2.父元素高度确定的多行文本居中

• 插入table（包括tbody,tr,td），，同时设置vertical-align:middle（vertical-align只针对于inline-block元素才会起作用）

张鑫旭的这个文章很好 inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用，而是受制于整个line box的变化而不得不变化的。 vertical-align的本质上是个独立的个体，与后面的line水平的元素是不存在直接的关系的。两者没有必然的联系，这是一个需要认识清楚的重要的东西。

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
table td{height:500px;background:#ccc}/*td是默认就是vertical-align:middle*/

• chorme firefox IE8以上的浏览器下可设置块级元素的display为table-cell，激活vertical-align:middle但IE6、7不支持这个样式，兼容性比较差，不推荐。

3.知道自身高度的块级元素居中

利用相对绝对定位，top 50%，margin-top:负的一半自身高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

4.不知道自身高度的块级元素居中

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);}

transform的兼容性不好 Internet Explorer 10、Firefox、Opera 支持 transform 属性。
考虑margin：auto  

http://www.zhangxinxu.com/wordpress/?p=3794
5.用flex

水平垂直均居中

1.知道自身宽高元素居中

利用相对绝对定位，top 50%； left：50%；，margin:负的一半自身高度，宽度；

2.不知道自身宽高元素居中

绝对定位，top left 50%；transform:translate(-50%,-50%);

3.利用Flex

元素分类：

1.块状元素     2.内联元素(行内元素)     3.内联块状元素

1.常用的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<li>、<dl>、<table>、<address>、<blockquote> 、<form>

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

设置 display:block就是将行内(内联)元素显示为块级元素

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

2.常用的内联元素有：<a>、<span>、<b>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联元素特点：

1、和其他元素都在一行上；

块状元素也可以通过代码 display:inline将元素设置为 内联元素

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

3.常用的 内联块状元素有：<img>、<input>

display:inline-block就是将元素设置为内联块状元素。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

隐性改变display类型

当为 元素（不论之前是什么类型元素，display:none 除外） 设置以下2 个句之一：

1.  position : absolute  

2. float : left 或 float:right 

元素的display显示类型就会自动变为以   display:inline-block （ 块状元素 ） 的方式显示，当然就可以设置元素的width 和 height 了，且默认宽度不占满父元素。

<div class="container">
    <a href="#" title="">进入课程请单击这里</a>
</div>
<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>