CSS语法介绍

news2024/12/27 13:19:58

文章目录

  • 前言
  • 一、CSS引入方式
    • 1.行内操作
    • 2.内部操作
    • 3.外部操作
  • 二、常用选择器
    • 1.标签选择器
    • 2.类选择器
    • 3.id选择器
    • 4.群组选择器
    • 5.后代选择器
  • 三、字体常用设置
    • 1.字体类型
    • 2.字体大小
    • 3.字体样式
    • 4.字体粗细
  • 四、div盒子模型
    • 1.盒子边框
    • 2.外边距
    • 3.内边距
    • 4.浮动
  • 综合实战案例

前言

以盖房子比喻我们的网页，HTML就是房屋主体，CSS就是给房屋装修，JS就是给房屋买家具，今天介绍CSS语法部分。

一、CSS引入方式

1.行内操作

CSS引入方式的第一种是行内操作，首先我们先写一组HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS引入</title>
</head>
<body>

<p>我是P标签 -- 1</p>
<p>我是P标签 -- 2</p>
</body>
</html>

运行结果如下：
在这里插入图片描述

我们会发现字体没有颜色，大小也很单调，接下来给字体加上颜色及修改大小，用到style属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS引入</title>
</head>
<body>
<!--1、行内CSS操作-->
<p style="color: red">我是P标签 -- 1</p>
<p style="color: green; font-size: 30px">我是P标签 -- 2</p>
</body>
</html>

代码运行结果如下：
在这里插入图片描述

这时候我们也会发现如果要定义的样式非常多，写在标签内部就很长很乱，代码阅读性很差，接下来会用到第二种CSS引入方式。

2.内部操作

内部操作也叫头部操作，在head里面使用style标签，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS引入</title>
    <!--2、头部CSS操作-->
    <style>
        span {
            color: purple;
            font-family: 宋体;
        }
    </style>
</head>
<body>
<span>学习：头部CSS操作</span>
</body>
</html>

运行后结果如下：
在这里插入图片描述

假设现在样式标签很多，全部都写在该HTML文件中，也会显得代码很冗长，接下来介绍第三种CSS引入方式。

3.外部操作

外部CSS操作，在外部单独新建一个css文件，名字随便起，比如这里取名为demo.css，然后回到HTML文件中继续写代码，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS引入</title>
    <!--3、外部CSS操作-->
    <link rel="stylesheet" href="demo.css">
</head>
<body>
<!--i标签是斜体标签-->
<i>好好学习，天天向上</i>
</body>
</html>

CSS代码如下：
在这里插入图片描述

运行HTML代码后结果如下：
在这里插入图片描述
三种CSS引入方式根据自己喜好选择即可，如果项目非常大，一定是使用外部CSS引入的方式。

二、常用选择器

选择器就是选中标签的方式，分为5种。

1.标签选择器

标签选择器是通过标签名选中标签，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <!--标签选择器通过标签名选中标签-->
    <style>
        b {
            color: red;
        }
        span {
            color: green;
        }
    </style>
</head>
<body>
<!--b标签是粗体标签-->
<b>我是b标签 -- 1</b> <hr>
<span>我是span标签</span> <hr>
<b>我是b标签 -- 2</b>
</body>
</html>

运行后结果如下：
在这里插入图片描述

2.类选择器

类选择器是通过class属性值选中标签，现在有代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器.: class</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
<p>我是p标签 -- 1</p>
<p>我是p标签 -- 2</p>
<p>我是p标签 -- 3</p>
</body>
</html>

运行结果如下：
在这里插入图片描述

假如我现在只想让标签1和3改变颜色，2不变，这时候就要对1和3加上属性class，class类用.点指代，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器.: class</title>
    <style>
        .p1 {
            color: red;
        }
    </style>
</head>
<body>
<p class="p1">我是p标签 -- 1</p>
<p>我是p标签 -- 2</p>
<p class="p1">我是p标签 -- 3</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述
代码做进一步升级：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器.: class</title>
    <style>
        .p1 {
            color: red;
        }
    </style>
</head>
<body>
<p class="p1">我是p标签 -- 1</p>
<p>我是p标签 -- 2</p>
<p class="p1">我是p标签 -- 3</p>
<span class="p1">我是span -- 3</span>
</body>
</html>

这时候span标签的内容也会变颜色，因为类选择器选中的是同一类，而不管是不是同一种标签，运行结果如下：
在这里插入图片描述

3.id选择器

