整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          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/


          主站蜘蛛池模板: 日韩精品一区二区三区在线观看| 亚洲av无码不卡一区二区三区| 亚洲av日韩综合一区在线观看| 无码丰满熟妇一区二区| 久久久精品人妻一区亚美研究所| 无码人妻一区二区三区一| 精品在线视频一区| 在线视频亚洲一区| 亚洲日韩精品国产一区二区三区| 亚洲一区AV无码少妇电影☆| 国产婷婷一区二区三区| 精品一区二区三区视频在线观看| 色一情一乱一区二区三区啪啪高| 海角国精产品一区一区三区糖心 | 在线视频国产一区| 国产经典一区二区三区蜜芽| 青娱乐国产官网极品一区| 国产精品一区二区av| 国精产品999一区二区三区有限| 久久精品免费一区二区| 无码精品人妻一区二区三区免费看 | 国产内射999视频一区| 无码一区二区波多野结衣播放搜索| 国产亚洲一区二区三区在线不卡 | 亚洲国产一区二区a毛片| 久久精品国产亚洲一区二区| 国产乱码精品一区二区三区中| 国产一区二区精品久久91| 丰满岳乱妇一区二区三区| 国产成人AV区一区二区三| 日本一区午夜艳熟免费| 亚洲一区二区三区高清在线观看| 538国产精品一区二区在线| 久久精品道一区二区三区| 亚洲熟妇av一区二区三区| 97人妻无码一区二区精品免费 | 蜜桃传媒视频麻豆第一区| 亚洲国产高清在线精品一区| 国产一区中文字幕在线观看| 色窝窝无码一区二区三区色欲 | 国产一区在线mmai|