微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > CSS 基础/引入CSS/媒体查询_0405

博主信息

博文 58

粉丝 3

访问量 76721

专题推荐

更多>

css与文档

1. css是什么

css: 就是层叠样式表(Cascading Style Sheets)
样式: 影响一个或一组”文档”的样式
- html类似一个人, 裸体, 只有内裤, 内裤就是默认样式.css就是为这个人穿上衣服.
文档: 包括但不限于HTML, 也包括xml(暂不讨论), 目前基本被json替代.

2. 元素和元素框

页面中显示的内容都成为元素, 元素显示在浏览器为其生成的元素框中
查看页面中所有元素生成的”框”: * {outline:1px solid red;}
根据元素框中的内容提供者, 可将元素分为两大类:
- 置换元素: 元素框内容由外部资源提供, 元素框就是占位符, 如<img>, <input>. 也就是说, 元素中的内容是被外部文件替换的, 那么这个元素就是置换元素.
- 非置换元素: 元素内容由用户提供, 浏览器生成, 如:<p>, <span>, …
  
  只要其内容是从外部文档导入的, 都是置换元素. 这样来记忆.

3. 元素的显示方式

css中的坐标, 是以左上角为原点(0, 0), 由左向右递增, 由上到下递增. 如果不人工干预, 页面中的元素也会由坐标递增方向排列.

3.1 元素类型

块级布局和块级元素
- 无论里面内容多少, 都是一块独占一行, 向下递增, 就是块级布局;
- 使用块级排列的元素就叫块级元素, 如: <div>, <p>, <h1>-<h6>
流体布局和行内元素
- 元素由左向右排列, 一行排列不下后, 再由上到下的排列方式, 这种排列方式叫流体布局(又叫行内排列, 或内联排列).
- 而流体布局中的元素叫行内元素. 如<a>, <span>. 不能设置宽高, 一般是非置换元素.
行内块元素 元素布局跟行内元素相同, 但可以设置宽高, 一般是置换元素.如:<img>…
- 跟行内元素对比总结: 行内元素, 如果是非置换元素的话, 不能设置大小; 如果是置换元素, 可以设置宽高, 对于这类元素, 称之为行内块元素.
  
  浏览器根据元素类型生成不同的元素框: “块级元素框”和”行级元素框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>置换元素和非置换元素</title>
</head>
<body>
    <!-- 内容是文本, 非置换元素, 必须是双标签 -->
    <p>hello world</p>
    <!-- 内容是图片, 置换元素, 单标签 -->
    <img src="" alt="" srcset="" />
    <input type="text" name="" id="" />
    <!-- 有些置换元素, 由于历史原因, 也可能是双标签 -->
    <!-- 虽然video标签是双标签, 但是其中并不能加内容, 加了也会被忽略 -->
    <video src="girl.mp4">这段文本将会被忽略</video>
    <!-- script也是置换元素, 但是它是双标签 -->
    <script src=""></script>
</body>
</html>

3.2 display属性

每个元素都可以通过style="display: type"来控制/修改它的显示类型, 即生成什么类型的”元素框.
display属性常用值:
1. inline: 默认值, 行内元素, <span>, <a>
2. block: 块级元素, <div>, <p>
3. inline-block: 行内块级元素, 如: <img>;
  - 注意, 有些浏览器会把默认为inline-block的元素的display值显示为inline, 只有手动设置的才会显示inline, 不必理会, 知道它是行内块级元素即可.
4. list-item: 列表元素, 属于块级元素, <li>
5. table: 表格元素, 属于块级元素, <table>
6. flex: 弹性元素, flex会把设置了display: flex的元素都变成弹性元素, 即, 块级元素变行内元素.
7. grid: 网格元素, 网格元素会把在设置了display: grid的元素都变成垂直排列, 即, 变成块级元素.
  
  最后两种是布局用的新元素, 很有用, 且技术已成熟, 老师后面会重点介绍. 先有概念, 暂不深究.

4. css应用到html上

link标签, 在html中引入css文件. 外部样式.
@import指令, 在css文件中引入另一个css文件, 参考style/style2.css文件. 外部样式.
<style>元素, 只对某个html文件起作用的样式引入. 内部样式.
style=""属性, html元素的3大样式之一, 只对某个标签起作用的方式. 行内样式.

/* file: style/style1.css */
ul {
    border: 1px solid aqua;
    background-color: #ddd;
}
ul>li {
    margin: 10px;
}

