CSS之字体和层叠样式表引入

最新推荐文章于 2024-08-12 22:06:26 发布

别碰我的宏定义

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量154

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_46655061/article/details/126002179

版权

这篇博客详细介绍了CSS中字体属性的设置，包括字体家族、大小、样式、颜色和行高等，并通过实例展示了如何使用`font`属性进行综合设置。此外，还讲解了CSS样式表的引入方式，包括内部样式、行内样式和外部链接引入。

摘要由CSDN通过智能技术生成

html-CSS第一话之字体

<!DOCTYPE html>
<!--CSS语言字体设置 文本颜色 文本对齐 文本缩进 文本修饰划线  文本行高-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>CSS字体属性之字体系列</title>
</head>
<!--微软雅黑的英文名字是 Microsoft Yahei，可以用汉字也可以用英文-->
<style>
    h2 {
        font-family: 'Microsoft Yahei';
        /*让h2盒子里的文字水平居中对其*/
        text-align: center;
    }
    p {
        font-family: 'Microsoft Yahei';
        text-align: left;
        /*首行缩进多少距离,px是像素，em是缩进的文字多少*/
        text-indent: 2em;
    }
    /*标题需要自己定义大小需要记住加单位px*/
    body {
        font-size: 16px;/*font-size设置文字大小*/
        /*行高 =  上间距 + 文字 + 下间距*/
        /*改变行高实际是改变上边距和下边距*/
        line-height: 26px;
    }
    .bold {
        /*font-weight: bold;表示加粗
            700相当于加粗后面不跟单位，相当于bold的效果
            实际开发中提倡用数字表示加粗或者变细*/
        /*font-weight: bold(加粗) 700 |normal（正常）400| */
        font-weight: 400; /*后面没有单位*/
        font-style: italic; /*italic字体倾斜, normal表示不倾斜一般都是不倾斜*/
    }
    h2 {
        font-size: 58px; /*标题大小需要自己手动去选择*/
        font-weight: 700;
        font-style: normal;
        /*color: pink;  采用英文单词来表示颜色*/
        /*color: #ff0000; 十六进制表示颜色*/
        color: #00ff21;
        /*color:rgb(255,0,255); rgb表示颜色*/
    }
    div { /*设置字体大小,设置粗体,设置斜体*/
        /*font-size: 16px;
        font-weight: 700; 
        font-style: italic; 
        font-family: 'Microsoft YaHei';
        */
        /*font-size,font-family必须要有*/
        /*font: font-style font-weight font-size font-family
            有顺序不能改变，必须要有size 和 family,font符合属性的写法*/
        font: italic 700 20px 'Miscrosoft yahei';
        text-align: right;
        /*装饰文本*/
        /*none 是去掉下划线 undelline 下划线  line-through 删除线  overline 上划线*/
        text-decoration: underline;
        /*首行缩进*/

    }
</style>
<body>
    <h2>成功的秘密</h2>
    <p>“成功”，从表面上来看只是一个普通的词语，而从某种意义上来讲，“成功”一词便是一个伟大
的东西。每个人都有成功之时，在这成功的背后，有一个秘密……</p>
    <p class="bold">小时候，妈妈告诉我说“做什么事都要主动一点，那样，老师</p>
    <p>刚进入初中校园，总觉得还是那自由自在的小学</p>
    <div>三生三世十里桃花，一心一意搞钱。</div>
</body>
</html>

html-CSS之样式表引入

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>CSS第四课内部样式</title>
    <link href="CSS-ONE.css" rel="stylesheet"/>
    <!--通过连接引入CSS样式表-->
    <style>
        /*内部样式表*/
        p {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <!--CSS行内样式表(行内式)将CSS代码抽取出来专门放到一个标签<style>中去-->
    <!--CSS内部样式表(嵌入式)-->
    <!--CSS外部样式表(链接式)单独建一个CSS文件，最后将CSS文件引入-->
    <!-- 行内样式表，简单修改样式，在标签里面写上style属性给其赋值-->
    <!--建好css文件，通过内部标签将其引入到html文件中-->
    <p style="font-family: 'Microsoft YaHei'">你好我是你爸爸</p>

</body>
</html>