css怎么选标签
css选中标签的方法:1、利用id选择器,语法为“#id名{css代码;}”;2、利用类选择器,语法为“.类名{css代码;}”;3、利用标签选择器,语法为“标签名{css代码;}”;4、利用通配符选择器,语法为“*{css代码;}”。
css怎么选中标签
在css中有四种方法来选中标签,也是4个选择器。
1、id 选择器
根据指定的id名称,在当前界面中找到对应的唯一个一个地个的标签,然后设置属性
#id名称 {
属性:值;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
#p1 {
color: red;
}
#p2 {
color: green;
}
#p3 {
color: blue;
}
</style>
</head>
<body>
<p id="p1">大多数人的帅,都是浮在表面的,是外表的帅</p>
<p id="p2">而EGON,不仅具备外表帅,内心更是帅了一逼</p>
<p id="p3">EGON就是我,我就是EGON</p>
</body>
</html>
2、class ,类选择器
根据指定的类名称,在当前界面中找到对应的标签,然后设置属性
.类名称 {
属性:值;
}
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
.p1 {
color: red;
}
.p2 {
color: green;
}
.p3 {
color: blue;
}
</style>
</head>
<body>
<p class="p1">大多数人的帅,都是浮在表面的,是外表的帅</p>
<p class="p2">而EGON,不仅具备外表帅,内心更是帅了一逼</p>
<p class="p3">EGON就是我,我就是EGON</p>
</body>
</html>
#练习
第一行与第三行的颜色都是红色
第一行与第二行的字体大小都是50px
第二行与第三行内容有个下划线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
.p1 {
color: red;
}
.p2 {
font-size: 50px;
}
.p3 {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="p1 p2">第一行内容</p>
<p class="p2 p3">第二行内容</p>
<p class="p1 p3">第三行内容</p>
</body>
</html>
3、标签选择器
根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性
标签名称 {
属性:值;
}
示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
p {
color: red;
}
</style>
</head>
<body>
<p>EGON美丽的外表下其实隐藏着一颗骚动的心</p>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<p>这颗心叫做七巧玲珑心,男人吃了会流泪,女人吃了会怀孕</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
4、通配符选择器
选择所有标签
* {
属性:值;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<style type="text/css">
* {
color: red;
}
</style>
</head>
<body>
<h1 >我是标题</h1>
<p >我是段落</p>
<a href="https://www.swvq.com/css-tutorial-485297.html#">我是超链接</a>
</body>
</html>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbibkb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01