/* file: style/style2.css */
/* 在当前css文件中加载另一个css文件 */
/* 引入其他css文件的代码必须写在文档非注释的第一行 */
@import url(style1.css);
/* 另一种引入方法 */
/* @import 'style1.css'; */
h2{
    color: green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html引入样式</title>
    <!-- css文件中引入别的css文件, 用@import, 见style/styles2.css -->
    <!-- html文件中引入css文件, 用link标签 -->
    <link rel="stylesheet" href="style/style2.css">
    <!-- 只对当前html文档有效的样式，用stye标签 -->
    <style>
        body {
            background-color: lightpink;
        }
    </style>
</head>
<body>
    <h2>php中文网第11期上课啦</h2>
    <ul>
        <li>前端基础: html5/css/flex/grid</li>
        <li>php开发: php+pdo+mvc+composer</li>
        <li>前端进阶: javascript+jquery+layui</li>
        <!-- 只对当前元素有效的样式引入，用style=""属性 -->
        <li style="color:blue">laravel: 使用larvavel框架进行实战</li>
    </ul>
</body>
</html>

demo效果图：

5. css文档(.css文件)的内容

外部样式文件的扩展名是.css

5.1 css样式规则

要由选择器(selector), 声明块组成{property: value}. 其中, 声明块又由样式属性名(property), 属性值(value)组成. 如:
```
selector {
  property1 : value1;
  property2 : value2;
  ...
}
```
5.2 厂商前缀
厂商前缀, 各浏览器厂商用来测试自己的浏览器产品的专属规则的, 具有试验性和先进性.
得到用户广泛认可的厂商前缀规则, 是有可能进入W3C标准的
随着浏览器之间的差异逐渐消失, 厂商前缀最终会走向消亡

常用的厂商前缀

-moz-, 基于Mozilla的浏览器, 如: Firefox(火狐)
-ms-, 基于微软Internet Explorer的浏览器
-o-, 基于Opera(欧朋)的浏览器(小众浏览器)
-webkit-, 基于WebKit内核的浏览器, 如Chrome, Safari
-epub-, 基于国际数字出版论坛制定的格式

5.3 处理空白

与 html 文档类似, css 也支持使用空白符来格式化文档,增强可读性
css 中的多个空白符, 会全部合并成一个空白符显示
空白符,可以由空格, 制表符, 换行符生成
当属性值可有多个关键字时, 必须使用空白符分开

5.4 css 注释

单行/多行: /* 注释内容 */
注释可以写到样式规则外部,也可以写到内部
注释不允许嵌套

6. 媒体查询

引子: HTML是在浏览器中显示的, 所以css样式都是针对浏览器显示编写. 但是假设我们要打印这个页面, 那么打印机渲染样式的方式是跟浏览器有区别的, 这时我们要写两套css样式, 针对浏览器和查询. 这就需要引入媒体查询, 来指定当前的css样式是适用于浏览器的还是打印机的.

媒体查询在响应式布局, 移动端布局, 移动端开发用的多. 一般前端框架会把媒体查询隐藏, 我们感知不到.

6.1 使用场景

序号	场景	举例	描述
1	`<link>`	`<link media="screen,print">`	在用link标签引入css文件时,用media属性指定引入的css的适用范围
2	`<style>`	`<style media="screen,print">`	在用style标签编写当前HTML页面样式时, 用media属性指定style中的样式的适用范围
3	`@import`	`@import url(...) screen,print`	在当前css文档引入其他css文件时, 在引入语句后面指定引入的css文件的适用范围
4	`@media`	`@media screen,print {样式...}`	在css文档中, 定义某些样式的适用范围

6.2 媒体类型

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

screen, 即屏幕, 如浏览器等;
print, 打印机, 打印预览用到;
projection, 幻灯片, 很少用到;
all, 所有显示媒介, 即不限制.

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

媒体查询demo1:当浏览器窗口宽度不小于500px时, 把背景色改为小麦色, 把标题颜色改为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询demo</title>
    <style>
        /* 全局情况的样式 */
        /* 全局情况的样式可以认为是显示设备为all, 且没有任何筛选条件的媒体查询
            , 一般省略不写 */
        /* @media all {
            ...
        } */
        h3 {
            color: green;
        }
        body {
            background-color: lightgreen;
        }
        /* 媒体查询样式
        解读: 当前显示设备为浏览器(screen, 多的用逗号隔开), 且(and)浏览器的宽度不小于
        500px(min-width: 500px)时, 把背景色改为小麦色, 把标题字体颜色改为红色 */
        @media screen and (min-width: 500px; ) {
            h3 {
                background-color: red;
            }
            body {
                background-color: wheat;
            }
        }
    </style>
</head>
<body>
    <h3>欢迎来到我的课程</h3>
</body>
</html>

demo1效果图：

媒体查询demo2:当浏览器宽度缩小到400px数值时, 让导航项消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询demo</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;
        }
        /* 当浏览器宽度缩小到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>
                <a href="">视频</a>
                <a href="">问答</a>
                <a href="">下载</a>
            </li>
        </ul>
    </div>
</body>
</html>

demo2效果图:

7. 学习心得

因为老师讲的很详细很易懂, 基本上我的理解就着老师的笔记, 都在上面的内容中写出来了.在此我想谈谈自己对css的看法. css的效果太直接太有用了, 网页长啥样好不好看全靠它. 但是css的世界太大太复杂, 眼花缭乱的各种样式设置, 太难记忆, 有些样式, 还需要些想象力才能理解. 最让人崩溃的是, 我按照网友的介绍一顿修改猛如虎, 但显示样式却”不理你”, 没有任何改变, 比如各种居中, 各种对齐…其实这是自己的问题, 还是因为css代码写得少, 遇到问题只会百度, 没有系统的学习过css…
初学者对知识的理解还比较肤浅, 基本上缺一堂课再回来听就是天书了, 清明期间家里有硬命令必须回去参加扫墓(不聚众, 不大规模, 我是守法的好公民), 今天回来补完两天的课快让我崩溃了. 前天的作业想办法再补, 做天的作业也是刚刚完成, 请老师不要嫌弃, 抽空帮忙批改.

批改老师：