前端学习基础第四天

一、css三大特性及注意事项

css三大特性

层叠性
样式的设置是以一层一层的形式来叠加生效的.
继承性
子标签的样式,可以从父级标签中样式继承下来,但只有一部分样式是可以继承的。且继承的权重为0,一旦子标签的样式进行了设置,则会放弃父级标签的样式，应用自己的样式。
优先级
在选择标签的时候，存在优先级的问题,优先级的权重排序如下:
!important>style="行内样式 ">#(id选择器)>.(类选择器)>div(标签选择器)
权重的对应的值为:1000>0100>0010>0001,一旦出现选择统一标签权重相同的情况,则使用就近原则,使用靠后一次的书写的样式.

注意事项

块级元素内部是可以放块级元素和行内元素、行内块元素的.但是<p>，<h>属于文本块级标签,不可放块级标签。
-<div><p></p><td></td><span></span></div>
<a>属于行内标签,但是可以放块级标签.但是链接中不可以再放链接.
选择器一般不应超过三层结构.
列表样式去除:list-style:none
如果将文本居中则使用text-align: center,如果想要盒子居中则在盒子上级使用text-align:center,同时将此盒子的显示样式为display:inline 或者是display:inline-block.块级元素使用文本居中对其可以使得盒子内部的行内块标签和行内标签整个盒子对齐。
表格中出现边界合并:border-collapse:collapse;

二、常用的样式设置

背景样式background

背景颜色设置：background-color=#000000; rgba(0,0,0,0.6) 最后一个表示透明度值在 0~1,1表示不透明,0表示全透明
背景图片设置：background-image=url("image.jpg")
背景是否填充; background-repeat=repeat-x,repeat-y ,repeat ,no-repeat
背景位置：background-position: x y 离左边和上边的距离, left center 表示靠左,上下居中,center top表示水平居中靠上
背景是否固定：background-attachment: scroll /fixed 后着背景固定,前者是可以滚动的
综合设置：background: red url("img.jpg") no-repeat scroll 20px 50px 这五个参数无序,但是最好使用这个样式，中间使用空格分开

边界样式border

边界通用设置:border: 2px solid/dashed/dot blue 第二个参数代表是实线、虚线、点线应用与四条边
上边界：border-top: 2px solid/dashed/dot blue 第一个表示边界的粗细
下边界：border-bottom: 2px solid/dashed/dot blue
左边界：border-right: 2px solid/dashed/dot blue
右边界：border-left: 2px solid/dashed/dot blue

内边距和外边距

内边距padding

当一个标签设置了宽度和高度,同时使用内边距的时候,会发生什么?宽度和高度会撑大实际的宽度和高度会发生变化。因此会有一个计算公式：
实际宽度:width+border-left+border-right+padding-left+padding-right.
实际高度:height+border-top+border-bottom+padding-bottom+padding-top.
关于内边距设置:
四个方向边距相同：padding: 10px; 上下左右
上下/左右边距一致: padding: 15px 20px; 上下左右
左右边距相同:padding:10px 20px 5px; 上左右下
四个方向边距都不一样: padding:10px 15px 5px 8px; 上右下左
单独设置边距：padding-left padding-right padding-top padding-bottom

外边距margin

假设一个div就是一个盒子,内边距就是盒子内部的间隔,但是如果盒子放在桌子上，它该如何放，放在哪里呢？这个就是外边距，也就是相当于盒子离桌子各个边的距离。
margin和padding的用法几乎是一样的
关于外边距的设置:
四个方向边距相同：margin: 10px; 上下左右
上下/左右边距一致: margin: 15px 20px; 上下左右
左右边距相同:margin:10px 20px 5px; 上左右下
四个方向边距都不一样: margin:10px 15px 5px 8px; 上右下左
单独设置边距：margin-left margin-right margin-top margin-bottom

三、练习

