Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css基础与案例演示
Blogger Information
Blog 36
fans 0
comment 0
visits 28642
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
css基础与案例演示
小程_武汉_214945
Original
746 people have browsed it

css 与元素

  • css ：全称层叠样式表，用于影响一个或一组文档的表现样式
  • 元素：页面中显示的内容称为元素
  • 元素框：每一个元素存在于浏览器为它生成的元素框中
  • 元素根据元素框中的内容可以分为两类：
类型 内容 举例
置换元素 元素框内容由外部资源提供 <img> <input>...
非置换元素 元素框内容由用户提供，浏览器生成 <p> <h1> <span>...
  • 元素根据类型可以分为三种：
种类 特征 举例
行内元素 默认在一行文本内生成元素框,不打断所在行 <span> <a>
块级元素 默认生成一个填满父级内容区的元素框,且二侧不能有其它元素 <p> <div>
行内块元素 默认在一行文本内生成元素框,不打断所在行,但支持宽高 <img>

元素类型转换

  • 元素类型的转换方式：在元素标签中使用 display 属性，如<span style="display:block">

常用的 display 属性值

值 含义
block 块级元素
inline 行内元素
inline-block 行内块元素
list-item 列表元素(块级)
table 表格元素(块级)
flex 弹性元素
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.         outline: 1px dashed red;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <!-- 非置换元素是双标签 -->
  15.     <p>p标签是一个非置换元素(双标签)</p>
  16.     <!-- 置换元素单双标签都有 -->
  17.     <a href="demo1.html">a标签是一个置换元素(双标签)</a>
  18.     <img src="img/1.png" />
  19.     <hr />
  20.     <!-- 行内元素不能设置宽高，与其他元素共存于一行 
  21. 块级元素和行内块元素能设置宽高，区别在于能否与其他元素共存一行 -->
  22.     <h1>h1标签定义的是一个块元素</h1>
  23.     <span>span定义的行内元素会跳转到下一行</span>
  24.     <!-- img是一个行内块元素，可以设置宽高，与span共存于一行 -->
  25.     <img src="img/2.jpg" style="width: 150px;" />
  26.     <hr />
  27.     <!-- 使用display属性转换元素类型 span转化为块级 p转化为行内块 -->
  28.     <span style="display: block;">span转化为块级元素</span>
  29.     <span>这是一个行内元素</span>
  30.     <p style="display: inline-block; height: 100px;">p转化为行内块元素</p>
  31.   </body>
  32. </html>

点击预览

css 在 html 文档中的使用方法

html 文档中导入 css 样式有四方法：
| 方法 | 使用 |
| —————————- | ——————————————————————- |
| import 导入外部样式 | @import 'demo.css'或@import url(demo.css) |
| link 导入外部样式 | <link rel="stylesheet" href="demo.css"/>> |
| 内部样式 | 使用<style>...</style>定义的样式 |
| 内联样式 | 写在标签内部<tag style="xxx"> |

css 样式规则

  • css 的样式规则：selector {property: value;...}
选择器 使用方法
标签选择器 p{color:red; }
类选择器 .class{padding: 0;}
id 选择器 #id{border: 1px;}

css 样式规则与使用方法代码示例

  1. /* css1 */
  2. /* 导入外部样式 */
  3. @import "2.css";
  4. ul {
  5.   border: 1px solid black;
  6.   padding: 10px 25px 10px;
  7.   background: #b9ffff;
  8. }
  9. ul > li {
  10.   color: blueviolet;
  11. }
  1. /* css2 */
  2. h2 {
  3.   color: #ff0000;
  4. }
  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>css样式规则与使用方法</title>
  7.     <!-- 外部样式 -->
  8.     <link rel="stylesheet" href="css/1.css" />
  9.     <!-- 内部样式 -->
  10.     <style>
  11.       ul :first-child {
  12.         font-size: 1.5rem;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <h2>css样式规则与使用方法</h2>
  18.     <ul>
  19.       <!-- 使用内联样式 -->
  20.       <li style="color: royalblue;">标签选择器 p{color:red; }</li>
  21.       <li style="color: sandybrown;">类选择器 .class{padding: 0;}</li>
  22.       <li style="color: springgreen;">id 选择器 #id{border: 1px;}</li>
  23.     </ul>
  24.   </body>
  25. </html>

点击预览

厂商前缀

  • 厂商前缀：各浏览器厂商用来测试专属规则的,具有实验性和先进性

  • 得到用户广泛认可的厂商前缀规则, 是有可能进入 W3C 标准的

  • 随着浏览器之间的差异逐渐消失, 厂商前缀最终会走向消亡

常用厂商前缀:

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

空白符

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

css 注释

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

媒体查询

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

使用场景

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

媒体类型

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

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

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

媒体描述符

  • 媒体类型通常会添加”媒体描述符”进行精准限制,例如设置媒体尺寸,分辨率等
  • 媒体描述符的语法与 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.     <title>媒体查询</title>
  7.     <style>
  8.       .nav {
  9.         height: 50px;
  10.         background-color: #eee;
  11.         display: flex;
  12.         align-items: center;
  13.       }
  14.       .nav ul {
  15.         display: flex;
  16.         list-style: none;
  17.       }
  18.       .nav ul a {
  19.         color: #666;
  20.         text-decoration: none;
  21.         padding: 0 15px;
  22.       }
  23.       body {
  24.         background-color: #ffff80;
  25.       }
  26.       @media screen and (max-width: 600px) and (min-width: 400px) {
  27.         body {
  28.           background-color: #59ffff;
  29.         }
  30.       }
  31.       @media screen and (max-width: 400px) {
  32.         .nav > ul {
  33.           display: none;
  34.         }
  35.       }
  36.     </style>
  37.   </head>
  38.   <body>
  39.     <div class="nav">
  40.       <div class="log">LOGO</div>
  41.       <ul>
  42.         <li>
  43.           <a href="">首页</a>
  44.           <a href="">视频</a>
  45.           <a href="">问答</a>
  46.           <a href="">下载</a>
  47.         </li>
  48.       </ul>
  49.     </div>
  50.     <h1>
  51.       这是一个媒体查询案例，在页面宽度为400px，600px时背景色发生变化,导航菜单在宽度小于400px时消失
  52.     </h1>
  53.   </body>
  54. </html>

点击预览

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：你是10期学员吗? 作业很多
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