【JavaWeb学习】CSS（文本和图片）

Garcia • Kirlant

已于 2022-05-15 10:11:22 修改

阅读量246

点赞数

分类专栏： web前端学习文章标签： css

于 2022-04-18 17:18:55 首次发布

本文链接：https://blog.csdn.net/WingNebula/article/details/124253737

版权

web前端学习专栏收录该内容

25 篇文章 1 订阅

订阅专栏

字体

color 前景色，用来设置字体的颜色
font-size 字体大小
font-family 字体族，指定字体的类别，浏览器自动使用该类别下的字体；可以同时指定多个字体，多个字体间用逗号隔开，前一个无法使用就用后一个；字体能否使用由用户计算机里是否安装该字体决定。

serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
cursive 草书字体
fantasy 虚幻字体

可以让用户使用服务器中的字体，但是加载速度较慢，会受到网速影响；而且容易出现版权问题：

/* 让用户可以使用服务器中的字体 */
@font-face{
    /* 指定字体的名字，自己起名*/
    font-family: '名字';
    /* 服务器中字体的路径 */
    src: url('路径');
}

图标字体 iconfont

在网页中经常需要使用一些小图标，可以通过图片来引入图标，但是图片本身比较大，并且非常不灵活；
字体是矢量图，不会失真；
$\rightarrow$ 使用图标时可以将图标设置为字体，然后通过 font-size 的形式对字体引入，这样就可以通过使用字体的形式使用图标。

可以从font awesome里找找能用的图标字体，从英文版找，比较新。

把下载并解压好的fontawesome-free-6.1.1-web下面的css和webfonts两个文件夹移动到项目中；
将all.css 或者 all.main.css 引入到网页中 < link rel=“stylesheet” href=“./css/all.css” >；
使用方法
直接通过类名使用图标字体：class=“fas 想用的类名” 或者 class=“fab 想用的类名”，基本fas和fab已经够用了，只有这两个是免费的；
通过伪元素设置图标字体；
通过实体使用图标字体&#图标编码

伪元素：
 - 找到要设置图标的元素，通过 before 或者 after 选中；
 - 在 content 中设置字体的编码；
 - 设置字体的样式。
*{
    margin: 0px;
    padding: 0px;
}
.abstract{
    width: 98%;
    margin: 10px auto;
    background-color: rgb(252, 227, 248);
}
p{
    color: palevioletred;
    font-size: 18px;
    /* 此时 1em=18px */
    font-family: Calibri, 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
}
p::before{
    content: '\f0f4';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color:rgb(165, 90, 235);
    margin-right: 5px;
}

<html lang="en">
    <head>
        <meta charset="UTF-8">
		<meta name="keywords" content="kirlant">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>learn</title>
		<link rel="shortcut icon" href="../imgs/kirlant_logo.jpg" />
        <link rel="stylesheet" href="learn.css" />
        <link rel="stylesheet" href="./css/all.css">
    </head>
    <body>
        <div class="abstract">
            <p>Point cloud segmentation is fundamental in understanding 3D environments.</p> 
            <p>However, current 3D point cloud segmentation methods usually perform poorly on scene boundaries, which degenerates the overall segmentation performance.</p> 
            <p>In this paper, we focus on the segmentation of scene boundaries.</p> 
            <p>Accordingly, we first explore metrics to evaluate the segmentation performance on scene boundaries.</p> 
            <p>To address the unsatisfactory performance on boundaries, we then propose a novel contrastive boundary learning (CBL) framework for point cloud segmentation.</p> 
            <p>Specifically, the proposed CBL enhances feature discrimination between points across boundaries by contrasting their representations with the assistance of scene contexts at multiple scales.</p> 
            <p>By applying CBL on three different baseline methods, we experimentally show that CBL consistently improves different baselines and assists them to achieve compelling performance on boundaries, as well as the overall performance.</p> 
            <p>The experimental results demonstrate the effectiveness of our method and the importance of boundaries for 3D point cloud segmentation.</p>
        </div>
    </body>
</html>

行高

文字占有的实际高度，可以通过 line-height 来设置行高。
行高可以直接指定一个大小，如3px，3em；也可以设置一个整数，此时行高将是字体的该整数倍。默认行高是1.33倍字体高度。
字体框 字体存在的格子，设置 font-size 实际上是在设置字体框的高度。
行高会在字体框的上下平均分配 $\rightarrow$
$\cdot$ 利用行高使单行文字在其父元素中垂直居中;
$\cdot$ 设置文字的行间距：行间距 = 行高 - 字体大小

字体的简写属性

font：设置字体相关的所有属性；省略不写的值都使用默认值。

font: (...其他属性...可以不写) 字体大小(/行高 可以不写) 字体族;
如：
font: italic bold 50px/2 'Times New Roman', serif;
斜体加粗，50px两倍行高，并且选择字体

font-weight：是否加粗 normal，bold
font-style：字体风格，normal，italic

文本的水平和垂直对齐

text-align

left 左对齐
right 右对齐
center居中对齐
justify 两端对齐

vertical-align

baseline 基线对齐
top 顶部对齐（子元素和父元素的顶部）
bottom 底部对齐
middle 居中对齐

其他样式

text-decoration 设置文本修饰
$\cdot$ none 什么都没有，可以用来去掉超链接的下划线
$\cdot$ underline 下划线
$\cdot$ line-through 删除线
$\cdot$ overline 上划线
white-space 设置网页如何处理空白
$\cdot$ normal 正常
$\cdot$ nowrap 不换行（没显示完全的内容用省略号代替），要结合overflow：hidden；和text-overflow：ellipsis；
$\cdot$ pre 保留空白