1.01.20 字体样式与背景样式

最新推荐文章于 2024-06-22 15:10:18 发布

以哲_ok

最新推荐文章于 2024-06-22 15:10:18 发布

阅读量103

点赞数

文章标签：前端 css3 html

本文链接：https://blog.csdn.net/m0_59593735/article/details/123284262

版权

1.01.20 样式基础

1.字体样式

1. 字体系列

font-family属性：
- 默认值为：微软雅黑
- 值：黑体宋体等等
  - 多个值时可以用逗号隔开值，如：
    - font-family：黑体,宋体,行书,楷书,草书;
    - 其中的匹配规则为：前面的值有就用前面的，后面的不管，前面的都没有，会使用默认的字体
- 指定第三方字体
  - 语法：
    CSS文件：
    @font-face {
    /给这套字体起的名字,可以随便起,英文字体名可以用单引号引起属性值/
    font-family:字体名字abc;
    /font-family:‘abc’;/
    /这套地址的路径/
    src: url();
    }
    选择字体的选择器{
    font-family:字体名字abc
    }

2. 字体图标

一个像图片的字体，看着是图像，其实本质是字体，具有字体的一切特性
思路：（与引用第三方字体的思路一样）
1. 用编码代替字体图标，使用编码文件解释这个编码从而显示字体图标，这个编码文件用CSS文件引用
2. 然后我们只需要在HTML文件中引用CSS文件即可
3. 我们通过给元素设置伪元素的方式在伪元素给出需要的字体图标的编码就行

使用方法：
hTML文件如下：

<head>
    <!-- <link rel="stylesheet" href="../css/iconfont.css"> -->
</head>
<body>
    <div class="box">
        <div class="icon-sousuo iconfont">
            测试文字图标
        </div>
    </div>
</body>
</html>```
引入的CSS文件（../css/iconfont.css）如下：
@font-face {
    font-family: "iconfont";
    src: url('../font/iconfont.woff2?t=1642657741192') format('woff2'),
                url('../font/iconfont.woff?t=1642657741192') format('woff'),
                url('../font/') format('truetype');
    }

.iconfont {
    font-family: "iconfont" !important;
    font-size: 20px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;/*这个属性可以没有*/
    -moz-osx-font-smoothing: grayscale;/*这个属性可以没有*/
    color:red;
}
.icon-sousuo::before {
    content: "\e600";
} 
注意：
src: url('../font/iconfont.woff2?t=1642657741192') format('woff2'),
                url('../font/iconfont.woff?t=1642657741192') format('woff'),
                url('../font/') format('truetype');
这些引入的文件用于解释上面的“\e600”编码，把它解释成文字图标,编码怎么写，要看文件的规定，而这些文件需要去第三方下载

3. 字体风格

属性font-style:斜体
- normal:正常体
- italic:斜体一般设计字体时，会设置他的斜体方案，该属性就是使用该方案
- oblique: 在没有斜体方案时，强制倾斜他

4. 字体重量

属性font-weight:加粗
- normal:正常体
- lighter:变细
- bold:加粗
- bolder:更粗的

5. 字体变形

属性font-variant:
- normal:正常体
- small-caps 把小写字母变成小号的大写字母

6. 字体大小

属性font-size:字体大小
- 直接给数据 16px 1em 等
- 浏览器默认字体大小16px,最小是12px,12往下调也是12px,但可以调到0,到0就不显示

7. 简写属性

语法：font:字体风格字体变形字体重量字体大小/行高字体系列
如：font: italic bolder 16px/50px 宋体;
忽略的值直接使用默认值

2.背景样式

1. 背景的颜色

属性background-color：
- 颜色值（十六进制、rbg、rgba等）

2. 背景大小

属性background-size:用于调整图像的大小以适应背景
- 宽高（直接给数值）
  - 若给百分比，以盒子宽高为基准
  - 若给宽高像素数值
    - 图像会不保持宽高比例地去拉伸图像的宽高
- cover:等比例放大去铺满，多出部分会被裁切
- contain:等比例放大去只铺满一条边（宽或高），图片完全显示，但盒子容器可能会露出

3. 背景图片

属性background-image:
- url(“图片地址”)
- url的正确写法是括号里带引号的地址，不带也可以
- 背景样式的所有属性（background-color除外）都要在有background-image的基础上才起作用
- 注意：背景图片与img标签的区别：img标签图片可以供客户端另存为，背景图片不可以

4. 背景重复

属性background-repeat
- repeat：默认值
- no-repeat:不重复
- repeat-x:只重复水平方向
- repeat-y:只重复垂直方向

5. 背景位置

语法：background-position：水平位置垂直位置
- 如：background-position: 60px 50px;
- 若数值给百分比，则匹配规则为：图片“百分比的点” 与 “容器百分比的点” 重叠
- 值可以给left right bottom center
  - background-position: left bottom:背景去到左下角

6. 背景附加（背景固定）

属性background-attachment:
- fixed
  - 背景图片固定以后:若背景大小用百分比，其以以浏览器窗口为参照物，其背景位置也以浏览器窗口为参照物
  - 背景不随内容的滚动而消失，一般用作移动端的聊天背景
- scroll
  - 背景跟随页面的滚动而滚动, 但是元素设置了滚动机制, 则背景不滚动
  - 这是默认值
- local
  - 背景直接滚动, 不管有没有设置滚动机制

7. 背景定位

属性background-origin 背景图片绘制的位置
- padding-box:默认值，背景图像相对于内边距框左上角来定位
- border-box:背景图像相对于边框盒左上角来定位
- connent-box:背景图像相对于内容框左上角来定位

8. 背景的裁剪

属性background-clip
- border-box：裁切出边框以内的图片
- padding-box：裁切出内边距以内的图片
- connent-box:裁切出内容以内的图片

9. 背景的简写属性

语法：background：颜色图片平铺偏移/大小附加(背景如何滚动) 定位绘制
如,background:skyblue url(./240.jpeg) no-repeat 50% 50%/100% 100% scroll border-box content-box

以哲_ok

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.01.20 字体样式与背景样式

1.01.20 样式基础1.字体样式1. 字体系列font-family属性：默认值为：微软雅黑值：黑体宋体等等多个值时可以用逗号隔开值，如：font-family：黑体,宋体,行书,楷书,草书;其中的匹配规则为：前面的值有就用前面的，后面的不管，前面的都没有，会使用默认的字体指定第三方字体语法：CSS文件：@font-face {/给这套字体起的名字,可以随便起,英文字体名可以用单引号引起属性值/font-family:字体名字abc;/font-fam
复制链接

扫一扫