CSS文本属性与字体属性

EPSDA2024-04-21 18:02

目录

文本属性

文本颜色

文本对齐

修饰文本

文本缩进

行高

字体属性

字体系列

字体大小

字体粗细

字体样式

字体/文本综合属性写法

Chrome调试工具的使用

文本属性

文本颜色

在CSS中使用color 属性用于定义文本的颜色，使用background-color设置一个盒子背景颜色

基本语法：

css 复制代码 
选择器 {
    color: 颜色值;
    background-color: 颜色值;
}

在CSS中，颜色值有四种表示形式，这四种表示形式都是等价的：

|---------------|--------------------------------------|
| 表示形式 | 属性值 |
| 预定义的颜色值 | red, green,blue... |
| 十六进制（开发时最常用） | #ff000, #ff6600, #29D794... |
| RGB值 | rgb(255, 0, 0)或rgb(100%, 0%, 0%) |
| RGBa值（a表示透明度） | rgba(0, 0, 0, 0.5) |

对于十六进制表示方法需要注意：

如果三组中，每组数字都相同，此时可以每组可以省略只写一个数字，例如：#ffaabb改写成#fab，但是类似于：#ffaabc不能改写成#fabc

常见的十六进制取值：

纯白色：#fff

纯黑色：#000

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本颜色</title>
    <style>
        .red {
            /* color: red; 等价于下面的代码*/
            color: #ff0000;
        }

        .red_transparent {
            color: rgba(255, 0, 0, 0.5);
        }

        .blue {
            /* color: blue; 等价于下面的代码 */
            color: #0000ff;
        }

        .green {
            /* color: green; 等价于下面的代码*/
            color: #008000;
        }
    </style>
</head>

<body>
    <p class="red">这是一个红色的段落</p>
    <p class="red_transparent">这是一个半透明红色的段落</p>
    <p class="blue">这是一个蓝色的段落</p>
    <p class="green">这是一个绿色的段落</p>
</body>

</html>

效果如下：

文本对齐

在CSS中使用text-align 属性用于设置元素内文本内容的水平对齐方式

基本语法：

css 复制代码 
选择器 {
    text-align: 值;
}

在CSS中，text-align属性有三种值：

|----------|----------|
| 属性值 | 描述 |
| left | 左对齐（默认值） |
| center | 居中对齐 |
| right | 右对齐 |

对于占用一整行的标签来说，其区域相当于一个盒子，而文本对齐属性实际改变的是文字在盒子中的位置，但是并不改变盒子本身的大小，对于只占用当前位置的标签来说，居中对齐效果需要text-align属性给文本所在标签（文本的父元素）设置

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对齐属性</title>
    <style>
        .font-align {
            /* 将p标签的文本对齐方式设置为居中 */
            text-align: center;
        }
    </style>
</head>

<body>
    <p class="font-align">这是一个居中对齐的p标签</p>
    <span class="font-align">这是一个居中对齐的span标签</span><br />
    <span>这是一个没有居中对齐的span标签</span>
    <div class="font-align">这是一个居中对齐的div标签</div>

</body>

</html>

效果如下：

修饰文本

在CSS中使用text-decoration属性修改文本是否带有划线

基本语法：

css 复制代码 
选择器 {
    text-decoration: 值;
}

在CSS中，修饰文本有以下四个值：

|----------------|------------------------------|
| 属性值 | 描述 |
| none | 无装饰线（默认值） |
| underline | 下划线（部分标签自带下划线，例如标签<a></a>） |
| overline | 上划线 |
| line-through | 删除线 |

