css樣式大全

来源:https://www.cnblogs.com/htldqys2008/archive/2019/07/18/11210259.html
-Advertisement-
Play Games

字體屬性:(font) 大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到,只要用數值就可以,單位:PX、PD 樣式 {font-style: oblique;}(偏斜體) italic;(斜體) normal;(正常) 行高 {line-heigh ...


字體屬性:(font)

大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到,只要用數值就可以,單位:PX、PD

樣式 {font-style: oblique;}(偏斜體) italic;(斜體) normal;(正常)

行高 {line-height: normal;}(正常) 單位:PX、PD、EM

粗細 {font-weight: bold;}(粗體) lighter;(細體) normal;(正常)

變體 {font-variant: small-caps;}(小型大寫字母) normal;(正常)

大小寫 {text-transform: capitalize;}(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)

修飾 {text-decoration: underline;}(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)

常用字體: (font-family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景屬性: (background)

色彩 {}

圖片 {background-image: url();}

重覆 {background-repeat: no-repeat;}

滾動 {background-attachment: fixed;}(固定) scroll;(滾動)

位置 {background-position: left;}(水平) top(垂直);

簡寫方法 {background:#000 url(..) repeat fixed left top;} /*簡寫·這個在閱讀代碼中經常出現,要認真的研究*/

區塊屬性: (Block) /*這個屬性第一次認識,要多多研究*/

字間距 {letter-spacing: normal;} 數值 /*這個屬性似乎有用,多實踐下*/

對齊 {text-align: justify;}(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)

縮進 {text-indent: 數值px;}

垂直對齊 {vertical-align: baseline;}(基線) sub;(下標) super;(下標) top; text-top; middle; bottom; text-bottom;

詞間距word-spacing: normal; 數值

空格white-space: pre;(保留) nowrap;(不換行)

顯示 {display:block;}(塊) inline;(內嵌) list-item;(列表項) run-in;(追加部分) compact;(緊湊) marker;(標記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標題) /*display 屬性的瞭解很模糊*/

方框屬性: (Box)

width:; height:; float:; clear:both; margin:; padding:; 順序:上右下左

邊框屬性: (Border)

border-style: dotted;(點線) dashed;(虛線) solid; double;(雙線) groove;(槽線) ridge;(脊狀) inset;(凹陷) outset;

border-width:; 邊框寬度

border-color:#;

簡寫方法border:width style color; /*簡寫*/

列表屬性: (List-style)

類型list-style-type: disc;(圓點) circle;(圓圈) square;(方塊) decimal;(數字) lower-roman;(小羅碼數字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

圖像list-style-image: url(..);

定位屬性: (Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切)

css屬性代碼大全

一 CSS文字屬性:

color : #999999; /*文字顏色*/

font-family : 宋體,sans-serif; /*文字字體*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜體*/

font-variant:small-caps; /*小字體*/

letter-spacing : 1pt; /*字間距離*/

line-height : 200%; /*設置行高*/

font-weight:bold; /*文字粗體*/

vertical-align:sub; /*下標字*/

vertical-align:super; /*上標字*/

text-decoration:line-through; /*加刪除線*/

text-decoration: overline; /*加頂線*/

text-decoration:underline; /*加下劃線*/

text-decoration:none; /*刪除鏈接下劃線*/

text-transform : capitalize; /*首字大寫*/

text-transform : uppercase; /*英文大寫*/

text-transform : lowercase; /*英文小寫*/

text-align:right; /*文字右對齊*/

text-align:left; /*文字左對齊*/

text-align:center; /*文字居中對齊*/

text-align:justify; /*文字分散對齊*/

vertical-align屬性

vertical-align:top; /*垂直向上對齊*/

vertical-align:bottom; /*垂直向下對齊*/

vertical-align:middle; /*垂直居中對齊*/

vertical-align:text-top; /*文字垂直向上對齊*/

vertical-align:text-bottom; /*文字垂直向下對齊*/

二、CSS邊框空白

padding-top:10px; /*上邊框留空白*/

padding-right:10px; /*右邊框留空白*/

padding-bottom:10px; /*下邊框留空白*/

padding-left:10px; /*左邊框留空白

三、CSS符號屬性:

list-style-type:none; /*不編號*/

list-style-type:decimal; /*阿拉伯數字*/

list-style-type:lower-roman; /*小寫羅馬數字*/

list-style-type:upper-roman; /*大寫羅馬數字*/

list-style-type:lower-alpha; /*小寫英文字母*/

list-style-type:upper-alpha; /*大寫英文字母*/

list-style-type:disc; /*實心圓形符號*/

list-style-type:circle; /*空心圓形符號*/

list-style-type:square; /*實心方形符號*/

list-style-image:url(/dot.gif); /*圖片式符號*/

list-style-position: outside; /*凸排*/

list-style-position:inside; /*縮進*/

四、CSS背景樣式:

/*背景顏色*/

background:transparent; /*透視背景*/

background-image : url(/image/bg.gif); /*背景圖片*/

background-attachment : fixed; /*浮水印固定背景*/

background-repeat : repeat; /*重覆排列-網頁預設*/

background-repeat : no-repeat; /*不重覆排列*/

background-repeat : repeat-x; /*在x軸重覆排列*/

background-repeat : repeat-y; /*在y軸重覆排列*/

指定背景位置

background-position : 90% 90%; /*背景圖片x與y軸的位置*/

background-position : top; /*向上對齊*/

background-position : buttom; /*向下對齊*/

background-position : left; /*向左對齊*/

background-position : right; /*向右對齊*/

background-position : center; /*居中對齊*/

五、CSS連接屬性:

a /*所有超鏈接*/

a:link /*超鏈接文字格式*/

a:visited /*瀏覽過的鏈接文字格式*/

a:active /*按下鏈接的格式*/

a:hover /*滑鼠轉到鏈接*/

滑鼠游標樣式:

鏈接手指 CURSOR: hand

十字體 cursor:crosshair

箭頭朝下 cursor:s-resize

十字箭頭 cursor:move

箭頭朝右 cursor:move

加一問號 cursor:help

箭頭朝左 cursor:w-resize

箭頭朝上 cursor:n-resize

箭頭朝右上 cursor:ne-resize

箭頭朝左上 cursor:nw-resize

文字I型 cursor:text

箭頭斜右下 cursor:se-resize

箭頭斜左下 cursor:sw-resize

漏斗 cursor:wait

游標圖案(IE6) p {cursor:url("游標文件名.cur"),text;}

六、CSS框線一覽表:

border-top : 1px solid #6699cc; /*上框線*/

border-bottom : 1px solid #6699cc; /*下框線*/

border-left : 1px solid #6699cc; /*左框線*/

border-right : 1px solid #6699cc; /*右框線*/

以上是建議書寫方式,但也可以使用常規的方式 如下:

border-top-color : #369 /*設置上框線top顏色*/

border-top-width :1px /*設置上框線top寬度*/

border-top-style : solid/*設置上框線top樣式*/

其他框線樣式

solid /*實線框*/

dotted /*虛線框*/

double /*雙線框*/

groove /*立體內凸框*/

ridge /*立體浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS表單運用:

文字方塊

按鈕

覆選框

選擇鈕

多行文字方塊

下拉式菜單 選項1選項2

八、CSS邊界樣式:

margin-top:10px; /*上邊界*/

margin-right:10px; /*右邊界值*/

margin-bottom:10px; /*下邊界值*/

margin-left:10px; /*左邊界值*/

CSS 屬性: 字體樣式(Font Style)

序號 中文說明 標記語法

1 字體樣式 {font:font-style font-variant font-weight font-size font-family}

2 字體類型 {font-family:"字體1","字體2","字體3",...}

3 字體大小 {font-size:數值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字體風格 {font-style:inherit|italic|normal|oblique}

5 字體粗細 {font-weight:100-900|bold|bolder|lighter|normal;}

6 字體顏色 {color:數值;}

7 陰影顏色 {text-shadow:16位色值}

8 字體行高 {line-height:數值|inherit|normal;}

9 字 間 距 {letter-spacing:數值|inherit|normal}

10 單詞間距 {word-spacing:數值|inherit|normal}

11 字體變形 {font-variant:inherit|normal|small-cps }

12 英文轉換 {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 字體變形 {font-size-adjust:inherit|none}

14 字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

文本樣式(Text Style)

序號 中文說明 標記語法

1 行 間 距 {line-height:數值|inherit|normal;}

2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}

3 段首空格 {text-indent:數值|inherit}

4 水平對齊 {text-align:left|right|center|justify}

5 垂直對齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

6 書寫方式 {writing-mode:lr-tb|tb-rl}

背景樣式

序號 中文說明 標記語法

1 背景顏色 { outline: 0px; margin: 0px 0px 16px; padding: 0px; font-family: verdana, Arial, Helvetica, sans-serif; color: rgb(51, 51, 51); line-height: 26px; overflow-x: auto; overflow-wrap: break-word;">2 背景圖片 {background-image: url(URL)|none}

3 背景重覆 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

4 背景固定 {background-attachment:fixed|scroll}

5 背景定位 {background-position:數值|top|bottom|left|right|center}

6 背影樣式 {background:背景顏色|背景圖象|背景重覆|背景附件|背景位置}

框架樣式(Box Style)

序號 中文說明 標記語法

1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}

2 補  白 {padding:padding-top padding-right padding-bottom padding-left}

3 邊框寬度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}  

寬度值: thin|medium|thick|數值

4 邊框顏色 {border-color:數值 數值 數值 數值}  數值:分別代表top、right、bottom、left顏色值

5 邊框風格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6 邊  框 {border:border-width border-style color}

上 邊 框 {border-top:border-top-width border-style color}

右 邊 框 {border-right:border-right-width border-style color}

下 邊 框 {border-bottom:border-bottom-width border-style color}

左 邊 框 {border-left:border-left-width border-style color}

7 寬  度 {width:長度|百分比| auto}

8 高  度 {height:數值|auto}

9 漂  浮 {float:left|right|none}

10 清  除 {clear:none|left|right|both}


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在使用eclipse連接mysql資料庫時報異常: java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES) at com.mysql.jdbc.SQLError.createSQLE ...
  • Dart作為高級語言,支持面向對象的很多特性,並且支持基於mixin的繼承方式,基於mixin的繼承方式是指:一個類可以繼承自多個父類,相當於其他語言里的多繼承。所有的類都有同一個基類Object,這和特性類似於Java語言,Java所有的類也都是繼承自Object,也就是說一切皆對象。 ...
  • 剛招來個Android,幹了半個月辭職了,他走之後,成堆的bug被測了出來,都是這個新人代碼都沒看懂就開始改的一塌糊塗,還給提交了。實在是讓人頭疼,清理了一個月多月才把他半個月寫的bug清理個差不多。實在是得不償失。有了這個前車之鑒,不得不重視新人的崗前培訓,畢竟面試找個來了就能上手的實在是太難了。 ...
  • 1. 出現錯誤提示:Intel HAXM is required to run this AVD,VT-x is disabled in BIOS的解決辦法。 點擊SDK圖標,安裝Intel x86 Emulator Accelerator (HAXM installer)。 在sdk路徑下,找到e ...
  • 拿到題目, 首先要先瞭解鏈表數據結構, 如下圖: 常規思路: 利用數組, 遍歷整個單鏈表, 將每個節點裝入數組中, 最終拿到數組根據索引(數組長度-1-n)就得到了倒數第n個元素. 簡單思路: 假設總長度為n, 倒數第k個對應正數第n-k-1, 那麼第一個指針移動k-1次, 第二個指針保持在head ...
  • 使用工具: 1.微信Web開發者工具 2.Visual Studio 2019 前端採用color UI,後端採用c# .net 過程中的幾個重點點記錄 1.color UI使用 下載colorUI以後 將icon.wxss、colorui.wxss拷貝至項目根目錄 在app.wxss中導入文件 @ ...
  • @[toc] 概念 全稱 : Cascading Style Sheet 級聯樣式表 (層疊) 作用 : 定義 如何顯示 HTML 元素 出現的原因 : 解決內容與表現分離的問題 好處 : 外部樣式表 可以極大提高工作效率 優勢 內容與表現分離 (類似於 蓋房子和裝修 ) 網頁的表現統一,容易修改 ...
  • 這篇文章主要介紹了Vue項目報錯:Uncaught SyntaxError: Unexpected token <,在引入第三方依賴的 JS 文件時,遇到的一個問題,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧 遇到問題: 今天做一個 VUE 的項目,在引入第三方依賴的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...