css 与文档
1.css 是什么
| 序号 |
术语 |
描述 |
| 1 |
css |
Cascding Style Sheets 缩写（层叠样式表） 新的样式会覆盖旧的样式 |
| 2 |
样式 |
css 可以影响一个/一组‘文档’的表现样式 |
| 3 |
文档 |
包括但不限于 html，也包括 xml（暂时不讨论 xml） |
2.元素和元素框
案例代码
<!-- 非置换元素；双标签 --><h1>大家好，我是一个小白</h1><p>我来PHP中文网学习知识</p><!-- 置换元素；不一定是单标签 --><img src="1.jpg" alt="" /><link rel="stylesheet" href="style.css" />
- 页面中所有显示的内容都叫元素，元素显示在浏览器给他生成的元素框中
- 查看页面中所有元素框代码
* {outline: 1px dashed red} - 元素共有 2 大类，如下表
| 序号 |
术语 |
描述 |
| 1 |
置换元素 |
元素框内容是引用的第三方资源（图片，文件，MP4,js,css 等 |
| 2 |
非置换元素 |
标签都是死的，内容用户提供 |
3 元素的显示方式
3.1 元素类型
| 序号 |
类型 |
描述 |
案例 |
| 1 |
块级元素 |
默认生成一个满父级内容区的元素框，并且他两侧不能有其他元素（独占一行）可以设置宽和高 |
<div>,<p> |
| 2 |
行内元素 |
默认在一行文本内生成元素块，不打断所在行（从左往右方式排）不可以设置宽和高的 |
<a>,<span>,<h1>,<table> |
| 3 |
行内块元素 |
置换元素，可以设置宽和高的 （也就是说他即是行内元素，他有可以设置宽和高 |
- |
3.2 display 属性
- 效果图
- 每一个元素都可以通过
style="display:typpe"控制它的显示类型，生成想要的元素框
| 序号 |
属性值 |
描述 |
| 1 |
inline默认 |
行内元素,<span>, <a> |
| 2 |
block |
块级元素,<div>,<p> |
| 3 |
inline-block |
行内块级元素,<img> |
| 4 |
list-item |
块级: 列表元素,<li> |
| 5 |
table |
块级: 表格元素,<table> |
| 6 |
flex |
弹性元素（块级变行内） |
| 7 |
grid |
网格元素 （垂直排列） |
案例代码
4. css 应用到 html 上
| 序号 |
属性值 |
描述 |
备注 |
| 1 |
link标签 |
<link rel="stylesheet" href="..." /> |
外部样式 |
| 3 |
@import指令 |
@import url(...) @import '...' |
外部样式 |
| 2 |
<style>元素 |
<style>...</style> |
内部样式 |
| 4 |
style=""属性 |
<tag style="..."> |
行内样式 |
外部 css 样式表文档,默认扩展名为: .css
案例演示
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style/style2.css" /> </head> <body> <h1>php中文网课程安排</h1> <ul> <li>WEB前端开发</li> <li>PHP 基础知识</li> <li>Laravel 基础知识</li> <li>大型项目实战开发</li> </ul> </body></html>
<!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> @import url(style/style1.css); h1 { background-color: aqua; color: #000000; } </style> </head> <body> <h1>php中文网课程安排</h1> <ul> <li>WEB前端开发</li> <li>PHP 基础知识</li> <li>Laravel 基础知识</li> <li>大型项目实战开发</li> </ul> </body></html>
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h1>php中文网课程安排</h1> <ul> <li style="color: lightseagreen;"> <strong style="color: lightgreen;">WEB前端开发</strong>html </li> <li><strong>PHP 基础知识</strong></li> <li><strong>Laravel 基础知识</strong></li> <li><strong>大型项目实战开发</strong></li> </ul> </body></html
5. css 文档的内容
5.1 样式规则
- css 文档中必不可少的内容就是: 样式规则
- css 语法:
selector {property: value;...} - 每一个样式表用；间隔
| 组成 |
描述 |
selector |
选择符,或者称”选择器”,决定文档中哪部分受到影响 |
{property: value;...} |
声明块,由 “属性” 与 “属性值” 二部分组成 |
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: 设备分辨率的最大宽度,通常用于移动端
演示按理
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>局部媒体查询</title> <style> .nav { height: 50px; background-color: #eee; display: flex; align-items: center; } .nav ul { display: flex; list-style: none; } .nav ul a { color: #666; text-decoration: none; padding: 0 15px; } img { width: 200px; height: 200px; } /* 局部媒体查询，当屏幕宽带小于400就不显示菜单 */ @media screen and (max-width: 400px) { .nav ul { display: none; } img { width: 100px; height: 100px; } } </style> </head> <body> <div class="nav"> <div class="log">logo</div> <ul> <li> <a href="">首页</a> <a href="">视频</a> <a href="">问答</a> <a href="">下载</a> </li> </ul> </div> <img src="2.jpg" alt="" /> </body></html>
总结
- 就好比一个东西，给他包装一下子，让他看的美观好看
- css 的注释是/* */
- css 的基础教程
- 媒体查询可以用来写自适应页面挺不错的
