【CSS】两周玩转CSS （上部）

2022-09-29 20:34:20

一，CSS 简介

CSS 概述

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中

  • 多个样式定义可层叠为一

样式解决了一个普遍的问题

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。

由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。

所有的主流浏览器均支持层叠样式表。

样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

二，CSS 基础选择器

<1> 标签选择器用法 
* 基础选择器
1. 标签选择器的用法:直接给出标签，一并把此标签的样式改变成设定的样式(注意 ：这种用法是改变所有标签的属性)
h2 {
   /* 以下是颜色及文字设定的几种常用方法 */
   color: deeppink; /* 指定颜色 */
   font-size: 30px;/* 指定字体大小 一定要跟上px单位。代表像素的意思 */
   font-weight: 700;/* 指定文字的粗细 700代表加粗，400代表正常字体 后面不需要跟px单位 */
   font-style: normal/* 指定文字的变化.例如斜体是intalic 正常字体是normal*/
    }

<2> 类选择器用法

2. 类选择器的方法: .自定义类名 {属性样式}来指定。当创建好类以后.谁使用就通过class="自定义类名"的方式来调用。

.class {
            text-align: center;/* 文字居中显示 */
} 
.black { 
　　　　　　　/* 设置字体颜色及大小*/
　　　　　　　color: black; 
            font-size: 16px;
　　　　}

<3> id择器用法

3. id选择器的方法: id选择器的使用同类选择器基本相同。但是唯一不同的是，ID选择器只能被调用一次.

#id名 {属性} 通过id = "id名"来调用

        */
        #blue {
            color: blue;  /*设置字体大小*/
        }

<4> 综合案例演示　

【CSS】两周玩转CSS （上部）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例演示</title>
    <style>
        /* 基础选择器
        1. 标签选择器的用法:直接给出标签，一并把此标签的样式改变成设定的样式(注意 ：这种用法是改变所有标签的属性)*/
        h2 {
            /* 以下是颜色及文字设定的几种常用方法 */
            color: deeppink;
            /* 指定颜色 */
            font-size: 30px;
            /* 指定字体大小 一定要跟上px单位。代表像素的意思 */
            font-weight: 700;
            /* 指定文字的粗细 700代表加粗，400代表正常字体 后面不需要跟px单位 */
            font-style: normal
                /* 指定文字的变化.例如斜体是intalic 正常字体是normal*/

        }

        /* 
        2. 类选择器的方法: .自定义类名 {属性样式}来指定。当创建好类以后.谁使用就通过class="自定义类名"的方式来调用。
         */
        .class {
            text-align: center;

        }

        .black {
            color: black;
            font-size: 16px;
        }

        .center {
            text-align: center;
        }

        /* 
        3. id选择器的方法: id选择器的使用同类选择器基本相同。但是唯一不同的是，ID选择器只能被调用一次.
        #id名 {属性} 通过id = "id名"来调用

        */
        #blue {
            color: blue;
        }

        /* 
        4. 通配符选择器：用*号来定义，选中所有的内容进行属性应用.
         */
        /* 
         * {
             color: chocolate;
         } */
    </style>
</head>

<body>
    <h2 class="center">青春不常在，抓紧谈恋爱</h2>
    <div>
        <table align="center" border="0">
            <tr>
                <td>性别：</td>
                <td id="blue"><input type="radio" name="sex" id="nan" /><label for="nan"><img src="../images/boy.jpg">
                        &nbsp; 男&nbsp;&nbsp;</label>
                    <input type="radio" name="sex" id="nv" /><label for="nv"><img src="../images/gril.jpg"> &nbsp;
                        女</label>

                </td>

            </tr>

            <tr>
                <td class="black">生日：</td>
                <td>
                    <select>
                        <option>--请选择年份--</option>
                        <option>1980年</option>
                        <option>1981年</option>
                        <option>1982年</option>
                        <option>1983年</option>
                        <option>1984年</option>
                        <option>1985年</option>
                        <option>1986年</option>
                        <option>1987年</option>
                        <option>1988年</option>
                        <option>1989年</option>
                        <option>1990年</option>
                        <option>1991年</option>
                        <option>1992年</option>
                        <option>1993年</option>
                        <option>1994年</option>
                        <option>1995年</option>
                        <option>1996年</option>
                        <option>1997年</option>
                        <option>1998年</option>
                        <option>1999年</option>
                        <option>2000年</option>
                    </select> &nbsp;&nbsp;&nbsp;
                    <select>
                        <option>--请选择月份--</option>
                        <option>1月</option>
                        <option>2月</option>
                        <option>3月</option>
                        <option>4月</option>
                        <option>5月</option>
                        <option>6月</option>
                        <option>7月</option>
                        <option>8月</option>
                        <option>9月</option>
                        <option>10月</option>
                        <option>11月</option>
                        <option>12月</option>
                    </select>&nbsp;&nbsp;&nbsp;

                    <select>
                        <option>--请选择日期--</option>
                        <option>1日</option>
                        <option>2日</option>
                        <option>3日</option>
                        <option>4日</option>
                        <option>5日</option>
                        <option>6日</option>
                        <option>7日</option>
                        <option>8日</option>
                        <option>9日</option>
                        <option>10日</option>
                        <option>11日</option>
                        <option>12日</option>
                        <option>13日</option>
                        <option>14日</option>
                        <option>15日</option>
                        <option>16日</option>
                        <option>17日</option>
                        <option>18日</option>
                        <option>19日</option>
                        <option>20日</option>
                        <option>21日</option>
                        <option>22日</option>
                        <option>23日</option>
                        <option>24日</option>
                        <option>25日</option>
                        <option>26日</option>
                        <option>27日</option>
                        <option>28日</option>
                        <option>29日</option>
                        <option>30日</option>
                        <option>31日</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="black">所在地区:</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td class="black">婚姻状况:</td>
                <td><input type="radio" name="hunyin" id="weihun"><label for="weihun">未婚</label>
                    <input type="radio" name="hunyin" id="yihun"><label for="yihun">已婚</label>
                    <input type="radio" name="hunyin" id="sangou"><label for="sangou">丧偶</label>
                </td>
            </tr>
            <tr>
                <td class="black">学历:</td>
                <td><select>
                        <option>中专</option>
                        <option>大专</option>
                        <option>本科</option>
                        <option>硕士</option>
                        <option>博士</option>
                        <option>博士后</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="black">喜欢的类型:</td>
                <td><input type="checkbox" name="liketype" value="0" id="wumei" /><label for="wumei">妩媚的</label>
                    <input type="checkbox" name="liketype" value="1" id="keai" /><label for="keai">可爱的</label>
                    <input type="checkbox" name="liketype" value="2" id="tianmei" /><label for="tianmei">甜美的</label>
                    <input type="checkbox" name="liketype" value="3" id="xiaoxianrou" /><label
                        for="xiaoxianrou">小鲜肉</label>
                    <input type="checkbox" name="liketype" value="4" id="laorarou" /><label for="laorarou">老腊肉</label>
                    <input type="checkbox" name="liketype" value="5" id="dashukong" /><label for="dashukong">大叔控</label>
                    <input type="checkbox" name="liketype" value="6" id="douxihuan" /><label for="douxihuan">都喜欢</label>
                </td>
            </tr>
            <tr>
                <td class="black">自我介绍：</td>
                <td><textarea cols="70" rows="5">自我介绍

                </textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="免费注册"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准
                </td>
            </tr>
            <tr>
                <td></td>
                <td><ins><a href="https://www.jiayuan.com/" target="_blank">我是会员，立即登录</ins>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h3>我承诺</h3>
                    <ul>
                        <li>年满18岁，单身</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>
                </td>
            </tr>

        </table>
    </div>
