css

style标签 h1头 p正文
<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
    }
</style>

行内样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;
              color:green;">直接在HTML标签中设置的样式</p>

链接外部样式
<link href="css/common.css" rel="stylesheet" type="text/css" />（而后在外部规划样式）

导入外部样式
<style >
  @import url("css/common.css");
</style>

优先级
行内样式>内部样式表>外部样式表
就近原则

类选择器
    <style type="text/css">
        .green {
                 font-size: 20px;
                 color: green;
                }
    </style>
<p class="green">有勇气就会有奇迹。</p>

id选择器
#first {
            font-size: 16px;
        }
<p id="first">北京欢迎你，有梦想谁都了不起！</p>

选择器优先级
无论何时：ID选择器>类选择器>标签选择器

层次选择器
<style type="text/css">
    p,ul{border: 1px solid red;}         （边界编辑）
   .active~p{  background: yellow;  }
</style>

        <p>1</p>      或
          （        <!-- 为了说明相邻兄弟选择器，在此处添加一个类名active -->）
	<p>2</p>
	<p>3</p>
	<ul>
		<li>
			<p>4</p>
		</li>
		<li>
			<p>5</p>
		</li>
		<li>
			<p>6</p>
		</li>
	</ul>

后代选择器body p{  background: red;  }
子选择器 body>p{  background: pink;  }
相邻兄弟选择器.active+p {  background: green;  }
通用兄弟选择器.active~p{  background: yellow;  }

first-child     作为父元素的第一个子元素的元素E
last-child      作为父元素的最后一个子元素的元素E
nth-child(n）   选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
first-of-type   选择父元素内具有指定类型的第一个E元素
last-of-type    选择父元素内具有指定类型的最后一个E元素
nth-of-type(n)  选择父元素内具有指定类型的第n个F元素
li p:nth-of-type(1){
 color: #640000;
 font-size: 14px;}

E[attr]属性选择器       a[id] { background: yellow; }
E[attr=val]属性选择器   a[id=first] { background: red; }
E[attr=val]属性选择器   a[id=first] { background: red; }
E[attr*=val]属性选择器  a[class*=links] { background: red; }
E[attr^=val]属性选择器  a[href^=http] { background: red; }
E[attr$=val]属性选择器  a[href$=png] { background: red; }

字体样式
font-family:"隶书";
font-size:12px;
font-style:（normal、italic和oblique）；
font-weight:bold;normal;bolder;lighter;400(=noraml);700(bold)
font:italic bold 36px "宋体";                (合写）

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}

文本属性
设置文本颜色              color:#00C;
设置元素水平对齐方式      text-align:right;
设置首行文本的缩进        text-indent:20px;
设置文本的行高            line-height:25px;
设置文本的装饰            text-decoration:underline;

文本阴影                  text-shadow : color  x-offset  y-offset  blur-radius;

 
排版文本段落              text-align:right;left;center;justify
垂直对齐                  vertical-align属性：middle、top、bottom
none                      默认值，定义的标准文本
underline                 设置文本的下划线
overline                  设置文本的上划线
line-through              设置文本的删除线

超链接伪类                a:hover {
	color:#B46210;
	text-decoration:underline;




 }

a:link{color:#9ef5f9;}    未单击访问时超链接样式  
a:visited {color:#333;}   单击访问后超链接样式
a:hover{color:#ff7300;}   鼠标悬浮其上的超链接样式
a:active {color:#999;}    鼠标单击未释放的超链接样式

无标记符号                list-style-type:none;      
实心圆，默认类型          list-style-type:circle;
空心圆                    list-style-type:circle;
实心正方形                list-style-type:none;
数字                      list-style-type:decimal

background-image属性
background-image:url(图片路径);

background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺

background-position属性
Xpx  Ypx
X%  Y%
left、center、right
top、center、bottom

background-size
auto;percentage;cover;contain;

IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
 -webkit-linear-gradient ( position,  color1,  color2,…)

example
.title {
	font-size:18px;
	font-weight:bold;
	color:#FFF;
	text-indent:1em;
	line-height:35px;
}

.title {
 background: linear-gradient(to top, orange, blue);
 background: -webkit-linear-gradient(to top, orange, blue);
 }

 /*background: linear-gradient(to bottom left, orange, blue);*/
 /*background: -webkit-linear-gradient(to bottom left, orange, blue);*/