您好!欢迎来到e资源!本站资源24小时自动发货,海量精品课程资源免费下载!

css 标签选择器、id选择器、类选择器实例

1:标签选择器标签选择器,是所有带有某种标签的都生效。这里以p为例,也就是所有的带有p标记的都会这样的样式实例:选择所有 元素 :p{background-color...

1:标签选择器

标签选择器,是所有带有某种标签的都生效。这里以p为例,也就是所有的带有p标记的都会这样的样式

实例:选择所有<p> 元素 :

<!DOCTYPE html>
<html>
<head>
<style>
p
{
background-color:yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div>
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>

在线运行

 

2:id选择器

注意id选择器是唯一的,因为只有id="yy"的才有这种样式,而一个页面里元素的Id必须是唯一的,所以。。。你懂得id选择器以#开头用法是:id=""

实例:为 id="firstname" 元素添加指定样式:

<!DOCTYPE html>
<html>
<head>
<style>
#firstname
{
background-color:yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>

在线运行

 

3:类选择器.

类选择器以.开头,只要把元素的class="" 就能表现为这种样式了用法是:class=""

实例:

<!DOCTYPE html>
<html>
<head>
<style>
.intro
{
background-color:yellow;
}
</style>
</head>

<body>
<h1>Welcome to My Homepage</h1>

<div class="intro">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>

在线运行

开通vip
首页 导航 会员 客服 微信
QQ 微信 邮箱 TOP