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

最新推荐文章于 2024-06-02 14:45:23 发布

心郎

最新推荐文章于 2024-06-02 14:45:23 发布

阅读量952

点赞数

分类专栏：前段_css

本文链接：https://blog.csdn.net/u011301203/article/details/52348979

版权

前段_css 专栏收录该内容

13 篇文章 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

收藏

觉得还不错? 一键收藏
0
评论
css 引入方式,选择器,选择器的优先级

css引入方式,选择器,选择器的优先级 /** * css有3中写法 * 1 ：外联式：：新建css 内部引用（主要写法推荐） * 1）：该写法影响范围比较广，整个站点 * 2）：完全实现了html结构与样的分离（代码可维护性比较好） * * 2 ：内嵌式：在头部的style 中书写 * 1）：只会影响当前
复制链接

扫一扫

专栏目录