欢迎光临
我们一直在努力

html style 字体大小

HTML中的<style>标签用于定义文档的样式信息,包括字体、颜色、布局等,要设置字体大小,可以使用CSS的font-size属性,下面详细介绍如何使用<style>标签设置字体大小。

内联样式

1、在HTML元素的style属性中直接设置字体大小:

<p style="font-size: 16px;">这是一个段落,字体大小为16像素。</p>

2、使用CSS选择器设置字体大小:

<p style="font-size: 16px;">这是一个段落,字体大小为16像素。</p>
<p class="custom-font">这是一个带有自定义字体大小的段落,字体大小为20像素。</p>

外部样式表(CSS文件)

1、在HTML文件的<head>标签内引用外部CSS文件:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>这是一个段落,字体大小为16像素。</p>
</body>
</html>

styles.css文件中设置字体大小:

p {
  font-size: 16px;
}

2、使用内部样式表(在HTML标签内编写CSS代码):

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      font-size: 16px;
    }
    .custom-font {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p>这是一个段落,字体大小为16像素。</p>
  <p class="custom-font">这是一个带有自定义字体大小的段落,字体大小为20像素。</p>
</body>
</html>

使用JavaScript动态修改字体大小

可以使用JavaScript来动态修改HTML元素的字体大小,以下是一个简单的示例:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p id="demo">这是一个段落,字体大小为16像素。</p>
  <button onclick="changeFontSize()">改变字体大小</button>
  <script>
    function changeFontSize() {
      var p = document.getElementById("demo");
      var newSize = parseInt(prompt("请输入新的字体大小(像素):"));
      p.style.fontSize = newSize + "px";
    }
  </script>
</body>
</html>

在这个示例中,当用户点击“改变字体大小”按钮时,会弹出一个提示框让用户输入新的字体大小(像素),然后将该值应用到段落元素上。

赞(0) 打赏
未经允许不得转载:九八云安全 » html style 字体大小

评论 抢沙发