CSS基础二

2020/2/16 21:17:28 人评论 次浏览 分类:学习教程

1.选择器的优先级

/*
			 * 当使用不同的选择器,选中同一个元素时并且设置相同的样式时,
			 * 	这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定
			 *  优先级高的优先显示。
			 * 
			 * 优先级的规则
			 * 		内联样式 , 优先级  1000
			 * 		id选择器,优先级   100
			 * 		类和伪类, 优先级   10
			 * 		元素选择器,优先级 1 
			 * 		通配* ,    优先级 0
			 * 		继承的样式,没有优先级
			 * 
			 * 当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,
			 * 	但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,
			 * 	则使用靠后的样式。
			 * 
			 *  并集选择器的优先级是单独计算
			 * 	div , p , #p1 , .hello{}	
			 * 
			 *  可以在样式的最后,添加一个!important,则此时该样式将会获得一个最高的优先级,
			 * 	将会优先于所有的样式显示甚至超过内联样式,但是在开发中尽量避免使用!important
			 * 
			 */
/*
			 * 涉及到a的伪类一共有四个:
			 * 	:link
			 *  :visited
			 * 	:hover
			 * 	:active
			 * 而这四个选择器的优先级是一样的。
			 */

2.文本标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- 
			em和strong
			- 这两个标签都表示一个强调的内容,
				em主要表示语气上的强调,em在浏览器中默认使用斜体显示
				strong表示强调的内容,比em更强烈,默认使用粗体显示
		-->
		<p>
			今天天气<em>真不错</em>!
		</p>
		
		<p>
			<strong>
				注意:如果你不认真上课,你就找不到好工作!
			</strong>
		</p>
		
		<!-- 
			i标签中的内容会以斜体显示
			b标签中的内容会以加粗显示
			
			h5规范中规定,对于不需要着重的内容而是单纯的加粗或者是斜体,
				就可以使用b和i标签
		-->
		<p>
			<i>我是i标签中的内容</i>
			<b>我是b标签中的内容</b>
		</p>
		
		<!--
			small标签中的内容会比他的父元素中的文字要小一些
				在h5中使用small标签来表示一些细则一类的内容
				比如:合同中小字,网站的版权声明都可以放到small
		-->
		<p>
			我是p标签中的内容<small>我是small标签中的内容</small>
		</p>
	
		<!-- 
			网页中所有的加书名号的内容都可以使用cite标签,表示参考的内容,
				比如:书名 歌名 话剧名 电影名 。。。
		-->
		<p>
			<cite>《论语》</cite>是最喜欢的一般的书
		</p>
		
		<!--
			q标签表示一个短的引用(行内引用)
				q标签引用的内容,浏览器会默认加上引号
			
			blockquote标签表示一个长引用(块级引用)
		-->
		<p>
			子曰:<q>学而时习之不亦说乎!</q>
		</p>
		
		<div>
			子曰:
			<blockquote>
				有朋自远方来,乐呵乐呵!
			</blockquote>
		</div>
		
		<!-- 
			使用sup标签来设置一个上标
		-->
		<p>2<sup>2</sup></p>
		<p>赵薇<sup><a href="#">[1]</a></sup></p>
		
		<!--
			sub标签用来表示一个下标
		-->
		<p>H<sub>2</sub>O</p>
		
		<!--
			使用del标签来表示一个删除的内容
				del标签中的内容,会自动添加删除线
		-->
		<p>
			<del>17.75</del> <br />
			15.54 <br />
		</p>
		
		
		<!-- 
			ins表示一个插入的内容
				ins中的的内容,会自动添加下划线
		-->
		<p>
			我们的老师真<ins>好啊</ins>!
		</p>
		
		
		<!--
			需要页面中直接编写一些代码
			pre是一个预格式标签,会将代码中的格式保存,不会忽略多个空格
			code专门用来表示代码
			
			我们一般结合使用pre和code来表示一段代码
		-->
		
		<pre>
			<code>
				window.onload = function(){
					alert("Hello World");
				};
			</code>
		</pre>
		
		
	</body>
</html>

3. 列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 	去掉项目符号
			 * */
			/*ul{
				list-style: none;
			}*/
			
		</style>
	</head>
	<body>
		
		<!-- 
			列表就相当于去超市购物时的那个购物清单,
				在HTML也可以创建列表,在网页中一共有三种列表:
					1.无序列表
					2.有序列表
					3.定义列表
		-->
		
		<!--
			无序列表
				- 使用ul标签来创建一个无序列表
				- 使用li在ul中创建一个一个的列表项,
					一个li就是一个列表项
					
			通过type属性可以修改无序列表的项目符号
				可选值:
					disc,默认值,实心的圆点
					square,实心的方块
					circle,空心的圆
					
			注意:默认的项目符号我们一般都不使用!!
				如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置
				
			ul和li都是块元素	
		-->
		<ul>
			<li>西门大官人</li>
			<li>柴大官人</li>
			<li>许大官人</li>
			<li>唐僧大官人</li>
		</ul>
		
		<!-- 
			有序列表和无序列表类似,只不过它使用ol来代替ul
			有序列表使用有序的序号作为项目符号
			type属性,可以指定序号的类型
				可选值:1,默认值,使用阿拉伯数字
						a/A 采用小写或大写字母作为序号
						i/I 采用小写或大写的罗马数字作为序号
						
			ol也是块元素			
		-->
		<ol type="I">
			<li>结构</li>
			<li>表现</li>
			<li>行为</li>
		</ol>
		
		<!-- 
			列表之间都是可以互相嵌套,可以在无序列表中放个有序列表
				也可以在有序列表中放一个无序列表
		-->
		
		<p>菜谱</p>
		<ul>
			<li>
				鱼香肉丝
				<ol>
					<li>鱼</li>
					<li>香</li>
					<li>肉丝</li>
				</ol>
			</li>
			<li>
				宫保鸡丁
				<ul>
					<li>宫保</li>
					<li>鸡丁</li>
				</ul>
			</li>
			<li>青椒肉丝</li>
		</ul>
		
	</body>
</html>

4.定义列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<!--
			定义列表用来对一些词汇或内容进行定义
			使用dl来创建一个定义列表
				dl中有两个子标签
					dt : 被定义的内容
					dd : 对定义内容的描述
			同样dl和ul和ol之间都可以互相嵌套		
		-->
		<dl>
			<dt>武松</dt>
			<dd>景阳冈打虎英雄,战斗力99</dd>
			<dd>后打死西门庆,投奔梁山</dd>
			<dt>武大</dt>
			<dd>著名餐饮企业家,战斗力0</dd>
		</dl>
	</body>
</html>

 

四维空间@
发布了60 篇原创文章 · 获赞 1 · 访问量 923
私信 关注

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->