简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > iframe标签使用、CSS样式的优先级及使用规则以及盒模型五大要素演示--2019年9月2日22时
Blogger Information
Blog 7
fans 0
comment 0
visits 5219
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
iframe标签使用、CSS样式的优先级及使用规则以及盒模型五大要素演示--2019年9月2日22时
非常烟贩的博客
Original
1165 people have browsed it

  • 问题目录

  • 1、实例演示:<iframe>标签的使用

  • 2、实例演示: css样式设置的优先级

  • 3、实例演示: css的id, class与标签选择器的使用规则

  • 4、实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)

  • 1、内联框架：在当前页面中，加载另一个页面，俗称“画中画”。如：<iframe>标签

实例

    <!-- 内联框架：画中画。在当前页面中，加载另一个页面。 -->
    <h1>内联框架的演示</h1>
    <h3><a href="https://baidu.com" target="baidu">度娘</a></h3>
    <p><iframe src="https://baidu.com" frameborder="1" name="baidu" width="500" height="300"></iframe>
    </p>

运行实例 »

点击 "运行实例" 按钮查看在线实例

1.jpg

  • 2、CSS的样式有三种：1.内联样式，2.内部样式，3.外部样式

内联样式：将元素的样式使用style属性应用到当前元素上，只适用于当前标签。<style=""

内部样式：高于外部样式。将元素的样式规则用style标签插入到当前的html文档中

                   这个样式规则，仅适用于当前的这个html文档。p{}

外部样式：将外部CSS文件资源引用到这个html文档。

显示级别：当三种样式都存在时显示内联样式。当只有内部样式和外部样式时，显示内部样式。内联样式    >内部样式    >外部样式

实例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 3.外部样式 -->
    <link rel="stylesheet" href="css/style1.css">
    <title>CSS简介与引入</title>
    <style>
        /* 2.内部样式  高于外部样式 */
        /* 将元素的样式规则用style标签插入到当前的html文档中
        这个样式规则，仅适用于当前的这个html文档 */   
        p {
            color: green;
        }
    </style>
</head>

<body>
    <!-- 1.内联样式：将元素的样式使用style属性应用到当前元素上，只适用于当前标签 -->
    <p style="color:blue;">林志玲嫁给一个***人</p>
    <p style="color:blue;">苍老师是一个***人</p>
    <p style="color:red;">波波姐也是一个***人</p>
</body>

</html>
<!-- 显示级别：
内联样式    >内部样式    >外部样式
<style=""     p{}      style1.css -->

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

p {
    color: goldenrod;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

2.jpg

3.jpg

4.jpg

  • 3、css选择器：指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。四种基本选择器：id选择器；类选择器；标签选择器；js选择器

  • 容器：通用容器和语句化标签

    <!DOCTYPE html>
    <html><head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>容器</title>
    </head><body>
        <!-- 通用容器 -->
        <div>最常用的块级容器</div>
        <span>最常用的内联容器</span>    <div id="header">头部</div>
        <div id="nav">导航</div>
        <div id="main">主题
            <div>左边内容区</div>
            <div>右边侧边栏</div>
        </div>
        <div id="footer">底部</div>    <!-- 语句化标签 -->
        <header>头部</header>
        <nav ">导航</nav>
        <main>主题
            <article>左边内容区</artivle>
            <aside>右边侧边栏</aside>
        </main>
        <footer>底部</footer>
    </body></html>

  • id选择器：针对某一个特定的标签使用。CSS中的id选择器用“#”来定义id样式，用id来引用。

    HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！

  • 类选择器：针对你想要的所有标签使用。CSS中用圆点“.”来定义类样式，用class来引用样式。

    （1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。

    （2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。例如：

    <style type="text/css">       
    .lv{           
        color: green;       
    }       
    .da{           
        font-size: 30px;
    }       
    .underline{           
        text-decoration: underline;      
    }   
    </style>

    然后让每个标签去选取自己想要用的类选择器：

      <p class="lv da">段落1</p>
      <p class="lv xian">段落2</p>
      <p class="da xian">段落3</p>

    类上样式，id上行为。意思是说，class属性交给css使用，id属性交给js使用

  • 标签选择器：针对页面上的一类标签。选择器的名字代表html页面上的标签。

    注意：(1)所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、   div等。 （2）无论这个标签藏的多深，一定能够被选择上。（3）选择的所有，而不是一个。

  • 三种选择器的区别：

    标签选择器针对的是页面上的一类标签。

    ID选择器是只针对特定的标签(一个)，ID是此标签在此页面上的唯一标识。

    类选择器可以被多种标签使用。

  • 实例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS基本选择器</title>
    <style>
        /* id选择器：一个 */
        
        #red {
            color: red;
        }
        /* 类选择器 ：一批*/
        
        .green {
            color: green;
        }
        /* 标签选择器 */
        
        p {
            color: aqua;
        }
    </style>
