样式的学习

样式表分为内联，内嵌，外部。

内联：  写在标签里面。   优点：控制精确，代码重用性差

<div style=""></div>

内嵌：一般来说是嵌在head里面。样式表里面的注释语法是  /*样式*/

优点： 代码重用性好（可以通过一个样式来控制n个标签）

缺点：控制没有内联的精确。

<style type="text/css">

</style

外部样式表：是一个单独的样式文件。（跟主页面不在同一个页面，是个另外的页面。）

优点：代码重用性最好。

缺点：控制没有内联的精确。

<link href="test.css" rel="stylesheet" 9 />

选择器：

样式表用来选择元素的。

内联  内嵌  外部中，内联的优先级最高。 id的优先级高于class的优先级

样式：

<div style="width:200px;height:200px; background-color:#36c;
 background-image"></div>
//设置的宽度为200像素，高度为200像素。背景颜色为蓝色。
//背景图设置为background-image

style="list-style:none"          //设置list-style为none的效果是将排列的前面的所有字符都取消掉。

<ol style="list-style:none">    //若将none改为inside,显示的效果为前面的序号在内容里面。将none改为outside，显示的效果为序号在内容外面。
    <li>张店</li>　　　　　　　　　//一般常用的是将内容前面的序号取消掉。设置为none。
    <li>桓台</li>
    <li>周村</li>
</ol>

将前面的序号改成图片的效果：

<ol style="list-style-image:url(%E5%A.jpeg)">       //list-style-image 可以将前面的序号变成图片
    <li>张店</li>
    <li>桓台</li>
    <li>周村</li>
</ol>

格式与布局：

<div style="width:200px; height:200px; background-color:#00F; position:fixed">  // fixed固定   相对于浏览器边框位置固定。
</div>

调节div在显示页面的位置：

<div style="width:200px; height:200px; background-color:#00F; position:fixed; top:300px; left:100px;">
</div>     //要设置div相对于要显示的页面的位置需写在前面写position:fixed; 再在后面写距离页面上右下以及左边的距离是多少。上：top  右：right 下：bottom 左：left

<div style="width:200px; height:200px; background-color:#00F; position:absolute; top:100px; left:50px">
</div>        //将position设置为absolute是绝对位置。绝对位置是相对于它自己的父级元素。 absolute与fixed的区别就是fixed是固定住的，absolute是不固定的

<div style="width:200px; height:200px; background-color:#00F; position:relative;">    //position为relative是相对位置。是相对于原来位置的移动。
</div>    //relative  相对位置是相对于自身本应该出现的地方移动 top  left也都设置为负数。

//只要设置了position，里面的div就会漂浮在其他的div上面覆盖。

//因为在网页里面所有的元素都存在默认的边界也就是含有默认的margin和padding。在布局的时候，为了防止有元素的边界出现

//在布局一开始就需要把元素自身带的margin和padding去掉。去掉的方法如下。

<title>无标题文档</title>

<style type="text/css">　　　//在给页面布局的时候一开始要设置要给所有的元素取消掉它们的margin和padding，因为优先级的缘故，如果需要边距的话可以到时候单独用id和classj加
*{ margin:0px; padding:0px;}
</style>　　　　//星号代表选中所有的元素。

</head>