整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

css基础篇11-表格样式

  • 表格边框合并
  • 表格边框的间距设置
  • 表格标题位置的设置

表格可以说是网页必备的元素之一,但是原生的表格样式都是很丑,列如表格加入边框的默认情况下,单元格与单元格之间有一定的空隙;设置单元格边框间距等等,都是可以通过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的基础用法。

1.字体设置Font

1).字体系列

<div style='font-family: sans-serif normal'></div>
可用字体:
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier

2).字体风格

<div style='font-style:normal'></div>
文本倾斜:
normal   文本正常显示
italic   文本斜体显示
oblique  文本倾斜显示

3).字体变形

<div style='font-variant:small-caps'></div>
normal          显示标准字体。
small-caps      显示小型大写字母的字体。

4).字体加粗

<div style='font-weight:normal'></div>
normal    标准的字符
bold      粗体字符
bolder    更粗的字符
lighter   更细的字符
也可以使用数字表示,范围为100~900

5).字体大小

<div style='font-size:60px'></div>
smaller 变小
larger  变大
length  固定值
而且还支持百分比

2.边框Border

首先说一下边框风格,它的风格比较多,常用的一般是实线为主:

<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    左边框样式

先定义边框的宽度 风格和颜色,然后定义边框的其它属性。

1).边框形状

<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/