search

博客列表 >4.5前端入门之CSS与文档

4.5前端入门之CSS与文档

zero
zero原创
2020年04月16日 00:00:50879浏览

css 与文档

1. css 是什么

序号 术语 描述
1 css Cascading Style Sheets缩写(层叠样式表)
2 样式 css 可以影响一个或一组”文档”的表现样式
3 文档 包括但不限于 html,也包括 xml(暂不讨论)

2. 元素与元素框

  • 页面中显示的内容称为元素, 元素显示在浏览器为它生成的元素框中
  • 查看页面中所有元素生成的”框”: * {outline: 1px dashed red}
  • 根据元素框中的内容提供者, 可将元素分为二大类:
序号 术语 描述
1 置换元素 元素框内容由外部资源提供,元素框就是占位符<img>,<input>..
2 非置换元素 元素框内容用户提供,浏览器生成,如<p>,<span>…

3. 元素的显示方式

3.1 元素类型

序号 类型 描述
1 块级元素 默认生成一个填满父级内容区的元素框,且二侧不能有其它元素,如<div>,<p>…
2 行内元素 默认在一行文本内生成元素框,不打断所在行,如<a>,<span>…
3 行内块元素 默认在一行文本内生成元素框,不打断所在行,但支持宽高,如<img>…

浏览器根据元素类型生成不同的元素框: “块级元素框” 和 “行内元素框”

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

4. css 应用到 html 上

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

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

5. css 文档的内容

5.1 样式规则

  • css 文档中必不可少的内容就是: 样式规则
  • css 语法:selector {property: value;...}
组成 描述
selector 选择符,或者称”选择器”,决定文档中哪部分受到影响
{property: value;...} 声明块,由 “属性” 与 “属性值” 二部分组成

5.2 厂商前缀

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

常用厂商前缀:

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

5.3 处理空白

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

5.4 css 注释

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

6. 媒体查询

  • 媒体查询: 设置浏览器使用指定的样式表的媒体

6.1 使用场景

序号 场景 描述
1 <link> <link media="screen,print">
1 <style> <style media="screen,print">
1 @import @import url(...) screen,print;
1 @media @media screen,print {...}

6.3 媒体类型

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

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

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

6.4 媒体描述符

  • 媒体类型通常会添加”媒体描述符”进行精准限制,例如设置媒体尺寸,分辨率等
  • 媒体描述符的语法与 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: 设备分辨率的最大宽度,通常用于移动端

案例重写

dome1.html

  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>Document</title>
  7. <style>
  8.   * {
  9.     outline: 1px dashed red;
  10.   }
  11. </style>
  12.   </head>
  13.   <body>
  14. <!-- 非置换元素：双标签 -->
  15. <p style="background-color: lightgreen;">hello world</p>
  17. <!-- 置换元素：单标签-->
  18. <img src="0404下列表.png" alt="" width="100" height="80" />
  19. <input type="text" style="width: 50px;" />
  20. <a href="" style="width: 50px;">php.cn</a>
  21. <strong style="width: 100px;">php中文网</strong>
  23. <!-- 行内元素，如果是非置换元素得话，不能设置大小， -->
  24. <!-- 如果是置换元素，图片，视频等可以设置宽高，对于这类元素，称之为行内块元素。 -->
  25.   </body>
  26. </html>

效果图

dome2.html

  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="style2.css" />
  7. <title>Document</title>
  8.   </head>
  9.   <body>
  10. <h2>php中文网第11期上课啦</h2>
  11. <ul>
  12.   <li>前端基础：html5/css3/flex/rgid</li>
  13.   <li>PHP开发：php+pdo+mvc+composer</li>
  14.   <li>前端进阶：javascript+jquery+layui</li>
  15.   <li>laravel:实战</li>
  16. </ul>
  17.   </body>
  18. </html>

效果图

dome3.html

  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="style2.css" />
  7. <title>Document</title>
  8.   </head>
  9.   <body>
  10. <h2>我的购物车</h2>
  11. <ul>
  12.   <li>水果</li>
  13.   <li>衣服</li>
  14. </ul>
  15.   </body>
  16. </html>

效果图

demo4.html

  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>Document</title>
  7. <!-- 在html文档中如果添加其他内容，必须通过标签的方式加入 -->
  8. <!-- 内部样式表，卸载当前的html文档中，仅在当前目录有效 -->
  9. <style>
  10.   @import "style1.css";
  11.   /* 将style1.css复制到这个位置 */
  12.   h2 {
  13.     color: green;
  14.   }
  15. </style>
  16.   </head>
  17.   <body>
  18. <h2>php中文网第11期上课啦</h2>
  19. <ul>
  20.   <li>
  21.     <strong style="color: salmon;">前端基础：</strong> html5/css3/flex/rgid
  22.   </li>
  23.   <li>
  24.     <strong style="color: salmon;">PHP开发：</strong> php+pdo+mvc+composer
  25.   </li>
  26.   <li>
  27.     <strong style="color: salmon;">前端进阶：</strong>
  28.     javascript+jquery+layui
  29.   </li>
  30. </ul>
  31.   </body>
  32. </html>

效果图

dome5.html

  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.   @media screen {
  9.     h1 {
  10.       color: green;
  11.     }
  12.     body {
  13.       background-color: cyan;
  14.     }
  15.   }
  16.   /* 大于等于500以下样式有效 */
  17.   @media screen and (min-width: 500px) {
  18.     h1 {
  19.       color: red;
  20.     }
  21.     body {
  22.       background-color: lime;
  23.     }
  24.   }
  25. </style>
  26.   </head>
  27.   <body>
  28. <h1>hello,欢迎来学习我的课程</h1>
  29.   </body>
  30. </html>

效果图


dome6.html

  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>Document</title>
  7. <style>
  8.   .nav {
  9.     height: 50px;
  10.     background-color: lightgray;
  11.     display: flex;
  12.     align-items: center;
  13.   }
  14.   .nav ul {
  15.     display: flex;
  16.     list-style: none;
  17.     padding: 0 15px;
  18.   }
  20.   /* 局部媒体查询，当屏幕宽度小于400px，不要显示菜单了 */
  21.   @media screen and (max-width: 400px) {
  22.     .nav ul {
  23.       display: none;
  24.     }
  25.   }
  26. </style>
  27.   </head>
  28.   <body>
  29. <div class="nav">
  30.   <div class="log">logo</div>
  31.   <ul>
  32.     <li>
  33.       <a href="">首页</a>
  34.       <a href="">视频</a>
  35.       <a href="">问答</a>
  36.       <a href="">下载</a>
  37.     </li>
  38.   </ul>
  39. </div>
  40.   </body>
  41. </html>

效果图


总结

  • css认识：
  • css是Cascading Style Sheets的缩写中文名叫 （层叠样式表)
  • css是可以影响一个组或指定页面的样式
  • css是文档但不限于html。
  • css用法：
  • 根目录创建的css样式可通过<link>和<@import>来引用。。如

  • dome1.html需要使用styel.css样式可在dome1里面插入一段

    • <link rel="stylesheet" href="stylel.css" />
    • dome1.html页内引用的话则可以插入一段

    • <style> @import "stylel.css"; </style>

    • display属性可以随意的修改

    • @media 媒体查询属性用法

  • 媒体类型通常会添加”媒体描述符”进行精准限制,例如设置媒体尺寸,分辨率等

  • 媒体描述符的语法与 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: 设备分辨率的最大宽度,通常用于移动端
    `
上一条：Window 对象下一条：CSS3：grid布局基础知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多