在css中，html的标签元素大概分为三种不同的类型：块状元素、内联元素（行内元素）、内联块元素。
每一个元素都有一个display属性，块级元素默认属性值为block，它们独占一行，可设置宽高。内联元素的display默认值为line,
没有自己的独立空间，是依附于其他块元素而存在的。
常见的块状元素有：<div>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ol>、<ul>、<dl>、<table>、<adress>、<blockquote>、<form>
常见的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<textarea>、<var>、<cite>、<code>
常见的内联块元素有：<img>、<input>
引用CSS有三种方式：使用外部样式表、使用内部样式表、使用行内样式表。
- 使用外部样式表：在css独立文件中，放在head标签里，用link引用。
<head> ???<link rel="stylesheet" href="main.css"></head>
特点：实现了内容结构与表现形式代码分离，方便复用和维护。使代码更加纯净，有利于程序员和搜索引擎的阅读。且为开发页面的常见做法
- 使用内部样式表：写在head里面的style标签中。
/*把所有h1标签的字体设为红色*/<head> ???<title></title> ???<style type="text/css"> ???????h1{ ?????????????color:red; ?????} ?????</style></head>
特点:某些时候可以提高效率，但多个页面难以共享，混杂且不适合阅读。在某些时候对效率要求苛刻或测试的场景下使用。 - 使用行内样式表:写在元素的style属性里，不写选择器。
<head></head><body> ???<p style="color:red;"></body>
特点：可以提升效率。但难以共享，不利于重复使用。也不利于阅读。Javascript操作是行内样式，在测试的场景下使用。
CSS术语
- css注释：/* 注释内容*/
- css规则
h1{ ???color:red; ???text-align:center;}
h1为选择器（应用哪些元素），“{}”里为声明块， color和text-align为声明，冒号后面为属性值。每个声明之间必须用分号“；”隔开。选择器分为：元素选择器、类选择器、id选择器
- 元素选择器 标记名{/*声明块*/}
所有与该标记匹配的元素，都将应用生命块中的规则。如：p{ ?font-size:18px; ?????}所有p标签里的文字字体大小都为18px - 类选择器 .类名{/*声明块*/}
在元素的class属性中设置类名，所有指定相同类名的元素都将应用声明块中的规则。
<p class="bigfont"> ??????内容</p>.bigfont{ ???????????font-size;18px; ???????}- ID选择器 #id值{/*声明块*/}
<p id="a"> ????内容</p>#a{ ????color:red;} - 组合/并集选择器
h1,h2,h3{ ??????color:red;} - 伪类选择器
a:linka:visiteda:hovera:active
- 后代选择器 父级选择器名称+空格+子集元素名称{/*声明块*/}
div p{ ??color:red;} - 子代选择器 父级选择器名称+">"+子集元素名称{/*声明块*/}
div>p{ ???color:red;} - 属性选择器
- 格式一 元素名称[属性名称+属性值]{/*声明块*/}
<input type="text"> ???input[type="text"]{ ???color:red;} - 格式二 元素名称[属性名称+"^="+属性值]{/*声明块*/}
/*选择包含以属性值“si”开始的元素*/
input [name^="si"]{ ?????????color:red;} - 格式三 元素名称[属性名称+"$"+属性值]{/*声明块*/}
/*选择包含以属性值“chuan”结束的元素*/
input [name$="chuan"]{ ?????????color:red;} - 格式四 元素名称[属性名称+"*="+属性值]{/*声明块*/}
/*选择包含属性值里有“m”的元素*/
input [name*="m"]{ ?????????color:red;}
初识css
原文地址：http://www.cnblogs.com/Jialing825/p/7634226.html