随笔分类 -  CSS

每天CSS学习之text-indent
摘要：text-indent是CSS的一个属性，其作用是定义首行文本的缩进。其值如下： 1、length：首行缩进固定的长度。默认值为0。 设置 首行缩进2em的长度。 结果： 2、百分比：定义首行文本基于父元素宽度的百分比的缩进。如下所示： <div style="width:160px"> <div 阅读全文
posted @ 2017-08-21 23:05 F风 阅读(563) 评论(0) 推荐(0)
每天CSS学习之text-decoration
摘要：text-decoration是CSS的一个属性，其作用是给文本装饰上划线、中间线、下划线或不装饰。其值如下所示： 1、none：不装饰任何线。该值是默认值。如下所示： 结果： 2、overline：给文本装饰上划线。如下所示： 结果： 3、line-through：给文本装饰一条中间线，即从中间穿 阅读全文
posted @ 2017-08-21 22:46 F风 阅读(647) 评论(0) 推荐(0)
每天CSS学习之text-align
摘要：text-align是CSS的一个属性，其作用是设置文本的对齐方式。其值如下所示： 1、left：文本左对齐。如下所示： 结果： 2、right：文本右对齐。如下所示： 结果： 3、center：文本居中对齐。如下所示： 结果： 4、justify：设置文本两端对齐。如下所示： 结果： 阅读全文
posted @ 2017-08-21 22:37 F风 阅读(524) 评论(0) 推荐(0)
每天CSS学习之line-height
摘要：line-height是CSS的一个属性，其作用是设置行高。其有以下几种值： 1、normal：自动设置合理的行间距。该值是默认值。如下示例： 结果： 2、number：即数字。该数字会与当前字体尺寸相乘来设置行间距。如下示例： 结果： 3、length：即带单位的长度，设置固定的行间距。如下示例： 阅读全文
posted @ 2017-08-21 22:20 F风 阅读(210) 评论(0) 推荐(0)
每天CSS学习之letter-spacing
摘要：letter-spacing是CSS的一个属性，其作用是设置字符之间的距离。letter意为字符。 1、normal：规定字符之间没有额外的空间。该值是默认值。如下示例： 结果： 2、length：定义字符之间的距离，可以为负值。如下示例： 当为正值时，如letter-spacing:1em： 结果 阅读全文
posted @ 2017-08-21 22:11 F风 阅读(745) 评论(0) 推荐(0)
每天CSS学习之direction
摘要：direction是CSS2的属性，它的作用是规定文字书写的方向。 1、ltr：从左到右，即left to right。该值为默认值。如下所示： div{ border:1px solid red; direction:ltr; } 2、rtl：从右到左，即right to left。如下所示： d 阅读全文
posted @ 2017-08-21 22:04 F风 阅读(164) 评论(0) 推荐(0)
每天CSS学习之color
摘要：color意为颜色，其作用是设置字体的颜色。 设置颜色的方式有以下几种： 1、使用颜色单词，如：red； 2、使用十六进制，如：#FFFFFF； 3、使用rgb(255,0,0); 让我们来实践一下，将字体的颜色设置为红色： 结果如下： 阅读全文
posted @ 2017-08-21 21:56 F风 阅读(216) 评论(0) 推荐(0)
每天CSS学习之caption-side
摘要：caption-side是CSS2的属性，其作用是规定标题的位置在表格的上面还是下面。 1、top:默认值，将表格标题定位在表格之上。如下例子： 2、bottom：将标题定位在表格之下。如下例子： 阅读全文
posted @ 2017-08-21 21:50 F风 阅读(322) 评论(0) 推荐(0)
每天CSS学习之border-spacing
摘要：border-spacing是CSS2的一个属性。其作用是规定表格的相邻单元格边框之间的距离。如果表格的border-collapse属性值为collapse时，border-spacing设置无效。 border-spacing:h-length v-length; h-length即单元格之间的 阅读全文
posted @ 2017-08-20 23:15 F风 阅读(1562) 评论(0) 推荐(0)
每天CSS学习之border-collapse
摘要：border-collapse是CSS2的一个属性，其作用是折叠表格(table)的边框。collapse翻译过来又折叠的意思。 border-collapse有三个值： collapse:将表格和单元格的边框折叠； separate:分隔表格和单元格的边框，这是默认值； inherit:从父元素继 阅读全文
posted @ 2017-08-20 23:07 F风 阅读(4238) 评论(0) 推荐(0)
每天CSS学习之transform-origin
摘要：在上一篇中，我们学习了如何使用transform来进行2D变形。今天要讲述的transform-origin与这个变形有关。 origin翻译过来的意思是原点、开端。transform-origin寓意即变形的起点。没错，它的作用就是设置变形的起点。 transform-orgin:x-axis y 阅读全文
posted @ 2017-08-20 22:03 F风 阅读(483) 评论(0) 推荐(0)
每天CSS学习之transform
摘要：transform是CSS3的一个属性，其作用是用来进行2D或3D变换。 一、2D变换 1. translate(x-offset , y-offset) translate的作用就是用作位置的移动。x-offset是距离left的位置，y-offset是距离top的位置。该方法的位移不会脱离文档流 阅读全文
posted @ 2017-08-15 23:27 F风 阅读(306) 评论(0) 推荐(0)
每天CSS学习之white-space
摘要：white-space是CSS的属性，其作用是规定文本不进行换行。 white-space有以下几个值： 1、normal：该值为默认值，段落前后的空白会被浏览器忽略。如下所示： 我们在This的前面加了许多空白，在Action的后面也加了许多空白。但是结果如下： 2、pre：段落前后的空白会被浏览 阅读全文
posted @ 2017-08-14 22:28 F风 阅读(400) 评论(0) 推荐(0)
每天CSS学习之text-overflow
摘要：text-overflow是CSS3的一个属性，其作用是当文本溢出包含它的元素时，应该裁剪还是将多余的字符用省略号来表示。 该属性一般和overflow:hidden属性一起使用。 text-overflow: clip|ellipsis|string 1、clip：修剪文本。即将溢出的文本裁剪掉。 阅读全文
posted @ 2017-08-14 22:00 F风 阅读(461) 评论(0) 推荐(0)
每天CSS学习之text-shadow
摘要：今天学习的是CSS3的一个属性text-shadow。该属性能映射出文字的阴影。 text-shadow一共就四个属性： text-shadow: h-shadow v-shadow [blur] [color] text-shadow: x-offset y-offset [阴影模糊半径] [阴影 阅读全文
posted @ 2017-08-14 21:41 F风 阅读(189) 评论(0) 推荐(0)
每天CSS学习之top/left/right/bottom
摘要：top：值域是数值或百分比，正负都可以。该值表示 距离顶部有多少像素。例如top:10px；即距离顶部10个像素。 left/right/bottom与top如出一辙，只是方向不一样而已。 这些属性一般配合position一起使用。只有当position的值为relative、absolute或fi 阅读全文
posted @ 2017-08-11 23:38 F风 阅读(830) 评论(0) 推荐(0)
每天CSS学习之border-radius
摘要：css3的border-radius属性，我们用之来画圆角边框。 1、border-radius:none;//表示不用圆角边框，边框会变成方形。 2、border-radius:水平方向{1,4}[/竖直方向{1,4}]; 第二个表示什么意思呢? 水平方向代表水平方向的半径，竖直方向代表竖直方向的 阅读全文
posted @ 2017-08-10 23:00 F风 阅读(300) 评论(0) 推荐(0)
每天CSS学习之!important
摘要：通过在CSS属性后面跟上!important参数，就会让该属性的优先级变为最高，不管是在css文件，还是内联style中，就属后面跟了!important这个小弟的属性的优先级最高。 让我们来测试一下，例如 如果main类样式的color属性后面没有跟!important，那么按照优先级来说，下面的 阅读全文
posted @ 2017-08-10 21:56 F风 阅读(146) 评论(0) 推荐(0)