id选择器用#号来指代，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器 -- #</title>
    <style>
        #p1 {
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
<p id="p1">id选择器 -- 1</p>
<p>id选择器 -- 2</p>
<p>id选择器 -- 3</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述
这时候我们继续修改代码，为下面的p标签也设置同样的id和属性值，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器 -- #</title>
    <style>
        #p1 {
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
<p id="p1">id选择器 -- 1</p>
<p id="p1">id选择器 -- 2</p>
<p>id选择器 -- 3</p>
</body>
</html>

但是里面代码很明显是有错误的，因为id值是唯一的，类似于我们的身份证号码，不能有重复的，而类class是可以有多个重复的，这就是id选择器的特殊之处。

4.群组选择器

群组选择器用,逗号来指代，我们来写一组代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群组选择器 -- ,</title>
    <style>
        span {
            color: red;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
<span>我爱你</span>
<p>好天气</p>
</body>
</html>

这组代码实现的功能就是给span标签和p标签内容都改颜色，虽然可以实现，但是我们会发现代码变的冗长了，如果有多个不同标签，那么会更长，这时候可以使用群组选择器，将代码缩短，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群组选择器 -- ,</title>
    <style>
        span, p {
            color: green;
        }
    </style>
</head>
<body>
<span>我爱你</span>
<p>好天气</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

5.后代选择器

我们可以看这样一组代码：

<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>
<p>
    <a href="">
        <span>学习后代选择器</span>
    </a>
</p>
<span>我是span标签</span>
</body>
</html>

运行后结果如下：
在这里插入图片描述
假如我们只想让a标签里面的span标签改变颜色，这里就要用到后代选择器，当然也可以单独设置id或者class，但是我们用后代选择器来看看怎么改，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        p > a > span {
            color: blue;
        }
    </style>
</head>
<body>
<p>
    <a href="">
        <span>学习后代选择器</span>
    </a>
</p>
<span>我是span标签</span>
</body>
</html>

运行后结果如下：
在这里插入图片描述

三、字体常用设置

1.字体类型

字体类型用font-family属性，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体设置</title>
    <style>
        #p1 {
            /*字体类型*/
            font-family: 宋体;
        }
    </style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述
可以继续改为黑体，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体设置</title>
    <style>
        #p1 {
            /*字体类型*/
            font-family: 黑体;
        }
    </style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

2.字体大小

字体大小用属性font-size，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体设置</title>
    <style>
        #p1 {
            /*字体大小*/
            font-size: 30px;
        }
    </style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

3.字体样式

字体样式使用属性font-style，属性值常用的有italic(斜体)和normal(正常)，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体设置</title>
    <style>
        #p1 {
            /*字体样式*/
            font-style: italic;
        }
    </style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

4.字体粗细

字体粗细使用font-weight属性，常用属性值就是normal(正常)和bold(粗)，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体设置</title>
    <style>
        #p1 {
            /*字体粗细*/
            font-weight: bold;
        }
    </style>
</head>
<body>
<p id="p1">学习字体设置</p>
</body>
</html>

运行后结果如下：
在这里插入图片描述

四、div盒子模型

盒子模型就是给网页划分不同区域，每个区域有特定的功能，盒子里面的标签如果要转移位置，只需挪动盒子即可，不用一个个标签去挪动，说白了，就是便于管理。

1.盒子边框

盒子模型的标签是div，具体用法代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子边框</title>
    <style>
        div {
            /*盒子宽度width*/
            width: 200px;
            /*盒子高度height*/
            height: 200px;
            /*盒子边框border*/
            /*border有三个参数：粗细 线的类型 颜色*/
            /*线类型有：实线(solid) 虚线(dashed) 点线(dotted)*/
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

盒子建好之后，我们可以在里面写一些标签内容，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子边框</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div>
    <p>天气真好</p>
    <p>天气真好</p>
    <p>天气真好</p>
</div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

还可以给盒子添加背景颜色，使用background-color属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子边框</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background-color: orange;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

2.外边距

接下来看看外边距，外边距是盒子与盒子之间的边距，以及盒子与浏览器之间的边距，我们先创建两个盒子，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        #d1 {
            width: 300px;
            height: 300px;
            background-color: green;
        }
        #d2 {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div id="d1"></div>

<div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

