首页 > 博客列表 > CSS与HTML文档（元素的类型与属性、CSS基础）

博主信息

博文 119

粉丝 3

访问量 121247

专题推荐

更多>

1、html文档元素

页面中所有显示的内容都是可见元素, 元素显示在浏览器为它生成的元素框中
查看页面中所有元素生成的”框”: * {outline: 1px dashed red}：给所有元素加轮廓线

1.1 元素类型

序号	分类依据	类型	描述
1	显示方式	块级元素	默认生成一个填满父级内容区的元素框,且二侧不能有其它元素,如`<div>`,`<p>`…
2	显示方式	行内元素	默认在一行文本内生成元素框,不打断所在行,如`<a>`,`<span>`…
3	显示方式	行内块元素	默认在一行文本内生成元素框,不打断所在行,但支持宽高,如`<img>`…
4	内容提供	置换元素	元素框内容由外部资源提供，随外部资源改变而改变,元素框就是占位符`<img>`,`<input>`..
5	内容提供	非置换元素	元素框内容`程序员写入`,浏览器生成,如`<p>`,`<span>`…

1.2 display 属性

每个元素都可以通过style="display:type控制它的显示类型,即生成什么样的”元素框”

display属性常用值

序号	属性值	描述
1	`inline`默认	行内元素,`<span>`, `<a>`
2	`block`	块级元素,`<div>`,`<p>`
3	`inline-block`	行内块级元素,`<img>`，可以设置宽高
4	`list-item`	块级: 列表元素,`<li>`
5	`table`	块级: 表格元素,`<table>`
6	`flex`	弹性元素
7	`grid`	网格元素

元素显示类型可以自定义

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>置换元素和非置换元素</title>
    <style>
        * {
            /*给所有元素加轮廓线*/
            outline: 1px dashed red;
        }
        p {
            background-color: dodgerblue;
            text-align: center;
        }
    </style>
</head>
<body>
<!-- 非置换元素:双标签 -->
<!--块元素，独占一行-->
<p>xin chao the gioi!</p>
<!-- 置换元素: 单标签 , 双标签（video） -->
<!--行内元素，和其它元素水平排列，不可设置宽高-->
<a href="" style="width: 50px;">10.3.10.77</a>
<strong style="width: 100px;">天虹仁泽</strong>
<!--行内块元素，和其它元素水平排列，可设置宽高-->
<label for="input">输入框：</label>
<input type="text" id="input" style="width: 50px;" />
<img src="timtim.jpeg" alt="" width="280" />
<img src="timtim.jpeg" alt="" width="280" />
<!--根据是否是通过标签属性导入内容来区分非置换元素和非置换元素-->
</body>
</html>

2、CSS基础：层叠样式表

最后声明的样式生效。

2.1 样式规则

css 语法:selector {property: value;...}

组成	描述
`selector`	选择符,或者称”选择器”,决定文档中哪部分受到影响
`{property: value;...}`	声明块,由 “属性” 与 “属性值” 二部分组成

2.2 CSS 应用到html 上的方式

序号	属性值	描述	备注
1	`link`标签	`<link rel="stylesheet" href="..." />`	加载外部样式
3	`@import`指令	`@import url(…)	@import ‘…’`	外部样式
2	`<style>`元素	`<style>...</style>`	内部样式
4	`style=""`属性	`<tag style="...">`	行内样式

外部 css 样式表文档,默认扩展名为: .css

2.3 css 注释

单行/多行: /* 注释内容 */
注释可以写到样式规则外部,也可以写到内部
注释不允许嵌套

2.4 厂商前缀

厂商前缀: 各浏览器厂商用来测试专属规则的,具有实验性和先进性
得到用户广泛认可的厂商前缀规则, 是有可能进入 W3C 标准的
随着浏览器之间的差异逐渐消失, 厂商前缀最终会走向消亡

常用厂商前缀:

序号	前缀	描述
1	`-moz-`	基于`Mozilla`的浏览器,如`FireFox`(火狐)
2	`-ms-`	基于微软`Internet Explorer`的浏览器
3	`-o-`	基于`Opera`(欧朋)的浏览器
4	`-webkit-`	基于`WebKit`内核的浏览器,如`Chrome`,`Safari`
5	`-epub-`	基于国际数字出版论坛制定的格式

2.5 处理空白

与 html 文档类似, css 也支持使用空白符来格式化文档,增强可读性
css 中的多个空白符, 会全部合并成一个空白符显示
空白符,可以由空格, 制表符, 换行符生成
当属性值可有多个关键字时, 必须使用空白符分开

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <!--`link`标签加载-->
    <link rel="stylesheet" href="css/style2.css" />
    <title>CSS应用到html的方式</title>
</head>
<body>
<h2>工资明细</h2>
<ul>
    <li>出勤：26</li>
    <li>应发：20000000</li>
    <li>保险：1000000</li>
    <li>实领：1900000</li>
</ul>
</body>
</html>
<!--导入外部css样式-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <!--导入css样式-->
    <link rel="stylesheet" href="css/style2.css" />
    <title>外部css样式复用</title>
</head>
<body>
<h2>我的购物车</h2>
<ul>
    <li>水果</li>
    <li>衣服</li>
