适于新手小白的CSS的学习讲解（二）

Carrymao

已于 2023-10-18 20:42:57 修改

阅读量374

点赞数 13

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

于 2023-10-18 20:38:12 首次发布

本文链接：https://blog.csdn.net/gugyuenamelp/article/details/133908693

版权

本文是适合新手的CSS学习系列第二部分，重点讲解了文本样式和列表样式的设置。内容包括颜色属性（rgb, rgba, 十六进制），字体属性（font-style, font-weight, font-size, font-family, 缩写格式），字体图表库的使用，文本修饰属性（文本装饰，水平对齐，缩进，字体改变，阴影），以及列表样式（默认样式，列表项标志类型，自定义列表标志项，其他样式如line-height, display, visibility, opacity等）。此外，还介绍了CSS盒模型的基础知识。" 117247593,10535551,C语言控制Wincc趋势控件显示隐藏,"['Wincc', 'C语言编程', '可视化', '人机交互', '自动化']

摘要由CSDN通过智能技术生成

适于新手小白的CSS的学习讲解（二）

- font-style 设置是否打开斜体

- list-style-type 设置列表项标志类型

一、文本样式

1.颜色属性

给标签设置字体颜色

1.关键字 red blue orange

2.十六进制 0-9 a-f #3 4 6位

3.三原色：rgb（red,green,blue) 取值0-255

4.三原色+透明度 rgba(red,green,blue,alpha)

alpha取值0-1之间

0表示完全透明 1表示不透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: red;
            color: #ec1a98;
            color: rgb(255, 26, 123);
            color: rgba(255, 30, 21, 0.8);
        }
    </style>
</head>
<body>
    <div>我是块级元素</div>
</body>
</html>

2.字体属性

- rgb

rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)

格式: rgb(0,0,0)

那么这个格式中的

第一个数字就是用来设置三原色的光源元件红色显示的亮度

第二个数字就是用来设置三原色的光源元件绿色显示的亮度

第三个数字就是用来设置三原色的光源元件蓝色显示的亮度

这其中的每一个数字它的取值是0-255之间, 0代表不发光, 255代表发光, 值越大就越亮

红色: rgb(255,0,0);

绿色: rgb(0,255,0);

蓝色: rgb(0,0,255);

黑色: rgb(0,0,0);

白色: rgb(255,255,255);

在前端开发中其实并不常用黑色

只要让红色/绿色/蓝色的值都一样就是灰色

而且如果这三个值越小那么就越偏黑色, 越大就越偏白色

例如: color: rgb(200,200,200);

- rbga

rgba中的rgb和前面讲解的一样, 只不过多了一个a

那么这个a呢代表透明度, 取值是0-1, 取值越小就越透明

例如: color: rgba(255,0,0,0.2);

- 十六进制

在前端开发中通过十六进制来表示颜色, 其实本质就是RGB

十六进制中是通过每两位表示一个颜色例如: #FFEE00 FF表示R EE表示G 00表示B

- font-style 设置是否打开斜体

格式：font-style: italic;

取值： normal ：正常的，默认就是正常的

italic : 倾斜的

快捷键：

fs font-style: italic;

fsn font-style: normal;

- font-weight 设置字体加粗

格式： font-weight: bold;

取值: bold 加粗

bolder 比加粗还要粗

lighter 细线，默认就是细线

数字取值：

100-900之间整百的数字

400 等同于 normal

700 等同于 bold

快捷键 fw font-weight:;

fwb font-weight: bold;

fwbr font-weight: bolder;

- font-size 设置文字大小

格式：font-size: 30px;

单位：px（像素 pixel）

注意点：

通过font-size设置大小一定要带单位，也就是一定要写px

快捷键 fz font-size:;

fz30 font-size: 30px;

- font-family 设置文字字体

格式：font-family:"楷体";

通用字体 (直接使用，不需要加引号)

serif:有衬线的字体,笔画结尾有特殊的装饰线或衬线
sans-serif:无衬线的字体，笔画结尾是平滑的字体
monospace:等宽字体，用于代码，字体中每个字宽度相同
cursive:草书，这种字体有的有连笔，有的还有特殊的斜体效果。
fantasy:装饰字体，具有特殊艺术效果的字体