一般使用text-decoration属性是为了将带有下划线的标签改为无下划线

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改文本</title>
    <style>
        /* 将a标签的文本修饰设置为无修饰 */
        .non-decorate {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <a href="https://www.baidu.com">百度一下</a>
    <a href="https://www.baidu.com" class="non-decorate">百度一下</a>
</body>

</html>

效果如下：

文本缩进

在CSS中使用text-indent属性对文本缩进进行控制

基本语法：

css 复制代码 
选择器 {
    text-indent: 值em/值px;
}

在设置文本缩进值时，可以考虑采用em作为单位，也可以采用px作为单位，em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本缩进</title>
    <style>
        .indent {
            /* 将p标签的文本缩进设置为2em（2个字符） */
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p class="indent">这是一个缩进2个字符的段落</p>
    <p>这是一个没有缩进的段落</p>
</body>

</html>

效果如下：

行高

在CSS中可以使用line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

所谓行高，即行与行之间的间距，具体包括的范围如下：

📌

注意段落间距并不是由行高来决定的，改变行高不会改变段落间距

基本语法：

css 复制代码 
选择器 {
    line-height: 值em/值px;
}
  1. 让单行文本垂直居中可以设置line-height:文字父元素高度
  2. 网页精准布局时，会设置Iine-height: 1（不要带单位）可以取消上下间距

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高</title>
    <style>
        * {
            font-family: 'Microsoft YaHei';
        }

        .height_line {
            line-height: 60px;
        }
    </style>
</head>

<body>
    <!-- 段落行高 -->
    <p class="height_line">这是一个段落，并且设置了行高为60px <br />这是第二行</p>
    <p>这是一个段落，但是没有设置行高 <br />这是第二行 </p>
</body>

</html>

效果如下：

字体属性

字体系列

在CSS中 使用 font-family 属性定义文本的字体系列

基本语法如下：

css 复制代码 
标签 {
    font-family: 字体, 字体;
}

注意：

  1. 各种字体之间必须使用英文状态下的逗号隔开
  2. 一般情况下,如果有空格隔开的多个单词组成的字体,加单引号或双引号，例如"``Microsoft YaHei``"
  3. 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
  4. 如果字体系列中有多个字体时，将会从左向右依次匹配，直到匹配到当前设备存在的字体
  5. 常见字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体集属性</title>
    <style>
        .fontStyle{
            font-family:'Microsoft YaHei', 'Times New Roman', Times, serif;
        }
    </style>
</head>
<body>
    <p>这是一个段落，观察字体</p>
    <p class="fontStyle">这是一个段落，观察字体</p>
</body>
</html>

效果如下：

字体大小

在CSS中使用 font-size 属性定义字体大小

基本语法如下：

css 复制代码 
标签 {
    font-size: 大小px;
}
  1. px（像素）大小是我们网页的最常用的单位，给大小时一定要带px
  2. 谷歌浏览器默认的文字大小为16px
  3. 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
  4. 使用<body></body>可以指定整个页面文字的大小

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体大小属性设置</title>
    <style>
    .fontsize {
        font-size: 20px;
    }
    </style>
</head>
<body>
    <h1 class="fontsize">字体大小属性设置</h1>
    <h1>字体大小属性设置</h1>
    <p class="fontsize">这是一个20px的字体大小</p>
    <p>这是一个默认的字体大小</p>
</body>
</html>

效果如下：

字体粗细

在CSS中使用font-weight 属性设置文本字体的粗细

基本语法如下：

css 复制代码 
选择器 {
    font-weight: 值;
}

在CSS中，有下面三种值：

|----------|-------------------------------------------------|
| 属性值 | 描述 |
| normal | 默认值（不加粗） |
| bold | 定义粗体（加粗） |
| 常数值 | 在CSS中，一共有100-900九个值，400等同于normal，700等同于bold |

一般考虑将粗体改为非粗体，例如将粗体的标题改为非粗体

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>将标题改为非粗体</title>
    <style>
        h1 {
            font-family: 'Microsoft YaHei';
        }

        /* 将h1标签的字体粗细设置为非粗体 */
        .non-bold {
            font-weight: 400;
        }
    </style>
</head>

<body>
    <h1>
        这是一个正常标题
    </h1>
    <h1 class="non-bold">
        这是非粗体标题
    </h1>
</body>

</html>

效果如下：

字体样式

在CSS中 使用 font-style 属性设置文本的风格

基本语法：

css 复制代码 
选择器 {
    font-style: 值;
}

|----------|---------------------|
| 属性值 | 描述 |
| normal | 默认值，浏览器会显示每一个标签的默认值 |
| italic | 浏览器会显示斜体 |

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
        /* 将p标签的字体样式设置为斜体 */
        .italic {
            font-style: italic;
        }
    </style>
</head>

<body>
    <p>
        这是一个段落，但是没有被修饰为斜体
    </p>
    <p class="italic">
        这是一个段落，并且被修饰为斜体
    </p>
</body>

</html>

效果如下：

字体/文本综合属性写法

字体属性可以把以上文字样式综合来写, 这样可以更节约代码:

基本语法：

css 复制代码 
选择器 {   
    font: font-style  font-weight  font-size/line-height  font-family;
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略（浏览器取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式综合</title>
    <style>
        .fontStyle {
            /* 按照下面的顺序进行书写：font-style font-weight font-size font-family */
            font: italic bold 20px 'Microsoft YaHei';
        }
    </style>
</head>

<body>
    <p class="fontStyle">
        这是一个段落，并且被修饰为斜体，粗体，20px，Microsoft YaHei
    </p>
    <p>
        这是一个段落，但是没有被修饰
    </p>
</body>

</html>

效果如下：

Chrome调试工具的使用

  1. Ctrl+滚轮 可以放大开发者工具代码大小
  2. 一般左边是 HTML 元素结构，右边是 CSS 样式
  3. 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色
  4. Ctrl + 0 复原浏览器大小
  5. 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
  6. 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误
相关推荐
莹雨潇潇18 分钟前
Docker 快速入门（Ubuntu版）
java·前端·docker·容器
Jiaberrr26 分钟前
Element UI教程：如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
Tiffany_Ho1 小时前
【TypeScript】知识点梳理（三）
前端·typescript
安冬的码畜日常2 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签（上）
开发语言·前端·javascript·信息可视化·数据可视化·d3.js
太阳花ˉ2 小时前
html+css+js实现step进度条效果
javascript·css·html
小白学习日记3 小时前
【复习】HTML常用标签＜table＞
前端·html
丁总学Java3 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
yanlele4 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范
懒羊羊大王呀4 小时前
CSS——属性值计算
前端·css
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CTF网络安全大赛简单的web抓包题目：HEADache08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10springer 在线投稿编译踩坑