CSS引入方式
CSS一共有四种引入方式
（1）最简单的两种方式是直接在html标签里面引入，或者在html文件前面声明，以下是简单的代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{background-color:red;
color: black}
</style>
<!--这里是修饰所有的P标签里面的内容，这是引入方法的一种-->
<style>
div{background-color:chartreuse;
color: coral}
</style>
</head>
<body>
<p style="background-color: aquamarine;color: black">Jay</p>
<!--在css里面，要用分号区别各种属性,虽然这个P标签有css样式，但是文本的样式是就近原则，这是最简单的css引入方式-->
<p>Bob</p>
<div>spider
<p>我是个P</p>
</div>
<!--div里面的P标签在上面有div的样式而没有P标签样式时，按div标签的样式，否则按P标签的样式-->
</body>
</html>结果如图
2）可以用导入方法
先创建一个stylesheet文件，也就是css文件，在里面编辑好css样式，这里如图
然后代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import "css3.css";
</style>
<p>你好，我是导入的css</p>
</head>
<body>
</body>
</html>这样关于P标签的样式就导入进去了
（4）通过link方式导入样式
这种方法跟import的就会一模一样，但是@import有数量限制，且是先等网页加载完再引入样式，如果网页足够大，则可能出现闪烁，就是漫长的无样式网页加载之后，css突然出来
而link不会出现这样的情况，他是网页主题装载前就先装载CSS的
link方式如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css3.css" type="text/css" rel="stylesheet">
<!--type声明引入的文本是css，stylesheet声明引入的是css代码块-->
<p>你好，我是导入的css</p>
</head>
<body>
</body>
</html>CSS基础选择器
Html中有三种方法可以使用CSS，而在css中，有三种基础的选择器
1、元素选择器
也叫标签选择器，即在CSS中利用标签名称来定义其外观
2、类选择器，是用点.符号开头，后面跟上一个自定义的名称，在使用时候，以HTML标签的class属性来标记
3、ID选择器，以符号#开头，后面跟上一个自定义的名称，在使用时以HTML标签的id属性来标记。
以下是几种选择器的使用实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="style.css" rel="stylesheet" type="text/css">
<!--第一种使用CSS方法，外部样式表，前提是在同一目录下-->
<title>CSS语法练习2016年1月13日</title>
<style type="text/css">
body {background-color:white} <span style="font-family: Arial, Helvetica, sans-serif;"><span style="color:#ff0000;"><!--1、利用body标签定义背景颜色为白色--></span></span>
.news {color:red} <span style="color:#ff0000;"> <span style="font-family: Arial, Helvetica, sans-serif;"><!--2、利用类选择器，自定义的名称为news--></span></span>
#p1 {color:blue} <span style="font-family: Arial, Helvetica, sans-serif; color: rgb(255, 0, 0);"><!--3、利用ID选择器，自定义的名称为p1--></span>
</style><!--第二种使用css方法，利用内部样式表style标签-->
</head>
<body style="background-color:black">
<h1 class=nwes>新闻1</p>
<p class="news">新闻2</p>
<p id="p1">另一个段落</p>
<p style="color:red">这是第三种应用CSS样式的方法</p><!--这是第三种应用CSS样式方法，即行内样式表-->
</body>
lt;/html> 复合选择器
除了单独使用这些选择器之外，CSS还可以使用复合选择器，即明确定位到哪一个标签，如在上面代码中，news前面加上P.news，即直接定位到标签P，而p1标签里面的新闻1不会改变。
CSS复杂选择器
1）父子选择器：选择器中间用空格分割 可以跨到孙子辈- - 浏览器内核从右往左判断
2）直接子元素选择器：选择器之间用>分割 不可以跨到孙子辈
3）并列选择器：用多个限制条件选中一个元素，并且不加空格写到一起，如div.demo div#demo #demo.demo .demo#demo等
4）分组选择器：选择器之间用逗号隔开，其中css样式内容这些选择器都适用。
5）伪类选择器：拿一个选择器选中一个元素后加：hover(常用，其实有很多){ } 代码块中写的css样式只在鼠标移动到此元素的时候才触发此代码块儿的功能。
选择器权重
优先级： 行间样式>id选择器=属性选择器>class>标签选择器>
id优先级高于class
使用！important置顶优先级
css权重
！important Infinity
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
1进制为 256
在复杂选择器中 权重相加来比较哪个复杂选择器权重大