CSS 介绍及用法,常用属性

一、CSS介绍

    

    A. 简介    

    CSS全称:全称为层叠样式表(Cascading Style Sheets),是一种用于描述网页外观和格式的计算机语言。CSS可以使网页的布局更加丰富和多样化,并且可以将样式信息与网页内容分离,使得网页的开发和维护更加便捷。它与HTML一起构成了网页的骨架和外观。通过使用CSS,开发者可以控制网页的布局、颜色、字体以及其他视觉效果,使网页更美观和用户友好。

    B基本概念

        1、 选择器(Selector)
  • 用于选择HTML元素,应用样式规则。
  • 常见选择器包括标签选择器、类选择器、ID选择器、伪类选择器等。
        2、 声明(Declaration)
  • 包含属性(Property)和属性值(Value),用于定义样式。
  • 例如,color: red; 是一个声明,其中 color 是属性,red 是属性值。
        3、 规则集(Rule Set)
  • 包括选择器和一组声明。
  • 例如:
        p {
            color: red;
            font-size: 16px;
        }
CSS的基本语法
selector {
    property: value;
    property: value;
}
例如,以下CSS规则将所有段落的文字颜色设为红色,字体大小设为16像素:
p {
    color: red;
    font-size: 16px;
}

    C引入CSS的方式

        1、 内联样式(Inline Style)

  • 直接在HTML元素的style属性中定义样式。
  • 例如:
<p style="color: red; font-size: 16px;">This is a paragraph.</p>

        2、 内部样式表(Internal Style Sheet)

  • 在HTML文档的<head>部分使用<style>标签定义样式。
  • 例如:
        <head>
            <style>
                p {
                    color: red;
                    font-size: 16px;
                }
            </style>
        </head>

        3、 外部样式表(External Style Sheet)

  • 将样式规则保存在一个独立的‘.css’文件中,并在HTML文档中通过<link>标签引用。
  • 例如,styles.css 文件内容:
        p {
            color: red;
            font-size: 16px;
        }
            在HTML文档中引用:
        <head>
            <link rel="stylesheet" href="styles.css">
        </head>

二、CSS选择器

    1、 标签选择器:选择所有指定标签的元素。

p {
    color: blue;
}

    2、 类选择器:选择所有具有指定类的元素。类选择器以.开头。

.my-class {
    color: green;
}

    3、 ID选择器:选择具有指定ID的元素。ID选择器以#开头。

#my-id {
    color: orange;
}

    4、 属性选择器:选择具有指定属性的元素。

[type="text"] {
    border: 1px solid black;
}

    5、 伪类选择器:选择元素的特定状态。

a:hover {
    color: red;
}

三、CSS属性

    1、宽度

        语法:width:value
        特点:为元素指定宽度。
        value:值为数字,单位像素(px)、百分比(%)、视口单位(vw、vh)等。
        例如:
width: 200px;

    2、高度

        语法:height:value
        特点:为元素指定高度
        value:值为数字,单位像素(px)、百分比(%)、视口单位(vw、vh)等。
        例如:
height: 200px;

    3、对齐方式

        语法:text-align:value
        特点:文本段落元素指定对齐方式
        value:
  • left:左(默认)
  • center:居中
  • right:右
  • justify: 将文本两端对齐。文本在行的起始和末尾对齐,通过调整单词间的空格来实现
        例如:
text-align: right;

    4、字体大小

        语法:font-size:value
        特点:为文本元素设置大小
        value:值为数字,单位像素(px)
        例如:
font-size: 14px;

    5、字体颜色

        语法:color:value
        特点:为文本元素指定颜色
        value:值表示方式可以为:十六进制,RGB,RGBA,HSL,HSLA,预定义颜色例如‘red’。
        例如:
color: pink;

    6、行高

        语法:line-height:value
        特点:行与行之间的距离, 它影响元素内文本的垂直间距,通常用于提高可读性
                   和视觉布局的美观性。
        value:值可以为: 数字、百分比、长度单位和关键字值。
        例如:
