CSS3笔记3

其他 2019-02-21 14:24:42 阅读次数: 0

1.CSS的层叠性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        color: skyblue;
        font-size: 12px;
    }
    div {
        color: hotpink;
    }
    </style>
</head>
<body>
    <div>王可可 是一条狗</div>
    1. 样式冲突,遵循就近原则;哪个样式离着结构近,就执行哪个样式.
    2. 样式不冲突,不会折叠.
</body>
</html>
CSS折叠性

2.CSS的继承性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        color: pink;
        font-size: 20px;
    }
    </style>
</head>
<body>
    <div>
        <p>i am robot</p>    <!-- 继承div标签的颜色和字体大小样式 -->
        <!-- 注意:恰当的使用继承可以简化代码,降低CSS样式的复杂性.子元素可以继承父元素的样式(text-,font-,lin-这些开头的元素都可以继承,以及color属性) -->
    </div>
</body>
</html>
CSS的继承性

3.继承的权重为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .daohanglan {
        color: red; /*0,0,1,0 是nav的 不是li标签的*/
    }
    li {
        color: pink; /*0,0,0,1*/
    }
    </style>
</head>
<body>
    <nav class="daohanglan">
        <ul>
            <li>继承的权重为0</li>
        </ul>
    </nav>
</body>
</html>
继承的权重为0

4.CSS优先级测试题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #father #son {
        color: blue;
    }
    #father p.c2 {
        color: black;
    }
    div.c1 p.c2 {
        color: red;
    }
    #father {
        color: green !important;
    }
    </style>
</head>
<body>
    <div id="father" class="c1">
        <p id="son" class="c2">
            试问这行字体是什么颜色的?    
        </p>
    </div>

</body>
</html>
第1题 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #father    {
        color: red;    /*继承的权重为0*/
    }
    p {
        color: blue;
    }
    </style>
</head>
<body>
    <div id="father">
        <p>试问这行字体是什么颜色?</p>
    </div>
</body>
</html>
第2题 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div p {
        color: red;
    }
    #father {
        color: red;
    }
    p.c2 {    /*权重最高*/
        color: blue;
    }
    </style>
</head>
<body>
    <div id="father" class="c1">
        <p class="c2">
            试问这行字体是什么颜色的?
        </p>
    </div>
</body>
</html>
第3题 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div div {
            color: blue; /*权重最高*/
        }
        div {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div>
                试问这行字体是什么颜色的?
            </div>
        </div>
    </div>
</body>
</html>
第4题 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div>div>div>div>div>div>div>div>div>div>div>div {
            color: red;
        }
        .me {
            color: blue; /*权重最高*/
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <div class="me">试问这行文字是什么颜色的?</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
第5题 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .c1 .c2 div {
        color: blue;
    }
    div #box {
        color: green;
    }
    #box1 div {
        color: yellow; /*权重最高*/
    }
    </style>
</head>
<body>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                文字
            </div>
        </div>
    </div>
</body>
</html>
第6题

5.盒子模型边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        border-width: 10px; /*边框宽度的粗细*/
        border-color: pink; /*边框颜色*/
        /*border-style: solid;*/ /*边框样式 实线 用的最多*/
        /*border-style: dashed;*/ /*边框虚线*/
        border-style: dotted; /*边框点线*/
        /*border-style: double;*/  /*边框双线 */
    }
    </style>
</head>
<body>
    <div>我是一个盒子</div>
</body>
</html>
边框常见样式 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .user {
        border-width: 1px;
        border-color: pink;
        border-style: solid;
    }
    .nickname {
        border-top-width: 1px; /*上边框宽度*/
        border-top-color: hotpink;
        border-top-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: blue;
        border-bottom-style: solid;
    }
    .email {
        border-top: 1px solid red; /*上边框 宽度 样式 颜色 一行写完*/
        border-bottom: 1px solid green; /*上边框 宽度 样式 颜色 一行写完*/
    }
    .tel {
        /* border: 1px;
        border-style: solid;
        border-color: skyblue; */
        border: 1px solid skyblue; /*综合性写法 */
    }
    </style>
</head>
<body>
    用户名: <input type="text" class="user" /> <br><br />
    昵称: <input type="text" class="nickname" /> <br><br />
    邮箱: <input type="email" class="email" /> <br><br />
    手机: <input type="tel" class="tel" /> <br><br />
</body>
</html>
边框写法总结 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    table {
        width: 700px;
        height: 300px;
        border: 1px solid red;
        border-collapse: collapse; /*合并相邻边框*/
    }
    td {
        border: 1px solid green;
        text-align: center;
    }
    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>4576</td>
            <td>4576</td>
            <td>4567</td>
        </tr>
    </table>
</body>
</html>
细线表格 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }
    div:first-child {    /*结构伪类选择器 选亲兄弟*/
        border-radius: 10px; /*一个数值表示4个角都是相同的10px的弧度*/
    }
    div:nth-child(2) { /*选择第三个元素*/
        border-radius: 100px;    /*取宽度和高度一半 则会变成一个圆形*/
        /*border-radius: 50%;    和上面的效果一样*/
    }
    div:nth-child(3) {
        border-radius: 10px 40px;    /*左上角和右下角为10px 右上角和左下角为40px,对角线形式*/
    }
    div:nth-child(4) {    /*左上角10 右上角和左下角40 右下角80*/
        border-radius: 10px 40px 80px;
    }
    div:nth-child(5) {
        border-radius: 10px 40px 80px 100px; /*左上角10 右上角40 右下角 80 左下角100 顺时针方向*/
    }
    div:nth-child(6) {
        border-radius: 100px;
        height: 100px;    /*变成椭圆*/
    }
    div:nth-child(7) {
        border-radius: 100px 0;
    }
    </style>
