CSS

一. CSS：

1. 在标签上设置style属性：

background-color: #FFA000;

height: 48px;

2. 写在head里面，style标签中写样式：

CSS选择器

（1）id选择区：(用的少，了解）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color:#FFA000;
            height:48px;
            /*样式复用*/
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i1"></div>
    <div id="i1"></div>
     /*但是id不能重复，矛盾了，怎么办*/
</body>

（2）class选择器：（推荐使用）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color:#FFA000;
            height:48px;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c1"></div>
    <div class="c1"></div>
</body>

　　注：注释：（/* */）

(3)标签选择器：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{           
            background-color:#FFA000;
            height:48px;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c1"></div>
    <div class="c1"></div>
</body>注：所有的div都用了定义的格式

(4) 关联选择器：（层级）

只有span下的div应用了格式。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span div{
            background-color:#FFA000;
            height:48px;
        }
    </style>
</head>
<body>
    <div class="c1">lasi</div>
    <span class="c1">
        <div>
            zhangsan
        </div>
    </span>                  
    <div class="c1">wagnmazi</div>
</body>

　　（5）层级选择器：空格

.c1 span a p{ } : .c1下的span下的a下的p标签，各级标签之间用空格。

（6）组合选择器：逗号

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{
            background-color:#FFA000;
            height:48px;
            /*样式复用*/
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2"></div>
    <div id="i3"></div>
</body>

　　（7）属性选择器

对选择到的标签在通过属性进行一次筛选。

ps:优先级：标签上style优先，其次按代码编写顺序；

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #FFA000;
            color: red;
        }
        .c2{
            font-size: 28px;
            color: black;
        }
    </style>
</head>
<body>
<div class="c1 c2" >zhagnsan</div>
</body>

　　补充：css样式也可以写在单独的文件中，提高复用性（优先级同上）

3.注释

4.边框
宽度，样式，颜色，上下左右（每个属性之间用分号隔开）：

height：高度（数字，百分比（单独使用时无用））

width：宽度（宽度，百分比）

line-height自适应居中（垂直方向根据div大小居中）:

text-align:center :水平方向居中

color:颜色

font-size:字体大小

font-weight:字体加粗

  <div style="border:1px solid red;" >zhagnsan</div>

  <div style="border-bottom:1px solid red;" >zhagnsan</div>

5.背景

6. float（****重点***）

让标签浪起来，块级标签也可以堆叠：

代码见CSS中s6>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height:38px;
            background-color: #dddddd;
            /*灰色*/
            line-height: 38px;
        }
    </style>
</head>
<body style="margin: 0 auto">
    <div class="pg-header">
        <div style="float: left;">收藏本站</div>
        <div style="float: right;">
            <a>登陆</a>
            <a>注册</a>
            <a>搜索</a>
        </div>
    </div>
    <div style="width:300px;border: 1px solid red;">
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">1</div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">2</div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">3</div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">4</div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">5</div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">6</div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">7</div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">8</div>
        <div style="clear: both;"></div>
        <!--父子（红色边框）与儿子（绿色边框）的边框不冲突，注意这个坑-->
        <!--div中可以嵌套div，里面的儿子可以飘（float）起来，飘起来之后，老子就管不住了，可以内部最后用<div style="clear: both;"></div>去调整；-->
    </div>
</body>
</html>

示例2：

<body>
     <div style="width: 20%;background-color: red;float: left">zhangsan</div>
     <div style="width:60%;background-color: green;float: left">xiaolaizi </div>
</body>

效果如下：

7.display 用的也较多

块级转行内，行内转块级标签

display:inline; 块级转行内

display:block; 内联变块级

display:none; 让标签消失

注：行内标签无法设置高度，宽度，padding margin;

那么可以做一些结合：

display:inline-block; 具有inline属性，默认自己有多少占多少，

又具有block属性，可以设置无法设置高度，宽度，padding，margin

转前：

<body>
     <div style="background-color: red;">ziyu</div>          #div默认块级标签
     <span style="background-color: blue;">xiaolaizi</span>  #span默认行内标签
</body>

效果：

转后：

<body>
     <div style="background-color: red;display: inline">ziyu</div>
     <span style="background-color: blue;display: block">xiaolaizi</span>
</body>

效果：

8.padding margin(0,auto) 边距

内边距：padding

外边距： margin

9.text-align

10.height width line-height color font-size font-weight

==================================================================

小结：

1. CSS重用

同一行有多种样式：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{

        }
        .c2{

        }
    </style>
</head>
<body>
    <div class="c1 c2"></div>
     <!--同一行有多种样式-->
</body>

2. 改变大小变形

（1）左右滚动条的出现

（2）宽度的设置有两种：数字px

百分比

解决：在页面最外层设置像素的宽度=>最外层设置绝对宽度

3. 自适应

media属性

4.img默认标签，有一个1px的边框

解决：设置border为0即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            border:0;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">
        <img src="1.jpg" style="width:200px;height: 300px;"/>
    </a>
     <!--用谷歌打开没问题，用ie打开出现蓝色的边框（ie浏览器会出现的问题)，加border可以解决-->
        <!--<style>-->
        <!--img{-->
            <!--border:0;-->
        <!--}-->
    <!--</style>-->

