样式继承&选择器的优先级&伪类的选择器&文本标签及样式&有序列表和无序列表
- （背景、边框、定位）相关的样式不会被继承
选择器的优先级
当使用不同的选择器，选中同一个元素时并且设置相同的样式时
这时样式之际嗯产生了冲突，最终到底采用哪种选择器由（权重）决定
优先级的规则
- 内联样式，优先级 1000
- id选择器，优先级100
- 类和伪类，优先级10
- 元素选择器，优先级1
- 通配*，优先级0
- 继承的样式，没有优先级
注意：
- 当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后比较，但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式
- 并集选择器的优先级是单独计算的。例如：（div、p、#p1、.hello{}）
- 可以在样式的最后，添加一个 !important ,此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用。
伪类的选择器
- ：link（正常）
- ：visited （未读）
- : hover（鼠标移入）
- : active（正在点击）
- 注意：这四个选择器的优先级是一样的，一般书写顺序按照：link > visited 〉hover > actice
文本标签及样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
em和strong
这两个标签都表示一个强调的内容
em主要表示语气上的强调，em在浏览器中默认使用斜体显示
strong表示内容的强调，比em更强烈，默认使用粗体显示
-->
<p>
今天天气<em>真不错</em>！
</p>
<p>
<strong>
注意：敌军还有5秒到达战场！
</strong>
</p>
<!--
i 标签，表示单纯的斜体
b 标签，表示单纯的加粗
-->
<p>
<i>我是i标签，以斜体显示</i>
<b>我是b标签，以加粗显示</b>
</p>
<!--
small：标签中的内容会比他的父元素中的文字要小一些
-->
<p>
我是p标签中的<small>我是small标签</small>
</p>
<!--
cite标签：一般用来加书名号
-->
<p>
<cite>《论语》、《孙子》</cite>
</p>
<!--
q 标签表示一个引号（行内引用）
blockquote 标签表示一个长引用（块及引用）
-->
<p>
子曰：<q>徐二世袭制</q>
</p>
<p>
子曰：
<blockquote>
有朋自远方来！
</blockquote>
</p>
<!--
使用 sup 标签设置一个上标
-->
<p>
神仙姐姐<sup><a href="#">[1]</a></sup>
</p>
<!--
使用 sub 标签用来表示一个下标
-->
<p>大表哥<sub>2</sub>哥</p>
<!--
使用 del 表示一个删除的内容
del标签中的内容，会自动添加删除线
-->
<p>
<del>200¥</del><br/>
20¥<br/>
</p>
<!--
ins 表示一个插入的内容
ins中的内容，会自动添加下划线
-->
<p>
神仙姐姐笑起来<ins>真好看</ins>！
</p>
<!--
pre 是一个预格式标签，网页中显示代码并保留格式，不会忽略空格
code 专门用来表示代码，但是不会保留格式
一般使用时结合 pre、code 一起使用
-->
<pre>
<code>
public static void main(String[] args){
System.out.println("hello world!");
}
</code>
</pre>
</body>
</html>
有序列表和无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
去掉默认的项目符号
*/
ul{
list-style:none;
}
</style>
</head>
<body>
<!--
1.无序列表
2.有序列表
3.定义列表
-->
<!--
无序列表
使用ul标签来创建无序列表
使用li在ul中创建一个一个的列表项，
一个li就是一个列表项
注意：默认的项目符号我们一般不使用！！
如果需要设置项目符号，则可以采用为li设置背景图片的方式设置
ul 和 li 都是块元素
-->
<ul>
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
<!--
有序列表和无序列表基本一致，只不过是使用 ol 来代替 ul
有序列表使用有序的序号作为项目符号
type属性，可以指定序号的类型
可选值：1. 默认，使用阿拉伯数字
ol 也是块元素
-->
<ol>
<li>有序1</li>
<li>有序2</li>
<li>有序3</li>
</ol>
<!--
列表中都是可以相互嵌套的，可以在无序列表中使用有序列表
有序列表中也可以放一个无序列表
-->
<p>菜谱</p>
<ul>
<li>
番茄炒茄子
<ol>
<li>茄子</li>
<li>番茄</li>
</ol>
</li>
<li>
番茄鸡蛋
<ul>
<li>番茄</li>
<li>鸡蛋</li>
</ul>
</li>
</ul>
<!--
定义列表 用来对一些词汇或内容进行定义
使用 dl 来创建一个定义列表
dl 中有两个子标签
dt：被定义的内容
dd：对定义内容的描述
同样 dl 和 ul 和 ol 之间都可以互相嵌套
-->
<dl>
<dt>神仙姐姐</dt>
<dd>扮演小龙女，魅力值99分</dd>
<dd>是杨过的姑姑</dd>
</dl>
</body>
</html>
版权声明：本文为qq_42919799原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。