EduCoder_web实训作业--文本与字体样式

最新推荐文章于 2025-02-01 16:41:33 发布

柔心封寒

最新推荐文章于 2025-02-01 16:41:33 发布

阅读量1.2k

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/qq_45520915/article/details/111799935

版权

本文介绍了EduCoder_web实训中关于CSS3的文本和字体样式的实践操作，涵盖从基本的样式修改到更复杂的单位转换，如1px等于1/16em的换算应用，通过三关实训内容详细讲解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一关
只改变style.css就好
1px = 1/16 em

body {
   
    /*背景渐变*/
    background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #7ECABA, #E2FCCB);
    /* 标准的语法 */
    font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    /*居中页面*/
    width: 45em;
    margin: 0 auto;
}

h1,
h2 {
   
    /* ********** BEGIN ***********/
    font-family:  PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    /* ********** END ***********/
}

h1 {
   
    /* ********** BEGIN ***********/
    font-size: 2.1875em;
    /* ********** END ************/
}

h2 {
   
    background-color: #eaebef;
    /* ********** BEGIN ***********/
    font-size: 1.75em;
    color: #7d717c;
    /* ********** END ************/
}

h3 {
   
    background-color: white;
    /* ********** BEGIN ***********/
    font-size: 1.25em;
    color: green;
    /* ********** END ************/
    padding-left: 10px;
}

hr {
   
    height: 1px;
    border: none;
    border-top: 2px dashed #88b2d2;
}

footer {
   
    margin: 10px auto;
}

/* CONTENT
----------------------------------- */

.architect {
   
    background-color: #fff;
    padding: 1.5em 1.75em;
}

/* :::: Intro ::::: */

.intro {
   
    background-color: #888888;
    /* ********** BEGIN ***********/
    color: #fefefe;
    /* ****

最低0.47元/天解锁文章