通过class选择器,设置以下样式: 1、设置 class 为 title 的 p 标签内文字样式:字体加粗、字体大小:18px。 2、设置 class 为 head 的 p 标签内文字样式:字体加粗、字体大小:18px、高:40px、行高:40px、颜色:#F39F18。以下是部分代码: <body> <div class="div1" > <p class="title">公司长期招聘以下岗位:</p> <p class="h
时间: 2024-02-23 20:57:37 浏览: 205
ead">职位名称</p> </div> </body> 相应的CSS代码如下:
.title {
font-weight: bold;
font-size: 18px;
}
.head {
font-weight: bold;
font-size: 18px;
height: 40px;
line-height: 40px;
color: #F39F18;
}
注意,CSS代码中的 ".title" 和 ".head" 分别对应 HTML 代码中的 class 名称。
相关问题
使用CSS样式实现效果<title>标签指定式选择器</title> </head><body><p>通过标记选择器指定字体为绿色普通文本,设置字号为18像素,且<strong>嵌套strong标记定义的标准样式文本(蓝色)</strong>。</p><strong>这是在非嵌套,由strong标记定义的一段斜体文本(红色)。</strong><p class="special">本段落文本字号为16像素,颜色为蓝色,字体为楷体。</p></body></html>
以下是使用 CSS 样式实现的效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>title标签指定式选择器</title>
<style>
p {
font-size: 18px;
color: green;
}
p strong {
color: blue;
}
strong {
color: red;
font-style: italic;
}
.special {
font-size: 16px;
color: blue;
font-family: "楷体", KaiTi, serif;
}
</style>
</head>
<body>
<p>通过标记选择器指定字体为绿色普通文本,设置字号为18像素,且<strong>嵌套strong标记定义的标准样式文本(蓝色)</strong>。</p>
<strong>这是在非嵌套,由strong标记定义的一段斜体文本(红色)。</strong>
<p class="special">本段落文本字号为16像素,颜色为蓝色,字体为楷体。</p>
</body>
</html>
```
这个样式中,使用了标记选择器 `p`、标记选择器和后代选择器 `p strong`、标记选择器 `strong` 和类选择器 `.special`,分别定义了段落、段落中嵌套的强调文本、非嵌套的强调文本和特殊段落的样式。其中,使用了 `color` 属性设置文本颜色,使用了 `font-size` 属性设置文本字号,使用了 `font-style` 属性设置文本字体样式,使用了 `font-family` 属性设置文本字体。
前端在Sublime Text新建一个网页,实现以下CSS样式: 1.用元素选择器将网页中所有文字调整成12PX大小 2.用类选择器 .title将栏目框的标题文字调整成14PX,红色。 3.用伪类选择器将导航条调整为链接的hover状态文字变色,去除下划线。 4.用后代选择器将友情链接中的链接行距调整为150%。 5).用Li.style1 A将常用下载里的链接调整为紫色字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1.用元素选择器将网页中所有文字调整成12PX大小 */
body{
font-size: 12px;
}
/* 2.用类选择器 .title将栏目框的标题文字调整成14PX,红色。 */
.title{
font-size: 14px;
color: red;
}
/* 3.用伪类选择器将导航条调整为链接的hover状态文字变色,去除下划线。 */
nav a:hover{
color: blue;
text-decoration: none;
}
/* 4.用后代选择器将友情链接中的链接行距调整为150%。 */
#friend-links ul li a{
line-height: 150%;
}
/* 5).用Li.style1 A将常用下载里的链接调整为紫色字。 */
li.style1 a{
color: purple;
}
</style>
</head>
<body>
<div class="title">栏目框标题</div>
<nav>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
</ul>
</nav>
<div id="friend-links">
<ul>
<li><a href="#">友情链接1</a></li>
<li><a href="#">友情链接2</a></li>
<li><a href="#">友情链接3</a></li>
</ul>
</div>
<div id="common-downloads">
<ul>
<li class="style1"><a href="#">下载1</a></li>
<li><a href="#">下载2</a></li>
<li><a href="#">下载3</a></li>
</ul>
</div>
</body>
</html>
阅读全文