標
表格可以說是網頁必備的元素之一,但是原生的表格樣式都是很丑,列如表格加入邊框的默認情況下,單元格與單元格之間有一定的空隙;設置單元格邊框間距等等,都是可以通過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小時內與您取得聯系。