css常用的属性(边框三角形，文本省略号)

边框

边框相关属性
border-width 边框宽度  属性值：length（数值+单位）例如 width:10px  
border-style 边框样式  属性值：
                          常用   ：solid 实线 dashed 虚线 double 双线 dotted 点线
                          不常用 ：groove 3D凹槽边框  ridge 3D垄状边框 inset  3Dinset outset  3Doutset边框边框 
border-color 边框颜色  属性值：英文单词颜色 十六进制颜色  rgb颜色 

针对border-width 、border-style 和 border-color 属性可以书写 一到四个属性值：
		一个属性值：四个方向
		两个属性值：上下  左右
		三个属性值：上  左右  下
		四个属性值：上  右  下  左

border 	规定元素的边框的属性的简写---边框的简写属性---规定四个方向的边框简写
		border: 宽度  样式  颜色;
		简写时属性值得顺序不分先后 例如 border：1px solid red 1像素红色的实线
		
可以单独规定元素的一个方向的边框--通过简写：
		border-left: 宽度 样式 颜色;
		border-right: 宽度 样式 颜色;
		border-top: 宽度 样式 颜色;
		border-bottom: 宽度 样式 颜色;		


单独规定一个方向的边框 宽度 或 颜色 或 样式：
		border-left-width: 属性值;
		border-left-style: 属性值;
		border-left-color: 属性值;
		border-right-width: 属性值;
		border-right-style: 属性值;
		border-right-color: 属性值;
		border-top-width: 属性值;
		border-top-style: 属性值;
		border-top-color: 属性值;
		border-bottom-width: 属性值;
		border-bottom-style: 属性值;
		border-bottom-color: 属性值;	
		
				

通过边框可以实现 三角形 或 梯形 等 形状 的效果:下面我们就实现下吧

首先我们看下正常的border 
.box {
		background: #ddd;
		width: 100px;
		height: 100px;
		border-top: 20px solid yellow;
		border-right: 20px solid red;
		border-bottom: 20px solid black;
		border-left: 20px solid blue;
        }
<div class="box"></div>

当元素的宽高减小为0时，我们就会发现一个很好玩的现象

这个时候我们可以通过设置三条边的颜色为透明，三角形就这样诞生啦

  .box {
		/* background: #ddd; */
		width: 0;
		height: 0;
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent;
		border-left: 20px solid blue;
      }

列表

列表可以分为有序和无序列表
相关属性
	list-style-type 	规定列表符号的显示类型
						none 去掉列表符号不显示
						
	list-style-image 	规定图片作为列表符号显示
						url(图片路径)
						
	list-style-position 	规定列表符号的显示位置
							outside 默认值，外面      inside 里面
	
	list-style  规定列表属性的简写
	记住：
	list-style: none;   ===   list-style-type: none;
	
其实在实际的开发过程中用到的就是 list-style：none 像列表符号我们有专门的图片去通过定位去放到指定的位置上

背景

背景相关属性
	background-color 	规定元素的背景颜色
						属性值：	transparent 默认值，透明色
						英文单词颜色
						十六进制颜色
						rgb颜色
						
	background-image 	规定图片作为元素的背景显示--背景图
						属性值：	url(引入背景图的路径及全称)
						背景图片的显示原则：
						元素背景区域的大小 等于 图片大小，背景图片正好显示在元素中
						元素背景区域的大小 大于 图片大小，背景图片将默认平铺，直至铺满元素
						元素背景区域的大小 小于 图片大小，只显示元素范围以内的背景图
						网页上有两种图片形式：插入图片、背景图；
						插入图片：属于网页内容，也就是结构。<img src=""/>
						背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等
						
	background-repeat 	规定背景图片的平铺方式
						属性值：	repeat 默认值，平铺显示 			repeat-x 横向平铺显示
						repeat-y 纵向平铺显示 			no-repeat 不平铺


	background-position 	规定背景图片的显示位置
							默认值：left top === 0px 0px === 0% 0%
							value1(水平位置)：left   center   right   length(数值+单位)
							%(根据元素背景区域的宽度 减去 背景图的宽度 的差值 计算的百分比值)
							value2(垂直位置)：top   center   bottom   length(数值+单位)
							%(根据元素背景区域的高度 减去 背景图的高度 的差值 计算的百分比值)
							说明：
							使用length(数值+单位)规定背景图片的位置
							水平上是规定 背景图片的左边 距离 元素背景区域的左边 的距离，正值向右，负值向左
							垂直上是规定 背景图片的上边 距离 元素背景区域的上边 的距离，正值向下，负值向上
							使用%百分比值规定背景图片的位置
							
	background-attachment 	规定背景图片的状态
							属性值：
							scroll 	默认值，滚动状态
							背景图片位置设定是根据元素的左边和上边规定的
							fixed 	固定状态
							背景图片位置设定是根据浏览器显示窗口的左边和上边规定的
							
 背景属性的简写
		background: 颜色 url() 平铺方式 背景图状态 水平位置 垂直位置;
		例如 background：url() no-repeat fixed 10px 10px/100px 100px
		                 图片地址 不平铺 固定 向下 向右10px 背景宽高为100px
			简写时，属性值的顺序不分先后，但是背景图位置，会解析 前面的为水平位置，后面的为垂直位置
			简写时，某个属性值取默认值时，可以省略不写，会自动按照默认值执行
			
 多个背景图设置
		可以通过逗号分隔的方式给一个元素设置多张背景图
		但是背景颜色只能规定一个
		如果多张背景图的位置发生重合，则写在前面的背景图显示在上面，写在后面的背景图显示在下面
		多张背景图书写是，背景颜色应规定在最后一个背景图的简写位置上
							