</ul>
</body>
</html>
<!--内部css样式-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>内部样式表</title>
    <!-- 在html文档中如果添加其它内容,必须通过标签的方式加入 -->
    <!-- 内部样式表, 写在当前的html文档中, 仅在当前文档有效 -->
    <style>
        ul {
            border: 1px solid #ccc;
            background-color: #efefef;
            padding: 15px 30px 15px;
        }
        ul > li {
            margin: 10px;
        }
        h2 {
            color: green;
        }
    </style>
</head>
<body>
<h2>工资明细</h2>
<ul>
    <!--style属性设置样式，只针对当前标签生效-->
    <li>
        <strong style="color: coral;">出勤</strong> : 26
    </li>
    <li>
        <strong style="color: coral;">应发</strong>: 20000000
    </li>
    <li>
        <strong style="color: coral;">保险</strong>: 1000000
    </li>
    <li>
        <strong style="color: violet;">实领</strong>:1900000
    </li>
</ul>
</body>
</html>

4. 媒体查询：`设置浏览器使用指定的样式表的媒体`

媒体类型：不同媒体的标识符

序号	类型	描述
1	`all`	所有媒体类型,即不限制
2	`print`	打印机,预打印预览使用
3	`screen`	屏幕,如浏览器等用户代理
4	`projection`	幻灯片

多种媒体类型之间使用逗号分隔: @media screen, print

4.1 媒体描述符

媒体类型通常会添加”媒体描述符”进行精准限制,例如设置媒体尺寸,分辨率等
媒体描述符的语法与 css 样式声明非常类似,如min-width: 500px
与 css 声明的不同之处在于,媒体描述符允许没有值,如print and (color)
多个 “媒体描述符” 之间使用 “逻辑关键字” 连接, 如 and 和 not
and表示多个”媒体描述符”必须同时满足, not则是整个查询取反,且必须写在and前面

常用 “媒体描述符”(显示区域相关)

序号	媒体描述符	描述
1	`width`	显示区域宽度
2	`min-width`	显示区域最小宽度
3	`max-width`	显示区域最大宽度
4	`device-width`	设备显示区域宽度
5	`min-device-width`	设备显示区域最小宽度
6	`max-device-width`	设备显示区域最大宽度
7	`height`	显示区域高度
8	`min-height`	显示区域最小高度
9	`max-height`	显示区域最大高度
10	`device-height`	设备显示区域高度
11	`min-device-height`	设备显示区域最小高度
12	`max-device-height`	设备显示区域最大高度

max-width与max-device-width区别:

max-width: 浏览器显示区域宽度,与设备无关,通常用于 PC 端
max-device-width: 设备分辨率的最大宽度,通常用于移动端

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="font_0406/iconfont.css" />
    <title>媒体查询</title>
    <style>
        .nav {
            height: 50px;
            background-color: #eee;
            display: flex;
            align-items: center;
        }
        .nav ul {
            display: flex;
            list-style: none;
        }
        .nav ul a {
            color: #666;
            text-decoration: none;
            padding: 0 15px;
        }
        .iconfont {
            display: none;
        }
        /* 局部媒体查询,当屏幕宽度小于400px,不要显示菜单了 */
        @media screen and (max-width: 400px) {
            .nav ul {
                display: none;
            }
            /*简单实现课堂最后提到的问题*/
            .iconfont {
                font-size: 50px;
                display: block;
            }
        }
    </style>
</head>
<body>
<div class="nav">
    <div class="log">LOGO</div>
    <ul>
        <li>
            <a href="">首页</a>
            <a href="">视频</a>
            <a href="">问答</a>
            <a href="">下载</a>
        </li>
    </ul>
    <span class="iconfont icon-gengduo"></span>
</div>
</body>
</html>

总结

1、通过本堂课程，我首次意识到，元素还可以通过`display`指定属性。

2、css样式应用到html的四种方式需要注意灵活使用。

3、对本节课程中的媒体查询`根据显示大小不同设置不同显示效果`，感觉很神奇，十分感兴趣。

批改老师：

天蓬老师

批改状态：合格

老师批语：坚持

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

grid布局学习笔记

2020-04-15 03:09:38

1、html文档元素

1.1 元素类型

1.2 display 属性

实例代码：

2、CSS基础：层叠样式表

2.1 样式规则

2.2 CSS 应用到html 上的方式

2.3 css 注释

2.4 厂商前缀

2.5 处理空白

实例代码：

4. 媒体查询：设置浏览器使用指定的样式表的媒体

4.1 媒体描述符

实例代码：

总结

1、通过本堂课程，我首次意识到，元素还可以通过display指定属性。

2、css样式应用到html的四种方式需要注意灵活使用。

3、对本节课程中的媒体查询根据显示大小不同设置不同显示效果，感觉很神奇，十分感兴趣。

4. 媒体查询：`设置浏览器使用指定的样式表的媒体`

1、通过本堂课程，我首次意识到，元素还可以通过`display`指定属性。

3、对本节课程中的媒体查询`根据显示大小不同设置不同显示效果`，感觉很神奇，十分感兴趣。