div标签是默认从上往下展示，可以看到两个盒子目前是挨在一起，接下来为他们设置边距，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        #d1 {
            width: 300px;
            height: 300px;
            background-color: green;
        }
        #d2 {
            width: 300px;
            height: 300px;
            background-color: orange;
            /*上边距*/
            margin-top: 50px;
            /*左边距*/
            margin-left: 50px;
        }
    </style>
</head>
<body>
<div id="d1"></div>

<div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

接下来很关键的是如何让盒子居中，这里用到margin属性，属性值是auto，意思就是自动根据浏览器大小居中显示，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        #d2 {
            width: 300px;
            height: 300px;
            background-color: orange;
            /*盒子居中*/
            margin: auto;
        }
    </style>
</head>
<body>
<div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

3.内边距

内边距是盒子里面内容与盒子之间的边距，可以先看下面这组代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style>
        .d1 {
            width: 300px;
            height: 300px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
<div class="d1">
    <p>学习内边距</p>
</div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

接下来把盒子里面内容上下左右距离调整，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style>
        .d1 {
            width: 300px;
            height: 300px;
            border: 2px solid red;
            /*内容距离盒子上边的边距*/
            padding-top: 50px;
            /*内容距离盒子左边的边距*/
            padding-left: 50px;
        }
    </style>
</head>
<body>
<div class="d1">
    <p>学习内边距</p>
</div>
</body>
</html>

运行后结果如下：
在这里插入图片描述
这时候我们会注意到盒子整体变大了，这是因为内边距会撑大盒子，以保持除开刚才上边和左边撑开的内边距，盒子整体大小依然是我们设置的尺寸300px。

4.浮动

浮动就是把原有默认的位置进行移动，比如我们上面定义的两个盒子默认是上下挨着展示，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        #d1 {
            width: 300px;
            height: 300px;
            background-color: green;
        }
        #d2 {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

现在我将下面的盒子位置移动到右边，称为浮动，用到float属性，值为right，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        #d1 {
            width: 300px;
            height: 300px;
            background-color: green;
        }
        #d2 {
            width: 300px;
            height: 300px;
            background-color: orange;
            float: right;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

运行后结果如下：
在这里插入图片描述

综合实战案例

实战案例需求：编写注册页面，先看效果图如下：
在这里插入图片描述

附上全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面(案例)</title>
    <style>
        div {
            width: 300px;
            height: 320px;
            border: 1px solid grey;
            border-radius: 5px;
            border: 1px solid grey;
            padding: 10px;
            margin: auto;
        }
        span {
            border-bottom: 5px solid purple;
            padding-bottom: 6px;
        }
        #a1 {
            float: right;
            color: deepskyblue;
            text-decoration: none;
        }
        .A {
            width: 290px;
            height: 30px;
            margin-bottom: 8px;
            border-radius: 5px;
            border: 1px solid grey;
        }
        .B {
            width: 190px;
            height: 30px;
            margin-bottom: 8px;
            border-radius: 5px;
            border: 1px solid grey;
        }
        .C {
            width: 90px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid grey;
            color: purple;
        }
        .D {
            width: 90px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid grey;
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzhuangjiba.com%2Fd%2Ffile%2Fhelp%2F2018%2F08%2Fcfdefaddb3f47d78f8c66a7de28720aa.png&refer=http%3A%2F%2Fzhuangjiba.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655473640&t=3942417cfe379e590c48a9340d06952b");
            background-size: 85px 30px;
            vertical-align: middle;
        }
        .E {
            width: 290px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid grey;
            color: deepskyblue;
        }
    </style>
</head>
<body>

<div>
    <form action="">
        <span>请注册</span>
        <a id="a1" href="">立即登录></a>
        <hr>
        <input type="text" placeholder="请输入手机号" class="A"> <br>
        <input type="text" placeholder="请输入短信验证码" class="B">
        <input type="button" value="发送验证码" class="C"> <br>
        <input type="text" placeholder="请输入用户名"  class="A"> <br>
        <input type="password" placeholder="请输入密码"  class="A"> <br>
        <input type="password" placeholder="请再次输入密码"  class="A"> <br>
        <input type="text" placeholder="请输入图形验证码" class="B">
        <input type="button" class="D"><br>
        <input type="submit" value="立即注册" class="E">
    </form>
</div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1695624.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于PLC的地铁屏蔽门系统设计_kaic

基于PLC的地铁屏蔽门系统设计_kaic

