68 lines
2.0 KiB
HTML
68 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>CSS属性练习</title>
|
||
<style>
|
||
/* (3) 使用标记选择器将p标签中的字体颜色设置为#cc0000，字体大小为32px */
|
||
p {
|
||
color: #cc0000;
|
||
font-size: 32px;
|
||
}
|
||
|
||
/* (4) 使用id选择器将p标签的背景颜色设置为gray */
|
||
#paragraph {
|
||
background-color: gray;
|
||
}
|
||
|
||
/* (5) 使用类选择器将p标签中内容的对齐方式设置为水平居中对齐,字体样式为斜体，字体用宋体 */
|
||
.center {
|
||
text-align: center;
|
||
font-style: italic;
|
||
font-family: "SimSun", "宋体", serif;
|
||
}
|
||
|
||
/* (6) 使用伪类选择器，取消a标签的下划线 */
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* 注意：伪类选择器的顺序很重要，必须按照LVHA顺序 */
|
||
/* a标记未被访问时，字体颜色为gray */
|
||
a:link {
|
||
color: gray;
|
||
}
|
||
|
||
/* a标记在被访问后，字体颜色为#9900ff */
|
||
a:visited {
|
||
color: #9900ff;
|
||
}
|
||
|
||
/* 鼠标悬停在a标记上时，字体颜色为red，字体大小为24px */
|
||
a:hover {
|
||
color: red;
|
||
font-size: 24px;
|
||
}
|
||
|
||
/* a标记在被用户激活时，字体颜色为rgb(0, 204, 0) */
|
||
a:active {
|
||
color: rgb(0, 204, 0);
|
||
}
|
||
|
||
/* (7) 选取带有title属性的标记，并设置字体粗细为bold */
|
||
[title] {
|
||
font-weight: bold;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- (1) 为p标签添加title属性，属性值为tit -->
|
||
<p id="paragraph" class="center" title="tit">一个段落</p>
|
||
|
||
<!-- (2) 实现a标签点击跳转到菜鸟教程的功能，要求在一个全新的空白窗口打开链接 -->
|
||
<a href="https://www.runoob.com" target="_blank">点击跳转到菜鸟教程</a>
|
||
</body>
|
||
|
||
</html> |