成都工业学院Web技术基础（WEB）实验三：CSS字体等属性使用

news2024/11/25 6:34:58

写在前面

1、基于2022级计算机大类实验指导书

2、代码仅提供参考，前端变化比较大，按照要求，只能做到像，不能做到一模一样

3、图片和文字仅为示例，需要自行替换

4、如果代码不满足你的要求，请寻求其他的途径

运行环境

window11家庭版

WebStorm 2023.2.2

实验要求、源代码和运行结果

1、采用HBuilder编写代码，实现图3-1所示的页面效果，要求：

① 结构与样式相分离，分别采用内嵌、引入等多种方式实现。

② 古诗标题为隶书、红色，正文文字为隶书、斜体、蓝色、16px。

图3-1 HTML中引入CSS的多种方法运行效果示意图

1）文档命名为exp3-1.html。

2）古诗标题采用<h3>标记实现。

3）文字颜色设置采用的css属性为color。

4）字号设置：font-size；斜体设置：font-style；字体系列：font-family。字体粗细：font-weight 文本水平居中：text-align

5）文本换行采用<br/>实现。

6）使用标签选择器、类选择器或id选择器实现相应效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style>
    h3 {
        font-family: '隶书';
        color: red;
        text-align: center;
    }

    p {
        font-family: '隶书';
        font-style: italic;
        color: blue;
        font-size: 16px;
        text-align: center;
    }
</style>
<h3 style="color: red; font-family: '隶书'; text-align: center;">
    黄鹤楼送孟浩然之广陵
</h3>
<p style="font-family: '隶书'; font-style: italic;
color: blue; font-size: 16px; text-align: center;">
    故人西辞黄鹤楼
</p>
<p>烟花三月下扬州</p>
<p>孤帆远影碧空尽</p>
<p>唯见长江天际流</p>
</body>
</html>

2、编写代码，实现图3-2所示的文字阴影效果，要求：

① 结构和样式相分离（html和CSS相分离）。

② P元素边框绿色，圆角半径25px，宽度400px，高度150px。

③ P元素内部文字颜色红色，字体大小20px，内部文字水平居中、垂直居中。

④ 文字阴影为蓝色，在x方向和y方向分别偏移2px；模糊半径2px。

图3-2 实验内容2效果示意图

1）新建html文档ex3-2.html，css文件。采用<link>标签将css文件导入html文档。

2）元素水平居中：text-align:center;

3）块级元素垂直居中：line-height = height。

4）文字阴影：text-shadow：x偏移 y偏移模糊半径颜色

边框：border：边框大小边框样式边框颜色，圆角边框：border-radius：px|%；

背景图片：background-image：url（）；

Experiment3_2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Experiment3_2.css">
    <title></title>
</head>
<body>
<div class="container">
    <p class="text-box">文字水平居中，垂直居中，由阴影效果</p>
</div>
</body>
</html>

Experiment3_2.css

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    text-align: center;
    background-image: url(../1.jpg');
    background-size: cover;
}

.text-box {
    width: 400px;
    height: 150px;
    border: 2px solid green;
    border-radius: 25px;
    line-height: 150px; 
    font-size: 20px;
    color: red;
    text-shadow: 2px 2px 2px blue;
}

3、实现图3-3所示的页面效果，要求：

① 结构和样式相分离（html和CSS相分离）。

② 表格文字：表头/主体：20px/16px；居中加粗，文字颜色：表头/主体：白色/黑色

③ 表格实现隔行变色。

图3-3 实验内容2效果示意图

1）新建html文档。

2）通过<table>标签创建表格结构。

3）创建css文件，采用<link>标签将css引入html文件。

4）采用表格CSS属性设置表格样式。常用表格CSS属性如下所示。

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacinq	设置分隔单元格边框的距离。
caption-side	设置表格标题的位署。
empty-cells	设罴是否显示表格中的空单元格。
table-layout	设需显示单元、行和列的算法。

5) 文本居中对齐：text-align:center。

6) 第一行加粗显示：用<th>代替<td>。

7) 隔行变色实现：在需要变色的行上设置class属性，通过css控制class修

饰行的颜色。

border：边框大小边框样式边框颜色；border：1px solid green；

tr:nth-child(odd) {} 奇数行 tr:nth-child(even){} 偶数行

Experiment3_3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Experiment3_3.css">
    <title></title>
</head>
<body>
<p align="center">课程表</p>
<table border="1">
    <tr>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td>语文</td>
        <td>英语</td>
        <td>体育</td>
        <td>美术</td>
        <td>品德</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>品德</td>
        <td>美术</td>
        <td>英语</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>体育</td>
        <td>英语</td>
        <td>数学</td>
        <td>品德</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>美术</td>
        <td>品德</td>
        <td>体育</td>
        <td>英语</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>语文</td>
        <td>英语</td>
        <td>美术</td>
        <td>品德</td>
    </tr>
</table>
</body>
</html>

Experiment3_3.css

body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    text-align: center;
    color: black;
}

tr:nth-child(1),tr:nth-child(3),tr:nth-child(5){
    background-color: lightgreen;
}

tr:nth-child(2),tr:nth-child(4),tr:nth-child(6) {
    background-color: white;
}