HTML中的CSS

CSS是什么？
层叠样式表，用来设置内容样式的;
   目的:
把网页的样式和内容分离,便已维护代码


css和html的结合方式的四种方式（常用第三种）：
第一种：使用html标签里面的属性 style="css的代码"
* 代码 <div style="background-color:red;color:blue;">
第二种：使用html的标签 ，写在head里面
* <style type="text/css">
css的代码;
 </style>
第三种：使用html标签实现  link，写在head里面
* 代码 <link rel="stylesheet" type="text/css" href="1.css"/>
第四种：使用html的style标签，在标签里面使用语句样式操作，写在head里面
<style type="text/css">
@import url(1.css);
</style>


css的选择器：
第一个：标签选择器
** 使用标签名称作为选择器
div {
   background-color: red;
}


第二个：class选择器
** 每个html标签上面都有一个属性class，通过设置class属性的值
** 代码 
.haha {
background-color:red;
}


第三个：id选择器 (id是唯一的)
** 每个html标签都有一个属性id，通过设置id的属性值
** 代码
#hehe {
background-color:green;
}


（4）选择器的优先级
* style > id选择器 > class选择器 > 标签选择器
css的扩展选择器：
div,p 选择所有 <div> 元素和所有 <p> 元素 （并列关系）
div p 选择 <div> 元素内部的所有 <p> 元素 （父的子子孙孙）
div>p 选择父元素为 <div> 元素的所有 <p> 元素 （父子）
div+p 选择紧接在 <div> 元素之后的所有 <p> 元素  （并列，有条件限制）

通常input和table一起使用，input写在td标签中
td input {width:200px;height:30px} 可以设置input输入框的大小


伪元素选择器（了解）
* 比如超链接为例，
* 状态：原始状态、鼠标放上去的状态、点击状态、点击之后的状态
:link       :hover          :active      :visited