css 引入方式,选择器,选择器的优先级

原创 2016年08月28日 23:29:16
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css引入方式,选择器,选择器的优先级</title>
		
		<style type="text/css" >
		/**
		 * css有3中写法
		 * 1 :外联式::新建css 内部引用 <link href="css 文件路径" rel="">     (主要写法  推荐)
		 * 		1):该写法影响范围比较广,整个站点
		 * 		2):完全实现了html结构与样的分离(代码可维护性比较好)
		 * 
		 * 2 :内嵌式  :在头部的style 中书写
		 * 		1):只会影响当前页面样式的改变
		 * 		2):没有实现html结构与样式的完全分离
		 * 
		 * 3 :行内式写法 :直接在标签内些style
		 * 		1):影响只有当前标签
		 * 		2):没有实现html结构与样式的分离 
		 */
		
		/**
		 * 选择器
		 *		1 :标签选择器 div{},p{},h1{} 
		 * 			注意:标签指的是html中的标签
		 * 
		 *	 	2 :类选择器 为标签添加一个class="类名" 例如:<p  class="p-color"></p> .p-color{}
		 * 			注意:
		 * 				1 :谁调用谁改变(html)
		 * 				2 :一个标签可以同时调用多个类样式  例如:<p class="p-color p-size">文字1</p>
		 * 				3:一个类标签可以被多个标签同时调用  <p class="p-color p-size">文字1</p> , <div class="p-color">文字1</div>
		 * 			类的命名规范:
		 * 				1 :推荐使用有语义的单词组合或者拼音组合定义类名
		 * 				2 :不推荐使用汉字定义类名
		 * 				3 :不能以纯数字或者以数字开头定义类名
		 * 				4 :不能以特殊字符或者以特殊字符开头(“_”除外)定义类名
		 * 
		 *		3:id选择器  <p id="p-color"></p> #p-color{}
		 * 			注意:
		 * 				1 :一个标签只能调用一个id样式(身份证)
		 * 				2 :在html标签中,一个标签的id名必须唯一 (以后id选择器一般配合js使用)
		 * 			错误写法:
		 * 				1:<p id="p-color p-size">文字1</p>
		 * 				2:<p id="p-color">文字1</p> , <div id="p-color">文字1</div>
		 * 
		 * 		4:通配符选择器  *{}
		 * 			注意:该选择器会将页面中所有的标签选择,一并设置样式。
		 * 
		 * 		5:复合选择器 :标签名称 .选择器{}  或者    标签名称 #选择器{}  例如 div .aaa() 或  div #aa{}
		 * 
		 * 		6:后代选择器 :div p{} 
		 * 			注意:
		 * 				1 :标签之间的关系属于嵌套关系  说明 :被div标签包裹的p标签
		 * 				2 :选择器中间必须用空格隔开
		 * 
		 * 		7:并集选择器 :p,div,span,h1{}
		 * 			注意:并集选择器标签之间的关系可以是并列的关系也可以是嵌套关系
		 * 
		 * 选择器的优先级 : 
		 * 			1 标签选择器 < 类选择器 <  ID选择器 < 行内样式 < !important 
		 * 			2 1       10      100    1000   1000以上
		 */		
		 
		 /**
		  * 颜色的表达方式 :4种方式
		  * 	1:直接设置 color:red;
		  * 	2:十六进制方式 color:#00ff;
		  * 	3:rgb设置 color:rgb(0-255,0-255,0-255); red green blue
		  * 	4:rgba color:rgba(0-255,0-255,0-255,0-255,0.1);	
		  * 		rgba是rgb色彩模型的一个扩展。这个缩写词代表红绿蓝三原色的首字母,Alpha值代表颜色的透明度/不透明度 取值为:0-1之间。
		  * 		透明度设置:
		  * 			1):color:rgba(0-255,0-255,0-255,0-255,0.5);
		  * 			2):opacity:0.5;
		  * 			3);filter:Alpha(opacity=50); //IE8以及更早的浏览器
		  * 		
		  */
		 
		 
		 #p-color0{
		 	width: 300px;  /* 设置宽度*/
		 	height: 3000px; /* 设置高度*/
		 	line-height: 20px; /* 设置文字的行高*/
		 	line-break: normal;
		 	font-size: 20px;  /* 设置文字大小*/
		 	
		 	/*font-weight: normal;*/ /* 设置文字为正常显示 用于去掉一些样式*/
		 	font-weight: bold;	/* 文字加粗显示*/
		 	/*font-weight: 700;*/ /* 文字加粗 与 bold效果一样 推荐使用*/
		 	
		 	font-style: italic ; /* 文字斜体显示*/
		 	
		 	font-family: 楷体; 	/* 文字 字体 汉字方式*/
		 	font-family: simsun; /* 设置文字字体宋体  英文方式*/
		 	font-family: "\5B8B\4F53";  /* 设置unicode编码设置字体*/
		 	
		 	color: red;  /* 设置文字颜色*/
		 	background-color: palegreen; /* 设置背景色*/
		 	
		 	text-indent: 2em; /* 设置首行缩进两个汉字*/
		 	text-align: center;  /* text-align给块级元素设置,其文本会水平居中 */
		 	
		 }
		 
		 p1{
		 	/*文字大小为40px  文字字体为宋体*/
		 	font: 40px 宋体;
		 }
		 
		 p{
		 	/*设置文字   加粗 斜体  大小40px  行高20px 宋体 
		 	 * 
		 	 * Font属性联写注意:
			 *	 ◆该属性中必须有font-size  和 font-family
			 *	 ◆font-size的值必须放到font-family前
		         *	 ◆font-weight 和font-style顺序可以调换
			 *	 ◆font-weight 和font-style 放到font-size 和font-family前
		 	 * */
		 	font:700 italic  40px/20px 宋体 ;
		 }
		 
		</style>
	</head>
	<body>
	</body>
