search

博客列表 >css基础知识、css介绍、css元素与元素框、css元素的显示方式、css的引用、媒体查询

css基础知识、css介绍、css元素与元素框、css元素的显示方式、css的引用、媒体查询

῀℡῀ᵒᵐᵍᵎᵎᵎ
῀℡῀ᵒᵐᵍᵎᵎᵎ原创
2020年04月06日 15:10:22658浏览

css 与文档

1. css 是什么

  • css 是 Cascading Style Sheets 的缩写,即层叠式样式表单，它是由 W3C 协会制定并发布的一个网页排版式标准,是对 HTML 语言功能的补充

2. 元素与元素框

  • 页面中显示的内容称为元素, 元素显示在浏览器为它生成的元素框中
  • 查看页面中所有元素生成的”框”: {outline: 1px dashed red}
  • 根据元素框中的内容提供者, 可将元素分为二大类:

2.1. 置换元素

  1. 一个内容 不受 CSS 视觉格式化模型控制，CSS 渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素

  2. 置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容

  3. 例如浏览器会根据 img 标签的 src 属性的值来读取图片信息并显示出来，而如果查看(X)HTML 代码，则看不到图片的实际内容；又例如根据 input 标签的 type 属性来决定是显示输入框，还是单选按钮等

  4. HTML 中的 img、input、textarea、select、object 都是置换元素。这些元素往往没有实际的内容，即是一个空元素

2.2. 非置换元素

HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器），如：

  1. <span> hello php中文网 </span>

3. 元素的显示方式

3.1 元素类型

  • css 元素分为三种：块级元素、行内元素和行内块元素

    3.1.1.块级元素

    • 设置 display:block 就是将元素显示为块级元素
      • 常用的块状元素有：<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

  • 特点:

    • 独占一行
    • 高度，行高、外边距以及内边距都可以控制
    • 宽度默认是容器的 100%
    • 以容纳内联元素和其他块元素

3.1.2. 行内元素

  • 块级元素也可以通过代码 display:inline 将元素设置为行内元素

  • 常用的行内元素有：<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

  • 特点:

    • 多个元素在同一行
    • 高、宽无效，但水平方向的 padding 和 margin 可以设置，垂直方向的无效
    • 默认宽度就是它本身内容的宽度
    • 行内元素只能容纳文本或则其他行内元素。（a 特殊）
    • 可以通过设置 display 属性变成其他元素
  • 注意：
    • 只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签 h1,h2,h3,h4, h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素
    • 链接里面不能再放链接。

3.1.3. 行内块状元素

  • 行内块元素（display:inline-block）就是同时具备行内元素、块状元素的特点，代码 display:inline-block 就是将元素设置为状元素

  • 常用元素<img>、<input>

  • 特点:

    • 同时具有行内元素和块级元素的特点
    • 和其他元素在同一行
    • 高、宽和边距可以设置

3.1.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>行内元素、块级元素</title>
  7.   </head>
  8.   <style type="text/css">
  9.     p {
  10.       background-color: red;
  11.       height: 50px;
  12.       width: 50%;
  13.       padding: 20px;
  14.       margin: 20px;
  15.     }
  16.     div {
  17.       background-color: green;
  18.       height: 50px;
  19.       width: 40%;
  20.       padding: 20px;
  21.       margin: 20px;
  22.     }
  23.     span {
  24.       background-color: gray;
  25.       height: 70px;
  26.       padding: 40px;
  27.       margin: 20px;
  28.     }
  29.     strong {
  30.       background-color: blue;
  31.       height: 70px;
  32.       padding: 40px;
  33.       margin: 20px;
  34.       display: block;
  35.     }
  36.   </style>
  37.   <body>
  38.     <p>块级元素一</p>
  39.     <div>块级元素二</div>
  40.     <span>行内元素一</span>
  41.     <strong>行内元素二</strong>
  42.   </body>
  43. </html>

3.1.5.演示截图

3.1.6. display 属性

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

  • display属性常用值:

    • inline默认行内元素<span>, <a>
    • block块级元素<div>,<p>
    • inline-block行内块级元素<img>
    • list-item块级: 列表元素,<li>
    • table块级: 表格元素<table>
    • flex弹性元素
    • grid网格元素

3.1.7. display 属性代码演示

  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.   </head>
  8.   <style type="text/css">
  9.     p {
  10.       background-color: red;
  11.       height: 50px;
  12.       width: 50%;
  13.       padding: 20px;
  14.       margin: 20px;
  15.       display：inline-block;
  16.     }
  17.     div {
  18.       background-color: green;
  19.       height: 50px;
  20.       width: 40%;
  21.       padding: 20px;
  22.       margin: 20px;
  23.       display：inline;
  24.     }
  25.     span {
  26.       background-color: gray;
  27.       height: 70px;
  28.       padding: 40px;
  29.       margin: 20px;
  30.     }
  31.     strong {
  32.       background-color: blue;
  33.       height: 70px;
  34.       padding: 40px;
  35.       margin: 20px;
  36.       display: block;
  37.     }
  38.   </style>
  39.   <body>
  40.     <p>块级元素一 display：inline-block；转换成行内块级元素</p>
  41.     <div>块级元素二 display：inline；转换成行内元素。</div>
  42.     <span>行内元素一</span>
  43.     <strong>行内元素二 display：block；转换成块级元素。</strong>
  44.   </body>
  45. </html>

