第49天学习打卡（CSS 层次选择器结构伪类选择器属性选择器美化网页元素盒子模型）

时间：2021-02-27 13:14:06 阅读：0 评论：0 收藏：0 [点我收藏+]

推荐书籍：码出高效: Java 开发手册

2.2 层次选择器

idea里代码规范是按：ctrl +alt+L快捷键

注释快捷键：ctrl+/

1.后代选择器:在某个元素的后面祖爷爷爷爷爸爸你

  <style>
        /*p{*/
        /*    background: #02ff00;*/
        /*}*/

    /*  后代选择器  */
        body p{
            background: red;
        }
    </style>

2.子选择器: 只有一代，儿子

/*    子选择器*/
        body>p{
            background: #3cbda6;
        }

3.相邻兄弟选择器：同辈（对下相邻）

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

    <style>
        /*p{*/
        /*    background: #02ff00;*/
        /*}*/

    /*  后代选择器  */
    /*    body p{*/
    /*        background: red;*/
    /*    }*/
    /*    子选择器*/
    /*    body>p{*/
    /*        background: #3cbda6;*/
    /*    }*/
    /*    兄弟选择器 :只有一个，相邻（向下）*/
        .active + p {
            background: #a13d30;
        }




    </style>
</head>
<body>

<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p class="active">p7</p>
<p>p8</p>









</body>
</html>

结果图：

技术图片

4.通用选择器

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

    <style>
        /*p{*/
        /*    background: #02ff00;*/
        /*}*/

    /*  后代选择器  */
    /*    body p{*/
    /*        background: red;*/
    /*    }*/
    /*    子选择器*/
    /*    body>p{*/
    /*        background: #3cbda6;*/
    /*    }*/
    /*    兄弟选择器 :只有一个，相邻（向下）*/
    /*    .active + p {*/
    /*        background: #a13d30;*/
    /*    }*/
    /*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
        .active~p{
            background: green;

        }




    </style>
</head>
<body>

<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p class="active">p7</p>
<p>p8</p>









</body>
</html>

结果图：

技术图片

2.3结构伪类选择器

伪类：是加了条件

<!--避免使用id  class选择器-->
    <style>
/* ul的第一个子元素*/
ul li:first-child{
    background: green;
}

/* ul的最后一个子元素*/
ul li:last-child{
    background: red;
}





    </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--避免使用id  class选择器-->
    <style>
/* ul的第一个子元素*/
ul li:first-child{
    background: green;
}

/* ul的最后一个子元素*/
ul li:last-child{
    background: red;
}

/*选中p1:定位到父元素，选择当前的第一个元素
定位当前元素的同类元素的第一个当第一个元素不是p标签修改这里面p:nth-child(1)的数字即可
选择当前P元素的负级元素，选中父级元素的第一个子元素，并且是当前元素才生效
这个按顺序选，会被其它元素影响

*/
  p:nth-child(2){
      background: aqua;
  }
  /*选择父元素下的P的第二个元素，按照类型选  不会被其它的标签影响*/
  p:nth-of-type(2){
      background:yellow;
  }



    </style>
</head>
<body>
<!--     <h1>h1</h1>-->

     <p>p1</p>
     <p>p2</p>
     <p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>







</body>
</html>

2.4属性选择器（常用）

id + class 结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    后代选择器-->
    <style>
        .demo a{
           float:left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #2700ff;
            text-align: center;
            color:gray;
            /*去掉下划线*/
            text-decoration: none;
            /* 外边距*/
            margin-right: 5px;
            /*粗体 字体的大小/行高*/
            font: bold 20px/50px Arial;

        }
        /*    属性名， 属性名 = 属性值（正则）
        = 是绝对等于
        *= 是包含这个元素
        ^=以这个元素开头
        $ 以这个元素结尾
        */
    /*    存在ID属性的元素           a[]{}*/
    /*    a[id]{*/
    /*        background: yellow;*/

    /*    }*/
    /*id=first的元素*/
    /*    a[id=first]{*/
    /*        background: yellow;*/
    /*    }*/
    /*    class中有links的元素*/
    /*    a[class*="links"]{*/
    /*        background: yellow;*/
    /*    }*/
    /*!*    选择href中以http开头的元素*!*/
    /*    a[href^=http]{*/
    /*        background: yellow;*/
    /*    }*/


        a[href$=doc]{
            background: yellow;
        }



    </style>





</head>
<body>


<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
<!--    target="_blank"在新页面打卡-->
    <a href="http://blog.kuangstudy.com"class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item ">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc"class="links item">6</a>
    <a href="/a.pdf"class="links item">7</a>
    <a href="/abc.pdf"class="links item">8</a>
    <a href="abc.doc"class="links item">9</a>
    <a href="abcd.doc"class="links item last">10</a>




</p>

</body>
</html>