line-height: 1.2;                /* 它表示行高是字体大小的倍数 */
line-height: 150%;           /* 它表示行高是字体大小的百分比 */
line-height: 20px;            /* 它表示具体的长度 */
line-height: normal;        /* 它表示浏览器的默认行高,一般为字体大小的1.2到1.4倍 */

    7、字符间距

        语法:letter-spacing:value
        特点: 用于控制文本字符之间的间距, 它可以增加或减少字符之间的空白,
                    使文本更具可读性或产生特定的视觉效果。
        value: 可以使用任何有效的CSS长度单位,如pxemrem%等。
                      正值会增加字符间距,负值会减少字符间距。
        例如:
letter-spacing:2px;

    8、边框线

        语法:border:width style color
        特点: 通过边框属性,你可以定义边框的宽度、样式和颜色,
                    使元素更加醒目和具有层次感。 border是由四个子属性组成
                  ( border-top+ border-right+ border-bottom+ border-left),
                     value是由三个子属性组成( border-width+ border-style+ border-color),
                   以上子属性也是都可以单独使用。
        value:
  • width:宽度,值为数字,单位像素(px)
  • style:样式
    • none: 无边框
    • solid: 实线
    • dashed: 虚线
    • dotted: 点线
    • double: 双线
    • groove: 3D凹槽
    • ridge: 3D凸起
    • inset: 3D嵌入
    • outset: 3D凸出
  • color:颜色
        例如:
border: 1px solid red;
border-top:red;
border:1px solid;
border-style:solid;
border-width:10px;
border-color:red;

    9、边框圆角

        语法:border-radius:value
        特点: 可以设置圆角边框,使元素的角变得圆滑。
        value:值为数字像素(px),1个值:所有角,2个值:第一个值为左上和右下,
                    第二个值为右上和左下,4个值:第一个值为左上,第二个为右上,第三个为右下,
                    第四个为左下。
        例如:
    border-radius: 10px;                    /* 所有角的半径为10px */
    border-radius: 10px 20px;          /* 左上和右下角半径为10px,右上和左下角半径为20px */
    border-radius: 10px 20px 30px 40px;        /* 各个角的半径分别为,左上:10px, 
                                                                        右上:20px, 右下:30px, 左下40px */

    10、字体样式

        语法:font-family:value
        特点: 字体系列指的是一组具有相似设计特征的字体,例如Arial、Times New Roman
                     等, 使用'font-family'属性可以指定文本内容使用特定的字体或字体列表,以确保在不
                     同设备和浏览器中具有一致的外观。
        value:优先级字体列表。
        例如:
font-family: "Arial", "Helvetica", sans-serif;

    11、字体粗细

        语法:font-weight:value
        特点: 这个属性可以接受多个值,包括预定义的关键字和数值。通过调整字体的粗细,可以
                    改变文本的视觉效果,突出显示重要内容或达到特定的设计目的。
        value:
  • 关键字值:
    • normal: 标准粗细,通常对应400
    • bold: 粗体,通常对应700
    • bolder: 相对于父元素的字体粗细,更粗
    • lighter: 相对于父元素的字体粗细,更细
  • 数值
    • 具体的数值范围从100到900,每100为一个增量。通常使用的数值有400(相当于normal)和700(相当于bold)
    • 某些字体可能不支持所有这些数值,当指定的数值不支持时,浏览器会选择最接近的可用值
        例如:
font-weight: bold;
font-weight: 100;

    12、浮动

        语法:float:value
        特点: 浮动元素会左右移动直到它碰到包含它的父元素或另一个浮动元素的边缘。
        value:
  • left: 元素向左浮动
  • right: 元素向右浮动
  • inherit: 元素的浮动属性将继承其父元素的‘float属性值
        例如:
