关闭

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

254人阅读 评论(0) 收藏 举报
分类:
<!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>

 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:103094次
    • 积分:1943
    • 等级:
    • 排名:千里之外
    • 原创:102篇
    • 转载:30篇
    • 译文:2篇
    • 评论:4条
    最新评论