摘 要 可编程序控制器&#xff08;PLC&#xff09;是近年来发展迅速的工业控制装置&#xff0c;它因为具有强大的稳定性、安全性以及维修便利等优点而应用于工业企业各个领域。地铁作为当代一二线城市最重要的公共交通工具&#xff0c;其安全性以及稳定性至关重要。 以PLC为控…
阅读更多...
【Java】Sping Boot中使用Javax Bean Validation

【Java】Sping Boot中使用Javax Bean Validation

目录 Javax Bean Validation在Spring Boot中集成Javax Bean Validation使用案例功能测试配置全局异常处理器重新测试返回特定形式的信息方式一方式二 Javax Bean Validation Javax Bean Validation是Java平台的一项规范&#xff0c;旨在提供一种简单且可扩展的方式来验证Java对…
阅读更多...
提示优化 | PhaseEvo：面向大型语言模型的统一上下文提示优化

提示优化 | PhaseEvo：面向大型语言模型的统一上下文提示优化

【摘要】为大型语言模型 (LLM) 制作理想的提示是一项具有挑战性的任务&#xff0c;需要大量资源和专家的人力投入。现有的工作将提示教学和情境学习示例的优化视为不同的问题&#xff0c;导致提示性能不佳。本研究通过建立统一的上下文提示优化框架来解决这一限制&#xff0c;旨…
阅读更多...
隐私是建立人工智能信任的关键

隐私是建立人工智能信任的关键

微信关注公众号网络研究观获取更多。 谷歌的 Astra 是其首款人工智能代理 谷歌继续将生成式人工智能融入网络安全 云的复杂性是我们这个时代最大的安全威胁 云安全最受关注的问题&#xff1a;人工智能生成的代码 企业可以从人工智能中获得转型利益&#xff0c;但确保“隐…
阅读更多...
Linux基础（六）：Linux 系统上 C 程序的编译与调试

Linux基础（六）：Linux 系统上 C 程序的编译与调试

本篇博客详细分析&#xff0c;Linux平台上C程序的编译过程与调试方法&#xff0c;这也是我们后续程序开发的基础。 目录 一、第一个hello world程序 1.1 创建.c文件 1.2 编译链接 运行可执行程序 二、编译链接过程 2.1 预编译阶段 2.2 编译阶段 2.3 汇编阶段 2.4 链…
阅读更多...
UTC与GPS时间转换-[week, sow]

UTC与GPS时间转换-[week, sow]

UTC与GPS时间转换-[week, sow] utc2gpsgps2utc测试参考 Ref: Global Positioning System utc2gps matlab源码 function res utc2gps(utc_t, weekStart)%% parameterssec_day 86400;sec_week 604800;leapsec 18; % 默认周一为一周的开始if nargin < 2weekStart d…
阅读更多...
别被“涨价“带跑，性价比才是消费真理

别被“涨价“带跑，性价比才是消费真理

文章来源&#xff1a;全食在线 “再不好好赚钱&#xff0c;连方便面也吃不起了。”这是昨天在热搜下&#xff0c;一位网友的留言。而热搜的内容&#xff0c;正是康师傅方便面即将涨价的消息。 01 传闻初现 昨天上午&#xff0c;朋友圈就有人放出康师傅方便面要涨价的消息&am…
阅读更多...
Java | Leetcode Java题解之第112题路径总和

Java | Leetcode Java题解之第112题路径总和

题目&#xff1a; 题解&#xff1a; class Solution {public boolean hasPathSum(TreeNode root, int sum) {if (root null) {return false;}if (root.left null && root.right null) {return sum root.val;}return hasPathSum(root.left, sum - root.val) || has…
阅读更多...
Linux 生产跑批脚本解读

Linux 生产跑批脚本解读

1.查看定时任务 2.脚本-目录结构 1&#xff09;config.ini 2&#xff09;run.sh 3.命令解读 1&#xff09;ls -1 路径文件夹 含义&#xff1a;ls -1 /home/oracle/shell/config/ 将文件夹config内的文件全部列出 [oracleneptune config]$ ls -1 /home/oracle/shel…
阅读更多...
家政服务，让您的家更温馨

家政服务，让您的家更温馨

家&#xff0c;是我们生活的港湾&#xff0c;也是我们心灵的归宿。在这个快节奏的时代&#xff0c;每个人都在为了生活而奔波。然而&#xff0c;家务琐事却常常成为我们忙碌生活中的绊脚石。为了解决这个问题&#xff0c;家政行业应运而生&#xff0c;为您的生活带来便利与舒适…
阅读更多...
【linux】g++/gcc编译器

【linux】g++/gcc编译器