</body>
</html>

==========================================================================================

二. CSS：

1.position （有了层的概念）（15章s3文件）

1)、 position:fixed => 固定在页面的某个位置（墙上贴张纸，纸上贴张画的功能）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color: orange;
            position: fixed;
            top:0px;
            right: 0px;
            left: 0px;
            /*左面等于0，右面等于0可满足头部占满一行*/
        }
        .pg-body{
            margin-top: 48px;
            /*身体部分离顶部48px(头部的大小)，可避免头部压盖身体部分。*/
            height: 50000px;
            background-color: #888888;
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
    <!--头部会挡住内容怎么办？-->/*身体部分离顶部48px(头部的大小)，可避免头部压盖身体部分。*/

 </body> </html>

2）、position:absolute (一锤子买卖，常与relative一起使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="position:relative;width:500px; height:200px;border: 1px solid red;margin: 0 auto;">1
        <div style="position: absolute;left: 0;bottom:0;width: 50px;height: 50px;background-color:gray;">11</div>
        <!--依据父标签进行相对定位-->
    </div>

    <div style="position:relative;width:500px; height:200px;border: 1px solid red;margin: 0 auto;">2
        <div style="position: absolute;right: 0;bottom:0;width: 50px;height: 50px;background-color:gray;">22</div>
    </div>

    <div style="position:relative;width:500px; height:200px;border: 1px solid red;margin: 0 auto;">3
        <div style="position: absolute;right: 0;top:0;width: 50px;height: 50px;background-color:gray;">33</div>
    </div>
</body>
</html>

效果：应用场景示例：

3）、三层样式

opacity: 透明度设置；

z-index: 层级顺序；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="z-index:10;position: fixed;top: 50%;margin-top: -200px;left:50%;margin-left:-250px;background-color:white;height:400px;width:500px;opacity: 0.7 ">第三层</div>
       <!--z-index:10 控制图层的顺序，谁的值大，谁在上一层-->
        <!--top: 50%/left:50%:让框居中，但是是以左上角顶点居中的，为了让整个框居中，再以框的大小的一半像素平移，即margin-top: -200px;margin-left:-250px;-->
    <div style="z-index:9;position: fixed;background-color: yellowgreen;top: 0;bottom: 0;left: 0;right: 0;opacity: 0.5 ">第二层</div>
    <!--opacity:设置当前的透明度-->
    <div style="z-index:8;height: 5000px;background-color: green">底面：第一层</div>
</body>
</html>

效果;

2、overflow

1）、当图片比设置的框大的时候，会撑开框，为了是图片在框内显示：

overflow：hidden->超过框的不显示；（也就意味着只能看到图片的部分）

overflow：auto->在设置的框内出现滚动条，通过滚动条查看全图；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 200px;width: 300px;overflow: hidden">
        <img src="1.jpg">
    </div>
</body>
</html>

2）、一定需要看到整张照片呢，则可以把照片的大小和框的大小设置为一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 200px;width: 300px;">
        <img src="1.jpg" style="height: 200px;width: 300px;" />
    </div>
</body>
</html>

3. hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 48px;
            background-color: #2459a2;
            line-height: 48px;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }
        /*当鼠标移动到当前标签上时，以下css属性才生效*/
        .pg-header .menu:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="w"></div>
    </div>
</body>
</html>

效果：

4.background

1）图片背景

2）background-image:url('image/4.gif'); #默认，div比较大的时候，图片重复访

3） background-repeat：

4）background-position-x：

background-position-y：(position 抠洞原理）

background-position：10px 10px

===========================================================================================================================================================================================

综合的小示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!--span：行内标签-->
    <div style="height: 35px ;width: 400px;position:relative;border: 1px solid red;">
        <input type="text" style="height: 35px ;width: 370px;padding-right: 30px"/>
        <!--给右边留出30像素的大小放图标，把输入框大小设置为370像素，避免输入文本过长被图标遮挡（总的加起来还是整个div的大小。-->
        <span style="position: absolute;right:0;top:10px;background-image:url(i_name.jpg);height: 16px;width: 16px;display: inline-block;"></span>
    </div>
</body>
</html>

效果：

==========================================================================================================================================================================================