=
*=
^=
$=

技术图片

3.美化网页元素

3.1 为什么要美化元素

1.有效的传递页面信息

2.美化网页，页面漂亮，才能吸引客户

3.凸显页面的主题

4.提高用户体验

span标签：重点要突出的字，使用span 套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }


    </style>





</head>
<body>


欢迎学习     <span id="title1">Java</span>

</body>
</html>

结果图：

技术图片

3.2 字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
font-family:字体
font-size: 字体大小
 font-weight:字体粗细
    color: 字体颜色



  -->
    <style>
        body{
            font-family: "Arial Black",楷体;
            color: brown;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight:lighter ;
        }
    </style>






</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
    昔日顶级工程师卫三穿成星际失学儿童，靠着捡垃圾变废为宝，终于赶在开学季攒了一笔钱，立刻要去报名上学。
    　
</p>
<p>
    卫·文静·贫穷·工程师：“……”
    　　
    　　
</p>

<p>

    When I wake up in the morning，

    　　You are all I see;

</p>
　　
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    字体风格
oblique ：斜体
bolder：加粗
 12px：大小
-->
    <style>
        p{
            font:oblique bolder 12px "楷体";
        }
    </style>

</head>
<body>


<p>
    昔日顶级工程师卫三穿成星际失学儿童，靠着捡垃圾变废为宝，终于赶在开学季攒了一笔钱，
</p>


</body>
</html>

3.3 文本样式

1.颜色 color rgb rgba

2.文本对齐的方式 text-align = center

3.首行缩进 text-indent:2em

4.行高 line-height 单行文字上下居中：line height = height

5.装饰（如下划线） text-decoration

6.文本图片水平对齐：vertical-align:middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
颜色表示：
    单词
    RGB：0-F
    RGBA  A: 0~1  A:是透明度设置
    text-align:文本排版 居中 居左 居右
    text-indent: 2em  段落 首行缩进两个字母
    行高 和 块的高度一致  就可以上下居中:
            height: 300px;
            line-height: 300px;
    text-decoration: underline  下划线
    text-decoration: line-through;  中划线
     text-decoration: overline; 上划线


-->
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }

        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #2700ff;
            height: 300px;
            line-height: 300px;
        }
        .l1{
            text-decoration: underline;
        }
        .l2{
            text-decoration: line-through;
        }
        .l3{
            text-decoration: overline;
        }
        /*a（标签）超链接去下划线*/
        a{
            text-decoration: none;
        }

    </style>







</head>
<body>
<!--a 标签默认有下划线-->
<a href="">111234</a>
<p class="l1">1234567</p>
<p class="l2">1234567</p>
<p class="l3">1234567</p>





<h1>故事介绍</h1>
<p class="p1">
    昔日顶级工程师卫三穿成星际失学儿童，靠着捡垃圾变废为宝，终于赶在开学季攒了一笔钱，立刻要去报名上学。
    　
</p>
<p>
    卫·文静·贫穷·工程师：“……”她打算将来成为一个机甲师，据说特别赚钱，还和自己本行息息相关，成了一名机甲单兵
    　　
    　　
</p>

<p class="p3">

    When I wake up in the morning，

    　　You are all I see;

</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
 水平对齐要有参照物  如a 与  b
-->

    <style>
        img,span{
            vertical-align: middle;
        }
    </style>


</head>
<body>
<p>
    <img src="images/7.jpg" >
    <span> abcnnnnnnxxnnnnnxn</span>
</p>
</body>
</html>

3.4阴影

/*text-shadow:阴影颜色  水平偏移  垂直偏移  阴影半径*/
            #price{
                text-shadow: #3cc7f5 10px -10px 2px;
            }

3.5超链接伪类

正常情况下，a,a:hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
            /*默认的颜色*/
        a{
            /*  除掉下滑线*/
            text-decoration: none;
            color: #000000;
        }
    /*        鼠标悬浮的状态*/

            a:hover{
                color: orange;
                font-size: 50px;
            }
            /*鼠标按住未释放的状态*/
            a:active{
                color: green;
            }
            a:visited{
                color: gray;
            }
            /*text-shadow:阴影颜色  水平偏移  垂直偏移  阴影半径*/
            #price{
                text-shadow: #3cc7f5 10px -10px 2px;
            }
    </style>




</head>
<body>
<a href="#">
    <img src="images/11.jpg" >
</a>

<p>
    <a href="#">码出高效:Java开发手册</a>
</p>
<p>
    <a href="">作者：孤近老师</a>
</p>
<p id="price">
    ￥99
</p>



</body>
</html>

3.6列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
<link href="css/style.css"rel="stylesheet" type="text/css"/>
</head>
<body>


<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>

    </ul>
</div>


</body>
</html>

#nav{
   width:300px;
    background: grey;
}

