第十三篇:HTML
2024-08-29 02:59:58
本篇内容
- 选择器
- 属性
一、 选择器
1.id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#red{
color:red;
}
#green{
color:green;
}
</style>
<body>
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
</body>
</html>
2.类选择器
在 CSS 中,类选择器以一个点号显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.center{
text-align: center
}
</style>
<body>
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
</body>
</html>
3.派生选择器
通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
li strong{
font-style: italic;
font-weight: normal;
}
</style>
<body>
<p>
<strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong>
</p>
<ol>
<li>
<strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong>
</li>
<li>我是正常的字体。</li>
</ol>
</body>
</html>
4.伪类
CSS 伪类用于向某些选择器添加特殊的效果。
(1)link
向未被访问的链接添加样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
a:link{
color: #FF0000
}
</style>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
(2)visited
向已被访问的链接添加样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
a:visited{
color: #00FF00
}
</style>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
(3)hover
当鼠标悬浮在元素上方时,向元素添加样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
a:hover{
color: #FF00FF
}
</style>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
(4)active
向被激活的元素添加样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
a:active{
color: #0000FF
}
</style>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
二、 属性
1.position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.right{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
<body>
<div class="right">
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
</div>
</body>
</html>
(2)display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
p{
display: inline
}
div{
display: none
}
</style>
<body>
<p>把段落元素设置为内联元素</p>
<p>而 div 元素不会显示出来</p>
<div>
div 元素的内容不会显示出来
</div>
</body>
</html>
最新文章
- 【Java EE 学习 78 上】【数据采集系统第十天】【Service使用Spring缓存模块】
- Android 查缺补漏之Adapter 和 LayoutInflater
- linux 网络编程比较好的文章
- Python基础:序列(列表、元组)
- Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html
- 编程之美的2.17,数组循环移位 &; 字符串逆转(反转) Hello world Welcome =>; Welcome world Hello
- 【转】getopt分析命令行参数
- FreeCodeCamp 的 Basic Algorithm Scripting 题解(1)
- JVM类加载续
- C - Coin Change (III)(多重背包 二进制优化)
- 【翻译】在Ext JS 5应用程序中如何使用路由
- [Swift]LeetCode78. 子集 | Subsets
- xls 编码 utf-8
- VMVare的窗口自适应
- spring aop 切面编程中获取具体方法的方法
- Chrome浏览器的版本查看 以及V8 javascript 引擎版本查看
- jenkins默认会存放目录
- ASP.NET MVC下使用AngularJs语言(九):日期时间处理与显示
- [NOIP 2015]运输计划-[树上差分+二分答案]-解题报告
- js获取按键