</html>

 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS选择器权重计算及优先级

  • 2017年04月16日 22:50
  • 102KB
  • 下载

CSS选择器、优先级与匹配原理

选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入style=""的方式,应该是CSS...

【html/css】选择器以及其优先级的问题

2.1.    标签选择器 2.1.1 通用选择 *   通用选择器 * 大家应该都比较熟悉了,最常用的就是 *{margin:0; box-sizing:border-box;}。mra...

CSS中的多种选择器和它们的优先级

标签选择器,类选择器,id选择器,通用选择器,交集选择器,后代选择器,子代选择器,属性选择器,通用选择器 的用法,及它们的优先级...

【转】详解CSS选择器、优先级与匹配原理

详解CSS选择器、优先级与匹配原理 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用。通过Firebug查看,发现没有起作用的属性被覆盖了。这个时候突然意识到...

css选择器优先级

比如有这样一段HTML代码:blakeFez div{color:red;} #blakeFez{color:green;} 那么这时候,上面的blakeFez会显示上面颜色呢?...

css选择器的优先级

1、 类的覆盖顺序取决于类定义的顺序例如 .a{ color:red; } .b{ color:green; } 由于.b晚于.a定义,所以.b覆盖.a,反之则.a...
  • LJTsun
  • LJTsun
  • 2016年04月01日 10:24
  • 192

CSS选择器及优先级

通常我们可以将CSS的优先级由高到低分为六组: 无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然,IE 6不支持这个属性,于是它也成为一种...

从留言板开始做网站(九)——简单的验证码和CSS选择器优先级

用JS做了判断文本框内是否为空,现在还应该判断用户输入的值是否是恰当的值。 修改checkInputs函数,增加正则判断的功能: function checkInputs(theForm){ ...
  • wu1234a
  • wu1234a
  • 2016年10月10日 17:02
  • 171

【CSS】——三大基础选择器以及优先级

前提  小编最近在学习前端的一些内容,想要做出用户体验度高的界面,CSS是我们必须要学习的一门编程语言。何为CSS?   CSS(Cascading Style Sheets,层叠样式表)是一种用...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css 引入方式,选择器,选择器的优先级
举报原因:
原因补充:

(最多只允许输入30个字)