css是对html的具体的标签进行完善
css和html结合方式
1，每一个html标签中都有一个style样式属性，该属性的值就是css代码
<div style="color:red </div>
2，使用style标签的方式，一般定义在head中，先加载到内存中
<style type="text/css"> body{ margin:0px; } //id选择器 div#imgtext{ border: blue dashed 1px; height:450px; 1000px; position:absolute; top:400px; left:20px; } </style>
3，使用css的@import语句导入css文件
1 <style type="text/css"> 2 @import url(cssDemo.css); 3 </style>
其中cssDemo.css文件就是方式1中的<style>中的内容。
4，使用link链接css样式表
在<head>中加入链接语句
<link rel="stylesheet" type="text/css" href="cssDemo.css">
选择器种类
1，html标签选择器
2，类选择器 使用标签中的class属性 eg: div.class名 优先级高于div直接定义的 数量越少的优先级越高
3，id选择器 使用标签中的id属性 eg：div#id名 使用方法和类选择器一样 优先级高于类选择器
id取值在页面中是唯一的 id通常是为了标识页面中的一些特定区域时用的
4，扩展选择器
a.关联选择器：理解为目录结构即可
b.组合选择器：
c.伪元素选择器
优先级：标签选择器<类选择器<id选择器<style属性
<html> <head> <title>CssDemo.html</title> <style type="text/css"> /*标签选择器*/ div { background-color: blue; color: red; } span { background-color: purple; color: inactivecaption; } /*类选择器*/ .a1 { background-color: lime; color: window; } .a2 { background-color: blue; color: green; } /*ID选择器*/ #div_1 { background-color: blue; color: red; } /*关联选择器 选择器中的选择器 */ span b { background-color: blue; color: red; } /*组合选择器 对多种选择器进行相同样式定义*/ .a1,div b { background-color: yellow; color: threeddarkshadow; } /*伪元素选择器 超链接的状态*/ /*未选择效果*/ a:LINK { background-color: fuchsia; color: olive; text-decoration: none; font-size: 18px; } /*鼠标悬停效果*/ a:HOVER { background-color: window; color: maroon; font-size: 20px; //文字的默认大小是16px } /*点击效果*/ a:ACTIVE { background-color: windowframe; color: threedhighlight; font-size: 24px; } /*访问后效果*/ a:VISITED { background-color: menu; color: blue; } div:HOVER { background-color: window; color: aqua; } </style> </head> <body> <hr/> <a href="">伪元素选择器演示</a> <hr/> <div id="div_1">ID选择器区域</div> <div>这是div<b>区域</b>1</div> <div>这是div区域2</div> <div class="a1">这是div3区域</div> <div class="a1">这是div4区域</div> <span>这是span<b>区域</b>1</span> <span class="a1">这是span区域2</span> <br/> <p>这是段落1</p> <p class="a1">这是段落2</p> </body> </html>
overflow属性：超出给定范围的部分的显示方式
visible：可见
auto：
hidden：
scroll：
display属性
none：不显示
block：显示，长度不够自动换行。
待续。。。。。。