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.演示截图
| 序号 | 属性值 | 描述 | 备注 | |
|---|---|---|---|---|
| 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基本的开始还比较简单，基本都能够理解
- 老师讲的也比较认证，仔细，比较能够理解
- 后面的课程也希望能听懂能基本的写出来就行