float: left;

    13、清除浮动

        语法:clear:value
        特点: 当使用浮动元素时,有时需要清除浮动,以确保容器元素能够包含浮动元素。这可以
                    通过使用clear属性来实现。
        value:
  • none:默认值。元素允许浮动元素位于它的两侧
  • left:元素左侧不允许有浮动元素
  • right:元素右侧不允许有浮动元素
  • both:元素两侧都不允许有浮动元素
  • inherit:元素的清除属性将继承其父元素的clear属性值
        例如:
clear: both;

    14、背景颜色

        语法:background-color:value
        特点: 这是一个常用属性,可以为元素提供视觉上的分隔和装饰,
                    使页面更具吸引力和层次感。
        value:值表示方式可以为:十六进制,RGB,RGBA,HSL,HSLA,预定义颜色例如‘red’,
                     也可以设置 ‘inherit’ 来继承父元素的背景颜色。
        例如:
background-color: blue;
background-color: rgb(255, 0, 0);
background-color: inherit;
background-color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */

    15、背景图片

        语法:background-image:value
        特点: 通过这个属性,可以将图像应用到元素的背景上,从而丰富网页的视觉效果
        value:url('图片的路径')
        例如:
background-image: url('example.jpg');

    16、背景图片是否重复

        语法:background-repeat:value
        特点: 为了更好地控制背景图像的显示效果,可以与其他背景相关属性结合使用。
        value:
  • repeat: 默认值,背景图像在水平和垂直方向重复
  • no-repeat: 背景图像不重复
  • repeat-x: 背景图像在水平方向重复
  • repeat-y: 背景图像在垂直方向重复
        例如:
