一：内联样式（内联标签）
<h1 style="color:red">红色标签</h1>
开始标签加style叫内联样式表
内部样式表（内嵌）
head内
<style type="text/css">
仅限于本网页
外部样式表
<link rel="stylesheet" href="../css/测试网页.css">
二，选择器
ID选择器 选择器前面有一个 # 号
HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身
为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值
如：<h1 class="important">This heading is very important.</h1>
href 属性的锚（a 元素）应用样式：a[href] {color:red;}
假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
后代选择器
对 h1 元素中的 em 元素应用样式
h1 em {color:red;}
<h1>This is a <em>important</em> heading</h1>
子元素选择器
只作为 h1 元素子元素的 strong 元素
h1 > strong {color:red;}
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
相邻兄弟选择器
选择紧接在另一个元素后的元素，而且二者有相同的父元素
增加紧接在 h1 元素后出现的段落的上边距
h1 + p {margin-top:50px;}
兄弟选择器使用了加号（+）
伪类元素
first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解，所以有必要举例来说明
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素
最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
三：css样式
背景 文本 字体
body {background-image: url(/i/eg_bg_04.gif);}
如果需要设置一个背景图像，必须为这个属性设置一个 URL
可以利用 background-position 属性改变图像在背景中的位置。
body
{
background-image:url(‘/i/eg_bg_03.gif‘);
background-repeat:no-repeat;
background-position:center;
背景：size,color,position定位：（center，top，bottom），，repeat重复，（no-repeat） image-url接地址
background-img:url<接地址>
文本：缩进 text-indent（正值，负值）
对齐 text-align 左右中间
装饰decoration（none，unline）
字体：size大小，wight加粗
三：权重值
内联>内部=外部
内联<style> 1000
ID<#> 0010
类，伪类<.名称/：hover> 0010
元素<h1,p,div,> 0001
*通配器 子元素> 相邻元素 0000
同等情况下.算法不能进位
**总结**
一.
css尺寸
CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。
height，line-height（行高），width...
list-style：none表示取消别表其标志
要修改用于列表项的标志类型，可以使用属性 list-style-type：
常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
text-align：文本对齐 center中间水平对齐X轴
vertical（垂直)-align：文本对齐 middle垂直对齐（行内元素对齐）
这个属性会设置单元格框中的单元格内容的对其方式、
在使用vertical-align时需要配合line-height
outline=border
input{outline：1px solid red；）
input="button‘ value=“我是一个按钮”
框模型
内边距、边框和外边距都是可选的，默认值是零
许多元素将由用户代理样式表设置外边距和内边距
一般需要设置* {
margin: 0;
padding: 0;
}
外边距—（margin）可以是负值，而且在很多情况下都要使用负值的外边距
内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边
CSS定位
一切皆为框
div、h1 或 p 元素常常被称为块级元素
span 和 strong 等元素称为“行内元素”，
通过将 display 属性设置为 block
转换行内和块级元素
display：inline 块元素转为行内元素
display：block 行内元素转为块元素
元素浮动
float 属性实现元素的浮动
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
元素溢出
overflow
hidden 内容会被修剪，并且其余内容不会显示
sroll 内容会被修剪，浏览器会显示滚动条以便看其余内容。右边以及下边都有滚动条
auto 内容会被修剪，浏览器会显示滚动条以便看其余内容。右边有滚动条
position定位
stratic 静态 没有定位
relative 相对 偏移
absolute 绝对
fixed 固定
例：position：relative
top：0px；left：0px
原文：http://www.cnblogs.com/ai6962204/p/5326623.html