目录 背景知识 gcc如何完成 预处理(进行宏替换) 编译&#xff08;生成汇编&#xff09; 汇编&#xff08;生成机器可识别代码&#xff09; 链接&#xff08;生成可执行文件或库文件&#xff09; 在这里涉及到一个重要的概念:函数库 函数库一般分为静态库和动态库两…
阅读更多...
使用FP8加速PyTorch训练的两种方法总结

使用FP8加速PyTorch训练的两种方法总结

在PyTorch中&#xff0c;FP8&#xff08;8-bit 浮点数&#xff09;是一个较新的数据类型&#xff0c;用于实现高效的神经网络训练和推理。它主要被设计来降低模型运行时的内存占用&#xff0c;并加快计算速度&#xff0c;同时尽量保持训练和推理的准确性。虽然PyTorch官方在标准…
阅读更多...
【电路笔记】-二阶滤波器

【电路笔记】-二阶滤波器

二阶滤波器 二阶（或双极）滤波器由两个连接在一起的 RC 滤波器部分组成，可提供 -40dB/十倍频程滚降率。 1、概述 二阶滤波器也称为 VCVS 滤波器，因为运算放大器用作压控电压源放大器，是有源滤波器设计的另一种重要类型，因为与我们之前研究过的有源一阶 RC 滤波器一起，…
阅读更多...
Git 的安装和使用

Git 的安装和使用

一、Git 的下载和安装 目录 一、Git 的下载和安装 1. git 的下载 2. 安装 二、Git 的基本使用-操作本地仓库 1 初始化仓库 1&#xff09;创建一个空目录 2&#xff09;git init 2 把文件添加到版本库 1&#xff09;创建文件 2&#xff09;git add . 3&#xff09;g…
阅读更多...
迅睿 CMS 中开启【ionCube 扩展】的方法

迅睿 CMS 中开启【ionCube 扩展】的方法

有时候我们想要某种功能时会到迅睿 CMS 插件市场中找现有的插件&#xff0c;但会有些担心插件是否适合自己的需求。于是迅睿 CMS 考虑到这一层推出了【申请试用】&#xff0c;可以让用户申请试用 30 天&#xff0c;不过试用是有条件的&#xff0c;条件如下&#xff1a; php 版…
阅读更多...
MyBatis复习笔记

MyBatis复习笔记

3.Mybatis复习 3.1 xml配置 properties&#xff1a;加载配置文件 settings&#xff1a;设置驼峰映射 <settings><setting name"mapUnderscoreToCamelCase" value"true"/> </settings>typeAliases&#xff1a;类型别名设置 #这样在映射…
阅读更多...
28. 正定矩阵和最小值

28. 正定矩阵和最小值

文章目录 1. 概述2. 正定矩阵判定条件3. 举例 1. 概述 正定矩阵这节可以将主元&#xff0c;行列式&#xff0c;特征值&#xff0c;还有不稳定性结合起来。以前我们学的是解决方程 A x b Axb Axb 的问题&#xff0c;现在升级&#xff0c;变成 x T A x b x^TAxb xTAxb &…
阅读更多...
html 字体设置 （web端字体设置）

html 字体设置 （web端字体设置）

windows自带的字体是有版权的&#xff0c;包括微软雅黑&#xff08;方正&#xff09;、宋体&#xff08;中易&#xff09;、黑体&#xff08;中易&#xff09;等 版权算是个大坑&#xff0c;所谓为了避免版权问题&#xff0c;全部使用开源字体即可 我这里选择的是思源宋体&…
阅读更多...
Java进阶学习笔记10——子类构造器

Java进阶学习笔记10——子类构造器

子类构造器的特点&#xff1a; 子类的全部构造器&#xff0c;都会先调用父类的构造器&#xff0c;再执行自己。 子类会继承父类的数据&#xff0c;可能还会使用父类的数据。所以&#xff0c;子类初始化之前&#xff0c;一定先要完成父类数据的初始化&#xff0c;原因在于&…
阅读更多...
【pyspark速成专家】7_SparkSQL编程1

【pyspark速成专家】7_SparkSQL编程1

目录 一&#xff0c;RDD&#xff0c;DataFrame和DataSet对比 二&#xff0c;创建DataFrame 本节将介绍SparkSQL编程基本概念和基本用法。 不同于RDD编程的命令式编程范式&#xff0c;SparkSQL编程是一种声明式编程范式&#xff0c;我们可以通过SQL语句或者调用DataFrame的相…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023