3.1.8.演示截图

  • 转换前演示图

  • 转换后演示图

    4. css 应用到 html 上

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

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

4.1演示代码一

  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.   </head>
  8.   <style>
  9.     p {
  10.       background-color: red;
  11.       height: 50px;
  12.       width: 50%;
  13.       padding: 20px;
  14.       margin: 20px;
  15.     }
  16.     div {
  17.       background-color: green;
  18.       height: 50px;
  19.       width: 40%;
  20.       padding: 20px;
  21.       margin: 20px;
  22.     }
  23.     span {
  24.       background-color: gray;
  25.       height: 70px;
  26.       padding: 40px;
  27.       margin: 20px;
  28.     }
  29.     strong {
  30.       background-color: blue;
  31.       height: 70px;
  32.       padding: 40px;
  33.       margin: 20px;
  34.     }
  35.   </style>
  36.   <body>
  37.     <p>块级元素一</p>
  38.     <div>块级元素二</div>
  39.     <span>行内元素一</span>
  40.     <strong>行内元素二</strong>
  41.   </body>
  42. </html>

4.2演示代码二

  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.     <link rel="stylesheet" href="style.css" />
  8.   </head>
  9.   <body>
  10.     <p>块级元素一</p>
  11.     <div>块级元素二</div>
  12.     <span>行内元素一</span>
  13.     <strong>行内元素二</strong>
  14.   </body>
  15. </html>

4.2.1演示代码二style.css

  1. p {
  2.   background-color: red;
  3.   height: 50px;
  4.   width: 50%;
  5.   padding: 20px;
  6.   margin: 20px;
  7. }
  8. div {
  9.   background-color: green;
  10.   height: 50px;
  11.   width: 40%;
  12.   padding: 20px;
  13.   margin: 20px;
  14. }
  15. span {
  16.   background-color: gray;
  17.   height: 70px;
  18.   padding: 40px;
  19.   margin: 20px;
  20. }
  21. strong {
  22.   background-color: blue;
  23.   height: 70px;
  24.   padding: 40px;
  25.   margin: 20px;
  26. }

4.3演示代码三

  • 这断写在style1.css里面的，重而可以引用到style.css里面的
  1. @import "style.css";

4.4内联演示代码

比较简单基本的写在元素里面，还不懂自己百度

4.5.以上的均能引用到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: 设备分辨率的最大宽度,通常用于移动端

6.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>媒体查询</title>
  7.   </head>
  9.   <style>
  10.     #nav {
  11.       list-style-type: none;
  12.     }
  14.     #nav li a {
  15.       color: green;
  17.       text-decoration: none;
  19.       padding: 3px;
  21.       display: block;
  22.     }
  24.     14 #nav {
  25.       width: 35%;
  27.       float: left;
  28.     }
  30.     @media screen and (max-width: 699px) and (min-width: 520px),
  31.       (min-width: 1151px) {
  32.       #nav li a {
  33.         padding-left: 30px;
  35.         background: url(email-icon.png) left center no-repeat;
  37.         background-size: 20px 20px;
  38.       }
  39.     }
  41.     @media screen and (max-width: 1000px) and (min-width: 700px) {
  42.       #nav li a:before {
  43.         content: "Email: ";
  45.         font-style: italic;
  47.         color: #666666;
  48.       }
  49.     }
  51.     @media screen and (min-width: 1001px) {
  52.       #nav li a:after {
  53.         content: " (" attr(data-email) ")";
  55.         font-size: 12px;
  57.         font-style: italic;
  59.         color: #666666;
  60.       }
  61.     }
  62.   </style>
  63.   <body>
  64.     <h1>可以改变浏览器窗口大小来查看实体效果!</h1>
  66.     <ul id="nav">
  67.       <li>
  68.         <a data-email="php中文网学员" href="mailto:17133595@qq.com">小周</a>
  69.       </li>
  71.       <li>
  72.         <a data-email="php中文网学员" href="mailto:17133595@qq.com">小周</a>
  73.       </li>
  75.       <li>
  76.         <a data-email="php中文网学员" href="mailto:17133595@qq.com">小周</a>
  77.       </li>
  78.     </ul>
  80.     <div id="main">
  81.       <p>
  82.         这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！
  83.       </p>
  84.     </div>
  85.   </body>
  86. </html>

6.4 实列图片



css基础总结：

  • css基本的开始还比较简单，基本都能够理解
  • 老师讲的也比较认证，仔细，比较能够理解
  • 后面的课程也希望能听懂能基本的写出来就行
上一条：0404 表单下一条：Web 前端 - HTML - 表单元素
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多