</body>

</html>
CSS基本选择器案例演示

三，CSS 类选择器

上述案例中已经综合演示了类选择器。为了更好的对类选择器有更深刻的印象。对类选择器再做一个三个盒子的综合案例演示。

图片的话这里就不提供了。随便上网下载几张即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器的案例演示</title>

    <style>
        .red-div {
            width: 100px; /* 宽度 */
            height: 100px; /* 高度 */
            background-color: red; /* 背景颜色 */
        }

        .green-div {
            width: 100px; /* 宽度 */
            height: 100px; /* 高度 */
            background-color: green; /* 高度 */
        }

    </style>

</head>
<body>
    <!-- 通过style来定义div容器的属性.也验证了div本身就是个容器.这里通过容器装载图片 -->
    <div class="red-div"><img src="../images/gril.jpg"></div>
    <div class="green-div"><img src="../images/boy.jpg"></div>
    <div class="red-div"><img src="../images/gril.jpg"></div>
    
</body>
</html>　

四，CSS 类选择器 --- 多类名的使用

以下案例可以看出.box中只是设置了div盒子的大小。.red 和 .green分别设定了自己的颜色。class中既调用了box中的方法也调用了自身的方法，这种使用类型就叫做多类名的使用。要注意的是类名跟类名之间必须通过空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多类名的使用场景</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            
        }
        .red {
            background-color: red;
        }
        .green {
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- 相同的属性放到一个类中管理。调用的使用通过空格，隔开调用的类名 -->
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
    
</body>
</html>

五，CSS 字体样式 --- （font-style）

通过font-style关键字可以对字体的样式进行改变。例如斜体，粗体，

font-style 属性最常用于规定斜体文本。

该属性有三个值：

  • normal - 文本正常显示
  • italic - 文本斜体显示
  • oblique - 文本倾斜显示

实例

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

italic 和 oblique 的区别

font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
        h1 {
            font-style: normal;
            font-size: 20px;
        }

        p {
            color: mediumblue;
            /* 符合字体的使用
            
            注意事项：以下为font:的复合写法，可以节省我们的代码。但是这个需要按照一定的顺序来书写。必须按照
            font: font-style font-weight font-size/line-height font-family的顺序。顺序不能随意改动。另外font-size和font-family是必须选项，其他可以没有
             */
            font: italic 400 16px/20px "Microsoft yahei"

        }
    </style>

</head>

<body>
    <h1> 今日新闻</h1>
    <P>苏州工业园区2.5产业园附近修路，导致路段通勤困难。请早晚高峰期避开此路线！</P>

</body>

</html>　

六，CSS 字体居中显示 --- （text-align）

水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。

提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

text-align:center 与 <CENTER>

您可能会认为 text-align:center 与 <CENTER> 元素的作用一样，但实际上二者大不相同。

<CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text-align字体居中</title>
    <style>
        /* 这里是指一行中的对齐。拒绝与行的大小 */
        .detail-center {
            text-align: center;
        }

        .detail-right {
            color: blue;
            background-color: burlywood;
            font-weight: 400;
            font-size: 20px;
            text-align: right;
        }

        .detail-left {
            color: blue;
            background-color: darkgoldenrod;
            font-weight: 700;
            font-size: 26px;
            text-align: left;
        }
    </style>
</head>
<body>
    <h1 class="detail-center">星期一</h1>
    <p class="detail-right">星期二</p>
    <p class="detail-left">星期三</p>
</body>
</html>　

七，CSS 文本装饰器 --- （text-decoration）

接下来，我们讨论 text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。

text-decoration 有 5 个值：

  • none
  • underline
  • overline
  • line-through
  • blink

不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：

a {text-decoration: none;}

注意：如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，不过也不能完全保证其颜色肯定有区别）。

还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线，则规则如下：

a:link a:visited {text-decoration: underline overline;}

不过要注意的是，如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。请考虑以下的规则：

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本装饰</title>

    <style>
        h2 {
            text-decoration: underline blue; /* 给字体加下划线 ,后面还可以指定下划线的颜色*/
        }

        h3 {
            text-decoration: line-through;/* 给字体画删除线 */
        }

        a {
            text-decoration: none; /* 去除超链接中的下划线 */
        }


    </style>

</head>

<body>
    <h2>今天晚上吃火锅！！！！！</h2>
    <a href="https://www.dianping.com/">去往火锅店</a>
    <h3>鸳鸯锅，麻辣锅</h3>

</body>
</html>　

六，CSS 字体缩进 --- （text-indent）

text-indent 属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

注意：在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。

说明

用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本缩进</title>
    <style>
        p {
            text-indent: 2em; 
            line-height: 25px;
            /*
            text-indent用法只对首行进行缩进 
            em相当于当前元素字符大小的距离2em就是空两个字符 
            
            line-height 代表行高。可以指定行高
            */

        }
        i {
            font-style: normal;/* 斜体变正 */
        }
    </style>
</head>
<body>
    <p>2日晚，数百名*者无视疫情禁令，走上法国首都巴黎的街头，声援美国*者，并要求为本国遭受警察“暴行”的受害者讨回公道。</p>

    <i>法国街头的*活动（资料图）法国街头的*活动（资料图）</i>

    <p>报道称，有关部门禁止疫情期举行大型集会，但这并没有阻止大批示威者出动。他们喊着“为乔治伸张正义”、“为阿达玛伸张正义”的口号上街游行。</p>

    <p>据介绍，阿达玛指的是2016年24岁法国黑人阿达玛•特拉奥雷（Adama Traore）一案。这名年轻人在被警方拘留数小时后意外死亡。案件仍在调查中，有媒体称阿达玛是在警察试图制服他时窒息而死。</p>
</body>
</html>

七，上述六大环节的综合案例演示

【CSS】两周玩转CSS （上部）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例(对之前html及css学过的内容的练习)</title>
    <link rel="stylesheet" href="news_demo01.css">
</head>

<body>
    <h1>朝鲜宣布与韩国“断联”，原来是为了这事……</h1>
    <!-- <div class="title-div">2020年06月10日 00:01 中国新闻网</div> -->
    <table>
        <tr>
            <td class="title-div">2020年06月10日 00:01</td>
            <td><a href="#">中国新闻网</a></td>
        </tr>
    </table>
</body>
<p>原标题：朝鲜宣布与韩国“断联”，原来是为了这事……</p>
<p>中新网6月10日电 （何路曼 刘淙）近日，朝鲜半岛局势再起波澜。朝方宣布，从9日中午开始与韩国“断联”——切断朝韩之间一切通讯联络线。而韩方则表示，根据朝韩协议，双方应当维系联络渠道。
</p>
<p>朝鲜这一举动，事出何因？这次“断联”，对朝鲜半岛局势及韩朝间的关系，影响几何？而面对当前局面，韩国又有何表态？
</p>
<div class="center-demo"><img src="new_pic1.jpg" width="600" height="400">
</div>
<h4 class="center-demo">
    资料图：韩方工作人员通过朝韩联络热线与朝方联系。
</h4> 　　
<p><strong id="strong-size">已有预兆</strong></p>
<p>6月9日一早，朝鲜官方通讯社——朝中社发公告称，朝方有关部门从当地时间9日12时开始，彻底断绝并废除通过朝韩共同联络办公室一直维持的朝韩通讯联络线、朝韩军方之间的东西海通讯联络线、朝韩通讯试验联络线、朝鲜劳动党*本部大楼和青瓦台之间的热线通讯联络线。
</p>
<p>朝方这一举动，看似突然，但并非无迹可寻。几天前，朝方就曾多次释放针对韩方的信号。
</p>
<div class="center-demo"><img src="new_pic2.jpg" width="600" height="400"> 　</div>
<h4 class="center-demo">
    图二 资料图：朝鲜劳动党*委员会第一副部长金与正。
</h4>
<p>6月4日，朝鲜劳动党*委员会第一副部长金与正发表谈话，强烈谴责“脱北者”团体散布反朝传单，并强调韩*不采取相应措施，将面临拆除开城工业园区、关闭朝韩联络办公室、解除《关于落实板门店宣言中军事领域共识的协议》等一系列后果。
</p>　
<p>次日，朝鲜统一战线部发言人再次发表谈话，谴责“脱北者”从韩国向朝鲜方向散布反朝传单，以及韩方“纵容此事”的态度。发言人表示，朝方的第一步行动，是关闭设在开城工业园区的朝韩联络办公室，此后还将采取其它相应措施。
</p>　
<p>“实际上是切断同韩国的这种联系，但从更广阔的角度来看，这反映了朝鲜对韩国基本政策的一种调整。”**党校教授、朝鲜半岛问题专家张琏瑰在接受中新网记者采访时表示。
</p>
<p>吉林大学行政学院国际政治系教授、高丽大学亚细亚研究院访问学者王生则对中新网表示，其实朝方表达的，是对韩国*的一种不满：其一是谴责韩方纵容“脱北者”的行为，其二是想通过此事对韩国进行施压，目的是希望国际社会重视朝韩关系发展，重视朝鲜半岛局势或朝美核谈判的发展进程。
</p>
<div class="center-demo"><img src="new_pic3.jpg" width="800" height="600"></div>　　

<h4 class="h4-bold center-demo">当地时间2018年4月27日下午，朝韩*在经过一天会谈后，共同签署《板门店宣言》。
</h4>
<div>
    <h3>或再开通</h3>
</div>

<p>实际上，朝鲜所提到的朝韩共同联络办公室，从倡议建立至今，经历了不少曲折。
</p>
<p>2018年4月27日，韩国总统文在寅和朝鲜最高*金正恩在板门店会晤后，发表《板门店宣言》，宣布双方将为实现朝鲜半岛无核化和停和机制转换而努力。
</p>　　
<p>而共同联络办公室，就是根据《板门店宣言》协议内容，设立的朝韩历史上首个共同联络办公室，坐落于朝鲜开城工业园内。</p>
<p>据韩国统一部此前的介绍，该机构将履行朝韩联系与交涉、*间会谈与磋商、民间交流与援助、为朝韩人员往来提供便利等职能。朝韩还将通过办公室，就南北铁路和公路连接与现代化、山林合作等《板门店宣言》履行事项，进行商议。
</p>
<img src="news_pic4.jpg" width="600" height="400">
<br />
<strong>当地时间2016年2月11日，韩国坡州市，韩*决定停止开城工业园区运营，韩方企业正准备从开城工业区撤出。</strong>
<p>王生举例说，像开城工业园区关闭之后，现在恢复起来就非常难。朝方此次这样做，主要“还是对韩国有点失望”，希望韩国能够继续推动（朝韩关系发展）。“朝鲜对美关系、对韩关系不可能一蹴而就，都是要经过这样一些反反复复的博弈过程。”他指出。
</p>　　
<p>在朝鲜9日发表公报后，韩国有关部门当天上午就再次通过多条朝韩联络渠道拨打朝方电话，但朝方均未接听。
</p>
<p>朝韩之间的通讯，真的会就此中断吗？
</p>　　
<p>“关闭也可能只是暂时的，随着朝韩关系的改善或发展，它还可以恢复或再开通，不是永久性关闭。”王生说。
</p>
<img src="news_pic5.jpg" width="600" height="400"><br />
<strong>资料图：当地时间2014年10月10日，韩国坡州，韩国一民间团体散发反朝传单，约两万张反朝传单随气球升空。
</strong>
<h4 class="h4-bold">“应当维系”</h4>　　
<p>在金与正发表谈话的当天，韩国国防部发言人崔贤洙在例行记者会上，就朝鲜谴责“脱北者”散布反朝传单，并提及朝韩《九一九军事协议》或被解除一事表示，韩方坚持履行《军事协议》的立场不变。
</p>
<p>此外，韩国统一部官员还在6月7日表示，在金与正发表谈话前，韩方已着手推进涉朝传单的立法工作。与朝方谈话无关，韩方将继续就对朝传单问题采取措施。
    <img src="news_pic6.jpg" width="600" height="400">
</p>　　
<h4 class="h4-bold">当地时间2019年6月30日下午，美国总统特朗普乘坐直升机抵达朝韩非军事区。韩国总统文在寅也同步抵达。
</h4>　　
<p>不仅如此，韩国也一直与“老大哥”美国保持联系。</p>
<p>韩国外交部7日表示，韩美外交部门举行了工作层磋商，探讨了朝鲜问题。韩美就包括金与正谈话在内的朝鲜问题紧密保持沟通，正在密切关注有关动向。
</p>
<p>韩媒推测，韩国外交部朝鲜半岛和平交涉本部长李度勋和美国常务副国务卿兼对朝特别代表比根，近期可能就有关事宜交换意见。不过，张琏瑰和王生两位专家都表示，美国不会干预其中。
</p>　　
<p>“相关渠道是朝韩沟通协调的基本途径，根据朝韩协议，双方应当维系这些联络渠道。” 9日，韩国统一部对朝鲜宣布关闭朝韩所有通讯联络渠道一事，表明立场。
</p>　　
<img src="news_pic7.jpg" width="600" height="400">　　
<h4>图七 2019年6月，韩国首次向公众开放韩朝非军事区徒步游。图为游客正在体验徒步游，步道周围铁丝网环绕。中新社记者 曾鼐 </h4>

<h3>未来如何？</h3>
<p>其实，这并不是朝韩联络渠道第一次中断。算上这次，12年来朝韩之间共“断联”五次。
</p>
<p>这一次，态势将如何发展？
</p>　　
<p>张琏瑰表示，韩国非常希望他们的“3.0版阳光政策”取得成绩，这时候不可能采取任何的报复措施。若朝鲜下一步提出各方面的要求，韩国会一步步去完成。
</p>　
<p>“朝鲜对‘脱北者’的一些言行非常反感，韩国应该在这一问题上制定一些相关政策”。王生指出，朝鲜半岛局势最主要的问题，还是朝韩关系的发展，特别是韩国应该积极主动推动双方关系的发展，用来带动其他双边关系的发展。
</p>　　
<p>王生分析称，在美国11月大选结果出来之前，朝鲜半岛局势可能会维持现状。但朝鲜是否能等到那个时候，还是未知数。如果朝鲜希望各方加紧推动半岛局势谈判进程，可能还会释放一些施压的筹码。（完）
</p>　　
<div id="right">责任编辑：张申
</div>　　

<div>关键字 : 朝鲜板门店宣言</div>
</body>

</html>
View Code

八，复合选择器  --- 后代选择器

后代选择器（descendant selector）又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

根据上下文选择元素

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

当然，您也可以在 h1 中找到的每个 em 元素上放一个 class 属性，但是显然，后代选择器的效率更高。

语法解释

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。

因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

具体应用

后代选择器的功能极其强大。有了它，可以使 HTML 中不可能实现的任务成为可能。

假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。

解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 div 指定值为 sidebar 的 class 属性，并把主区的 class 属性值设置为 maincontent。然后编写以下样式：

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器</title>
    <!-- 后代选择器的用法（重要） -->
    <!-- 需求：把所有ol中的li中的颜色加上颜色 -->
    <!-- 后代选择器除了父子关系祖孙关系也可以使用 -->
    <style>
        a {
            text-decoration: none;
        }

        ol li {
            color: rgb(231, 107, 6);
        }

        ol li a {
            color: darkblue;
        }

        .nav li {
            color: darkorchid;
        }
    </style>
</head>

<body>

    <ol>
        <li>白色</li>
        <li>黑色</li>
        <li>蓝色</li>
        <li>粉色</li>
        <li>红色</li>
        <li><a href="#">ol li中的a</a></li>
    </ol>

    <ul>
        <li>晴天</li>
        <li>阴天</li>
        <li>雨天</li>
    </ul>
    <ul class="nav">
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期日</li>
    </ul>
</body>

</html>　

九，复合选择器  --- 子选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

选择子元素

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

语法解释

您应该已经注意到了，子选择器使用了大于号（子结合符）。

子结合符两边可以有空白符，这是可选的。因此，以下写法都没有问题：

h1 > strong
h1> strong
h1 >strong
h1>strong

如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

结合后代选择器和子选择器

请看下面这个选择器：

table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子选择器</title>
    <!-- 子选择器只选择某元素最近的一级的子元素，其他不会被选择 -->
    <style>
        /* 后代选择器用法 */
        /* .nav li a {
            color: red;
        } */

        /* 子选择器用法 */
        .nav li>a {
            color: red;
        }
    </style>

</head>

<body>
    <ul class="nav">
        <li>北京<a href="#">去往北京</a></li>
        <li>上海<div>上海机场咨询</div>
        </li>
        <li>深圳<div><a href="#">去往深圳</a></div>
        </li>
    </ul>

</body>

</html>　

十，复合选择器  --- 并集选择器

并集选择器理解起来很简单就是将多个选择器联合起来使用，中间通过逗号作为分割。

这样做的好处在于。对于多标签但是需要设定相同样式的案例来说可以通过并集选择器一个选择器完成之前多选择器设定的情况。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        /* 需求：把h1,h3,ul下的li变成绿色 */
        /* 并集选择器习惯竖着写,任何选择器都可以被并集选择器所使用 */
        h1,
        h3,
        ul li {
            color: green;
        }
    </style>
</head>

<body>
    <h1>爷爷</h1>
    <h2>爸爸</h2>
    <h3>儿子</h3>
    <h4>孙子</h4>
    <p>重孙子</p>
    <ul>
        <li>你们真的是五世同堂呀！！</li>
    </ul>

</body>

</html>

十一，伪类选择器  --- 链接选择器

我们能够以不同的方法为链接设置样式。

设置链接的样式

能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：

  • a:link - 普通的、未被访问的链接
  • a:visited - 用户已访问的链接
  • a:hover - 鼠标指针位于链接的上方
  • a:active - 链接被点击的时刻

实例

a:link {color:#FF0000;}        /* 未被访问的链接 */
a:visited {color:#00FF00;}    /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}    /* 正在被点击的链接 */

当为链接的不同状态设置样式时，请按照以下次序规则：

  • a:hover 必须位于 a:link 和 a:visited 之后
  • a:active 必须位于 a:hover 之后

常见的链接样式

在上面的例子中，链接根据其状态改变颜色。

让我们看看其他几种常见的设置链接样式的方法：

文本修饰

text-decoration 属性大多用于去掉链接中的下划线：

实例

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景色

background-color 属性规定链接的背景色：

实例

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器之链接选择器</title>
    <!-- 开发中用的最多的就是a:hover -->

    <style>
        a {
            text-decoration: none;
            font-size: 26px;
            colors: #333;
        }

        /* 1. a:link 没有点击过的link设定颜色 */
        /* a:link {
            color: black;
        } */

        /* 2. a:visited 给点击过的Link设定颜色 */
        /* a:visited {
            color: darkgrey
        } */

        /* 3. a:hover 给鼠标经过的link添加颜色 */
        a:hover {
            color: skyblue;
        }

        /* 4. a:active 鼠标点击link后还没有松手时候的颜色设定*/
        /* a:active {
            color: tomato;
        } */
    </style>

</head>

<body>
    <ul>
        <li><a href="https://news.qq.com/">腾讯新闻</a></li>
        <li><a href="https://www.baidu.com/">百度</a></li>
        <li><a href="https://news.sina.com.cn/">新浪新闻</a></li>
        <li><a href="https://news.yahoo.com/">雅虎</a></li>
        <li><a href="https://www.iqiyi.com/">爱奇艺</a></li>
        <li><a href="https://www.youku.com/">优酷</a></li>
    </ul>

</body>

</html>

十二，伪类选择器  --- focus选择器

focus一般对于文本框中鼠标点击出呈现不同颜色的状态，这类的案例比较多。主要是增加用户体验的。同Input连用！！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>:focus伪类选择器</title>
    <!-- 主要针对input标签进行焦点捕捉而使用的.简单来说就是表格中鼠标点击在
        那个框中，那么那个框中就生效我们设定的样式。离开选框则不生效。 -->
    <style>
        strong {
            font-family: "Microsoft Yahei";
            font-size: 28px;
            font-weight: 400;
        }

        input {
            width: 200px;
            height: 30px;

        }

        input:focus {
            background-color: skyblue;
            font-size: 28px;
            color: red;
        }
    </style>
</head>

<body>
    <strong>用户名:</strong>  <input type="text"><br>
    <strong>密 码:</strong>      <input type="password"><br>
    <strong>域 名：</strong>  <input type="text">

</body>

</html>

十三，行内元素转行内块元素

一、行内元素和块级元素

1.1、块级元素（inline）：

　　　　　　它独占一行；

　　　　　　它的宽高可以设置；

　　　　　　默认时，宽度是100%；

　　例如：<div>、<h1-h6>、<ul>、<ol> 、<li>等。

1.2、行内元素（block）：

　　　　　　它的宽度由内容决定，高度有内容字体大小决定；

　　　　　　它不可以设置宽高；

　　　　　　它可以和其他的行内元素位于同一行；

　　例如：<span>、<label>、<i>、<e>等。　

1.3、行内块级元素（inline-block）：

　　　　　　它即可以和其他的行内元素位于同一行，

　　　　　　元素的宽高及与边的间距都可以设置；

　　例如：<input>、<img>、<select>等。

二、块级元素、行内元素、行内块级元素转换

2.1、display：block；转换成块级元素。

2.2、display：inline；转换成行内元素。

2.3、display：inline-block；转换成行内块级元素。

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简洁版小米边栏案例</title>
    <!-- 这个案例主要练习行内元素转块元素后的特点 -->

    <style>
        a {
            /* 1.把a行内元素转换为块元素(display:block) */
            display: block;
            /* 2.调整块元素的宽度和高度 */
            width: 227px;
            height: 53px;
            /* 3.给背景加颜色 */
            background-color: #999d9d;
            /* 4.把链接下滑键去掉 */
            text-decoration: none;
            /* 5.设置块元素中文字的颜色 */
            color: #ffffff;
            /* 6.因为还没有学块结构，这里通过text-indent:2em缩进调整字体与边框的距离 */
            text-indent: 2em;
            /* 7.设置文字的大小 */
            font-size: 14px;
            /* 8.实现文字的垂直居中效果 */
            /* 让行高等于盒子的高度就能实现文字垂直居中 */
            line-height: 53px;
        }

        /* 使鼠标经过链接后呈现颜色效果 */
        a:hover {
            background-color: #ff6700;
        }
    </style>

</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 显示器 平板</a>
    <a href="#">家电 插线板</a>
    <a href="#">出行 穿梭</a>
    <a href="#">智能 路由器</a>
    <a href="#">电源 配件</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音箱</a>
    <a href="#">生活 箱包</a>
</body>

</html>

十四，元素转换及各个标签连用案例（简易版 --- 王者荣耀）

图片可以任意去王者荣耀官网下载，这里因为图片占用面积问题不在此提供

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易版本王者荣耀界面</title>
    <style>
        /* 贴边 */
        * {
            margin: 0;
            padding: 0;
        }

        a {
            /* 行内元素 */
            display: inline;
            font-size: 20px;
            color: white;
            /* 去除下划线 */
            text-decoration: none;
        }
        /* 伪类选择器中的hover用法.鼠标经过时呈现设定属性效果 */
        a:hover {
            color: #e4b653;
            background-color: #f5e4ec;
        }

        table {
            width: 1255px;
            height: 30px;
            background-color: #070a12;
        }

        /* background-image 添加背景图片 */
        div {
            width: 1260px;
            height: 575px;
            /* 添加背景图片 */
            background-image: url(../images/waner.jpg);
            /* 页面不平铺 */
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <table border="0">
        <tr>
            <td><img src="../images/wangzhelogo.jpg"></td>
            <td><a href="#">官网页面</a></td>
            <td><a href="#">游戏资料</a></td>
            <td><a href="#">内容中心</a></td>
            <td><a href="#">赛事中心</a></td>
            <td><a href="#">百态王者</a></td>
            <td><a href="#">社区互动</a></td>
            <td><a href="#">玩家支持</a></td>
            <td><img src="../images/Snipaste_2020-06.jpg"></td>
        </tr>
    </table>
    <div>

    </div>
</body>

</html>

十五，综合案例（王者荣耀官网 右上角logo制作）

图片：这个图标很小。因此在此提供。案例主要练习（background-image/background-repeat/background-position）的用法

【CSS】两周玩转CSS （上部）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-repeat案例</title>
    <!-- 王者荣耀右上角logo的制作 -->
    <style>
        h3 {
            width: 108px;
            height: 14px;
            font-size: 14px;
            /* 字体不显示粗体 */
            font-weight: 400;
            /* 同盒子高度相同可以实现居中效果 */
            line-height: 14px;
            /* 加载背景图片 */
            background-image: url(../images/icon.jpg);
            /* 背景图片不平铺 */
            background-repeat: no-repeat;
            /* 调整盒子中图片的位置 */
            background-position: left center;
            /* 调整盒子中字体的位置 */
            text-indent: 1.5em;
        }
    </style>
</head>

<body>
    <h3>
        成长守护平台
    </h3>
</body>

</html>

十六，背景复合写法（background）

复合写法之前在text中也使用过。主要就是节省代码的量。有些复合写法有一定的顺序要求。这里的background的复合写法不需要按照顺序来写但是常规我们会按照一定的规则去写，但是不是强制的。

同样代码中的图太大，这里不提供。随便下载一副图插入即可。（既然作为背景图，请选择较大一点的图片）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景复合型写法</title>
    <style>
        body {
            /* background-image: url(../images/juzi.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center top; */

            /* 背景复合型写法，可以一行代码完成上述四行代码的内容 */
            /* 其中background-attachment: fixed;代表使背景图像固定不动。 */
            background: url(../images/juzi.jpg) no-repeat fixed center top;
        }

        p {
            font-size: 26px;
            color: white;
            text-indent: 20em;
        }
    </style>
</head>

<body>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>
    <p>天王盖地虎，宝塔镇河妖！！</p>

</body>

</html>

十七，背景复合写法 --- 透明效果（background：color（0,0,0,浮点数）

使用方法：例如 background: rgba(0, 0, 0, .5)  中的 rgba代表颜色. r 代表red g 代表 green b 代表blue a代表alpha透明度。而括号中的0分别跟rgba一一对应起来。

.5代表半透明。这里的透明度取值范围在 0.1-1之间。最大不能大于1

图片进行了修改大小在此提供

【CSS】两周玩转CSS （上部）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景半透明效果</title>
    <style>
        .first {
            /* r代表red g代表green b代表blue alpha代表透明度0-1之间 0为完全透明 1为完全不透明 */
            width: 600px;
            height: 400px;
            background-image: url(../images/waner2.jpg);
            background-repeat: no-repeat;

        }

        * {
            margin: 0;
            padding: 0;
        }

        a {
            /* 转换块元素 */
            display: block;
            /* 去掉链接下划线 */
            text-decoration: none;
            /* 设置字体颜色 */
            color: white;
            /* 设置字体大小 */
            font-size: 18px;
            /* 设置字体水平居中 */
            text-align: center;
            /* text-indent: 3em; */
            /* 设置行高位置 */
            line-height: 275px;
            /* 设置背景颜色及位置.5为透明度 */
            background: rgba(0, 0, 0, .5)
        }
    </style>
</head>

<body>
    <div class="first">
        <ul>
            <li>
                <a href="#">MVP 理所当然！！！</a>
            </li>
        </ul>
    </div>
</body>

</html>

十八，五彩导航栏案例

图片提供

【CSS】两周玩转CSS （上部）【CSS】两周玩转CSS （上部）【CSS】两周玩转CSS （上部）【CSS】两周玩转CSS （上部）【CSS】两周玩转CSS （上部）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五彩导航练习</title>
    <style>
        /* 行内元素转换块元素后设定属性 */
        .nav a {
            display: inline-block;
            width: 121px;
            height: 57px;
            text-decoration: none;
            /* background-color: yellowgreen; */
            /* 文字垂直居中对齐 */
            text-align: center;
            line-height: 47px;
            /* 因为截图中包含了文字，因此下面属性可以不设置 */
            /* font-size: 16px;
            color: white; */

        }

        /* 添加背景颜色 */
        .nav .bg1 {
            background: url(../images/nav1.jpg) no-repeat
        }

        .nav .bg2 {
            background: url(../images/nav2.jpg) no-repeat
        }

        .nav .bg3 {
            background: url(../images/nav3.jpg) no-repeat
        }

        .nav .bg4 {
            background: url(../images/nav4.jpg) no-repeat
        }

        /* 鼠标移动到每个导航栏后背景颜色变化 */
        .nav .bg1:hover {
            background-image: url(../images/nav11.jpg);
        }

        .nav .bg2:hover {
            background-image: url(../images/nav44.jpg);
        }

        .nav .bg3:hover {
            background-image: url(../images/nav11.jpg);
        }

        .nav .bg4:hover {
            background-image: url(../images/nav22.jpg);
        }
    </style>
</head>

<body>
    <div class="nav">
        <!-- 因为截图中包含了文字因此这里为空白 -->
        <a href="#" class="bg1"></a>
        <a href="#" class="bg2"></a>
        <a href="#" class="bg3"></a>
        <a href="#" class="bg4"></a>
    </div>
</body>

</html>

十九，权重   --- 练习1

关于权重的介绍请参照

https://www.jianshu.com/p/ceeb49063672

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权重练习1</title>
    <style>
        /* 继承过来的权重为0 */
        .nav body {
            /* 权重为0,0,1,0 + 0,0,0,1   结果11*/
            color: brown;
        }

        div {
            /* 权重为0,0,0,1  结果1*/
            /* 虽然body的权重比较高但是继承的权重为0,因此实际显示颜色为div中的颜色 */
            color: chartreuse;
        }
    </style>
</head>

<body class="nav">
    <div>
        我是继承过来的颜色.
    </div>
</body>

</html>

二十，权重   --- 练习2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权重练习2</title>
    <style>
        /* 第一个li的颜色是蓝色的，第二个li的颜色是coral色的 */
        /* 原因：
            1. 对于颜色第一个li的权重 blue 0,0,1,0 + li 0,0,0,1 = 11 而
            nav的权重是继承过来的因此是0,所以blue的颜色优先。但是font-size是继承过来的因此大小为18px

            2. 对于第二个li而言它没有任何元素是自己的，因此都是继承ul的颜色及字体大小。因此呈现的事coral色
         */
        .nav {
            color: coral;
            font-size: 18px;
        }

        .blue {
            color: blue;
        }
    </style>
</head>

<body>
    <div>
        <ul class="nav">
            <li class="blue">我是li的权重</li>
            <li>我是li的权重</li>
        </ul>
    </div>
</body>

</html>

二十一，盒子模型  --- border

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之边框</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            /* 边框的粗细 */
            border-width: 5px;
            /* 边框的样式 solid 实线边框  dashed 虚线边框 dotted 点线边框*/
            border-style: solid;
            border-color: cyan
        }
    </style>
</head>

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

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border复合性写法</title>

    <style>
        div {
            width: 600px;
            height: 400px;
            /* border的复合写法 没有顺序约定
            但是一般会按照border-width border-style border-color的顺序来写
             */
            /* border: 1px solid red; */
            /* 还可以对边框四周的线进行不同颜色或样式的设定 
            以下分别是按照上下左右来定义颜色跟样式的*/
            border-top: 2px dashed blue;
            border-bottom: 2px solid greenyellow;
            border-left: 5px dotted red;
            border-right: 5px dashed pink;
        }
    </style>
</head>

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

</html>

二十二，盒子模型  --- （border-collapse）---合并相邻边框细线

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格细线边框</title>
    <!-- 主要关注border-collapse用法 -->
    <style>
        a {
            /* 去除链接下划线 */
            text-decoration: none;
            /* 链接默认设置为蓝色.这里为了重置颜色重新定义链接的颜色 */
            color: black;

        }

        a:hover {
            /* 鼠标经过时候呈现蓝色 */
            color: blue
        }

        .weight {
            /* 字体显示正常字体不加粗 */
            font-weight: 400;
        }

        h2 {
            /* 字体居中对齐，颜色为蓝色 */
            text-align: center;
            color: blue
        }

        h3 {
            /* 字体靠右居中显示 */
            text-align: right;
        }

        table {
            width: 1200px;
            height: 400px;
        }

        table,
        th,
        td {
            /* border的复合写法 边框粗细为1px 实线显示 颜色为skyblue */
            border: 1px solid skyblue;
            /* 合并相邻的边框 因为table设置了cellspacing=0 所以边框会出现重叠的现象.border-collapse可以合并相邻的边框 */
            border-collapse: collapse;
        }

        th {
            /* 设置th的行高 */
            line-height: 40px;
        }

        td {
            text-align: center;
        }
    </style>
</head>

<body>
    <h2 id="home" class="weight">手机商品列表</h2>
    <!--table属性 
        align="center" border="1" cellpadding="0" cellspacing="0" width=1000 height="250" -->
    <table align="center" cellspacing=0>
        <thead>
            <th>商品名</th>
            <th>商品编号</th>
            <th>商品产地</th>
            <th>操作系统</th>
        </thead>
        <tbody>
            <tr>
                <td><a href="#">华为 mate Pro40 <img src="../images/华为matePro4.jpg" alt="华为 matePro40" title="力挺华为"
                            width="200" height="200"></a></td>
                <td>100007299145</td>
                <td>*</td>
                <td>鸿蒙操作系统</td>
            </tr>
            <tr>
                <td><a href="#">小米（MI）小米9 Pro 5G <img src="../images/小米9Pro.jpg" alt="小米9Pro" title="支持小米" width="200"
                            height="200"></a></td>
                <td>57631478891</td>
                <td>*</td>
                <td>安卓操作系统</td>
            </tr>
            <tr>
                <td><a href="#">AppleiPhone 11 <img src="../images/Apple_iphone11.jpg" alt="iPhone 11" title="正在降价中"
                            width="200" height="200"></a>
                </td>
                <td>100008348508</td>
                <td>*</td>
                <td>IOS操作系统</td>
            </tr>
        </tbody>

    </table>
    <a href="#home">
        <h3 class="weight">返回首部</h3>
    </a>
</body>

</html>

二十三，盒子内边距 (Padding）

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

CSS padding 属性定义元素边框与元素内容之间的空白区域。

CSS 内边距属性

属性 描述
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。 
注意事项：复合写法注意点
1. 1个值 代表上下左右都有5像素的内边距
       padding:5px; 
2. 2个值 代表上下内边距是5像素，左右内边距是10像素
       padding:5px 10px;
3. 3个值 代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
       padding:5px 10px 20px;
4. 4个值 代表上是5像素，右10像素，下20像素，左30像素 顺时针
       padding:5px 10px 20px 30px;
5. 重点：跟border一样加了内边距会影响我们盒子的大小。为了解决这个问题。需要在盒子的大小中减去内边距的大小

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之内边距Padding用法</title>
    <!-- 注意事项：复合写法注意点
    1. 1个值 代表上下左右都有5像素的内边距
       padding:5px; 
    2. 2个值 代表上下内边距是5像素，左右内边距是10像素
       padding:5px 10px;
    3. 3个值 代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
       padding:5px 10px 20px;
    4. 4个值 代表上是5像素，右10像素，下20像素，左30像素 顺时针

    5. 重点：跟border一样加了内边距会影响我们盒子的大小。为了解决这个问题。需要在盒子的大小中减去内边距的大小
    -->
    <!-- 模拟新浪导航栏 -->
    <style>
        div {
            /* 单独给div盒子设置背景颜色 */
            background-color: #214088;
            /* 调整边框的距离 */
            margin: 20px;
        }

        .nav a {
            /* 转换为行内块元素 */
            display: inline-table;
            /* 不要设置宽度，通过内边距挤出宽度 */
            height: 36px;
            /* 0为上下的行高不能省略 10px为左右内边距的距离 */
            padding: 0 10px;
            text-decoration: none;
            font-size: 16px;
            color: #ececec;
            /* 行高跟高度对齐代表字体居中显示 */
            line-height: 36px;
        }

        .nav a:hover {
            background-color: #a41303;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="https://news.sina.com.cn/roll/#pageid=153&lid=2509&k=&num=50&page=1" target="_blank">滚动</a>
        <a href="http://news.sina.com.cn/hotnews/" target="_blank">排行</a>
        <a href="http://gov.sina.com.cn/?z_7u49m" target="_blank">政务</a>
        <a href="http://news.sina.com.cn/zt_nys/nxw0312/#282402036" target="_blank">暖文</a>
        <a href="https://news.sina.com.cn/china/" target="_blank">国内</a>
        <a href="https://news.sina.com.cn/world/" target="_blank">国际</a>
        <a href="https://mil.news.sina.com.cn/" target="_blank">军事</a>
        <a href="http://piyao.sina.cn/" target="_blank">辟谣</a>
        <a href="https://news.sina.cn/zt_d/sz2019" target="_blank">知事</a>
        <a href="http://cul.news.sina.com.cn/" target="_blank">文化</a>
        <a href="http://sifa.sina.com.cn/" target="_blank">司法</a>
        <a href="https://tousu.sina.com.cn/" target="_blank">黑猫投诉</a>
        <a href="http://photo.sina.com.cn/" target="_blank">图片</a>
        <a href="http://news.video.sina.com.cn/" target="_blank">视频</a>
        <a href="http://sports.sina.com.cn/" target="_blank">体育</a>
        <a href="https://ent.sina.com.cn/" target="_blank">娱乐</a>
        <a href="https://finance.sina.com.cn/" target="_blank">经济</a>
        <a href="https://tech.sina.com.cn/" target="_blank">科技</a>
        <a href="http://news.sina.com.cn/zt/" target="_blank">专题</a>
    </div>

</body>

</html>

二十四，盒子内边距 (Margin）

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

CSS 外边距属性

属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之margin外边距</title>
    <style>
        div {
            /* 调整盒子宽度和高度 */
            width: 400px;
            height: 300px;
            /* 给盒子设置一个背景色 */
            background-color: cornsilk;
            /* 通过外边距调整盒子跟盒子之间的间距 */
            /* margin:0 auto 代表上下外边距是0px,左右外边距页面居中显示 */
            margin: 0 auto;
        }

        /* 对于第1个div而言跟第2个div外边距保持30px用以下写法 */
        .one {
            /* 外边距下方距离为30px */
            margin-bottom: 30px;
        }

        img {
            /* 设置图片的大小。这里跟盒子一样宽 */
            width: 400px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="one"><img src="../images/meishi1.jpg" alt="美食1"></div>
    <div><img src="../images/meishi2.jpg" alt="美食2"></div>

</body>

</html>

二十五，行内元素及行内快元素的字体集中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素及行内块元素的居中</title>
    <!-- 行内块元素及行内元素的字体如果直接通过margin:auto去设定是无法使文字居中的。但是可以给它的父亲添加text-align:center来使字体居中显示 -->
    <style>
        body {
            background-color: gray;
        }

        div {
            width: 600px;
            height: 500px;
            margin: 0 auto;
            /* 通过继承给父元素的div添加text-align:center来实现文字的居中 */
            text-align: center;
        }

        p {
            font-family: "Microsoft Yahei";
            font-size: 50px;
            font-weight: 700;
        }

        img {
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div>
        <p> 小米手机官网 </p>
        <img src="../images/小米9Pro.jpg" alt="小米手机">
    </div>
</body>

</html>

二十六，嵌套块元素的塌陷问题（overflow:hidden）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套快元素塌陷解决方法</title>
    <style>
        .father {
            width: 1000px;
            height: 600px;
            background-color: hotpink;
            margin: 0 auto;
            /* 添加overflow:hidden；后son的盒子就不会添加高度和宽度影响父级盒子塌陷问题了 */
            overflow: hidden;

        }

        .son {
            width: 600px;
            height: 400px;
            /* 如果想要让son的div盒子离我们father div边距有100px居中效果，直接给margin: 100px auto;会出现塌陷问题 */
            margin: 100px auto;

            /* 解决方法：只推荐这一种。因为不会增加盒子大小 */
            /* 给父元素盒子上添加 overflow:hidden; */


        }

        img {
            width: 600px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"><img src="../images/上官婉儿.jpg" alt="婉儿"></div>
    </div>
</body>

</html>

二十七，综合案例（华为商城部分案例演示）---- 没有使用浮动

【CSS】两周玩转CSS （上部）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为手机列表案例</title>
    <style>
        * {
            /* 去除内外边距 */
            padding: 0px;
            margin: 0px;
        }

        .father {
            /* 最大的盒子设定属性 */
            width: 1197px;
            height: 598px;
            background-color: #f0f2ff;
            /* 外边距上下20像素，居中显示 */
            margin: 20px auto;
        }

        .leader {
            /* 设置5个纵向盒子的大小属性 */
            width: 235px;
            height: 596px;
            background-color: #f0f2ff;
            /* 子盒子设置内外边距会塌陷大盒子。因此指定overflow:hidden; */
            overflow: hidden;
            /* 设置text-align使子盒子中的文字居中显示 */
            text-align: center
        }

        li {
            /* 把li转换成行内块元素 */
            display: inline-block;
        }

        li a div {
            /* 最大的图片离5988金额之间的内边距距离为31像素 */
            padding-top: 31px;
            /* 设置图片宽度跟父亲宽度一样宽 */
            width: 100%;
        }

        .son {
            width: 233px;
            height: 292px;
            background-color: #f9f9f9;
            /* 设置纵向盒子中的两个子盒子之间的外边距为10像素 */
            margin-bottom: 10px;
        }


        h3 {
            /* 字体离新品logo的内边距距离为36px */
            padding-top: 36px;
            color: black;
        }

        p {
            /* 所有p标签离上方的内间距的距离为10px */
            padding-top: 10px;
        }

        .one {
            color: #a1a3ab;
            font-size: 14px;
        }

        .two {
            color: #d11128;
            font-size: 18px;
            /* 设置字体加粗 */
            font-weight: 700;
        }

        .leader a {
            /* 去除链接中的下划线 */
            text-decoration: none;
        }


        .leader a:hover {
            /* 去除链接中的下划线 */
            text-decoration: none;
        }

        .nava {
            /* 内边距距离上方34像素 */
            padding-top: 34px;
        }

        .changed {
            /* 内边距距离上方9像素 */
            padding-top: 9px;
        }

        .o {
            color: #a1a3ab;
            font-size: 14px;
        }

        .t {
            color: #d11128;
            font-size: 14px;
            /* 字体不变粗，正常字体 */
            font-weight: 400;
        }

        .fon {
            color: #3a3a3a;
            font-size: 13px;
        }
    </style>
</head>

<body>
    <div class="father">
        <ul>
            <li class="leader">
                <!-- 左边盒子的设置 -->
                <a href="https://www.vmall.com/product/10086715691479.html" target="_blank">
                    <!-- 添加新品logo -->
                    <img src="../images/Snipaste_logo.jpg" alt="logo">
                    <h3>HUAWEI P40 Pro | 5G</h3>
                    <p class="one">享12期免息</p>
                    <p class="two">￥5988起</p>
                    <div>
                        <img src="../images/huaweip40pro5G.jpg" alt="华为p40">
                    </div>
                </a>
            </li>
            <li class="leader">
                <!-- 第二个纵向盒子的设置，里面分2个div盒子 -->
                <div class="son">
                    <!--把子div中包含的所有内容都包含到a链接中 -->
                    <a href="https://www.vmall.com/product/10086783311507.html" target="_blank">
                        <!-- 子div中的设置 -->
                        <div class="nava">
                            <img src="../images/110x142nava7.jpg" alt="nava7">
                            <p class="fon">HUAWEI nova 7 5G</p>
                            <p class="o">6期免息</p>
                            <p class="t">￥2999</p>

                        </div>
                    </a>
                </div>
                <div class="son">
                    <!-- 第二个纵向盒子中下方盒子的设置 -->
                    <a href="https://www.vmall.com/product/10086775311605.html" target="_blank">
                        <div class="nava">
                            <img src="../images/mate30pro.jpg" alt="mate 30 pro">
                            <p class="fon">HUAWEI Mate 30 Pro 5G</p>
                            <p class="o">立减130元|12期免息</p>
                            <p class="t">￥6369</p>

                        </div>
                    </a>
                </div>
                <div class="son"></div>
            </li>
            <li class="leader">
                <div class="son">
                    <!-- 第三个纵向盒子两个div的设置 -->
                    <a href="https://www.vmall.com/product/10086557426930.html" target="_blank">
                        <img src="../images/Snipaste_logo.jpg" alt="新品">
                        <div class="changed">
                            <img src="../images/nava2.jpg" alt="rongyao30s">
                            <p class="fon">荣耀 30</p>
                            <p class="o">最高省311元|部分增配件|免息</p>
                            <p class="t">￥3199</p>

                        </div>
                    </a>
                </div>
                <div class="son">
                    <a href="https://www.vmall.com/product/10086024821187.html" target="_blank">
                        <img src="../images/Snipaste_logo.jpg" alt="新品">
                        <div class="changed">
                            <img src="../images/rongyao30s.jpg" alt="nava7">
                            <p class="fon">荣耀 30S</p>
                            <p class="o">最高优惠200</p>
                            <p class="t">￥2399</p>

                        </div>
                    </a>
                </div>
            </li>
            <li class="leader">
                <div class="son">
                    <!-- 第四个纵向盒子中两个div子盒子的设置 -->
                    <a href="https://www.vmall.com/product/10086238753372.html" target="_blank">
                        <div class="nava">
                            <img src="../images/mate30.jpg" alt="mate30">
                            <p class="fon">HUAWEI Mate 30 5G</p>
                            <p class="o">立减130元|12期免息</p>
                            <p class="t">￥4469</p>

                        </div>
                    </a>
                </div>
                <div class="son">
                    <img src="../images/tehui.jpg" alt="特惠">
                    <a href="https://www.vmall.com/product/10086118909880.html" target="_blank">
                        <div class="changed">
                            <img src="../images/nova5g.jpg" alt="nova5z">
                            <p class="fon">HUAWEI nava 5z</p>
                            <p class="o">限时直降330元</p>
                            <p class="t">￥1269</p>

                        </div>
                    </a>
                </div>
            </li>
            <li class="leader">
                <div class="son">
                    <!-- 第五个纵向盒子中两个div子盒子的设置 -->
                    <a href="https://www.vmall.com/product/10086238753372.html" target="_blank">
                        <div class="nava">
                            <img src="../images/play4.jpg" alt="play4">
                            <p class="fon">荣耀play4</p>
                            <p class="o">享6期免息</p>
                            <p class="t">￥1999</p>

                        </div>
                    </a>
                </div>
                <div class="son">
                    <a href="https://www.vmall.com/product/10086348829267.html" target="_blank">
                        <div class="nava">
                            <img src="../images/play4Tpro.jpg" alt="play4T">
                            <p class="fon">荣耀 play4T Pro</p>
                            <p class="o">会员购机赠耳机</p>
                            <p class="t">￥1399</p>

                        </div>
                    </a>
                </div>
            </li>
        </ul>


    </div>
</body>

</html>
华为商城部分案例演示

 

 

 

【CSS】两周玩转CSS （上部）

上一篇：使用rancher-cpmose+docker-compose对mysql推cicd.


下一篇：my sql计算字段的长度