(1) 可以将css样式编写到head中的style标签里，将样式表编写的style标签中，然后通过css选择器选中指定元素

<style   type="text/css">

p{

color:red;

font-size:40px;

}

(2)还可以将样式表编写到外部的css文件中，然后通过link标签来将外部的css文件引入当前的页面中。

<link  type="text/css"  href="http://www.mamicode.com/style.css">    前两个不改，只改后一个（为   设置内容的位置）

2、块元素和内联

（1）块元素<div>标签（独有一行元素，主要对页面进行构造的）

p、h1、h2、h3.....也是块元素

（2）span是一个内联元素（只占自身巨细，不会独有一行，专门用来选中文字，设置样式）

a、img、igrame、span

3、常用选择器

（1）元素选择器（可以选择页面中所有指定元素）语法：标签名{  }

（2）id许选择器（通过id属性值选中独一的元素）  语法：#id属性值{  }

class属性类似id属性，但是class属性可以反复（通过元素class属性值选中一组元素）    语法：  .class属性值{}

同时为一个元素设置多个class属性，多个值之间使用空格离隔

（3）选择器分组（可以同时选中多个选择其对应的元素）语法：选择器1，选择器2，选择器n{   }

（4）通配选择器（选择页面中所有的元素）语法：*{}

p { color:blue; font-size:40px; } #p1{ color:green; } .p2{ color:red; } .p3{ font-size:50px; } <p>这是css学习</p> <p>这是css学习</p> <p>这是css学习</p> <p>这是css学习</p>

4、伪类选择器（专门暗示元素的一种特殊状态，例如访谒过的超链接、普通链接、获取焦点的文本框）

正常链接：a：link        访谒过的链接： a：visited(只能界说字体颜色) 

鼠标划过的链接：a：hover        正在点击的链接：a：active

a:link{  color:yellow;}

<a href="#">正常链接</a>

a:visited{  color:red;}

<a href="#">访谒过的链接</a>

(1) input（创建文本框文本框）   focus(文本框获取焦点)

input：focus  {  background：yellow;    }

<input type="text"/>

(2)selection（为p标签中选中的内容使用样式）

p：：selection{   background-color：yellow;}

(3)伪元素

first-letter（为标签中第一个元素设置特殊样式）

first-line（为标签中第一行设置特殊样式）

before（暗示元素最前边的部分，一般都需要结合content这个样式一起使用，通过content可以向befor或after的位置添加一些内容）

after（暗示元素最后边的部分）

例如：为p标签中第一个字符设置一个特殊样式

p:first-letter{  color:red;    }

<p>我是一个段落</p>

5、属性选择器(可以按照元素的属性或属性值来拔取指定元素)语法：

[属性名]拔取含有指定属性的元素    例如：p[title=hello]{   color=red；  }

[属性名=“属性值”]拔取含有指定属性值的元素

[属性名^=“属性值”]拔取属性值以指定内容开头的元素

[属性名$=“属性值”]拔取属性值以指定内容j结尾的元素

[属性名*=“属性值”]拔取属性值包罗指定值的内容的元素

title属性（可以给任何标签指定，，当鼠标移入到元素上时，title属性值会作为提示文字显示）   语法：<p title="hello">我是一个段落</p>

6、子元素的伪类

：first-child 可以选择中第一个子元素   语法：   p：first-child{    }

：last-child  可以选择最后一个子元素

：nth-child 可以选择任意一个子元素      语法：  p：nth-child（1、3、...n、odd、even）{   }    odd暗示奇数的子元素，even暗示偶数的子元素

：first-of-type   ：last-of-type这些与 ：first-child类似，只是child是在所有的子元素中摆列而type在当前类型的子元素中摆列