CSS基本操作

css调用方法

于前端软件中调用

行内样式表 具体语法格式
	 <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
       <p style="color: aquamarine; font-size: 12rem; ">
	   内嵌样式表              加入于head中可直接将下面的所有标签覆盖
	   <style type="text/css">
	   	p{
	   		color: blue;font-size: 60px;font-family: "ms reference sans serif";
	   	}
	   </style>
	   外部样式表
	   将以下写入css文件中
	   p{
	   	color: blue;font-size: 60px;font-family: "ms reference sans serif";
	   }
	   在需要使用如上修改的html上    head中加入<link href="css/css.css" rel="stylesheet"/>
	   
	   
	   
	   font-size 字体大小
	   
	   
	   
	   类选择器      选中为class定义的段落
		具体使用方法的为
		.q3{
			color: crimson;
		}
		id选择器   和类选择器相同  但优先级高于类选择器    选中定义为id的段落
		具体表现为
	   #p2{
	   	color: deepskyblue;
	   }
	   选择器组合     和类选择器相同  优先级小于类选择器   选中定义为class的段落
		具体表现为
		.q3.q5{
			color: crimson;
		}
		通配选择器    优先级最低   选中所有段落
		具体表现
		*{
					color: chocolate;
		font-size: 1.5rem;
		/* 后代选择器 */
		.p2 b{
			color: #0000FF;
		}
		/* 子标签选择器 */
		.p3>b{
			color: #00BFFF;
		}
		/* 相邻选择器 */
		.p3+p{
			color: #0000FF;
		}
		/* 兄弟 */
		.p3~p{
			color: #DC143C;
		}
		css文本定义方法
		<style type="text/css">
			.p1{
				color: #00BFFF;   颜色
				font-size: 23px ;   字体大小
				font-family: "楷体";   字体类型
				text-align: center;  字体居中  ( 还有right 字体右对齐 )
			    /*text-decoration: line-through;  字体定义穿过文本的一条线
				text-decoration: underline;*/    下划线
				/*font-style: italic;*/   斜体
				font-weight: 2px;       字体粗细
				line-height: 1.5;        设置行高
			letter-spacing: 2px;  字符间距
				text-indent:46px;    设置首行缩进   一般缩进2个字符用2em    也可使用字体大小的二倍
				}
		</style>
				}
				p{
					width: 1000px;   为定义的段落设置长和高
					height: 800px;
					background-color: #DC143C; 为段落设置背景颜色
					background-image: url(img/X6IY1i5NH1cz6cAV7cmzFg42160a3dfbf8fb73d1a542e676.jpeg);
					设置背景图片
					background-size:1000px 800px;为调用的图片设置长宽
					background-position: left top;   将图片放在左上角
					background-repeat: no-repeat; 不重复图片  repeat-x 横坐标重复
					
					.ul1{
						list-style-image:url(img/img1.jpg)   ;   将无序列表的指示标志改为如图
					     text-align: center;                  将列表内容居中
						list-style-type: armenian;          和上面一样  修改无序列表的标志
						list-style-position: inside;        使无序列表跟随内容
						
						
						
							a:link{
								color: #0000FF;
							}    表示普通的链接
							a:visited{
								color: darkred;
							}表示访问过的链接
							a:hover{
								color: cornflowerblue;
								font-size: 30px;
							}表示鼠标放在这个链接上的状态
							a:active{
								color: chartreuse;
							font-size: 60px;                  ( link 和  visited 用于超链接)
							} 表示被鼠标点击的状态             (hover 和active也可以为其他标签设置)
							:focus{          
								color: #0000FF;
								background: #8B0000;
								font-size: 50px;
							}
							向拥有键盘输入的标签添加样式
						}
					}
				}