</head>
<body>
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
    <div>G</div>
</body>
</html>
圆角边框

6.盒子模型内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        /*padding-left: 20px;
        padding-top: 30px;*/
        /*padding: 10px 30px; 上下10px 左右30px*/
        /*padding: 10px 30px 50px; 上10 左右30 下50*/
        padding: 10px 20px 30px 40px;
    }
    </style>
</head>
<body>
    <div>内边距就是内容和边框的距离</div>
</body>
</html>
内边距 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新浪导航栏</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    nav {
        height: 41px;
        background-color: #FCFCFC;
        border-top: 3px solid #FF8500; /*上边框*/
        border-bottom: 1px solid #EDEEF0; /*下边框*/
    }
    nav a {
        font-size: 14px;
        color: #4C4C4C;
        text-decoration: none;    /*取消下划线*/
        padding: 0 15px;
        height: 41px;
        line-height: 41px; /*行高等于高度可以文字垂直居中*/
        /*因为链接是行内元素没有大小,所以需要转换成行内块*/
        display: inline-block;
    }
    nav a:hover { /*链接伪类选择器 鼠标经过a链接的时候变换颜色*/
        background-color: #eee;
    }
    </style>
</head>
<body>
    <nav>
        <a href="#">首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">博客</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </nav>
</body>
</html>
新浪导航栏 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*margin-top: 100px;
        margin-left: 50px;*/
        margin: 30px auto; /*上下30 左右auto自动
        这样可以让块级带有宽度的盒子水平居中对齐*/
        padding: 4px;
    }
    header {
        width: 900px;
        height: 120px;
        background-color: black;
        margin: 0 auto; /*左右一定是auto就可以居中*/
    }
    </style>
</head>
<body>
    <div></div>
    <header>头部标签</header>
</body>
</html>
外边距 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 300px;
        height: 100px;
        border: 1px solid pink;
        text-align: center;    /*文字水平居中*/
        margin: 10px auto; /*盒子水平居中 左右margin 改为auto就可以了*/
        line-height: 100px; /*文字垂直居中*/
    }
    </style>
</head>
<body>
    1. 文字水平居中 和 盒子水平居中
    <div>文字水平居中</div>
</body>
</html>
背景文字和盒子对齐写法 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding: 0; /*清除内边距*/
        margin: 0; /*清除外边距*/
    }
    div {
        height: 200px;
        background-color: pink;
        text-align: center;
        line-height: 200px;
    }
    </style>
</head>
<body>
    <div>i am robot!</div>
</body>
</html>
清除元素默认内外边距 
s<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    span {
        background-color: pink;
        margin: 30px 50px; /*上下30 左右50*/
        padding: 50px; /*上下左右都是50*/
    }
    </style>
</head>
<body>
    <span>行内元素</span>
</body>
</html>
行内元素没有上下内外边距 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    div:first-child {
        margin-bottom: 100px;
    }
    div:last-child {
        background-color: purple;
        margin-top: 50px;
    }
    /*外边距合并 垂直的块级盒子 以最大的外边距为准*/
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>
外边距合并解决方法 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        width: 300px;
        height: 300px;
        background-color: pink;
        margin-top: 100px;
        /*border: 1px solid red;  解决外边距合并塌陷问题,解决方法1
        padding: 1px;    解决外边距合并塌陷问题,解决方法2 */
        overflow: hidden; 
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: purple;
        margin-top: 30px;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>
外边距合并塌陷问题解决方法 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        height: 30px;
        border: 1px solid red;
        padding-left: 20px;    /*因为这个盒子没有宽度,所以padding不会影响盒子的宽度*/
        padding-top: 10px;
        /*width: 100%*/
    }
    nav {
        width: 300px;
        height: 40px;
        border: 1px solid pink;
    }
    p {
        /*因为p没有指定宽度 则会默认和父亲一样宽 块级元素*/
        height: 20px;
        background-color: hotpink;
        padding-left: 30px; /*此时padding 也不会影响盒子的宽度*/
    }
    </style>
</head>
<body>
    <div>奔跑吧, 兄弟</div>
    <nav>
        <p>摔跤吧,弟弟</p>
    </nav>
</body>
</html>
padding不影响盒子大小情况

7.搜索趣图案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        height: 30px;
        border: 1px solid red;
        padding-left: 20px;    /*因为这个盒子没有宽度,所以padding不会影响盒子的宽度*/
        padding-top: 10px;
        /*width: 100%*/
    }
    nav {
        width: 300px;
        height: 40px;
        border: 1px solid pink;
    }
    p {
        /*因为p没有指定宽度 则会默认和父亲一样宽 块级元素*/
        height: 20px;
        background-color: hotpink;
        padding-left: 30px; /*此时padding 也不会影响盒子的宽度*/
    }
    </style>
</head>
<body>
    <div>奔跑吧, 兄弟</div>
    <nav>
        <p>摔跤吧,弟弟</p>
    </nav>
</body>
</html>
搜索趣图案例

8.思维导图总结

猜你喜欢

转载自www.cnblogs.com/replaceroot/p/10411880.html
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022