• Web(六)CSS3语法-CSS样式规则

    第1关：CSS基础知识

    第2关：初识CSS

    编程要求

    请在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

    1.按照要求的效果在标签中运用CSS样式，编辑唐诗“静夜思”

    2.标题文本“静夜思”采用

    标签作用，标签中通过style属性为文本添加样式，添加顺序为： （1）字体设置为楷体；

    （2）文本水平居中对齐；

    （3）行间距设置为2

    3.四句诗的文本采用

    标签作用，标签中通过style属性为文本添加样式，添加顺序为：

    （1）字体设置为楷体；

    （2）文本水平居中对齐。

    1. html>
    2. <html>
    3.   <head>
    4.    <meta charset="utf-8"/>
    5.    <title>初识CSS样式title>
    6.   head>
    7.   <body>
    8.    <div style="background-image:url(https://www.educoder.net/api/attachments/1426624);width:360px;height:260px;">
    9.     
    10.     <h1 style="font-family:楷体;text-align:center;line-height:2;">静夜思h1>
    11.     <h2 style="font-family:楷体;text-align:center;">床前明月光h2>
    12.     <h2 style="font-family:楷体;text-align:center;">疑是地上霜h2>
    13.     <h2 style="font-family:楷体;text-align:center;">举头望明月h2>
    14.     <h2 style="font-family:楷体;text-align:center;">低头思故乡h2>
    15.     
    16.     div>
    17.   body>
    18. html>

    第3关：用内嵌式引入CSS样式

    编程要求

    请在右侧编辑器中的Begin - End区域内补充代码，为body标签添加样式规则，具体要求是：

    1.为网页设置背景图，图像的url地址为https://data.educoder.net/api/attachments/1427381

    2.设置背景图像的大小，使其保持纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

    3.上述样式设置顺序： （1）设置背景图 （2）设置背景图的大小

    1. html>
    2. <html lang="zh">
    3.  <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <title>内嵌CSS样式title>
    8.   <style type="text/css">
    9.     /* ********** BEGIN ********** */   
    10.     body {
    11.           background-image:url(https://www.educoder.net/api/attachments/1427381);
    12.           background-size:cover;
    13.     }
    14.     /* ********** END ********** */   
    15.     div {
    16.         position:fixed;
    17.            left:400px;
    18.             top:100px;
    19.            color:#ffffff;
    20.        font-family:黑体;
    21.         text-align:center;
    22.     }   
    23.   style>
    24.  head>
    25.  <body>
    26.   <div>
    27.    <h1>静夜思h1>
    28.    <h2>床前明月光h2>
    29.    <h2>疑是地上霜h2>
    30.    <h2>举头望明月h2>
    31.    <h2>低头思故乡h2>
    32.   div>
    33.  body>
    34. html>

    第4关：用外链式引入CSS样式

    编程要求

    请在右侧编辑器中的Begin - End区域内补充代码，为网页链接外部样式表，具体要求是： 1.为link标签设置href、type和rel属性 2.外部样式表的路径为：https://data.educoder.net/api/attachments/1433016 3.外部样式文件设置的样式可通过点击编辑器窗口左上角的“代码文件”查看

    1. html>
    2. <html lang="zh">
    3.  <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <title>外链CSS样式title>
    8.      
    9.      <link href="https://www.educoder.net/api/attachments/1433016" type="text/css" rel="stylesheet"/>
    10.     
    11.  
    12.      
    13.  head>
    14.  <body>
    15.   <div>
    16.    <h1>静夜思h1>
    17.    <h2>床前明月光h2>
    18.    <h2>疑是地上霜h2>
    19.    <h2>举头望明月h2>
    20.    <h2>低头思故乡h2>
    21.   div>
    22.  body>
    23. html>
    24.

  • 相关阅读:
    实人认证API的出现，让电子化身份验证更加可靠
    智乃酱的cube（线段树维护）
    001、JDK环境配置
    MATLAB 保存和加载变量
    2023天津科技大学计算机考研信息汇总
    阿里云Linux系统MySQL8忘记密码修改密码
    文件的一些操作
    谷粒商城 高级篇 (十七) --------- 单点登录
    pid 电机控制算法
    Linux基础IO【II】
  • 原文地址：https://blog.csdn.net/m0_63324772/article/details/128086010