Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS与文档、实例
Blogger Information
Blog 19
fans 1
comment 0
visits 15261
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与文档、实例
海阔天空
Original
777 people have browsed it

CSS 与文档

1.什么是 CSS

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 多个样式定义可层叠为一

    样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

2.优先级别

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 1 拥有最高的优先权。

级别 样式
1 行内样式（在 HTML 元素内部）
2 内嵌样式表（位于 <head> 标签内部）
3 外部样式表
4 浏览器缺省设置

3.CSS 基础语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; … declarationN }

  • selector {property: value}
    下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。h1 {color:red; font-size:14px;}
    在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

  • 下面的示意图展示了上面这段代码的结构：

4.元素分类

根据元素框中的内容提供者, 可将元素分为二大类:

序号 术语 描述
1 置换元素 元素框内容由外部资源提供,元素框就是占位符<img>,<input>..
2 非置换元素 元素框内容用户提供,浏览器生成,如<p>,<span>…

5. 元素的显示方式

5.1 元素类型

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

5.2 display 属性

display属性常用值

序号 属性值 描述
1 inline默认 行内元素,<span>, <a>
2 block 块级元素,<div>,<p>
3 inline-block 行内块级元素,<img>
4 list-item 块级: 列表元素,<li>
5 table 块级: 表格元素,<table>
6 flex 弹性元素
7 grid 网格元素

6. css 应用到 html 上

序号 方法 描述 备注
1 link标签 <link rel="stylesheet" href="style.css" /> 外部样式（head 内）
3 @import指令 @import url(style.css) @import 'style.css' 外部样式(外部样式表首行，或内嵌样式首行)
2 <style>元素 <style>...</style> 内嵌样式
4 style=""属性 <tag style="..."> 行内样式

外部 css 样式表文档,默认扩展名为: .css
外部样式表可以应用于多个页面中，如需进行全局的更新，只需改变外部样式表设置，网站中的相应元素均会自动地更新。

7. 媒体查询

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

7.1 使用场景

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

7.2 媒体类型

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

序号 类型 描述
1 all 所有媒体类型,即不限制
2 print 打印机,预打印预览使用
3 screen 屏幕,如浏览器等用户代理
4 projection 幻灯片
5 aural 用于语音和音频合成器
6 tv 用于电视机类型的设备
7 braille 用于盲人用点字法触觉回馈设备
8 embossed 用于分页的盲人用点字法打印机
9 handheld 用于小的手持的设备

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

7.3 媒体描述符

序号 媒体描述符 描述
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: 设备分辨率的最大宽度,通常用于移动端

8.元素分类例

效果图：

代码如下：

  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.       body {
  9.         width: 50%;
  10.         margin: auto;
  11.       }
  12.       body,
  13.       p,
  14.       img,
  15.       input,
  16.       strong,
  17.       a {
  18.         outline: 1px dashed red;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <!-- 非置换元素:双标签 -->
  24.     <p style="background-color: lightgreen;">欢迎参加PHP11期学习！</p>
  26.     <!-- 置换元素: 单标签 , 双标签 -->
  27.     <img src="1.jpg" alt="" width="150" />
  28.     <input type="text" style="width: 50px;" />
  29.     <a href="https://www.baidu.com" style="width: 50px;">百度</a>
  30.     <strong style="width: 100px;">PHP中文网</strong>
  32.     <!-- 行内元素,如果是非置换元素的话, 不能设置大小,
  33.     如果是置换元素,可以设置宽高, 对于这类元素,称之为行内块元素 -->
  34.   </body>
  35. </html>

9.外部样式表例

效果图


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="style/style2.css" />
  7.     <title>外部样式表例</title>
  8.   </head>
  9.   <body>
  10.     <h2>php中文网第11期上课啦</h2>
  11.     <ul>
  12.       <li>前端基础: html5/css3/flex/grid</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>

外部样式表代码

  1. /* 选择器: 选择页面元素; */ /* 元素选择器: */
  2. body {
  3.   width: 40%;
  4.   margin: auto;
  5. }
  6. ul {
  7.   /* 这里写的是多条样式规则 */ /* 属性名:border, 值 */ /* border-width: 1px;
  8. border-style: solid; border-color: #ccc; */
  9.   border: 1px solid #ccc;
  10.   background-color: #efefef;
  11.   padding: 15px 30px 15px 30px;
  12. } /* 选择符 +
  13. 样式声明块 */
  14. ul > li {
  15.   margin: 10px;
  16. }
  17. h2 {
  18.   text-align: center;
  19. }

10.导入外部样式表例

效果图


导入外部样式表代码

  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 "style/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: coral;">前端基础</strong> : html5/css3/flex/grid
  22.       </li>
  23.       <li>
  24.         <strong style="color: coral;">php开发</strong>: php+pdo+mvc+composer
  25.       </li>
  26.       <li>
  27.         <strong style="color: coral;">前端进阶</strong>: javascript + jquery +
  28.         layui
  29.       </li>
  30.       <li><strong style="color: violet;">Laravel </strong>：Laravel 实战</li>
  31.     </ul>
  32.   </body>
  33. </html>

11.媒体查询例

效果图


媒体查询代码

  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: #eee;
  11.         display: flex;
  12.         /* align-items: center; */
  13.       }
  14.       .nav .log {
  15.         line-height: 50px;
  16.       }
  17.       .nav ul {
  18.         display: flex;
  19.         list-style-type: none;
  20.       }
  21.       .nav ul a {
  22.         color: #666;
  23.         text-decoration: none;
  24.         margin: 0 15px;
  25.       }
  26.       .nav ul li {
  27.         height: 22px;
  28.         transition: all 0.5s;
  29.       }
  30.       .nav ul li:hover {
  31.         border-bottom: 2px solid #52a3a3;
  32.         transform: translateY(-3px);
  33.       }
  35.       /* 局部媒体查询,当屏幕宽度小于400px,不要显示菜单了 */
  36.       @media screen and (max-width: 400px) {
  37.         .nav ul {
  38.           display: none;
  39.         }
  40.       }
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <div class="nav">
  45.       <div class="log">LOGO</div>
  46.       <ul>
  47.         <li><a href="">首页</a></li>
  48.         <li><a href="">视频</a></li>
  49.         <li><a href="">问答</a></li>
  50.         <li><a href="">下载</a></li>
  51.       </ul>
  52.     </div>
  53.   </body>
  54. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：unqualified

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