background-repeat: no-repeat;

    17、背景图片的位置

        语法:background-position:value
        特点:定位背景图片具体展示位置。
        value: 可以使用关键词(如 top, bottom, left, right, center)或具体的坐标值
                     (如 50% 50%, 10px 20px
        例如:
background-position: center;

    18、背景图片的尺寸

        语法:background-size:value
        特点:指定背景图片的尺寸。
        value:
  • auto: 默认值,保持图像的原始尺寸
  • cover: 缩放背景图像以完全覆盖元素背景区域
  • contain: 缩放背景图像以使其在元素背景区域内完全显示
        例如:
background-size: cover;

    19、背景图片的滚动行为

        语法:background-attachment:value
        特点:指定北京图片的滚动行为。
        value:
  • scroll: 默认值,背景图像随元素内容滚动
  • fixed: 背景图像固定,不随内容滚动
  • local: 背景图像随元素内容滚动
        例如:
background-attachment: fixed;

    20、背景图片的定位区域

        语法:background-origin:value
        特点:指定 背景图像的定位区域。
        value:
  • padding-box: 背景图像相对于元素的内边距框定位
  • border-box: 背景图像相对于元素的边框框定位
  • content-box: 背景图像相对于元素的内容框定位
        例如:
background-origin: content-box;

    21、背景图片绘制区域

        语法:background-clip:value
        特点: 定义背景绘制的区域。
        value:
  • border-box: 背景延伸到边框外沿
  • padding-box: 背景延伸到内边距外沿,不包括边框
  • content-box: 背景只延伸到内容区
        例如:
background-clip: padding-box;

    22、光标样式

        语法:cursor:value
        特点: 用于指定当鼠标指针悬停在元素上时所显示的光标样式。这不仅可以增强用户体验,
                    还可以传达特定的交互意图。
        value:
  • default: 默认光标,通常是一个箭头
  • pointer: 手形光标,通常用于指示可点击的链接
  • text: I型光标,通常用于指示文本输入区域
  • move: 移动光标,通常用于指示可移动的元素
  • not-allowed: 禁止光标,通常用于指示不可操作的元素
  • wait: 等待光标,通常用于指示操作正在进行中
  • help: 帮助光标,通常用于指示有可用的帮助信息
  • crosshair: 十字准星光标
  • grab  grabbing: 抓取和抓取中光标,通常用于拖动操作
  • url路径: 可以使用自定义图像作为光标,但需要指定图像的URL。为了兼容性,最好提供一个备用的预定义光标
        例如:
cursor: pointer;
cursor: url('custom-cursor.png'), auto;
element {
    cursor: grab;
}
element:active {
    cursor: grabbing;
}
        兼容性注意:
  • 自定义光标: 使用自定义光标时,需要确保图像的大小适当(推荐32x32像素),以保证兼容性和显示效果。若指定的图像无法加载,浏览器会显示备用的预定义光标。
  • 浏览器支持: 大多数现代浏览器都支持cursor属性中的预定义值和自定义URL。但某些旧版本的浏览器可能对某些值支持不佳。

    23、显示隐藏/转换特性

        语法:width:value
        特点: CSS中的display属性用于定义元素生成的框的类型。它是CSS中最基础和最重要的属
                    性之一,控制着元素的布局和显示方式。不同的display值会改变元素在页面上的布局
                    行为以及与其他元素的关系。
        value:
  • block:
    • 元素显示为块级元素,占据其父容器的整个宽度,并在其前后创建换行
    • 示例:<div>, <p>, <h1> 
  • inline:
    • 元素显示为内联元素,只占据其内容的宽度,不会在其前后创建换行
    • 示例:<span>, <a>, <strong> 
  • inline-block: 元素显示为内联块级元素,既具有内联元素的排版特性,也具有块级元素的可设置宽高特性
  • none: 元素完全隐藏,不占据任何空间,不参与文档流
  • flex: 元素作为弹性盒子容器(Flex容器),其子元素作为弹性盒子项(Flex项)进行布局
  • inline-flex: 元素显示为内联弹性盒子容器,行为类似于flex,但本身是内联元素
  • grid: 元素作为网格容器,其子元素作为网格项进行布局
  • inline-grid: 元素显示为内联网格容器,行为类似于grid,但本身是内联元素
  • table:
    • 元素显示为表格容器,其子元素显示为表格行、表格单元等
    • 示例:<table> 
  • table-row:
    • 元素显示为表格行
      • 示例:<tr> 
  • table-cell:
    • 元素显示为表格单元格
    • 示例:<td>, <th> 
        例如:
display: block;
display: none;
display: inline-grid;

    24、列表标记类型

        语法:list-style-type:value
        特点: 用于设置列表项标记的类型(如圆点、数字、字母等)。它适用于有序列表(<ol>
                    和无序列表(<ul>)的列表项(<li>)。
        value:
  • disc: 实心圆(默认值)
  • circle: 空心圆
  • square: 实心方块
  • decimal: 十进制数字(1, 2, 3, ...)
  • lower-roman: 小写罗马数字(i, ii, iii, ...)
  • upper-roman: 大写罗马数字(I, II, III, ...)
  • lower-alpha: 小写字母(a, b, c, ...)
  • upper-alpha: 大写字母(A, B, C, ...)
  • none:消除列表项标记
        例如:
list-style-type: square;
list-style-type: none;

    25、列表标记位置

        语法:list-style-position:value
        特点:用于设置列表项标记相对于列表内容的位置。它适用于有序列表(<ol>)和无序列表
                (<ul>)的列表项(<li>)。
        value:
  • outside: 标记在列表项之外(默认值)
  • inside: 标记在列表项内容的内部
        例如:
list-style-position: inside;

    26、列表标记自定义图片

        语法:list-style-image:value
        特点:  用于设置自定义图像作为列表项的标记。它适用于有序列表(<ol>)和无序列表
                    (<ul>)的列表项(<li>)。
        value:url(图片的地址)
        例如:
list-style-image: url('custom-marker.png');

    27、透明度

        语法:opacity:value
        特点: 它控制元素内容和背景的透明度,使得可以创建具有透明效果的元素。opacity属性的
                    值在0到1之间,0表示完全透明,1表示完全不透明。
        value:数字0-1
        例如:
opacity: 0.5;     /* 半透明 */

    28、文本装饰线

        语法:text-decoration-line:value
        特点: 用于设置文本的装饰线类型。可以组合多个值。
        value:
  • none: 无装饰线
  • underline: 下划线
  • overline: 上划线
  • line-through: 贯穿线(删除线)
        例如:
text-decoration-line: underline;

    29、文本装饰线颜色

        语法:text-decoration-color:value
        特点: 用于设置装饰线的颜色。
        value:值表示方式可以为:十六进制,RGB,RGBA,HSL,HSLA,预定义颜色例如‘red’。
        例如:
text-decoration-color: red;

    30、文本装饰线样式

        语法:text-decoration-style:value
        特点: 用于设置装饰线的样式。
        value:
  • solid: 实线(默认值)
  • double: 双线
  • dotted: 点线
  • dashed: 虚线
  • wavy: 波浪线
        例如:
text-decoration-style: dashed;

    31、内容溢出

        语法:overflow:value
        特点: overflow属性用于指定当内容溢出元素的盒子时该如何处理。它可以控制水平和垂直
                    方向上的内容溢出行为。overflow属性有几个常用的值,每个值都有不同的效果。
                   也可以单独控制水平和垂直,‘overflow-x’ 和 ‘overflow-y’ 。
        value:
  • visible:
  • hidden:
  • scroll:
  • auto:
  • clip:
        例如:
overflow: auto;
overflow-x: scroll;
overflow-y: auto;

    32、定位

        语法:position:value
        特点: position属性用于设置元素在文档中的定位方式。它定义了一个元素在网页布局中的定
                    位策略。
        value:
  • static:默认值。元素按照文档的正常流进行定位,不受top、right、bottom、left属性的影响。
  • relative:元素相对于其正常位置进行定位。可以使用top、right、bottom、left属性进行偏移,但不影响其他元素的布局。
  • absolute:元素相对于最近的已定位祖先元素(非static)的定位上下文进行定位。如果没有已定位的祖先元素,
                      则相对于初始包含块(通常是html元素)进行定位。使用top、right、bottom、left属性进行绝对定位。
  • fixed:元素相对于浏览器窗口进行定位,即使页面滚动,元素的位置也不会改变。使用top、right、bottom、left属性进行固定定位。
  • sticky:元素在正常流中是相对定位的,但在用户滚动到特定位置时变为固定定位。使用top、right、bottom、left属性定义何时应“粘附”在视口上。
        例如:
position: sticky;

    33、外边距

        语法:margin:value
        特点: margin属性用于设置元素周围的外边距,它决定了元素与相邻元素或其包含块之间的
                    距离。也可以单独设置每个方向的外边距:‘ margin-top’,‘ margin-right’,
                    ‘ margin-bottom’,‘ margin-left’ 。
        value:数字,单位像素(px);百分比(%);也可以使用关键字‘auto’:自动居中。
        例如:
margin: 10px 20px 30px 40px;       /* 顺时针顺序:上、右、下、左 */
margin: 10px 20px 30px;                /* 上、左右、下 */
margin: 10px 20px;                         /* 上下、左右 */
margin: 20px;                                  /* 所有方向 */
margin-top: 10px;                          /* 上 10像素 */
margin-right: 20px;                        /* 右 20像素*/

    34、内边距

        语法:padding:value
        特点: padding 属性用于设置元素内容与其边框之间的内边距。它决定了元素内容和边框之
                    间的距离。也可以单独设置每个方向的外边距:‘padding-top’,
                    ‘padding-right’,‘padding-bottom’,‘padding-left’ 。
        value:数字,单位像素(px);百分比(%);也可以使用关键字‘auto’:自动居中。
        例如:
padding: 10px 20px 30px 40px;       /* 顺时针顺序:上、右、下、左 */
padding: 10px 20px 30px;                /* 上、左右、下 */
padding: 10px 20px;                         /* 上下、左右 */
padding: 20px;                                  /* 所有方向 */
padding-top: 10px;                          /* 上 10像素 */
padding-right: 20px;                        /* 右 20像素*/

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何防止重复提交请求?

下面说的防重操作&#xff0c;如支付功能订单提交业务、表单提交、手机验证码功能。 订单提交为什么需要防重呢&#xff1f;想像一下你在商城购物&#xff0c;你选中商品点击提交订单&#xff0c;如果这时网络延迟没有返回成功提示&#xff0c;你又多点了几次。每点一次都会发送…

SpringBoot入门,idea搭建一个简单SpringBoot项目

初学者搭建一个简单的SpingBoot项目 在IntelliJ IDEA中直接创建一个新的Spring Boot项目非常直观便捷&#xff0c;下面是详细的步骤指南&#xff1a; 第1步&#xff1a;打开IntelliJ IDEA并创建新项目 打开IntelliJ IDEA。选择菜单栏的“File” > “New” > “Project”…

Github 2024-05-29 C开源项目日报 Top10

根据Github Trendings的统计,今日(2024-05-29统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量C项目10C++项目3PHP项目1PHP:流行的Web开发脚本语言 创建周期:4710 天开发语言:C, PHP协议类型:OtherStar数量:37340 个Fork数量:7657 次…

MySQL 按年月日统计,创建视图

按日统计&#xff0c;前十天 SELECTdays.day dateField,COALESCE(COUNT(archive_no), 0) AS total_quantityFROM(SELECTDATE_FORMAT(DATE_SUB(now(), INTERVAL a.a DAY), %Y-%m-%d) AS dayFROM(SELECT 0 AS a UNION ALL SELECT 1 UNION ALL SELECT 2 UNION ALL SELECT 3 UNION…

003 仿muduo实现高性能服务器组件_前置知识

​&#x1f308;个人主页&#xff1a;Fan_558 &#x1f525; 系列专栏&#xff1a;仿muduo &#x1f339;关注我&#x1f4aa;&#x1f3fb;带你学更多知识 文章目录 前言时间轮timewheel设计正则表达式介绍&#xff08;了解知道怎么使用&#xff09;通用型any容器的实现 小结 …

让 AI 回答更精准 来学学这些Prompt入门小技巧

&#x1f3a5;前言 最近一直在研究各种 AI 提问相关的方法&#xff0c;一顿输入后&#xff0c;get到了好多有趣又好玩的提问小技巧。今天就来和小伙伴们安利下&#xff0c;平常在向AI提问时&#xff0c;最最基础&#xff0c;且最最实用的6种提示词方法。 那废话不多说&#x…

java全套idea jdk maven历史版本下载

idea多版本 Other Versions - IntelliJ IDEA jdk&#xff0c;需要登陆 https://www.oracle.com/java/technologies/downloads/ maven多版本 Maven – Maven Releases History

如何使用git上传linux下的项目!---附带每一步截图

在实际项目中&#xff0c;我们需要把自己的模块递给GitHub&#xff0c;需要别人的模块的时候拉下来&#xff0c;那么我们怎么把自己的项目递给GitHub呢&#xff1f;下面做一个总结&#xff1a; 登录GitHub 创建一个仓库 填写相关信息 项目名称是必填的&#xff0c;项目描述可以…

语音控制系统的安全挑战与防御策略(中)

2.3 核心层 在VCS中&#xff0c;核心层负责解码预处理层处理后的音频特征向量。这种解码传统上是通过声学模型实现的&#xff0c;它将特征向量转换为音素&#xff0c;并使用语言模型预测词序列概率&#xff0c;以输出最可能的句子。目前Wav2Letter&#xff08;基于CNN&#xf…

「架构」模型驱动架构设计方法及其运用

本文通过一个实际的软件项目案例,深入探讨了模型驱动架构(MDA)在软件开发全过程中的应用。MDA是一种以模型为中心的设计方法,它通过分离计算、数据和业务逻辑,提高了软件的可维护性、可扩展性和可移植性。文章将从需求分析、架构设计、实现与测试三个阶段出发,分析MDA的应…

FaceChain-FACT:开源10秒写真生成,复用海量LoRa风格,基模友好型写真应用

github开源地址&#xff1a;https://github.com/modelscope/facechain/tree/main/facechain_adapter 魔搭创空间应用体验&#xff1a;魔搭社区 一、效果演示 FaceChain FACT的代码和模型目前已经在github和modelscope创空间上同步开源。FaceChain FACT具有简单的交互式界面设…

AI图书推荐:基于ChatGPT API和Python开发应用程序的详细指南

ChatGPT已经以其革命性的能力引起了人们的关注&#xff0c;利用其API可能会成为你的游戏规则改变者。这不仅仅是关于编码&#xff1b;它是关于为您的创作添加一层智能&#xff0c;将它们提升到之前无法想象的水平。《基于ChatGPT API和Python开发应用程序的详细指南》&#xff…

[图解]企业应用架构模式2024新译本讲解03-事务脚本+表数据入口

1 00:00:00,570 --> 00:00:06,290 这里先创建一个service的对象 2 00:00:07,000 --> 00:00:12,470 然后调用对象的方法、操作 3 00:00:12,480 --> 00:00:13,750 就是事务脚本 4 00:00:14,700 --> 00:00:15,900 然后参数是1 5 00:00:16,660 --> 00:00:19,490…

《公正》孙溟㠭艺术

孙溟㠭艺术《公正》 孙溟㠭艺术《公正》

利用NewGIS平台将FME模板发布为接口

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 一、模板编写 二、发布模板 三、接口获取 四、移动端调用 ​​​​​ 前言 在实际的应用生产过程中&#xff0c;尤其是移动端GIS软件的开发&#xff0c;针对一些闭…

【社区投稿】给 NdArray 装上 CUDA 的轮子

Ndarry是Rust编程语言中的一个高性能多维、多类型数组库。它提供了类似 numpy 的多种多维数组的算子。与 Python 相比 Rust 生态缺乏类似 CuPy, Jax 这样利用CUDA 进行加速的开源项目。虽然 Hugging Face 开源的 candle 可以使用 CUDA backend 但是 candle 项瞄准的是大模型的相…

12.2 通道-阻塞与流程控制、通道型函数、退出通道

阻塞与流程控制 通常在并发程序中要尽力避免阻塞式操作&#xff0c;但有时又需要让代码暂时处于阻塞状态&#xff0c;以等待某种条件、信号或数据&#xff0c;然后再继续运行。 对于无缓冲通道&#xff0c;试图从无人写入的通道中读取&#xff0c;或者向无人读取的通道中写入…

Redis教程(二十一):Redis怎么保证缓存一致性

传送门:Redis教程汇总篇,让你从入门到精通 Redis 的缓存一致性 Redis 的缓存一致性是指在使用 Redis 作为缓存层时,保证缓存中的数据与数据库中的数据保持一致的状态。在分布式系统中,数据一致性是一个重要的问题,因为可能存在多个客户端同时读写同一数据,或者数据在不同…

【量算分析工具-贴地面积】GeoServer改造Springboot番外系列十

【量算分析工具-概述】GeoServer改造Springboot番外系列三-CSDN博客 【量算分析工具-水平距离】GeoServer改造Springboot番外系列四-CSDN博客 【量算分析工具-水平面积】GeoServer改造Springboot番外系列五-CSDN博客 【量算分析工具-方位角】GeoServer改造Springboot番外系列…

SQL学习小记(三)

SQL学习小记&#xff08;三&#xff09; 功能实现思路代码部分名词解释 代码打包为可执行文件 功能说明&#xff1a;使用python代码&#xff0c;将数据库database1中的表格table1同步到数据库database2中 功能实现 思路 #mermaid-svg-R1pWrEWA799M299a {font-family:"tre…