2.CSS

初识CSS

什么是css：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

选择器

1.标签上直接设置style属性

<p style="color: red">直接标签里面写</p>

2.id选择器

    <style>
        #i1{
            color: green;
        }
    </style>
</head>
<body>
    <p id="i1">以#开头命名</p>

</body>

3.class选择器

<style>
        .c1{
            color: green;
        }
    </style>
</head>
<body>
    <p class="c1">以点开头命名</p>
</body>

4.标签选择器

<style>
        p{
            background-color: red;
        }
    </style>
</head>
<body>
    <p >以标签命名</p>

</body>

5.关联选择器（层级选择器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*中间用空格隔开*/
        span div{
            background-color: red;
        }
    </style>
</head>
<body>
   <div>第一层</div>
        <span>
            <div>span里面的div添加样式</div>
        </span>
    <div>第二层</div>
</body>
</html>

6.组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*中间用逗号隔开*/
       h1,h2,h3{
           background-color: #dddddd;
       }
    </style>
</head>
<body>
    <h1>第一个</h1>
    <h2>第二个</h2>
    <h3>第三个</h3>
</body>
</html>

7.属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       input[name="derek"]{
           width: 20px;
           height: 20px;
       }
    </style>
</head>
<body>
    <input type="text" name="derek">
    <input type="password" name="pwd">
</body>
</html>

根据属性进行筛选匹配，只有name="derek"的input标签才匹配上对应的样式

引用方法

1.样式优先级

优先级

style优先级最大，其它的按编写顺序，越靠近越优先

2.外部样式引用方法

<link rel="stylesheet" href="common.css">

边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 48px;   #边框高度
            width: 80%;
            border: 1px dotted black;    #边框宽度 样式 颜色
            font-size: 30px;             #字体大小
            line-height: 48px;           #设置跟边框高度值一样，里面的字会垂直居中
            text-align: center;          #水平居中
        }     
    </style>
</head>
<body>
    <div style="border: 1px solid red">第一个边框</div>
   <div class="c1">第二个边框</div>

</body>
</html>

浮动（float）

默认块级标签会独占一行，用float可以让块级标签浮动在一起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 20%;
            background-color: red;
            float: left;
        }
        .c2{
            width:60%;
            background-color: black;
            float: right;
        }
    </style>
</head>
<body>
    <div class="c1">左边</div>
    <div class="c2">右边</div>

</body>
</html>

float实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 38px;
            background-color: #dddddd;
            line-height: 38px;
        }
        .c2{
            width: 98px;
            height: 30px;
            border: 1px solid green;
            float: left;
        }
    </style>
</head>
<body style="margin: 0 auto">
    <div class="pg-header">
        <div>收藏本站</div>
        <div>
            <a>登陆</a>
            <a>注册</a>
        </div>
    </div>
    <div style="width: 300px;border: 1px solid red;">
        <div class="c2"></div>
        <div class="c2"></div>
        <div class="c2"></div>
        <div class="c2"></div>
        <div class="c2"></div>
        <div style="clear:both"></div>
    </div>

</body>
</html>

注：<body style="margin: 0 auto;">消除与浏览器顶部之间的缝隙；<div style="clear: both"></div>子边框浮动后，显示父边框的边框线

display

<body>
    <!--改成行内标签-->
    <div style="display: inline; font-size: 12px !important; line-height: 1.5 !important;">>1</div>

    <!--改成块级标签-->
    <span style="display: block; font-size: 12px !important; line-height: 1.5 !important;">>2</span>

    <!--inline-block具有inline，默认自己有多少占多少-->
                <!--具有block,可以设置高度，宽度，padding,margin-->
    <span style="display: inline-block; font-size: 12px !important; line-height: 1.5 !important;">>3</span>

    <!--默认不显示-->
    <div style="display: none">不显示</div>

</body>

边距

1.外边距margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            border: 1px solid red;
            height: 70px;
        }
        .c2{
            background-color: green;
            height: 50px;
            /*margin-top: 25px;*/
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2"></div>
    </div>

</body>

</html>

注：margin-top：25px表示外边距，子边框与父边框top之间的距离为25px

2.内边距padding

padding

注：padding-top：25px表示内边距，子边框内自己与top之间的距离为25px

position

1.position:fixed

-->固定在页面的某个位置

返回顶部

2.让头部标题栏固定不动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color: #dddddd;
            /*固定不动*/
            position: fixed;
            top: 0px;
            left: 0px;
            right: 0px;
        }
        .pg-body{
            height: 5000px;
            margin-top: 50px;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>

</body>

</html>

3.实现三层

z-index -->层级顺序

opticy -->透明度（0~1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            z-index: 10;
            position: fixed;
            /*让最外面一层的div居中*/
            top: 50%;
            left: 50%;
            height: 400px;
            width: 500px;
            margin-left: -25px;
            margin-top: -20px;
            background-color: black;
        }
        .c2{
            z-index: 9;
            position: fixed;
            background-color: black;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            opacity: 0.5;
        }
        .c3{
            height: 5000px;background-color: red;
        }
    </style>
</head>
<body style="margin: 0 auto">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>

</body>

</html>

overflow

1.over:auto

-->超出范围则出现滚动条

<div style="height: 200px;width: 140px;overflow: auto;">
        <img src="fanye.jpg" />
    </div>

2.over:hidden

-->超出范围则隐藏

<div style="height: 200px;width: 140px;overflow: hidden;">
        <img src="fanye.jpg" />
    </div>

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;
        }
        .u{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding:0 10px;
            color: white;
        }
        /*鼠标移动到当前标签上面时，以下css属性才生效*/
        .pg-header .menu:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <a class="logo">logo</a>
        <a class="menu">全部</a>
        <a class="menu">42区</a>
        <a class="menu">段子</a>
    </div>
    <div class="pg-body">
        <div class="u">正文</div>
    </div>
</body>
</html>

background-image

background-repeat有四个属性repeat（默认，重复占满）,no-repeat（不重复）,repeat-x（只横着重复放）,repeat-y（只竖着重复放）

background-position-x表示看背景图片的窗口水平方向想右移动，background-position-y表示看背景图片的窗口垂直向下移动

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-image: url('fanye.jpg');
            height: 700px;
            width: 700px;
            border:1px solid red;
            background-repeat: no-repeat;
            background-position-x:100px;
            background-position-y:100px;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

上面的可css简写成

<div style="background:url('fanye.jpg') 100px 100px no-repeat;height: 700px;width:700px;border:1px solid red;"></div>

posted on 2018-11-18 10:10 Anderson_An 阅读(190) 评论(0) 编辑收藏举报

刷新页面返回顶部

Anderson_An