数往知来 CSS<十二>

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;

}