注意点： 1.如果取值是中文，需要用双引号或者单引号括起来，多个单词组合也要加

2.设置的字体必须是用户电脑里面已经安装的字体

3.如果设置的字体不存在, 那么系统会使用默认的字体来显示默认使用宋体

4.如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办? 可以给字体设置备选方案格式:font-family:"字体1", "备选方案1", ...;

5.如果想给中文和英文分别单独设置字体, 怎么办?

但凡是中文字体, 里面都包含了英文

但凡是英文字体, 里面都没有包含中文

也就是说中文字体可以处理英文, 而英文字体不能处理中文

注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面

6.补充在企业开发中最常见的字体有以下几个

中文: 宋体/黑体/微软雅黑英文: "Times New Roman"/Arial

还需要知道一点, 就是并不是名称是英文就一定是英文字体

因为中文字体其实都有自己的英文名称, 所以是不是中文字体主要看能不能处理中文

宋体 SimSun

黑体 SimHei

微软雅黑 Microsoft YaHei

快捷键 ff font-family:;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
/* 网上直接引入字体 */
        @font-face{font-family:'ZoomlaFangZhuan-A054'; /*逐浪方篆体*/
    src: url('https://code.z01.com/font/ZoomlaFangZhuan-A054.eot?#iefix'); /* IE9 */
    src: url('https://code.z01.com/font/ZoomlaFangZhuan-A054.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */
    url('https://code.z01.com/font/ZoomlaFangZhuan-A054.woff') format("woff"), /* chrome、firefox */
    url('https://code.z01.com/font/ZoomlaFangZhuan-A054.ttf') format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    url('https://code.z01.com/font/ZoomlaFangZhuan-A054.svg#ZoomlaFangZhuan-A054') format("svg"); /* iOS 4.1- */
    font-style: normal; font-weight: normal;}

        div{
            /* 字体大小 */
            font-size: 28px;
            /* 设置是否开启斜体 快捷键fs  italic开启斜体 normal 默认不开启 */
            font-style: normal;
            /* 设置字体加粗 快捷键 fw  bold对应700 bolder对应900    */  
            font-weight: bold;
            /* 设置字体类型 快捷键ff */
            font-family: "宋体";
            font-family: 'ZoomlaFangZhuan-A054';
            /* 简写为font属性 style weight size family 其中size和family不能省略 */
            font: normal lighter 28px "宋体";
            
        }
    </style>
</head>
<body>
    <div>我是块级元素</div>
</body>
</html>

- 缩写格式

缩写格式: font:style weight size family;

例如: font:italic bold 10px "楷体";

注意点:

1.在这种缩写格式中有的属性值可以省略

sytle可以省略
weight可以省略

2.在这种缩写格式中style和weight的位置可以交换

3.在这种缩写格式中有的属性值是不可以省略的

size不能省略
family不能省略

4.size和family的位置是不能随便乱放的

size一定要写在family的前面, 而且size和family必须写在所有属性的最后

3.字体图表库的使用

- 单色图标库的使用

在开发网站的时候需要各种各样的小图标，这些图标如果要求美工绘制可能比较麻烦，那么我们可以直接使用开源的字体图标库，这些字体图标库使用webFont原理，我们加载一个图标就好像加载一个字体一样简单，通过控制字体大小，字体颜色来控制图标的大小与颜色。

目前比较流行的开源字体图标库有

iconfont

最低0.47元/天解锁文章

Carrymao

关注

13
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
适于新手小白的CSS的学习讲解（二）

给标签设置字体颜色 1.关键字 red blue orange 2.十六进制 0-9 a-f #3 4 6位 3.三原色：rgb（red,green,blue) 取值0-255 4.三原色+透明度 rgba(red,green,blue,alpha) alpha取值0-1之间 0表示完全透明 1表示不透明2.字体属性 - rgbrgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(
复制链接

扫一扫

专栏目录