文本

文本相关属性
	color 	规定元素内文本的颜色
			属性值：英文单词颜色    十六进制颜色    rgb颜色
			
	font-size 	规定元素内文字的大小
				属性值：length(数值+单位)
				
	font-family 规定元素内文本的字体类型
	
	font-weight 规定元素内文本是否加粗显示
		        属性值：normal 默认值，不加粗  bold 加粗 === bolder 更粗
				100-500                       600-900
				
	font-style 规定元素内文本是否倾斜显示
		       属性值: 	normal 默认值，不倾斜 italic 倾斜 === oblique 倾斜度大
		       
    line-height 行高：文字在一行内占据高度
    
文本属性的简写：
		font: 是否倾斜 是否加粗 文字大小/行高 "字体";
			简写时，属性值的顺序不分先后，但是 文字大小 和 行高 的写法 不可改变
			简写时，某个值取默认值时，可以省略不写
			定义简写绝对不能省略 文字大小 和 "字体" ，必须要写的
			即使不需要定义字体，也至少要写 双引号 ""
			常用的 font:24px/32px ""; 文字大小24px 行高32px 

	text-align 	规定元素内文本的水平对齐方式
				属性值：	left 默认值，左对齐
							centetr 居中对齐
							right 右对齐
							justify 分散对齐(针对占满整行的文本有效)
				
	text-indent 规定元素内文本的 首行缩进
				属性值：	length(数值+单位)，可以规定正负值
							正值向后缩进，负值向前突出
							注：此属性仅针对元素内第一行文本有效
	
	text-decoration 规定元素内文本的 修饰
					属性值：	none 没有修饰
								overline 添加上划线
								underline 添加下划线
								line-through 添加删除线
	
	letter-spacing 	规定调整字符(汉字，字母等)的间距
					属性值：length(数值+单位)，可以规定正负值
							默认值为0，表示字符之间没有间距
							正值字符间距放大，负值字符间距缩小
	
	word-spacing 	规定调整单词的间距
					属性值：length(数值+单位)，可以规定正负值
					默认值为0，表示单词之间保留一个空格的间距
					正值单词间距放大，负值单词间距缩小
	
	text-transform 	规定元素内单词的大小写
	                属性值：	none 默认值，按照书写的大小写显示
	
	capitalize 规定单词的首字母大写显示
	uppercase 规定单词全部大写显示
	lowercase 规定单词全部小写显示

此外在补充二个

white-space 	规定浏览器如何处理元素内的空白(空格和回车换行)
	normal 	默认值，浏览器将元素内的空白忽略，文本在元素内正常换行显示
	pre 	浏览器将元素内的空白保留，强制文本在一行显示
	nowrap 	浏览器将元素内的空白忽略，强制文本在一行显示
	pre-wrap 	浏览器将元素内的空白保留，文本在元素内正常换行显示
	pre-line 	浏览器将 空格的空白忽略，将换行的空白保留，本在元素内正常换行显示


text-overflow 	规定元素内单行文本溢出元素时是否显示省略号
	clip 	针对当行文本溢出的内容进行裁剪，废物，没有
	ellipsis 	显示省略号

显示省略号

	#box{
		background: red;
		font: 20px/50px "";
		width: 500px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	<div id="box">
				元素内正常写文本能让这个文本单行显示而且溢出在元素之外吗？
	</div>

多行文本让最后一行显示省略号

	#box {
			background: red;
			font: 20px/50px "";
			width: 500px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
	}

总结:今天我们主要介绍下css常用的属性以及用这些属性写的小案例 下篇文档我们主要讲解下浮动和内外边距



如果大家有什么不理解的欢迎大家前来讨论    联系方式：zhang_chao96@163.com