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.元素分类例
效果图：
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {width: 50%;margin: auto;}body,p,img,input,strong,a {outline: 1px dashed red;}</style></head><body><!-- 非置换元素:双标签 --><p style="background-color: lightgreen;">欢迎参加PHP11期学习！</p><!-- 置换元素: 单标签 , 双标签 --><img src="1.jpg" alt="" width="150" /><input type="text" style="width: 50px;" /><a href="https://www.baidu.com" style="width: 50px;">百度</a><strong style="width: 100px;">PHP中文网</strong><!-- 行内元素,如果是非置换元素的话, 不能设置大小,如果是置换元素,可以设置宽高, 对于这类元素,称之为行内块元素 --></body></html>
9.外部样式表例
效果图
HTML代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style/style2.css" /><title>外部样式表例</title></head><body><h2>php中文网第11期上课啦</h2><ul><li>前端基础: html5/css3/flex/grid</li><li>php开发: php+pdo+mvc+composer</li><li>前端进阶: javascript + jquery + layui</li><li>Laravel: 实战</li></ul></body></html>
外部样式表代码
/* 选择器: 选择页面元素; */ /* 元素选择器: */body {width: 40%;margin: auto;}ul {/* 这里写的是多条样式规则 */ /* 属性名:border, 值 */ /* border-width: 1px;border-style: solid; border-color: #ccc; */border: 1px solid #ccc;background-color: #efefef;padding: 15px 30px 15px 30px;} /* 选择符 +样式声明块 */ul > li {margin: 10px;}h2 {text-align: center;}
10.导入外部样式表例
效果图
导入外部样式表代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 在html文档中如果添加其它内容,必须通过标签的方式加入 --><!-- 内部样式表, 写在当前的html文档中, 仅在当前文档有效 --><style>@import "style/style1.css";/* 将style1.css复制到这个位置 */h2 {color: green;}</style></head><body><h2>php中文网第11期上课啦</h2><ul><li><strong style="color: coral;">前端基础</strong> : html5/css3/flex/grid</li><li><strong style="color: coral;">php开发</strong>: php+pdo+mvc+composer</li><li><strong style="color: coral;">前端进阶</strong>: javascript + jquery +layui</li><li><strong style="color: violet;">Laravel </strong>：Laravel 实战</li></ul></body></html>
11.媒体查询例
效果图
媒体查询代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.nav {height: 50px;background-color: #eee;display: flex;/* align-items: center; */}.nav .log {line-height: 50px;}.nav ul {display: flex;list-style-type: none;}.nav ul a {color: #666;text-decoration: none;margin: 0 15px;}.nav ul li {height: 22px;transition: all 0.5s;}.nav ul li:hover {border-bottom: 2px solid #52a3a3;transform: translateY(-3px);}/* 局部媒体查询,当屏幕宽度小于400px,不要显示菜单了 */@media screen and (max-width: 400px) {.nav ul {display: none;}}</style></head><body><div class="nav"><div class="log">LOGO</div><ul><li><a href="">首页</a></li><li><a href="">视频</a></li><li><a href="">问答</a></li><li><a href="">下载</a></li></ul></div></body></html>