</head>

<body>
    <!-- 选择元素只会有两种可能： -->
    <!-- 1.找到了：又会有两种可能，找到一个，找到了一批 -->
    <!-- 2.没找到：第一种选择器语法错误，第二是页面中不存在与选择器匹配的元素 -->
    <p id="red">买了macbook的同学，后悔了吗？</p>
    <p class="green">原来CSS非常简单</p>
    <p class="green">做一个快乐的学习者</p>

    <!-- 优先级：标签< class < id < js -->
    <script>
        document.getElementsByTagName('p').item(0).style.color = 'blue';
    </script>
</body>

</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    5.jpg

  • 4 盒模型：

    HTML文档中的每个元素在渲染的时候都会被描绘成一个矩形盒子，而盒模型正是用来表示每个元素盒子所占用空间大小的模型。

    在我们现实生活中，描述一个矩形直接用宽和高即可。但是在CSS中主要通过四个部分来描述，分别为：margin（外边距），border（边框），padding（内边距），content（内容区域）。如下图：

    box-1.png

        1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子

           2. 盒子默认都是块级元素: 独占一行,支持宽度设置(根据盒子模型示意图分析)

           3. 盒子模型可以设置5个样式: 宽高背景内外边距与边框

            (1): width: 宽度(水平方向)

            (2): height: 高度(垂直方向)

            (3): background-color: 背景 (默认透明)

            (4): padding: 内边距, 内容与边框之间的填充区域

            (5): margin: 外边距,决定当前盒子与其它盒子之间的位置与关系

            (3): border:  边框, 位于内外边距之间, 是可见元素,允许设置宽度, 样式和颜色

            4. 根据是可见性可以分为二类:

            (1). 可见的: width, height, border

            (2). 透明的: background, padding, margin

            注: padding,margin 只允许设置宽度, 不允许设置样式与颜色

6.jpg

实例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style2.css">
    <title>盒模型</title>
</head>

<body>
    <!-- 1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子
    2. 盒子默认都是块级元素: 独占一行,支持宽度设置(根据盒子模型示意图分析)
    3. 盒子模型可以设置5个样式: 宽高背景内外边距与边框
    (1): width: 宽度(水平方向)
    (2): height: 高度(垂直方向)
    (3): background-color: 背景 (默认透明)
    (4): padding: 内边距, 内容与边框之间的填充区域
    (5): margin: 外边距,决定当前盒子与其它盒子之间的位置与关系
    (3): border:  边框, 位于内外边距之间, 是可见元素,允许设置宽度, 样式和颜色
    4. 根据是可见性可以分为二类:
    (1). 可见的: width, height, border
    (2). 透明的: background, padding, margin
     注: padding,margin 只允许设置宽度, 不允许设置样式与颜色 -->

    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


CSS: style2.css

实例

.box1 {
    /* 内容区content */
    width: 200px;
    height: 200px;
    background-color: lightblue;
    /*padding-top: 20px;*/
    /*padding-right: 30px;*/
    /*padding-bottom: 40px;*/
    /*padding-left: 50px;*/
    /*padding: 20px 30px 40px 50px;*/

    /* 内边距：上20，右30，下20，左30 */
    padding: 20px 30px;

    /* 边框 ：按顺时针方向*/
    /* 上边框 */
    border-top: 10px solid red;
    /* 右边框 */
    border-right: 10px dashed green;
    /* 下边框 */
    border-bottom-width: 10px;
    border-bottom-style: dotted;
    border-bottom-color: yellow;
    /* 左边框 */
    border-left-width: 20px;
    border-left-style: double;
    border-left-color: black;
}

.box2 {
    height: inherit;
    /*padding: inherit;*/
    /*margin: inherit;*/
    background-color: wheat;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：qualified

Teacher's comments：作业完成的相当出色, 特别是图片上标注, 一目了然
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！