1、css和html元素的整合的三种方式:
- 内部样式表 在当前页面中使用的样式
<style>
#divId2{
background-color: #0f0;
}
</style> - 内联样式表 通过标签的style属性设置样式
<div style="background-color: #f00;">你好!程序员</div>
- 外部样式表 有独立的css文件
<link rel="stylesheet" href="css/1.css" type="text/css"/>
2、选择器
- id选择器
要求:
html元素必须有id属性且有值 <xxx id="id1"></xxx>
css中通过"#"引入,后面加上id的值 #id1{...}
- class选择器
要求:
html元素必须有class属性且有值 <xxx class="cls1"/>
css中通过"."引入,后面加上class的值 .cls1{...}
元素选择器
直接用元素(标签)名即可 xxx{...}
- 派生的选择器
属性选择器★
要求:
html元素必须有一个属性不论属性是什么且有值 <xxx nihao="wohenhao"/>
css中通过下面的方式使用
元素名[属性="属性值"]{....}
例如:
xxx[nihao="wohenhao"]{....}
后代选择器
选择器 后代选择器{...} 在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式了解的选择器
- 锚伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */