HTML中的CSS超详细使用（附代码图文示例）【干货】_html css样式代码-程序员宅基地

①font-family：设置字体类型/举例：font-family："楷书"
②font-size：设置字体大小(单位：px(像素)、em、rem、cm、mm、pt、pc)/举例：font-size：12px
③font-style：设置字体风格(normal(默认标准)、italic(倾斜)和oblique(倾斜))/举例：font-style：italic
④font-weight：设置字体的粗细
- normal：默认值,定义标准字体
- bold：粗体字体
- bolder：更粗的字体
- lighter：更细的字体
- 100、200……900(步长100)：定义由细到粗的字体,400等同于normal,700等同于bold
- 举例：font-weight：bold
⑤foot：在一个声明中设置所有字体属性

字体属性的顺序：字体风格->字体粗细->字体大小->字体类型

举例： foot：italic bold 12px "楷书";

二、字体样式总结

字体样式	描述
font-family	设置文本的字体类型("楷书")
font-size	设置文本的字体大小（单位：px、em、rem、cm）
font-style	设置字体风格(normal(默认标准)、italic(倾斜)和oblique(倾斜))
font-weight	设置文本的字体粗细（默认(normal)、粗体(bold)、更细(lighter)、步长(400)）
foot	风格(style)、粗细(weight)、大小(size)、类型(family)

三、字体样式图片示例：

四、代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #font_p1{
            font-family:"楷书";
        }
        #font_p2{
            font-size:35px;
        }
        #font_p3{
            font-style:italic;
        }
        #font_p4{
            font-weight:bold;
        }
        #font_p5{
            font: italic bold 40px "宋体";
        }
    </style>
</head>
<body>

<p id="font_p1">字体类型&#45;&#45;font-family</p>
<p id="font_p2">字体大小&#45;&#45;font-size</p>
<p id="font_p3">字体风格&#45;&#45;font-style</p>
<p id="font_p4">字体粗细&#45;&#45;font-weight</p>
<p id="font_p5">字体样式&#45;&#45;设置所有字体样式</p>

</body>
</html>

文本样式：

一、文本样式的概念及使用

①color：设置文本颜色
②text-align：设置元素水平对齐方式
- left：左对齐,默认值
- right：右对齐
- center：居中
- justify：实现两端对齐文本效果
③vertical-align：设置元素垂直对齐方式
- top：顶部
- middle：中部
- bottom：底部
③text-indent：设置首行文本的缩进(单位px或em)/举例：text-indent:20px
④line-height：设置文本的行高(单位px)/举例：line-height:25px
⑤text-decoration：设置文本的装饰
- none：默认值,定义的标准文本
- underline：设置文本的下划线
- overline：设置文本的上划线
- line-through：设置文本的删除线

二、文本样式总结

文本样式	描述
color	设置文本颜色
text-align	设置元素水平对齐方式（左、右、居中、两端）
vertical-align	设置元素垂直对齐方式（顶部、中部、底部）
text-indent	设置首行文本的缩进(单位px或em)
line-height	设置文本的行高(单位px)
text-decoration	设置文本的装饰（下划线、上划线、删除线）

三、文本样式图片示例：

四、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #text_p1{
            color:chartreuse;
        }
        #text_p2{
            text-align:center;
        }
        #text_p3{
            vertical-align:middle;
        }
        #text_p4{
            text-indent:20px;
        }#text_p5{
            line-height:100px;
         }
        #text_p7{
            text-decoration:none;
        }
        #text_p8{
            text-decoration:underline;
        }
        #text_p9{
            text-decoration:overline;
        }
        #text_p10{
            text-decoration:line-through;
        }

    </style>
</head>
<body>

<p id="text_p1">color--文本颜色</p>
<p id="text_p2">text-align--水平对齐方式</p>
<p id="text_p3">vertical-align--垂直对齐方式</p>
<p id="text_p4">text-indent--文本缩进</p>
<p id="text_p5">line-height--文本行高</p>
<p id="text_p6">text-decoration--以下是文本装饰：</p>
<p id="text_p7">text-decoration:nono--文本装饰-默认值</p>
<p id="text_p8">text-decoration:underline--文本装饰-下划线</p>
<p id="text_p9">text-decoration:overline--文本装饰-上划线</p>
<p id="text_p10">text-decoration:line-through--文本装饰-删除线</p>

</body>
</html>

CSS中的文本阴影：

text-shadow：color(阴影颜色) x-offset(X轴位移,用来指定阴影水平位移量) y-offset(Y轴位移,用来指定阴影垂直位移量) blur-radius(阴影模糊半径,代表阴影向外模糊的模糊范围)/X轴、Y轴和半径单位都为px。

超链接伪类：

一、超链接伪类的概念及使用

标签名:伪类名{声明;}
伪类样式：

-标签：link 未单击访问时超链接样式/示例：标签:link{color:#eaadea/pink}
-标签：visited 单击访问后超链接样式/示例：标签:visited{color:#eaadea/pink}
-标签：hover 鼠标悬浮其上的超链接样式/示例：标签:hover{color:#eaadea/pink}
-标签：active 鼠标单击未释放的超链接样式/示例：标签:active{color:#eaadea/pink}

设置伪类的顺序：link > visited > hover > active

二、超链接伪类总结

伪类样式	描述
link	未单击访问时超链接样式
visited	单击访问后超链接样式
hover	鼠标悬浮其上的超链接样式
active	鼠标单击未释放的超链接样式

三、超链接伪类的动画示例

四、超链接伪类代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*未单击访问时超链接样式*/
        p:link{
            color: chartreuse;
        }
        /*单击访问后超链接样式*/
        p:visited{
            color: pink;
        }
        /*鼠标悬浮其上的超链接样式*/
        p:hover{
            color:red;
        }
        /*鼠标单击未释放的超链接样式*/
        p:active{
            color: darkorange;
        }
    </style>
</head>
<body>

<p>超链接伪类</p>
</body>
</html>

列表样式：

一、列表样式的概念及使用

css：标签名{list-style：值}
五种值的表示方式：

①none：无标记符号
②disc：实心圆,默认类型
③circle：空心圆
④square：实心正方形
⑤decimal：数字

二、列表样式总结

列表样式	描述
none	无标记符号
disc	实心圆,默认类型
circle	空心圆
square	实心正方形
decimal	数字

三、列表样式图片示例

四、列表样式代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #list-style_ul1{
            list-style:nono;
        }
        #list-style_ul2{
            list-style:disc;
        }
        #list-style_ul3{
            list-style:circle;
        }
        #list-style_ul4{
            list-style:square;
        }
        #list-style_ul5{
            list-style:decimal;
        }
    </style>
</head>
<body>
<ol>
    <li id="list-style_ul1">list-style:nono--无标记符号</li>
    <li id="list-style_ul2">list-style:disc--默认类型（实心圆）</li>
    <li id="list-style_ul3">list-style:circle--空心圆</li>
    <li id="list-style_ul4">list-style:square--实心正方形</li>
    <li id="list-style_ul5">list-style:decimal--数字</li>
</ol>
</body>
</html>

网页背景：

一、网页背景的概念及使用

背景颜色：
background-color：颜色值
背景图像：
标签名{background-image: url("图像路径")}
背景重复方式：
标签名{background-image: url("图像路径");background-repeat: 属性}
四种属性表示方式：

①repeat：沿水平和垂直两个方向平铺
②no-repeat：不平铺，即只显示一次
③repeat-x：只沿水平方向平铺
④repeat-y：只沿垂直方向平铺

背景定位：
标签名{background-image: url("背景图像.png");background-position: 值值}
三种值表示方式：

①X Y：单位：px，Xpos表示水平位置，Ypos表示垂直位置
②X% Y%：使用百分比表示背景的位置
③X、Y方向关键词：X水平方向的关键词：left、center、right;Y垂直方向的关键词：top、center、bottom

设置背景属性样式简写：
标签名{background: 背景颜色背景图像背景重复方式背景定位}
示例：#id{background: pink url("背景图像.png") no-repeat center center}
背景尺寸：
标签名{background-image: url("背景图像.png");background-size：值}

四种值表示方式：

①auto：默认值，使用背景图片保持原样
②percentage：当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
③cover：整个背景图片放大填充了整个元素
④contain：让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

背景渐变(线性渐变)：
标签名{background: linear-gradient(渐变方向, 第一种颜色,第二种颜色……)}
示例：{background: linear-gradient(to left, blue,red)}

二、网页背景总结

网页背景样式	描述
background-color	背景颜色
background-image: url("图像路径")	背景图像
background-repeat	背景重复方式
background-position	背景定位（X Y、X% Y%、X、Y方向关键词）
background-size	背景尺寸（默认、百分百、放大填充、自适应比例）
linear-gradient	背景渐变（线型渐变）

总结不易，希望uu们不要吝啬亲爱的哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正

本文链接：https://blog.csdn.net/Jin_Xiang123/article/details/135023559

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

不是阿里P8级大佬，岂能错过这篇MySQL运维内参？啃透涨薪so easy-程序员宅基地

文章浏览阅读176次。写在前面MySQL被设计为一个可移植的数据库，几乎在当前所有系统上都能运行，如Linux、Solaris、 FreeBSD、 Mac和Windows。尽管各平台在底层(如线程)实现方面都各有不同，但是MySQL基本上能保证在各平台上的物理体系结构的一致性。因此，用户应该能很好地理解MySQL数据库在所有这些平台上是如何运作的。由于工作的缘故，笔者的大部分时间需要与开发人员进行数据库方面的沟通，并对他们进行培训。不论他们是DBA，还是开发人员，似乎都对MySQL的体系结构了解得不够透彻。很多人喜欢把M_mysql运维内参

百度正用谷歌AlphaGo，解决一个比围棋更难的问题 | 300块GPU在燃烧-程序员宅基地

文章浏览阅读382次。晓查发自凹非寺量子位报道 | 公众号 QbitAI9102年，人类依然不断回想起围棋技艺被AlphaGo所碾压的恐怖。却也有不以为然的声音：只会下棋的AI，再厉害..._alpha go训练用了多少个gpu

docker 容器设置网络代理_docker export http_proxy-程序员宅基地

文章浏览阅读3.3k次。docker 容器设置网络代理以/bin/bash 形式进入容器：【设置http 及https代理】，如下：export http_proxy=http://172.16.0.20:3128export https_proxy=https://172.16.0.20:3128要取消该设置：unsethttp_proxyunset https_proxy..._docker export http_proxy

linux之笔记_linux 0775十六進制-程序员宅基地

文章浏览阅读263次。授课环境：结束程序运行: ctrl + c 共享目录(工作目录): /kyo /Videos 访问共享目录流程: 是否能连通服务器 ping 3.3.3.9 是否服务器开启共享 showmount -e 3.3.3.9 挂载共享目录到本地: _linux 0775十六進制

普通屏幕已过时？裸眼3D屏幕显示效果更胜一筹！

与普通屏幕中播放的视频相对，裸眼3D屏幕需要先将裸眼3D视频分成两部分，分别呈现在左右两个视窗上，因此后者需要更高的分辨率，以及更精细的图像处理能力，以此使裸眼3D屏幕的画面展示效果更加细腻，进而加深每个物体和场景的深度感和空间感，让每个驻足于此的观众惊叹于裸眼3D屏幕的震撼视觉效果。另外，裸眼3D屏幕的色彩表现，也比大多的普通屏幕更加丰富和鲜艳，能够展现出电影级别的画面质量，总而言之，裸眼3D屏幕比之普通屏幕的显示效果，有着巨大的优势，这也是使裸眼3D成为重要显示技术的重要原因！

如何安全可控的进行跨区域数据交换，提高数据价值？

飞驰云联是中国领先的数据安全传输解决方案提供商，长期专注于安全可控、性能卓越的数据传输技术和解决方案，公司产品和方案覆盖了跨网跨区域的数据安全交换、供应链数据安全传输、数据传输过程的防泄漏、FTP的增强和国产化替代、文件传输自动化和传输集成等各种数据传输场景。飞驰云联主要服务于集成电路半导体、先进制造、高科技、金融、政府机构等行业的中大型客户，现有客户超过500家，其中500强和上市企业150余家，覆盖终端用户超过40万，每年通过飞驰云联平台进行数据传输和保护的文件量达到4.4亿个。

随便推点

[自学笔记] ESP32-C3 Micropython初次配置

2、本次测试了两款IDE，分别是"thonny-4.1.4.exe"和"uPyCraft-v1.0.exe"。Thonny支持中文及多语言。而uPyCraft-v1.0只支持英文语言。因此入门时选用了Thonny作为IDE。(注：1、测试过程中IDE正常连接ESP32C3简约版的虚拟串口。不受简约版无串口芯片的影响。

初识Electron，创建桌面应用

古有匈奴犯汉，晋室不纲，铁木夺宋，虏清入关，神舟陆沉二百年有余，中国之见灭于满清初非满人能灭之，能有之也因有汉奸以作虎怅，残同胞媚异种，始有吴三桂洪承畴，继有曾国藩袁世凯以为厉。今率堂堂之师，征讨汉贼袁氏筑共和之体，或免于我子子孙孙被异族奴役。---- 《讨汉贼袁世凯檄文》- DOMContentLoaded事件：此时浏览器已经完全加载了HTML文件，并且DOM树已经生成好了。- Load事件：此时浏览器已经将所有的资源都加载完毕，可以正确读取页面中的资源。补充知识：Electron 生命周期。

Xcode 15构建问题

将ENABLE_USER_SCRIPT_SANDBOXING设为“no”即可！

OpenVINO应用案例：部署YOLO模型到边缘计算摄像头_openvino yolo-程序员宅基地

文章浏览阅读2.8k次，点赞3次，收藏23次。一、实现路径通过OpenVINO部署YOLO模型到边缘计算摄像头，其实现路径为：训练(YOLO)->转换(OpenVINO)->部署运行(OpenNCC)。二、具体步骤1、训练YOLO模型1.1 安装环境依赖有关安装详情请参阅 https://github.com/AlexeyAB/darknet#requirements-for-windows-linux-and-macos 。1.2 编译训练工具git clone https://github.com/AlexeyAB/da_openvino yolo

数据污染对大型语言模型的潜在影响

总之，数据污染在LLMs中构成一个潜在的重要问题，可能影响它们在各种任务中的性能。它可能导致结果偏倚并削弱LLMs的真实有效性。通过识别和减轻数据污染，我们可以确保LLMs运行良好并产生准确的结果。现在是技术社区优先考虑数据完整性在LLMs的开发和利用中的时候了。通过这样做，我们可以确保LLMs产生无偏见且可靠的结果，这对于新技术和人工智能的发展至关重要。

PeLK: 大卷积核强势回归，高达101 × 101，提出了外围卷积

PeLK：超大卷积核，高达101*101！