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的4种引入方式及优先级

第一:CSS的4种引入方式 CSS的4种引入方式是:行内样式、内嵌样式、链接样式、导入样式   1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如:...
  • xqhys
  • xqhys
  • 2017年03月28日 09:29
  • 437

Web前端(选择器and优先级)基础知识(5)

选择器的优先级:!important选择器>行内样式(作为style属性写在元素内的样式)>id选择器>类选择器>标签选择器>通配符选择器。 HTML的选择器主要有以下几种:...
  • caimingxian401
  • caimingxian401
  • 2017年01月14日 20:15
  • 262

类选择器和id选择器的优先级

一般情况下,先使用类选择器 类选择器,可以支持多个使用,即一个元素可以包含多个类属性,在类属性的基础上再对元素实行特殊的操作的话,id选择器就显得很轻松了。...
  • baohanqing
  • baohanqing
  • 2013年12月30日 20:45
  • 536

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

css引入方式,选择器,选择器的优先级 /** * css有3中写法 * 1 :外联式::新建css 内部引用 (主要写法 推荐) * 1):该写法影...
  • u011301203
  • u011301203
  • 2016年08月28日 23:29
  • 447

CSS选择器优先级计算

CSS选择器优先级计算
  • Dong_PT
  • Dong_PT
  • 2016年04月29日 20:14
  • 1269

CSS常用选择器及优先级

基础选择器 1. 通用选择器,匹配任何元素:*     *{         color:#FF0000;     } 2.标签选择器,匹配指定的所有标签:     p{        ...
  • JiangPF1992
  • JiangPF1992
  • 2015年10月26日 21:34
  • 1381

CSS基本选择器和优先级

选择器: 1、标签选择器:每个HTML标签名即为一个选择器 2、类选择器:标签中的class属性指定 ,定义样式要加点。 js引用时用className 3、ID选择器:标签的id属性,尽量保...
  • xdd_lmd
  • xdd_lmd
  • 2015年08月11日 12:06
  • 247

css 当用id选择器与 class 选择器选择同一目标但是应用不同修饰时的选择问题

为同一个p元素设置id为intro与class为bb,对他们进行不同颜色设置,结果应用了针对id设置时显示的颜色 p{color:red} #intro {color:green} .bb{co...
  • liuboman
  • liuboman
  • 2016年03月16日 16:58
  • 1207

CSS选择器-优先级-性能

从开始用css选择器到现在这么久了,自以为对它的理解已经差不多了,够用了,知道之前面试一家公司后,瞬间把我问懵逼了,今把最近研究的css选择器和大家分享哈,虽然文字稍微有点多,能耐心看完我相信你多少还...
  • Trifling_
  • Trifling_
  • 2016年10月11日 20:24
  • 2225

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

一、优先级分类 通常可以将css的优先级由高到低分为6组: 第一优先级:无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。...
  • Coder_Chang
  • Coder_Chang
  • 2017年05月27日 09:57
  • 2007
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css 引入方式,选择器,选择器的优先级
举报原因:
原因补充:

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