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

博主信息

博文 19

粉丝 0

访问量 22120

专题推荐

更多>

css 与文档

1. css 是什么

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

2. 元素与元素框

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

2.1. 置换元素

一个内容不受 CSS 视觉格式化模型控制，CSS 渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素
置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容
例如浏览器会根据 img 标签的 src 属性的值来读取图片信息并显示出来，而如果查看(X)HTML 代码，则看不到图片的实际内容；又例如根据 input 标签的 type 属性来决定是显示输入框，还是单选按钮等
HTML 中的 img、input、textarea、select、object 都是置换元素。这些元素往往没有实际的内容，即是一个空元素

2.2. 非置换元素

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

<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.代码演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>行内元素、块级元素</title>
  </head>
  <style type="text/css">
    p {
      background-color: red;
      height: 50px;
      width: 50%;
      padding: 20px;
      margin: 20px;
    }
    div {
      background-color: green;
      height: 50px;
      width: 40%;
      padding: 20px;
      margin: 20px;
    }
    span {
      background-color: gray;
      height: 70px;
      padding: 40px;
      margin: 20px;
    }
    strong {
      background-color: blue;
      height: 70px;
      padding: 40px;
      margin: 20px;
      display: block;
    }
  </style>
  <body>
    <p>块级元素一</p>
    <div>块级元素二</div>
    <span>行内元素一</span>
    <strong>行内元素二</strong>
  </body>
</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 属性代码演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>行内元素、块级元素</title>
  </head>
  <style type="text/css">
    p {
      background-color: red;
      height: 50px;
      width: 50%;
      padding: 20px;
      margin: 20px;
      display：inline-block;
    }
    div {
      background-color: green;
      height: 50px;
      width: 40%;
      padding: 20px;
      margin: 20px;
      display：inline;
    }
    span {
      background-color: gray;
      height: 70px;
      padding: 40px;
      margin: 20px;
    }
    strong {
      background-color: blue;
      height: 70px;
      padding: 40px;
      margin: 20px;
      display: block;
    }
  </style>
  <body>
    <p>块级元素一 display：inline-block；转换成行内块级元素</p>
    <div>块级元素二 display：inline；转换成行内元素。</div>
    <span>行内元素一</span>
    <strong>行内元素二 display：block；转换成块级元素。</strong>
  </body>
</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演示代码一

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>行内元素、块级元素</title>
  </head>
  <style>
    p {
      background-color: red;
      height: 50px;
      width: 50%;
      padding: 20px;
      margin: 20px;
    }
    div {
      background-color: green;
      height: 50px;
      width: 40%;
      padding: 20px;
      margin: 20px;
    }
    span {
      background-color: gray;
      height: 70px;
      padding: 40px;
      margin: 20px;
    }
    strong {
      background-color: blue;
      height: 70px;
      padding: 40px;
      margin: 20px;
    }
  </style>
  <body>
    <p>块级元素一</p>
    <div>块级元素二</div>
    <span>行内元素一</span>
    <strong>行内元素二</strong>
  </body>
</html>

4.2演示代码二

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>行内元素、块级元素</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>块级元素一</p>
    <div>块级元素二</div>
    <span>行内元素一</span>
    <strong>行内元素二</strong>
  </body>
</html>

4.2.1演示代码二style.css

p {
  background-color: red;
  height: 50px;
  width: 50%;
  padding: 20px;
  margin: 20px;
}
div {
  background-color: green;
  height: 50px;
  width: 40%;
  padding: 20px;
  margin: 20px;
}
span {
  background-color: gray;
  height: 70px;
  padding: 40px;
  margin: 20px;
}
strong {
  background-color: blue;
  height: 70px;
  padding: 40px;
  margin: 20px;
}

4.3演示代码三

这断写在style1.css里面的，重而可以引用到style.css里面的

@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 实列代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>媒体查询</title>
  </head>
  <style>
    #nav {
      list-style-type: none;
    }
    #nav li a {
      color: green;
      text-decoration: none;
      padding: 3px;
      display: block;
    }
    14 #nav {
      width: 35%;
      float: left;
    }
    @media screen and (max-width: 699px) and (min-width: 520px),
      (min-width: 1151px) {
      #nav li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
        background-size: 20px 20px;
      }
    }
    @media screen and (max-width: 1000px) and (min-width: 700px) {
      #nav li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
      }
    }
    @media screen and (min-width: 1001px) {
      #nav li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
      }
    }
  </style>
  <body>
    <h1>可以改变浏览器窗口大小来查看实体效果!</h1>
    <ul id="nav">
      <li>
        <a data-email="php中文网学员" href="mailto:17133595@qq.com">小周</a>
      </li>
      <li>
        <a data-email="php中文网学员" href="mailto:17133595@qq.com">小周</a>
      </li>
      <li>
        <a data-email="php中文网学员" href="mailto:17133595@qq.com">小周</a>
      </li>
    </ul>
    <div id="main">
      <p>
        这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！这里是很多的文本！！！
      </p>
    </div>
  </body>
</html>

6.4 实列图片

css基础总结：

css基本的开始还比较简单，基本都能够理解
老师讲的也比较认证，仔细，比较能够理解
后面的课程也希望能听懂能基本的写出来就行

批改老师：

天蓬老师

批改状态：合格

老师批语：写对是第一的

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

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

0条评论

作者最新博文

HTML基础知识认识

2020-04-03 13:49:37