边框

边框相关属性
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-900font-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

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

css样式lighter的意思,css常用的属性
CSS------属性值篇 display: none | block | inline(默认值) | inline-block(css2新增) | inherit none :此元素不会再显示 {注 ...
CSS常用样式属性有哪些？代码怎么写?
CSS常用样式属性有哪些?CSS样式属性有两种分别是局常用样式属性和文本常用样式属性,CSS的作用是美化HTML网页和控制页面布局,我们需要掌握这两种常用的样式属性来美化页面.一套教程,带你轻松掌握H ...
python全栈开发第二天（CSS简介，CSS常用的属性）
第二天 CSS简介什么是css css三种引入方式 css选择器引入方式的css优先级三种基本选择器的优先级关系选择器 css常用的属性 css颜色的表示方法背景属性字体属性边框属性内 ...
css里td自带什么属性,关于css标签的属性（text文本属性，背景background，表格标签table，td标签属性）...
简介这篇文章主要介绍了关于css标签的属性(text文本属性,背景background,表格标签table,td标签属性)以及相关的经验技巧,文章约1129字,浏览量216,点赞数4,值得参考! te ...
CSS常用背景属性（背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、背景属性复合写法）
本博文记录CSS中比较常用的背景属性,包括背景颜色:background-color.背景图片:background-image.背景平铺:background-repeat.背景位置:backgro ...
php css属性,php学习之css常用的属性（三）
1.文字属性属性名描述属性值 font-size 文字大小像素(px).em(倍数).百分百(%) font-family 字体类型宋体.微软雅黑.黑体等值可以是一个也可以是多个,用英文逗 ...
CSS - 常用样式属性（字体、文本、背景相关、鼠标）
HTML/CSS常用标签属性及样式
1.常用布局样式: 参数描述 width 宽度 height 高度 background 背景颜色 border 边框 padding 内边距 margin 外边距 float 浮动 clear 清 ...
CSS常用样式属性锦集
以下快捷键针对webstorm,idea也可以用一.文字属性 1.文字样式属性格式:font-style: italic; 取值:normal:正常显示 italic:斜体快捷键: fs fon ...

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

文章目录

边框

列表

背景

文本

显示省略号

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

最新文章

热门文章