标
表格可以说是网页必备的元素之一,但是原生的表格样式都是很丑,列如表格加入边框的默认情况下,单元格与单元格之间有一定的空隙;设置单元格边框间距等等,都是可以通过css来设置自己的默认样式
默认情况下,表格有边框的情况下,内部看似有一层填充物,其实是表格的外边框和内部单元格的间距。
这层间距是可以通过表格的标签属性进行设置,让它看起来像是合并了一样,但是这样的合并并不完美,会得到一个很粗的边框。
理想中的边框合并,应该达到exelce表格那样,是一个细线表格。Css专门有个属性是为了表格边框合并服务的。
语法:border-collapse:属性值
属性值
会发现,通过css控制合并和通过标签属性合并的效果都不一样,通过css控制的效果跟exelce表格一模一样,属于细线表格。
对比图
如果想自己设置表格边框的间距,一样是可以通过css来控制。
语法:border-spacing:像素值;
这个属性可以设置两个值。指定了1个像素值时,这个值将作用于横向和纵向上的间距;当指定了2个length值时,第1个作用于横向间距,第2个作用于纵向间距。
两个值
边框被拉大
单元格之间的距离也是一样的。
表格的标题不一定都是设置在表格的上方,也有可能是设置在下方。
可以使用css来定义表格标题的位置
语法:caption-side:属性值;
属性值
这样就可以得到一个倒置标题的表格
标题倒置
从事web前端开发的你,写移动端项目时,发现没移动端css里面写了1px, 实际看起来比1px粗1px边框问题,就是说你给border的css写个1px,但在手机上却变粗了显示成2px,因为自从retina屏以来,不同的手机又不同的像素密度,css中的1px并不等于移动设备中的1px,所以会出现移动端css1px边框兼容性问题。
移动端css1px边框兼容性解决方法:在你的移动端项目中引入一个border.css就可以很好的解决这个问题了,我们来看下它的css样式:
@charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft { position: relative; } .border::before, .border-top::before, .border-right::before, .border-bottom::before, .border-left::before, .border-topbottom::before, .border-topbottom::after, .border-rightleft::before, .border-rightleft::after, .border-topleft::before, .border-topleft::after, .border-rightbottom::before, .border-rightbottom::after, .border-topright::before, .border-topright::after, .border-bottomleft::before, .border-bottomleft::after { content: "\0020"; overflow: hidden; position: absolute; } /* border * 因,边框是由伪元素区域遮盖在父级 * 故,子级若有交互,需要对子级设置 * 定位 及 z轴 */ .border::before { box-sizing: border-box; top: 0; left: 0; height: 100%; width: 100%; border: 1px solid #eaeaea; transform-origin: 0 0; } .border-top::before, .border-bottom::before, .border-topbottom::before, .border-topbottom::after, .border-topleft::before, .border-rightbottom::after, .border-topright::before, .border-bottomleft::before { left: 0; width: 100%; height: 1px; } .border-right::before, .border-left::before, .border-rightleft::before, .border-rightleft::after, .border-topleft::after, .border-rightbottom::before, .border-topright::after, .border-bottomleft::after { top: 0; width: 1px; height: 100%; } .border-top::before, .border-topbottom::before, .border-topleft::before, .border-topright::before { border-top: 1px solid #eaeaea; transform-origin: 0 0; } .border-right::before, .border-rightbottom::before, .border-rightleft::before, .border-topright::after { border-right: 1px solid #eaeaea; transform-origin: 100% 0; } .border-bottom::before, .border-topbottom::after, .border-rightbottom::after, .border-bottomleft::before { border-bottom: 1px solid #eaeaea; transform-origin: 0 100%; } .border-left::before, .border-topleft::after, .border-rightleft::after, .border-bottomleft::after { border-left: 1px solid #eaeaea; transform-origin: 0 0; } .border-top::before, .border-topbottom::before, .border-topleft::before, .border-topright::before { top: 0; } .border-right::before, .border-rightleft::after, .border-rightbottom::before, .border-topright::after { right: 0; } .border-bottom::before, .border-topbottom::after, .border-rightbottom::after, .border-bottomleft::after { bottom: 0; } .border-left::before, .border-rightleft::before, .border-topleft::after, .border-bottomleft::before { left: 0; } @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) { /* 默认值,无需重置 */ } @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) { .border::before { width: 200%; height: 200%; transform: scale(.5); } .border-top::before, .border-bottom::before, .border-topbottom::before, .border-topbottom::after, .border-topleft::before, .border-rightbottom::after, .border-topright::before, .border-bottomleft::before { transform: scaleY(.5); } .border-right::before, .border-left::before, .border-rightleft::before, .border-rightleft::after, .border-topleft::after, .border-rightbottom::before, .border-topright::after, .border-bottomleft::after { transform: scaleX(.5); } } @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) { .border::before { width: 300%; height: 300%; transform: scale(.33333); } .border-top::before, .border-bottom::before, .border-topbottom::before, .border-topbottom::after, .border-topleft::before, .border-rightbottom::after, .border-topright::before, .border-bottomleft::before { transform: scaleY(.33333); } .border-right::before, .border-left::before, .border-rightleft::before, .border-rightleft::after, .border-topleft::after, .border-rightbottom::before, .border-topright::after, .border-bottomleft::after { transform: scaleX(.33333); } }
border.css下载地址: http://tangjiusheng.com/d/file/liulanqijianrongxing/2019-06-21/border.css
原文地址:http://tangjiusheng.com/liulanqijianrongxing/174.html
篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈字体设置Font&边框Border的基础用法。
<div style='font-family: sans-serif normal'></div>
可用字体:
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier
<div style='font-style:normal'></div>
文本倾斜:
normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示
<div style='font-variant:small-caps'></div>
normal 显示标准字体。
small-caps 显示小型大写字母的字体。
<div style='font-weight:normal'></div>
normal 标准的字符
bold 粗体字符
bolder 更粗的字符
lighter 更细的字符
也可以使用数字表示,范围为100~900
<div style='font-size:60px'></div>
smaller 变小
larger 变大
length 固定值
而且还支持百分比
首先说一下边框风格,它的风格比较多,常用的一般是实线为主:
<div style='border-style:none'></div>
hidden 隐藏边框
dotted 点状边框
dashed 虚线边框
solid 实线边框
double 双线边框
groove 3D凹槽边框
ridge 3D垄状边框
inset 3D inset边框
outset 3D outset边框
边框也有四面,所以也会有上下左右
所以有时候为了更精确定位并修改样式可以使用:
border-top-style 上边框样式
border-right-style 右边框样式
border-bottom-style 下边框样式
border-left-style 左边框样式
先定义边框的宽度 风格和颜色,然后定义边框的其它属性。
<div style='border-radius:25px;'></div>
2).边框阴影
<div style='box-shadow:1px 2px 2px 2px red'></div>
参数含义:
边框各个方向的大小和颜色
3).边框图片
<div style='border-image:url(1.png) 30 30 10 round'></div>
参数含义:
边框图片的路径
图片边框向内偏移
图片边框的宽度
边框图像区域超出边框的量
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
这篇文章主要介绍了CSS样式更改篇中的字体设置Font&边框Border设置,希望让大家对CSS选择器有个简单的认识和了解。
****看完本文有收获?请转发分享给更多的人****
IT共享之家
想要学习更多,请前往Python爬虫与数据挖掘专用网站:http://pdcfighting.com/
*请认真填写需求信息,我们会在24小时内与您取得联系。