CSS的作用及字体样式

最新推荐文章于 2022-09-30 20:06:39 发布

约瑟芬儿

最新推荐文章于 2022-09-30 20:06:39 发布

阅读量142

点赞数

分类专栏： CSS html 文章标签： css

本文链接：https://blog.csdn.net/qishi45/article/details/117024986

版权

html 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

CSS

11 篇文章 0 订阅

订阅专栏

为什么要美化网页？
1.有效的传递页面信息
2.美化网页、页面漂亮才能吸引用户
3.凸显页面的主题
4.提高用户的体验

span标签：重点要突出的字使用span标签套起来（约定俗成）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
    <style>
        #title1{
            font-size: 50px;        /*font-size 属性用于设置字体大小*/
        }
    </style>
</head>
<body>

<span id="title1">学习CSS</span>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
  <style>
    body{
      font-family:"Sitka Small", 华文楷体;      /*  font-family 规定元素的字体系列  同时定义了英文字体和中文字体*/
      color: #0a4379;            /*   字体颜色  */
    }
    h2{
      font-size: 35px;          /*  font-size 字体大小  */
      font-size: 2em;           /*  px像素  em缩进  */
    }
    .p1{
      font-weight: bold;        /*   font-weight  字体粗细 （bold粗）（lighter细）也可定义数字400等同于normal，700等同于bold，最大值为900 */
    }

  </style>
</head>
<body>

<h2>《克苏鲁的呼唤》</h2>

<p class="p1">
  在身为闪米特语教授的叔祖父乔治·甘默尔·安杰尔离奇死去后，主人公弗朗西斯·维兰德·瑟斯顿作为他的继承人接收了遗产。
</p>

<p>
  然而在整理其叔祖父的资料中，却发现了一个怪异的雕像与诸多杂乱无章的字条、笔记和简报。出于好奇与对于先人的尊敬，瑟斯顿开始追寻其中的秘密。
</p>

<p>
  最终在杂乱无章的简报与安杰尔教授的手稿之下，知晓了一个安杰尔教授死前仍痴迷调查的“克苏鲁异教”，以及他们所信仰的一位自亘古即存在于地球的群星来客——旧日支配者克苏鲁。
</p>

<p>
  瑟斯顿痴迷于探求安杰尔教授所说的“克苏鲁异教”上，并偶然从旧报纸了解到曾经在悉尼发现的神秘弃船事件。伴随着种种线索，瑟顿斯拼凑出可怕的真相：克苏鲁的确存在。
</p>

<p>
  他依旧在拉莱耶沉睡与等待着，直到众星归位之时，他将再度醒来统治世界。而瑟顿斯自己，也因为了解到宇宙蕴含的恐怖后将随逝者而去。
</p>

<p>The time that my journey takes is long and the way of it long.</p>

<p>
  I came out on the chariot of the first gleam of light, and pursued my voyage through the wildernesses of worlds leaving my track on many a star and planet.
</p>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式2</title>
  <style>
    p{
      font: oblique lighter 18px "微软雅黑";      /*  斜体 细 18像素 微软雅黑*/
    }
  </style>
</head>
<body>

<p>font-weight 属性设置文本的粗细。</p>

<p>
  该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal，700 等价于 bold。
</p>

<p>
  每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗。
</p>

</body>
</html>