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

Posted 别碰我的宏定义

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS之字体和层叠样式表引入相关的知识,希望对你有一定的参考价值。

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>

以上是关于CSS之字体和层叠样式表引入的主要内容,如果未能解决你的问题,请参考以下文章

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

CSSCSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )

测试开发之前端篇-CSS层叠式样式表

css层叠样式表

CSS介绍

Python | CSS选择器实战训练