CSS常用属性

1.文本

 .p1{
				color: #008000; //字体颜色
				font-size: 18px; //字体大小
				font-family: 楷体;//字体
				/* text-align: right;  水平对齐方式*/
				/* text-decoration: line-through; 删除线效果 */
				text-decoration: underline;
				/*text-decoration:none; 定义标准的文本*/
				/* font-style: italic; 斜体文本 */
				font-weight: bold;/*字体粗细*/
				/* letter-spacing: 10px;  字符之间的间距 (适用于中文)*/
				/*line-height: 50px;行高*/
				text-indent:2em;/*段落首行缩进    em ==*/
			}
			
			#pId{
				word-spacing: 20px; /*单词之间的间隔*/
				letter-spacing/*可以指定字符间距*/
			}
			
			a{
				text-decoration: none;
			}

     <p class="p1">
			祖先标签上的样式，也会被他的后代标签所继承, 利用继承，可以将一些基本的样式设置给祖先标签，
			这样所有的后代标签将会自动继承这些样式。祖先标签上的样式，也会被他的后代标签所继承, 利用继承，可以将一些基本的样式设置给祖先标签，
			这样所有的后代标签将会自动继承这些样式。
		</p>
		<p id="pId">
			 hello world
		</p>
		
		<a href="">百度</a>
		<a href="">百度</a>
		<a href="">百度</a>
		<a href="">百度</a>
		<a href="">百度</a>
		

2.背景

p{
			width: 800px;    
			height: 600px;
			
			background-color: green;/*背景颜色*/
			background-image: url(img/bg.jpg);/*背景图片的优先级 高于 背景颜色,背景图片不占标签空间*/
			background-repeat: no-repeat; /*设置背景重复 repeat-x, repeat-y*/
			/* background-size: 800px 600px; */
			background-size: 400px;/*背景尺寸*/
			background-position:center;/*背景位置*/
		}

3.CSS列表

 .u1>li{
/*list-style-type:none;     设置列表项标志的类型
list-style   简写属性
list-style-image: url(img/img.jpg);    将图像设置为列表项标志
list-style-position: inside;控制列表项图标位置*/
/* 简写方式  值的顺序 无序的 */
list-style: outside none url(img/img.jpg) ;
text-align: center;
}

<ul class="u1">
		<li>列表项</li>
		<li>列表项</li>
		<li>列表项</li>
	</ul>
	
	<ul>
		<li>列表项</li>
		<li>列表项</li>
		<li>列表项</li>
	</ul>

4.CSS伪类

	 /*  伪类:就是css为处在不同状态(例如鼠标移动到标签上,鼠标点击标签)下的标签设置样式*/
        /* 表示未访问的连接地址 */
			a:link{      /*表示普通的链接（没访问过的链接）*/
				color: #008000;
				text-decoration: none;
			}
			/* 访问过的状态 */
			a:visited{           
			   /*表示访问过的链接 
			浏览器是通过历史记录来判断一个链接是否访问过
		使用visited伪类只能设置字体的颜色  */
				color: #FF0000;
			}
			
			/* 伪类表示鼠标移动到标签上 */
			a:hover{
				color: blue;
				text-decoration: underline;
			}
			/* 鼠标点击状态 */
			a:active{
				color: #00FFFF;
			}
     p:hover{
				 color: white;
				 background-color: #00FFFF;
			 }
			 
			 p:active{
				 background-color: #FF0000;
			 }
			 
			 .btn:hover{
				 background-color: #00FFFF;
			 }
			 .btn:active{
				 background-color: #0000FF;
			 }
注意：:visited放在:hover之前
     :active 必须被置于 :hover 之后，才是有效的
           :hover和:active也可以为其他标签设置
			 
			 /* 针对于可以输入内容的标签 ，向拥有键盘输入焦点的标签添加样式*/
			 .inp:focus{
				 background-color: #FFA500;
			 }
	
		 <p>
			 这是一个段落
		 </p>
		 
		 <input type="button" value="保存" class="btn"/>
		 
		 <input type="text" class="inp"/>
		 <input type="text" class="inp"/>

5.透明

定义透明效果的属性是 opacity。
opacity 属性设置标签的不透明级别 值为1。
规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）。

6.块级，行级，行级块标签

什么是块级标签？            
          块级标签：无论内容多少 都会***独自占据一行***的
          			可以设置宽高
          			默认宽高： 与父级标签一致
          			 			高：0/与内容一致
                       例如<p>、<h1>、<ul>、<ol>、<hr/>等。
什么是行级标签？
           行级标签：只占自身大小的标签，不会占一行。
           例如<font>、<b>、<i>、<a>等。
什么是行级块标签？
			可以设置宽高，不独占一行
           例如 <input/> <img>等

注意： 一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签。
a可以包含任何标签，除去a本身；
p标签不可以包含任何的块标签。

7.Display

/*通过display样式可以修改标签的类型*/
block ：设置标签为块标签
inline :设置标签为行级标签
inline-block :设置标签为行级块标签
none ：隐藏标签（标签在页面中完全消失）

8.div和span

div标签
div是块级标签，可以放置任何标签。
div没有任何附加功能，给了什么属性就能变成什么样。
div主要的作用是被用来布局网页。

span标签
span是行级标签
span 没有任何附加功能，给了什么属性就能变成什么样。
span标签被用来选中文档中的文字。

9.盒子模型（box-model）

有四个模块
1、内容区

/*斜体样式标签 中的文本内容，子标签都是存在于内容区中的。 
如果没有为标签设置内边距和边框，则内容区大小 默认和盒子大小是一致的。 
  通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。 
  width和height属性只适用于块标签(包含行级块)。*/

2.内边距 padding

内边距：标签内容区与边框以内的空间，会影响整个盒子的大小。
     padding-left:2px;   左内边距
     padding-right:2px;  右内边距
     padding:10px 2px;    上下、左右内边距
     padding:1px 2px 6px 5px； 上、右、下、左四个方向的内边距。

3.边框
solid 、 dotted 、dashed、double 、groove
实线、点线、 虚线 、双线、槽线

border-radius :四个角为圆角边框
border-top-left-radius: 左上为圆角边框
可以在标签周围创建边框，边框是标签可见框的最外部。 
可以使用border属性来设置盒子的边框： 
 border:1px blue solid;   
    

4.外边距 margin

外边距是标签边框与周围标签相距的空间。 
   margin可以为负值。
   margin的值可以为auto，外边距为最大值，左右外边距设置为auto，左右外边距设置相等.
  垂直为auto时值为0，
  水平居中 也可以写为margin:0 auto。
外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子的实际控制范围。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.c1{
				width: 100px;
				height: 100px;
			}
			.c1{
				padding: 20px 10px 10px 30px;
				margin: 100px;
			     border:5px blue solid;
				 border-radius:10px;
			}
			.c2{
				padding: 15px;
			}
				
			.text_some{
				width: 500px;
				height: 30px;
				display: block;
				font-size: 20px;
				font-family: "arial black";
				border: 1px blueviolet solid;
				color: gray;
				border-radius: 10px;
				
			}
			.text_some:hover{
				border: 1px darkred solid;
			}
		</style>
	</head>
	<body>
		<div class="c2">
			abcd
		</div>
		
		
		<img src="img/4N9Q4EO$EB$9CNP%5BLQAL%258J.png" class="c1" />
		
		
		<input type="text" class="text_some"  />
	</body>
</html>