css和html相结合的第一种方式:
1,每一个html标签中都有一个style样式属性,该属性就是css代码
例:<div style="color:#F00">这是一个div区域</div>
2,使用style样式属性,该属性的值就是css代码。一般定义在head标签中,首先加载
例:<style type="text/css">
div{
color:#F23;
}
</style>
3,将上面style标记里的内容写在文件div.css中,再导入。div.css放在同一个文件夹中
<strle type="text/css">
@import url(div.css);
</style>
4.直接导入css样式
<link rel="stylesheet" href="div.css" />(rel表示与页面的关系)
css代码格式:
选择器名称{属性名:属性值;属性名:属性值;...}
1,html标签选择器
2,class选择器
例:div.biaoqian{}只适用于<div class="biaoqian">div区域1</div>
.biaoqian{}适用于所有的<class="biaoqian"></>
3,id选择器(id值在页面中是唯一的,id通常都是为了去表示页面的一些特定区域使用的)
例:div.#id1{}只适用于<div id="id1">div区域2</div>
#id2{}适用于所有的<id="id2"></>
优先级:html标记 < class选择器 < id选择器标记 < 标记内属性
4,扩展选择器
1,关联选择器(选择器中的选择器)
例:div b {}只适用于<div><b></b>此区域</div>
2,组合选择器(对多个标签都这样设置)
例:body,div,{background-color:#36F;color:#F23;}
3,伪元素选择器
例:超链接的状态
a:link{}//未访问
a:hover{}//鼠标移到上面的效果
a:action{}//点击效果
a:visited{}//访问后效果
p:first-line 段落的第一行文本
p:first-letter{}段落中的第一个字母
input:focus具有焦点的元素