search

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

CSS与HTML文档（元素的类型与属性、CSS基础）

赵大叔
赵大叔原创
2020年04月06日 17:43:46714浏览

代码演示效果链接：
http://www.dashushu.club/0405/demo1.html

http://www.dashushu.club/0405/demo2.html

http://www.dashushu.club/0405/demo4.html

http://www.dashushu.club/0405/demo6.html

媒体查询要打开检查器才看出效果。

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 网格元素

元素显示类型可以自定义

实例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>置换元素和非置换元素</title>
  7.     <style>
  8.         * {
  9.             /*给所有元素加轮廓线*/
  10.             outline: 1px dashed red;
  11.         }
  13.         p {
  14.             background-color: dodgerblue;
  15.             text-align: center;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20. <!-- 非置换元素:双标签 -->
  21. <!--块元素，独占一行-->
  22. <p>xin chao the gioi!</p>
  24. <!-- 置换元素: 单标签 , 双标签（video） -->
  25. <!--行内元素，和其它元素水平排列，不可设置宽高-->
  26. <a href="" style="width: 50px;">10.3.10.77</a>
  27. <strong style="width: 100px;">天虹仁泽</strong>
  29. <!--行内块元素，和其它元素水平排列，可设置宽高-->
  30. <label for="input">输入框：</label>
  31. <input type="text" id="input" style="width: 50px;" />
  32. <img src="timtim.jpeg" alt="" width="280" />
  33. <img src="timtim.jpeg" alt="" width="280" />
  35. <!--根据是否是通过标签属性导入内容来区分非置换元素和非置换元素-->
  36. </body>
  37. </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 中的多个空白符, 会全部合并成一个空白符显示
  • 空白符,可以由空格, 制表符, 换行符生成
  • 当属性值可有多个关键字时, 必须使用空白符分开

实例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8" />
  6.     <!--`link`标签加载-->
  7.     <link rel="stylesheet" href="css/style2.css" />
  8.     <title>CSS应用到html的方式</title>
  9. </head>
  10. <body>
  11. <h2>工资明细</h2>
  12. <ul>
  13.     <li>出勤：26</li>
  14.     <li>应发：20000000</li>
  15.     <li>保险：1000000</li>
  16.     <li>实领：1900000</li>
  17. </ul>
  18. </body>
  19. </html>
  21. <!--导入外部css样式-->
  22. <!DOCTYPE html>
  23. <html lang="en">
  24. <head>
  25.     <meta charset="UTF-8" />
  26.     <!--导入css样式-->
  27.     <link rel="stylesheet" href="css/style2.css" />
  28.     <title>外部css样式复用</title>
  29. </head>
  30. <body>
  31. <h2>我的购物车</h2>
  32. <ul>
  33.     <li>水果</li>
  34.     <li>衣服</li>
  35. </ul>
  36. </body>
  37. </html>
  39. <!--内部css样式-->
  40. <!DOCTYPE html>
  41. <html lang="en">
  42. <head>
  43.     <meta charset="UTF-8" />
  44.     <title>内部样式表</title>
  45.     <!-- 在html文档中如果添加其它内容,必须通过标签的方式加入 -->
  46.     <!-- 内部样式表, 写在当前的html文档中, 仅在当前文档有效 -->
  47.     <style>
  48.         ul {
  49.             border: 1px solid #ccc;
  50.             background-color: #efefef;
  51.             padding: 15px 30px 15px;
  52.         }
  54.         ul > li {
  55.             margin: 10px;
  56.         }
  58.         h2 {
  59.             color: green;
  60.         }
  61.     </style>
  62. </head>
  63. <body>
  64. <h2>工资明细</h2>
  65. <ul>
  67.     <!--style属性设置样式，只针对当前标签生效-->
  68.     <li>
  69.         <strong style="color: coral;">出勤</strong> : 26
  70.     </li>
  71.     <li>
  72.         <strong style="color: coral;">应发</strong>: 20000000
  73.     </li>
  74.     <li>
  75.         <strong style="color: coral;">保险</strong>: 1000000
  76.     </li>
  77.     <li>
  78.         <strong style="color: violet;">实领</strong>:1900000
  79.     </li>
  80. </ul>
  81. </body>
  82. </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: 设备分辨率的最大宽度,通常用于移动端

实例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="font_0406/iconfont.css" />
  7.     <title>媒体查询</title>
  8.     <style>
  9.         .nav {
  10.             height: 50px;
  11.             background-color: #eee;
  12.             display: flex;
  13.             align-items: center;
  14.         }
  15.         .nav ul {
  16.             display: flex;
  17.             list-style: none;
  18.         }
  19.         .nav ul a {
  20.             color: #666;
  21.             text-decoration: none;
  22.             padding: 0 15px;
  23.         }
  25.         .iconfont {
  26.             display: none;
  27.         }
  29.         /* 局部媒体查询,当屏幕宽度小于400px,不要显示菜单了 */
  30.         @media screen and (max-width: 400px) {
  31.             .nav ul {
  32.                 display: none;
  33.             }
  34.             /*简单实现课堂最后提到的问题*/
  35.             .iconfont {
  36.                 font-size: 50px;
  37.                 display: block;
  38.             }
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44. <div class="nav">
  45.     <div class="log">LOGO</div>
  46.     <ul>
  47.         <li>
  48.             <a href="">首页</a>
  49.             <a href="">视频</a>
  50.             <a href="">问答</a>
  51.             <a href="">下载</a>
  52.         </li>
  53.     </ul>
  55.     <span class="iconfont icon-gengduo"></span>
  56. </div>
  57. </body>
  58. </html>

总结

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

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

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

上一条：CSS初体验学习总结下一条：前端开发之CSS3初体验
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多