div+css基础
一、外部样式<!--外部样式可以使网页与样式分离，分工处理
1、写网页，主要提供内容，一般都会有固定的结构，具有id等属性的标签包括特定的内容
2、根据结构写样式另存为css后缀文件
3、在html页中的head标签中加入样式表
<link type="text/css" rel="stylesheet" href="sss.css">
-->
<p id="p2">外部样式
</p>
<!--样式可以针对任何元素，学习使用div来学习-->
<div style="color:red;background-color:blue;width:200px;height:200px;font-size:50px;font-family:仿宋；
text-align:center">
哈哈我又变帅了
</div>
--》要写样式的时候，用什么格式
属性：值;
--》学习属性，查、使用
二、标签选择器
使用内嵌样式或外部样式
标签名{
//样式
}
凡是定义了标签悬着器的标签，都具有相同的样式
--》类选择器
1、定义语法
.类名{
//样式
}
如果需要使用在需要具备该属性的标签中加上一个class属性，值 就是该属性的类名
--》id选择器
1、定义语法
#id号{
//样式
}
在要使用的地方加上id 属性即可
注意：使用的时候id只能有一个，而class可以有多个,对于三个选择器的使用，有一个规范
1.同一的样式用标签
2.不同的样式用类
3.独有的样式用id（常常与JS一起 用）
2、选择器的声明
--》集体声明
声明一个选择器，将所有需要这个属性的标记写在前面用逗号隔开
p,a,span,h1{
//样式
}
--》全局声明
使用*号开头
*{
//样式
}
--》嵌套声明
嵌套选择器可以将
--将某一张表的样式改变
#tbl tr td{
//样式
}
<table id="tbl">
<tr>
<td>
</td>
</tr>
</table>
--》伪选择器 （目前只能用在A标签上）
就是给一个标签，的某个状态添加样式的方法
语法：
标签：状态{
//样式
}
link 表示放上去以后
visited 点击以后
active 点击的时候
hover 鼠标放上去的时候
a:link,a:active{
font-size:30px;
color:blue
text-decoration:none;
}
a:hover{
font-size:30px;
text-decoration:underline; color:red;
}
a:active{
font-size:30px;
text-decoration:none;
color:green；
font-family:华文行楷；
}
四、文档流、定位
文档流就是从左往右从上到下的堆砌
position:fixed 脱离文档流
-->相对定位 absolute
相对定位脱离文档流，可以根据坐标定位带任何地方，位置只会停留在改变之前的地方，随着滚动条的拖动也会向上向下偏移。
#myid1{
border:1px solid;
border-color:red;
width:80px;
height:50px;
background-color:pink;
position:absolute;
right:0em;
bottom:0em;
}
--》绝对定位 fixed
绝对定位脱离文档流，可以根据坐标定位到任何地方，但是改变浏览器的时候需要js来控制,
不管滚动条怎么拖动其位置也不会改变
#myid1{
border:1px groove red;
background-color:orange;
width:100px;
height:50px;
position:fixed;
left;0px;
bottom:0px;
}
-->relative
坐标会根据脱离文档流之前的位置偏移。
#myid4{
border:1px outset cyan;
background-color:azure;
width:150px;
height:100px;
position:relative;
left:100px;
top:100px;
}