一、新闻列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第四天新闻信息</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .aichong{
            width: 232px;
            height: 310px;
            border: 1px solid darkgreen;
            margin: 30px 50px 50px 150px;
            padding: 10px;
            background: url("../img/bg_tianchong.gif") repeat left top;
        }
        .aichong  h3 strong{

            color: greenyellow;

        }
        .aichong h3{

            height: 35px;
            line-height: 35px;
            font-size: 20px;
            color: #ffffff;
        }
        .aichong ul{
            /*padding-left: 15px;*/
            padding: 0px 15px;
            background-color: #ffffff;
            list-style: none;
        }
        .aichong ul li{
            background: url("../img/tb.gif") no-repeat left center;
            height: 30px;
            line-height: 30px;
            text-align: left;
            border-bottom: 1px dashed #222222;
            font-size: 12px;


        }
        .aichong li a{
            padding-left: 15px;
            color: #00aaee;
            text-decoration: none;
        }
        .aichong li a:hover{
            color: red;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="aichong">

    <h3><strong>|</strong> 爱宠知识</h3>
    <ul>
        <li><a href="#">养狗比养猫对健康更有利</a></li>
        <li><a href="#">笑看未来三十年</a></li>
        <li><a href="#">绝对和党走的人生</a></li>
        <li><a href="#">站外的那些日子里</a></li>
        <li><a href="#">和那些过去的人聊来天</a></li>
        <li><a href="#">你今天睡了吗？</a></li>
        <li><a href="#">科技智能时代的到来</a></li>
        <li><a href="#">人工智能教育平台的前景与展望</a></li>
        <li><a href="#">今天的故事会</a></li>
    </ul>
</div>
</body>
</html>

二、运动新闻

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第四天鲁能热身赛</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;

        }
        .title{
            width: 600px;
            height: 1027px;
            padding: 8px 20px 15px;
            border: 1px solid #cccccc;
            border-top: 3px solid #00aaee;
            text-align: center;
            margin: 100px auto;
        }
        .title h1{
            line-height: 40px;
            height: 35px;
            font-size: 20px;
            text-align: center;
             font-weight: normal;
            font-family: 微软雅黑;
        }
        .title .first{
            text-align: center;
            line-height: 26px;
            height: 26px;
            font-size: 12px;
            border-bottom: 1px solid #cccccc;
            padding: 5px 0px 2px;
            font-weight: lighter;
        }
        .title .first a ,.title .first span{
            padding-left: 12px;
            text-decoration: none;
            color: #666666;
        }
        .title .first .f1{
            color: #ff3333;

        }
        .title .first .f2{
            padding-left: 0px;
        }


        #h{
                font-size: 12px;
                line-height: 20px;
                height: 20px;
                text-align: center;
                color: #666666;
        }

        .title  .img{

            padding: 10px 0px 10px;
        }
        .title .padding{
            padding: 0px 15px;
        }
        .title .news{
            border: 1px dashed #cccccc;

        }
        .padding p{
            line-height: 24px;
            text-align: left;
            text-indent: 2em;
            font-size: 14px;
            padding: 10px 0px;

        }
        .title .news a{
            text-decoration: none;
            color: #00aaee;

        }
        .padding .news>p{
            padding:5px 10px 5px 10px;
            line-height: 24px;
            font-size: 14px;
            text-align: left;
            text-indent: 0em;
        }
        .padding .news h4{
            text-align: right;
            padding-right: 10px;
            font-size: 12px;
            line-height: 20px;
            height: 20px;
            padding-bottom: 5px;
            color: #666666;
            font-weight: lighter;

        }

       .padding .second{
           text-align: left;
           padding-bottom: 10px;
       }
        .padding .second span{
            font-size: 15px;
            font-weight: bold;
            color: #222222;
            font-family: 微软雅黑;
            line-height: 24px;
            height: 24px;
        }

        .padding .second a{
            font-size: 14px;
            color: #00aaee;
            text-decoration: none;
            padding-left: 5px;
        }
        .title .second a:hover{
            text-decoration: underline;
        }
        .title .last{
            width: 80%;
            height: 30px;
            background-color: #b3d4fc;
            text-align: center;
            display: inline-block;
        }
        .title .last a{
            font-size: 16px;
            line-height: 30px;
            text-decoration: none;
            color: #00aaee;
        }
        .title .last a:hover,.title .first a:hover,.title .news a:hover{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="title">
    <h1>鲁能热身赛16-0大胜业余队 野牛4球蒙蒂略戴帽</h1>
    <h4 class="first">2015年08月08日18:19 <a href="#" class="f1">新浪体育</a><span>微博</span><a href="#" >我有话说(<span class="f1 f2">10,370</span>人参与)</a> <a
            href="#" >收藏本文</a></h4>
    <div class="img">[外链图片转存失败(img-hJO9NAuq-1562034202180)(https://mp.csdn.net/img/imgTest.jpg)]
    </div>
    <h4 id="h">鲁能热身赛16-0大胜 </h4>
    <div class="padding">
        <p>
            新浪体育讯　　北京时间8月8日消息，山东鲁能俱乐部在训练基地内与业余球队山东
            太阳金店足球俱乐部进行了一场热身赛，最终鲁能以16-0大胜对手，阿洛伊西奥上演大四
            喜，韩鹏和蒙蒂略完成帽子戏法，尤西雷梅开二度，塔尔德利、赵明剑、张文钊、成源均取
            得进球。
        </p>
        <div class="news">
            <p><a href="#">鲁能泰山足球新闻</a>：#鲁能泰山#鲁能热身赛16-0击败一支业余球队，韩鹏和蒙蒂略帽子戏
                法，野牛大四喜，尤西雷梅开二度，塔尔德利、赵明剑、张文钊、成源取得进球。</p>
            <h4 >2015-08-08 17:54 来自百度浏览器 转发(49) | 收藏 | 评论(50)</h4>

        </div>
        <p>
            由于国足征战东亚杯比赛，中超联赛获得了两周的间歇期，山东鲁能训练备战同时，也邀请了一
            支业余球队进行热身赛。尽管王大雷、王永珀、杨旭、王彤等人随国足征战东亚杯，但鲁能还是
            派出了现有最强阵容，以16-0大胜了对手，据悉上半场就取得了9-0的领先，尽管与业余球队比
            赛，胜负并不重要，但这样的大比分胜利也能看出鲁能全队目前状态不错
        </p>
        <p>
            下周三中超第22轮就将打响，山东鲁能客场挑战北京国安，两支争冠球队的直接对话，无疑
            是本轮最焦点之战。由于国足本周日才结束东亚杯赛事，鲁能阵中的国脚体能能恢复多少非常关
            键，而以现有的鲁能球员组成的阵容，实力也绝对不容小觑。(瑪塔)
        </p>
        <div class="second">
            <span>文章关键词：</span><a href="#">中超</a> <a href="#">鲁能</a> <a href="#">阿洛伊西奥</a> <a href="#">蒙蒂略</a>

    </div>
    </div>
    <div class="last"><a href="#">点击下载【新浪体育客户端】，赛事视频直播尽在掌握</a></div>

</div>
</body>
</html>