使用内嵌式引入CSS样式表。分别为页面元素定义不同的类。通过控制不同的类,分别为第一个汉字“网”和第四个汉字“计”设置为蓝色、加粗、60px字体;第二个汉字“页”和第五个汉字“与”设置为红色、加粗、60px字体;第三个汉字“设”和第六七个汉字“制作”设置为黄色、加粗、60px字体。
时间: 2023-10-05 16:04:20 浏览: 95
可以按照如下方式来实现:
首先,在 head 标签中内嵌式引入 CSS 样式表:
```html
<head>
<style>
.blue {color: blue; font-weight: bold; font-size: 60px;}
.red {color: red; font-weight: bold; font-size: 60px;}
.yellow {color: yellow; font-weight: bold; font-size: 60px;}
</style>
</head>
```
然后,在需要设置样式的标签中,加上对应的类名即可:
```html
<body>
<p>
<span class="blue">网</span>
<span class="red">页</span>
<span class="yellow">设</span>
<span class="blue">计</span>
<span class="red">与</span>
<span class="yellow">制作</span>
</p>
</body>
```
这样,第一个汉字“网”和第四个汉字“计”就会被设置为蓝色、加粗、60px字体;第二个汉字“页”和第五个汉字“与”会被设置为红色、加粗、60px字体;第三个汉字“设”和第六七个汉字“制作”会被设置为黄色、加粗、60px字体。
相关问题
1)新建一个网页,网页的标题为学号+姓名+test01(如2130101唐建国+test01) (2)使用内嵌式引入CSS样式表。 (3)通过fieldset元素和legend元素建立如下面的网页效果图所示的外框架。框架的标题为:考生信息。 (4)建立一个表单form,表单的宽度为300px,背景色为:#9370D8,水平居中显示。 (5)在表单内添加学号、姓名、性别等input元素,具体要求如下: 为学号、姓名、性别等input元素建立汉字与对应元素之间的关联,即单击汉字也能够使对应的input元素
好的,以下是新建网页的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>2130101唐建国+test01</title>
<style type="text/css">
fieldset {
width: 80%;
margin: 0 auto;
border: 2px solid #9370D8;
padding: 10px;
}
legend {
font-size: 24px;
color: #9370D8;
font-weight: bold;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
background-color: #9370D8;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #5e3ea1;
}
</style>
</head>
<body>
<fieldset>
<legend>考生信息</legend>
<form style="background-color: #9370D8; width: 300px; margin: 0 auto;">
<label for="student-id">学号:</label>
<input type="text" id="student-id" name="student-id">
<br>
<label for="student-name">姓名:</label>
<input type="text" id="student-name" name="student-name">
<br>
<label for="gender">性别:</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
<br>
<input type="submit" value="提交">
</form>
</fieldset>
</body>
</html>
```
解释:
1. 在head标签中,使用style标签嵌入CSS样式表的代码。
2. 使用fieldset和legend标签建立外框架,设置边框、内边距和标题样式。
3. 在form标签中添加input和select元素,使用label标签与其建立关联,设置表单样式属性。
.使用内嵌样式表设置h1的属性,通过类选择器改变span的颜色,实现五彩标题,即每个span 设置的字呈现不同的颜色,如图4-43所示。
可以使用以下代码实现:
HTML代码:
```
<h1>五彩标题<span>hello</span><span>world</span><span>!</span></h1>
```
CSS代码:
```
h1 {
font-size: 36px;
}
span {
font-size: 36px;
font-weight: bold;
}
span:nth-child(1) {
color: red;
}
span:nth-child(2) {
color: orange;
}
span:nth-child(3) {
color: yellow;
}
span:nth-child(4) {
color: green;
}
span:nth-child(5) {
color: blue;
}
```
注意:这里使用了 span 的 nth-child 选择器来实现不同的颜色。你可以根据需要在 CSS 中修改字体大小和颜色值。