CSS内联样式的使用,设置字体属性

冷不防 2022-12-30 13:56 346阅读 0赞

#### 1，CSS设置字体名称属性(font-family): ####

示例：

.fs1{
    font-family:Arial, Helvetica, sans-serif;
    }
    
    .fs2{
    font-family:黑体;
    }
    
    .fs3{
    font-family:"Times New Roman", Times, serif;
    }
    
    </style>
    <span class="fs1">CSS设置字体属性</span><br />
    <span class="fs2">CSS设置字体属性</span><br />
    <span class="fs3">CSS设置字体属性</span><br />

#### 2，CSS设置字体大小属性(font-size): ####

示例：

<style>
    .fs1{
    font-size:12px;
    }
    
    .fs2{
    font-size:16px;
    }
    
    .fs3{
    font-size:18px;
    }
    
    .fs3{
    font-size:24px;
    }
    
    <span class="fs1">CSS设置字体大小属性</span><br />
    <span class="fs2">CSS设置字体大小属性</span><br />
    <span class="fs3">CSS设置字体大小属性</span><br />
    <span class="fs4">CSS设置字体大小属性</span><br />
    </style>

#### 3，CSS设置字体粗体属性(font-weight): ####

示例：

<style>
    .b{
    font-weight:bold;
    }
    </style>
    
    <span>CSS设置字体粗体，无粗体！</span><br />
    <span class="b">CSS设置字体粗体，有粗体</span><br />

#### 4，CSS设置字体斜体属性(font-style:italic;): ####

<style>
    .i{
    font-style:italic;
    }
    </style>
    
    <span>CSS设置字体斜体，无斜体！</span><br />
    <span class="i">CSS设置字体斜体，有斜体</span><br />

#### 5，CSS设置字体颜色属性(color) ####

示例：

<style>
    body{
    font-size:14px;
    }
    
    .color1{
    color:#000;
    } /*黑色*/
    
    .color2{
    color:#f00;
    } /*红色*/
    
    .color3{
    color:green;
    } /*绿色*/
    
    .color4{
    color:orange;
    } /*橙色*/
    
    .color5{
    color:blue;
    } /*蓝色*/
    
    div{
    text-align:center; 
    padding-top:32px; 
    width:600px; 
    margin:0px auto;
    }
    
    </style>
    <span class="color1">CSS设置字体颜色 黑色！</span><br />
    <span class="color2">CSS设置字体颜色 红色!</span><br />
    <span class="color3">CSS设置字体颜色 绿色！</span><br />
    <span class="color4">CSS设置字体颜色 橙色!</span><br />
    <span class="color5">CSS设置字体颜色 蓝色！</span><br />

> 加入前端学习裙：953352883，我们一起学前端，还有学习资料免费分享；

发表评论取消回复

表情：

评论列表（有 0 条评论，346人围观）

还没有评论，来说两句吧...

相关阅读

相关 react使用内联css样式的注意点

react使用内联css样式: 就是直接在元素标签的style属性中写css样式，但是这里有三个注意点: 1. style等号后面必须接双大括号也就是 style=\{ \{

落日映苍穹つ/ 2023年10月16日 10:23/ 0 赞/ 52 阅读

相关 CSS中字体样式属性

font-family属性的部分属性值 <p><span style="font-family:STXinwei"> hello world</span>华文新魏

淡淡的烟草味﹌/ 2023年10月03日 11:37/ 0 赞/ 50 阅读

相关 CSS-常见字体样式属性的用法详解

CSS 字体属性 font font-size `font-size: 16px;` font（字体），size（大小），用于设置文字的大小；值为数值型，单位有绝对

深碍√TFBOYSˉ_/ 2023年08月17日 17:12/ 0 赞/ 129 阅读

相关 CSS内联样式的使用,设置字体属性

1，CSS设置字体名称属性(font-family): 示例： .fs1{ font-family:Arial, Helvetica, sans-ser

冷不防/ 2022年12月30日 13:56/ 0 赞/ 347 阅读

相关 CSS基础——CSS字体样式属性【学习笔记】

CSS字体样式属性调试工具 font字体 CSS外观属性快捷操作emmet语法练习案例-体育页面 1.font字体 1.1 font

淩亂°似流年/ 2022年12月22日 11:30/ 0 赞/ 303 阅读

相关 html样式表的优先级,css样式表important优先级大于内联style设置的样式

今天发现css样式表中使用了important提高优先级后，尽然覆盖了内联样式style中设置的对应样式，老土了。。呵呵测试代码如下 .c\{color:Red !imp

梦里梦外;/ 2022年10月06日 03:59/ 0 赞/ 394 阅读

相关 css行内样式的属性设置，css的外部样式的设置

15 行内样式：行内样式1：是通过标签的style属性来设置元素的样式格式：<html 标签 style=”css样式代码”> 示例：<a style=”color

红太狼/ 2022年06月06日 03:07/ 0 赞/ 818 阅读

相关 CSS字体样式属性

font-size:字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝

今天药忘吃喽~/ 2022年03月21日 05:12/ 0 赞/ 433 阅读

相关 css样式内联式，外联式，嵌入式

1.外联式样式（属于外部样式表）特征： 1、有一个单独的CSS文件存在！\[如：001.css\] 2、首先，通过【格式】→【样式表连接】与CSS文件\[001.

柔光的暖阳◎/ 2022年02月23日 00:54/ 0 赞/ 328 阅读

相关 CSS（一）字体样式属性

CSS字体样式属性一）字体 1.font-size 推荐使用相对长度像素单位px 2.font-family: {

墨蓝/ 2021年10月25日 11:58/ 0 赞/ 453 阅读