.title{
    font-size:18px;
    font-weight: bold;
    /*text-indent: 1em; 行间距缩进*/
    text-indent: 1em;
    line-height: 30px;
    background: red;
}
/*ul li*/
/*ul{*/
/*    background: grey;*/
/*}*/
ul li{
    height: 30px;
    /*list-style: none; 把每行前面的小点去掉
    list-style: circle;把每行前面的实心小点变成空心
     list-style: decimal;变成有序列表 数字
     list-style: square;变成正方形



    */
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

修改加了图片的表格：

#nav{
   width:300px;
    background: grey;
}

.title{
    font-size:18px;
    font-weight: bold;
    /*text-indent: 1em; 行间距缩进*/
    text-indent: 1em;
    line-height: 30px;
    /*颜色 图片 图片位置  平铺方式*/
    background: red url("../images/3.jpg") 200px 10px no-repeat;
}
/*ul li*/
/*ul{*/
/*    background: grey;*/
/*}*/
ul li{
    height: 30px;
    /*list-style: none; 把每行前面的小点去掉
    list-style: circle;把每行前面的实心小点变成空心
     list-style: decimal;变成有序列表 数字
     list-style: square;变成正方形



    */
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/2.jpg") ;

    background-repeat: no-repeat;
    background-position: 200px 2px;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

3.7背景

背景颜色

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height:1200px;
            /*border: 1px solid red;第一个为边框的粗细 第二个边框的样式  颜色*/
            border: 1px solid red;
            background-image: url("images/12.jpg");
        /*    默认是全部平铺的*/
        }
        /*background-repeat: repeat-x;水平平铺*/
        .div1{
            background-repeat: repeat-x;
        }
        /* background-repeat: repeat-y;垂直平铺*/
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }

    </style>




</head>
<body>

<!--div默认为空标签  可以在里面放东西-->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

网站：Grabient

3.8渐变

<style>
        body{
            background-color: #FFFFFF;
            background: linear-gradient(19deg,#21D4FD 0%, #97ff21 100%);
        }

4盒子模型

4.1什么是盒子

技术图片

margin:外边距

padding:内边距

border:边框

4.2边框

1.边框的粗细

2.边框的样式

3.边框的颜色

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


        h1,u1,li,a,body{
            /*body 总有一个默认的外边距margin = 0  padding: 0 常见操作;
            text-decoration: none; */
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        /*border: 粗细 样式 颜色*/

        #box{
            /*border: 粗细 样式 颜色*/
            width: 300px;
            border:1px solid red ;

        }

        h2{
            font-size: 16px;
            background-color: #3cbda6;
            line-height: 30px;
            color: white;
        }
    /*    form标签选择器*/
        form{
           background: #3cbda6;
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        /*dashed 虚线*/
        div:nth-of-type(2) input{
            border: 2px dashed #4d0b8c;
        }
        div:nth-of-type(3) input{
            border: 2px dashed #008c27;
        }
    </style>



</head>
<body>


<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>
    </form>

</div>

</body>
</html>

4.3内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    外边距的妙用：居中元素-->
    <style>



        /*border: 粗细 样式 颜色*/

        #box{
            /*border: 粗细 样式 颜色*/
            width: 300px;
            border:1px solid red ;
            /*margin: 0 auto; 上下为0 左右自动对齐   margin 里面有四个元素 上下左右  写两个就代表前一个是上下 后一个是左右*/
            margin: 0 auto;

        }
        /*
        顺时针旋转
        margin:0 上下左右
        margin: 0 1px         0代表上下   1px 代表左右
        margin: 0 1px 2px 3px 上右下左


        */

        h2{
            font-size: 16px;
            background-color: #3cbda6;
            line-height: 30px;
            color: white;
            margin:0 1px 2px 3px;
        }
        /*    form标签选择器*/
        form{
            background: #3cbda6;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px 2px;
        }
    </style>



</head>
<body>


<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>
    </form>

</div>

</body>
</html>

盒子的计算方式：你的元素到底多大？

技术图片

margin + border + padding + 内容宽度

第49天学习打卡（CSS 层次选择器结构伪类选择器属性选择器美化网页元素盒子模型）

标签：阴影 gre font block body 颜色列表漂亮 out

原文地址：https://www.cnblogs.com/doudoutj/p/14453901.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

第49天学习打卡（CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型）

2.2 层次选择器

2.3结构 伪类选择器

2.4属性选择器（常用）

3.美化网页元素

3.1 为什么要美化元素

3.2 字体样式

3.3 文本样式

3.4阴影

3.5超链接伪类

3.6列表

3.7背景

3.8渐变

4盒子模型

4.1什么是盒子

4.2边框

4.3内外边距

第49天学习打卡（CSS 层次选择器结构伪类选择器属性选择器美化网页元素盒子模型）

2.3结构伪类选择器