简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css的定义，元素即其显示方式，把css应用到html中和媒体查询
Blogger Information
Blog 8
fans 1
comment 0
visits 10136
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的定义，元素即其显示方式，把css应用到html中和媒体查询
雷斯提亚
Original
1553 people have browsed it

css是什么

  • （1）css为Cascading style sheets的缩写

  • （2）在样式方面，css可以影响一个或一组“文档”的表现样式

  • （3）在文档方面，包括但不限于html

2. 元素与元素框

  • （1）页面中显示的内容称为元素，元素显示在浏览器为它生成的元素框中

  • （2）查看页面中所有元素生成的元素框，可用*{outline:1px dashed(solid) red}进行查看

  • （3）元素可分为两大类：

序号术语描述
1置换元素内容由外部提供。例：<img>
2非置换元素内容由用户提供，用浏览器生成<p>

3. 元素的显示方式

3.1 元素类型

  • 元素类型分为三种：

  • （1）块级元素：独占一行，而且两边没有其他元素。例：<div>

  • （2）行内元素：在一行中占一块地方，两边可有其他元素存在。例：<a>

  • （3）内行快元素：在一行中占一块地方，两边可有其他元素存在，可支持宽高。例：<img>

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

3.2 display属性

  • （1）每个元素都可以通过style="display:type"来控制它的显示类型

  • （2）display属性常用值：

序号属性值描述
1inline（默认）行内元素
2block块级元素
3inline-block行内块级元素
4list-item块级：列表元素
5table块级：表格元素
6flex弹性元素
7grid网格元素

例：

 <p style="display: block;">hello world</p>    <p style="display: inline-block;">hello world</p>    <p style="display:inline">hello world</p>

4. 把css应用到html上（重点）

序号属性格式备注
1link(标签)<link rel="stylesheet" href="..">外部样式
2@import（指令）@import url(..)/@import '..'外部样式
3<style>(元素)<style>..</style>内部样式
4style=".."(属性)<div style="..">行内样式
注：外部css样式表文档，扩展名为 .css

例：

  • （1）<link rel="stylesheet" href="zuo.css" />

  • （2）@import "zuo.css";

  • （3）<head><style></style></head>

  • （4）<div style=".."></div>

5. css文档的内容

5.1 样式规则

  • css文档中必不可少的内容就是：样式规则

  • css语法：selectoe{property:value;..}

    样式规则有两部分组成：

  • （1）selector：选择符，或者成为“选择器”，决定文档中哪部分受到影响

  • （2）{pporperty:value;..}:声明快，由“属性”和“属性值”两部分组成

5.2 厂商前缀

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

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

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

常用厂商前缀（共5种）:

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

5.3 处理空白

  • （1）与 html 文档类似, css 也支持使用空白符来格式化文档,增强可读性

  • （2）css 中的多个空白符, 会全部合并成一个空白符显示

  • （3）空白符,可以由空格, 制表符, 换行符生成

  • （4）当属性值可有多个关键字时, 必须使用空白符分开

5.4 css 注释

  • （1）单行/多行: /* 注释内容 */

  • （2）注释可以写到样式规则外部,也可以写到内部

  • （3）注释不允许嵌套

6 媒体查询

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

    6.1 使用场景（共四种）

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

6.2 媒体类型（共四种）

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

序号类型描述
1all所有媒体类型（不限制）
2print打印机，预打印预览使用
3screen屏幕
4projection幻灯片
注：多种媒体类型之间使用逗号隔开：@media screen,print

6.3 媒体描述符

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

  • （2）媒体描述符的语法与 css 样式声明非常类似,如min-width: 500px

  • （3）与 css 声明的不同之处在于,媒体描述符允许没有值,如print and (color)

  • （4）多个 “媒体描述符” 之间使用 “逻辑关键字” 连接, 如 and 和 not

  • （5）and表示多个”媒体描述符”必须同时满足, not则是整个查询取反,且必须写在and前面

常用 “媒体描述符”(显示区域相关)：

序号媒体描述符描述
1width显示区域宽度
2min-width显示区域最小宽度
3max-width显示区域最大宽度
4device-width设备显示区域宽度
5min-device-width设备显示区域最小宽度
6max-device-width设备显示区域最大宽度
7height显示区域高度
8min-height显示区域最小高度
9max-height显示区域最大高度
10device-height设备显示区域高度
11min-device-height设备显示区域最小高度
12max-device-height设备显示区域最大高度
注：max-width与max-device-width的区别：

  • （1）max-width:浏览器显示区域宽度，与设备无关，常用于pc端

  • （2）max-device-width:分辨率的最大宽度，常用于移动端

例：

<style>@media screen and (max-width:450px){ /*当屏幕宽度小于450px,不显示菜单*/ul{display:none;}}</style>  <body>    <div>      <div>php中文网</div>      <ul>        <li>          <a href="">首页</a>          <a href="">视频</a>          <a href="">问答</a>          <a href="">下载</a>        </li>      </ul>    </div>  </body>


课程总结：

  • （1）css是一个层叠样式表

  • （2）css中元素分为两类：置换元素和非置换元素

  • （3）css中的元素类型分为“块级元素”，“行内元素”和“行内块元素”三种

  • （4）css中可以用属性display来改变类型

  • （5）css应用到html有四种方式：
    link标签|@import指令|<style>元素|style=".."属性

  • （6）css的注释用/* */表示

  • （7）媒体查询使用场景共有四种：
    <link>|<style>|@import|@media

  • （8）多种媒体类型之间用逗号隔开

Correction status：Uncorrected

Teacher's comments：
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！