码迷,mamicode.com
首页 > Web开发 > 详细

三、CSS基础(2)

时间:2020-09-12 21:41:42      阅读:45      评论:0      收藏:0      [点我收藏+]

标签:css   position   ble   上下左右   块元素   display   特性   padding   alt   

一、CSS三大特性

1. css层叠性

层叠性是指多种CSS样式的叠加,如果出现样式冲突,会按照CSS书写的顺序,以最后的样式为准。

2. css继承性

书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。

3. css优先级

 

二、CSS盒子模型

1. 盒子边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        /*盒子边框:border (border-width | border-style | border-color)*/
        div {
            width: 100px;
            height: 100px;
            border-width: 1px;
            border-color: pink;
            border-style: solid;   /* none | hidden | dotted 点线| dashed 虚线| solid 实线| double 双实线*/

            /*border: 1px solid pink; 连写*/
        }

    </style>
</head>
<body>
    <!-- div是一个典型的盒子 -->
    <div></div>   
</body>
</html>

2.盒子内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div {
            /*注:padding会撑开带有 width 和height的盒子,若父盒子给定了宽度,则会撑开,若子盒子没有给定宽度,用的默认的,则不会撑开*/
            width: 80px;  /*实际宽度 100px*/
            height: 30px; /*实际高度 50px*/
            border: 1px solid pink;
            /*盒子内边距padding(设置上下左右的边距)*/
            padding: 10px;
        }
        a {
            height: 26px;
            background-color: #ccc;
            display: inline-block;
            line-height: 26px;
            text-decoration: none;
            color: #fff;
            /*内边距:padding-top、padding-bottom、padding-left、padding-right*/
            padding: 2px; /*不方便给宽度时可以使用padding*/
        }

    </style>
</head>
<body>
    <div>文本信息</div>
    <a href="#">首页</a>
    <a href="#">移动客户端</a>
</body>
</html>

3. 盒子外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 5px;
            border: 1px solid pink;
        }

    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

4. 嵌套块元素垂直外边距合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
    /*嵌套块元素垂直外边距合并 解决方案
    1. 为父元素定义1px的上边框或上内边框(会增大盒子,一定要减去边框距离)
    2. 为父元素添加 overflow:hidden*/
        .father {
            width: 100px;
            height: 50px;
            background-color: pink;
            /*border: 1px solid pink;*/
            overflow: hidden;
        }
        .son {
            width: 50px;
            height: 30px;
            background-color: gray;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

5. 盒子居中对齐、圆角、阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 0 auto;   /* 盒子水平居中的常用写法,上下是0, 左右auto*/
            border: 1px solid pink;
            text-align: center;  /*让盒子内容如文字、行内元素、行内块元素、居中对齐*/

            /*盒子圆角*/
             /*border-radius: 100%;  盒子宽高相同时,100%则表示一个圆*/
             border-radius: 10px;   /*或指定圆角半径*/
             /*border-radius: 10px 15px 20px 25px;  或分别指定四个圆角的半径*/

             /*盒子阴影:h-shadow水平阴影的位置,允许负值(必需);v-shadow 必需;blur 模糊距离(可选);spread 阴影的尺寸(可选);color 阴影的颜色(可选);inset将外部阴影outset改为内部阴影(可选)*/
             box-shadow: 2px 2px 20px 2px pink;
        }
    </style>
</head>
<body>
    <div>盒子内容</div>
</body>
</html>

6. 盒子浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div {
            /*浮动 left | right | none:可以使多个块元素如div在一行展示;可以让元素默认转换为行内块元素*/
            float: left;
        }
        .up {
            width: 100px;
            height: 50px;
            background-color: pink;
        }
        .down {
            width: 120px;
            height: 70px;
            background-color: gray;
            float: right;
        }
    </style>
</head>
<body>
    <div class="up"></div>
    <div class="down"></div>
</body>
</html>

三、CSS练习

1. 背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
/*        body {
            背景颜色
            background-color: pink; 
            背景图片:body中的内容将显示在背景图片之上
            background-image: url(baidu.png);  
            是否平铺:默认repeat背景图像在纵向和横向上平铺|no-repeat背景图像不平铺|repeat-x背景图像在横向上平铺|repeat-y背景图像纵向平铺 
            background-repeat: repeat-y;
        }
*/
/*        div {
            width: 500px;
            height: 5000px;
            background-color: purple;
            background-image: url(baidu.png);
            background-repeat: no-repeat;
            背景图片平铺位置:水平、垂直,可以跟方位名词 top、bottom、right、left、center,也可以跟实际px值
            background-position: center top;
            设置背景图片是否随滚动条滚动:scroll|fixed
            background-attachment: fixed;
        }*/
        div {
            width: 500px;
            height: 5000px;
            /*背景相关属性简写:书写顺序无严格要求*/
            background: transparent url(baidu.png) repeat-y scroll 50% 0;
        }
    </style>
</head>
<body>
    <div>
        
    </div>
</body>
</html>

2. 购物车

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        a {
            width: 100px;
            height: 80px;
            background: url(test.png) no-repeat;
            display: block;
        }
        a:hover {
            background-position: left bottom;   /*鼠标经过时切换背景图片对齐方式:即切换为登录*/
        }
    </style>
</head>
<body>
    <a href="#"></a>
</body>
</html>

3. 背景半透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        body {
            background-color: pink;
        }
        div {
            width: 200px;
            height: 500px;
            color: #fff;
            /*设置背景透明度:red、green、blue、alpha(透明度 0-1)*/
            background: rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4. 表格细边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        table {
            width: 100px;
            height: 50px;
            border: 0.5px solid black;
        }
        td {
            border: 0.5px solid black;
            text-align: center;
        }
        table, td {
            border-collapse: collapse;  /* 合并表格边框 */
        }

    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
    </table>
</body>
</html>

5. 新浪导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        .nav {
            height: 50px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
        }

        .nav a {
            height: 50px;
            line-height: 50px;
            display: inline-block;
            color: #4c4c4c;
            text-decoration: none;
            /*上下0px,左右18px*/
            padding: 0px 18px;
            /*padding:10px 20px 30px;    上 10px,左右20px,下30px*/
            /*padding: 10px 20px 30px 40px;  上右下左*/
            font-size: 14px;
        }

        .nav a:hover {
            background-color: #edeef0;
            color: #ff8500;
        }

    </style>
</head>
<body>
    <div class="nav">
        <a href="#">首页</a>
        <a href="#">新闻客户端</a>
        <a href="#">设为首页</a>
        <a href="#">奔跑吧</a>
    </div>
</body>
</html>

6.

三、CSS基础(2)

标签:css   position   ble   上下左右   块元素   display   特性   padding   alt   

原文地址:https://www.cnblogs.com/sharef/p/10346005.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!