css引入方式、字体属性

t1220130004

于 2022-12-06 01:34:50 发布

阅读量246

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/t1220130004/article/details/128195904

版权

1、css引入方式

（1）、行内样式表

直接在标签的属性中使用style声明，在style属性中添加css声明即可。

（2）、内部样式表（内联样式）

定义在head或body标签中,使用style标签.

（3）、外部样式表

定义在外部的css文件中，需要在head中引入相应的css文件，每个页面使用<link> 标签链接到样式表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- /*关联外部的css样式文件*/ -->
    <link type="text/css" rel="stylesheet" href="04.css" />
    <!-- type:定义链接文档的类型，在这里需要指定为"text/css",表示链接的外部文件为css样式表。
    rel：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
    href：定义所链接外部样式表文件的url，可以是相对路径，也可以是绝对路径。 -->
    <style type="text/css">
    /*内部定义的style样式*/
	h2 {
        background-color: deeppink;
        color: blue;
	}
</style>
</head>
<body>
    <!--在标签内部再嵌套一个内嵌标签来设置样式-->
<h1>这是一个<span style="color: red;">行内样式表</span>的css</h1>
<h2>内部样式表</h2>
<p>这是外联样式表</p>
</body>
</html>

3种样式表的优先级：

1、行内样式表 > 内部样式表 = 外部样式表

2、当内部样式表和外部样式表同时存在时，采用 就近原则 来使用样式

2、字体属性

（1）、font-size：字号大小

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

（2）、font-family：字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。

（3）、font-weight：字体粗细

字体加粗除了用 b 和 strong 标签外，还可以使用CSS来实现，但CSS是没有语义的。

（4）、font-style：字体风格

字体倾斜除了用 i 和 em 标签外，可以使用CSS实现，但CSS是没有语义的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h6 {font-size: 40px;}
    p {font-family:"微软雅黑";}
    span {font-weight: normal;}
	div {font-weight: bold;}
    /* 数字 400 等价于 normal， 而 700 等价于 bold。 */
    h5 {font-style:oblique;}
    </style>
</head>
<body>
    <h6>This is heading 1</h6>
    <p>我是字体</p>
    <div>这是bold的文本</div>
    <span>这是normal的文本</span>
    <!-- 
	italic和oblique区别：
        要搞清楚这个问题，首先要明白字体是怎么回事。一种字体有粗体、斜体、下划线、删除线等诸多属性。
        但是并不是所有字体都做了这些，一些不常用的字体，或许就只有个正常体，如果你用Italic，就没有效果了~这时候你就要用				Oblique.
        可以理解成Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜！
	CSS2.0官网解释：
        italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用			Oblique属性值来实现倾斜的文字效果.
-->
    <h5>这是一个段落,斜体。</h5>
</body>
</html>

t1220130004

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css引入方式、字体属性

1、css引入方式（1）、行内样式表直接在标签的属性中使用style声明，在style属性中添加css声明即可。（2）、内部样式表（内联样式）定义在head或body标签中,使用style标签. （3）、外部样式表定义在外部的css文件中，需要在head中引入相应的css文件，每个页面使用标签链接到样式表。3种样式表的优先级：1、行内样式表 > 内部样式表 = 外部样式表2、当内部样式表和外部样式表同时存在时，采用就近原则来使用样式 2、字体属性（1）
复制链接

扫一扫