CSS常用屬性

来源:http://www.cnblogs.com/chenhaoqiang/archive/2017/01/21/6337369.html
-Advertisement-
Play Games

CSS常用屬性 ☛關於CSS屬性個人建議查看手冊更加詳細方便，我這裡就幾種常用屬性進行分類並簡單取幾個常用屬性值，僅供跟我一樣剛學習前端的人作為入門而用。 1.字體樣式 字體的縮寫,寫法是font:font-style|| font-variant ||font-weight||font-size| ...


CSS常用屬性 ☛關於CSS屬性個人建議查看手冊更加詳細方便，我這裡就幾種常用屬性進行分類並簡單取幾個常用屬性值，僅供跟我一樣剛學習前端的人作為入門而用。     1.字體樣式 字體的縮寫,寫法是font:font-style|| font-variant ||font-weight||font-size||/ line-height||font-family，一定要按照順序來寫 ♣字體的斜體(font-style)：正常 normal || 常用斜體 italic || 沒有斜體變數的特殊字體 oblique ♣小型的大寫字母t(font-varian)：正常 normal || 小型的大寫字母字體 small-caps ♣字體的粗細(font-weight)：正常 normal || 常用粗體 bold || 特粗 bolder || 細體 lighter || 直接用數字表示（數值100-900） ♣字體的大小(font-size)：這裡僅介紹可以用幾種字根單位表示（px、em、rem） ♣字體的行高(line-height)：可以用長度px|| 百分比（基於字體的高度尺寸）|| 用數值(乘積因數)指定行高 ♣字體簇(font-family)： 指定文本使用某個字體或字體序列，值用單引號包起來,預設是宋體. demo：body{font-family:helvetica,verdana,sans-serif;} /*註釋*/：按優先順序排列。以逗號隔開。如上字體定義，假設你電腦上沒有helvetica字體，但有verdana，這時將會以verdana顯示你的文字。     ❤@font-face嵌入字體（課外擴展） @font-face能夠載入伺服器端的字體文件，讓瀏覽器端可以顯示用戶電腦里沒有安裝的字體。 語法： @font-face { font-family : 自定義字體名稱; src : url(字體文件在伺服器上的相對或絕對路徑)  format(字體類型); } 例： @font-face {/*該寫法是相容所有的瀏覽器*/ font-family : bgg; src: url('fonts/fontawesome-webfont.eot'), /* IE9+ */ url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/fontawesome-webfont.woff') format('woff'), /* chrome、firefox */ url('fonts/fontawesome-webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari,Android, iOS 4.2+*/ url('fonts/fontawesome-webfont.svg') format('svg'); /* iOS 4.1+ */ } p{ font-family: bgg }   ★字體的其他比較少用的樣式： ♣caption： 使用有標題的系統控制項的文本字體（如按鈕，菜單等）（CSS2） ♣icon： 使用圖標標簽的字體（CSS2） ♣menu： 使用菜單的字體（CSS2） ♣message-box： 使用信息對話框的文本字體（CSS2） ♣small-caption： 使用小控制項的字體（CSS2） ♣status-bar： 使用視窗狀態欄的字體（CSS2）     2.文本樣式 ♦文本顏色 color ●顏色名稱 16種基本色為aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,tealwhite,and yellow. ●16進位（hex）色彩控制（6位數），其格式為 #336699。支持某些hex值的快捷計數法。比如， #336699可以被稱為 #369。 ●RGB值 RGB的數值範圍從0到255，R代表紅色，G代表綠色，B代表藍色。demo：{ color: rgb(51,204,0) } ♦文本縮進 text-indent,值是以em為單位的數值,1em等於一個字的寬度. ♦文本水平對齊 text-align：left(左對齊) || center(居中對齊) || right(右對齊) || justify(兩端對齊) ♦文本垂直對齊 vertical-align：sub(垂直對齊文本的下標) || super(垂直對齊文本的上標) || 還有其他見手冊 ♦文字間距 letter-spacing,值有normal和以px為單位的數值. ♦文本換行 word-wrap：normal(允許內容頂開或溢出) || break-word(內容將在邊界內換行。如果需要，單詞內部允許斷行) ♦下劃線控制 text-decoration ：none(沒有下劃線,預設)、underline(下劃線)、blink、overline(上劃線)、line-through(刪除線) ♦文本的大小寫 text-transform : 首字母大寫 capitalize || 轉換成大寫 uppercase ||  轉換成小寫 lowercase     3.列表樣式 list-style ▶list-style-image:url(/dot.gif);  圖片式符號，選擇圖像作為列表項的引導符號 ▶list-style-position：列表符號位置 ♥outside（預設值，列表與符號貼近） ♥inside（列表縮進，與符號相離） ▶list-style-type：符號類型（這裡列舉幾種常用的，若需要日文平假片假什麼的可以查手冊） ♥不編號(none)      ♥阿拉伯數字(decimal)      ♥實心圓(disc)      ♥空心圓(circle)      ♥實心方塊(square) ♥小寫英文字母(lower-alpha) ♥大寫英文字母(upper-alpha)  ♥小寫羅馬數字(lower-roman) ♥大寫羅馬數字(upper-roman)     4.背景樣式 background 背景樣式的縮寫,寫法是{background-color||background-image||background-repeat||background-attachment||background-position;} background: 背景色  背景圖片 背景平鋪方式 背景定位 要按照順序來.例子background:#F00 url(header_bg.gif) no-repeat fixed left top;   ♠背景顏色 ♠透視背景 background:transparent; ♠背景圖片 backgroung-image:url(圖片文件路徑); ♠背景平鋪方式 background-repeat：repeat(全部平鋪,預設)|| no-repeat(不平鋪)|| repeat-x(橫向平鋪)|| repeat-y(縱向平鋪) round(背景圖像自動縮放直到適應且填充滿整個容器)|| space(背景圖像以相同的間距平鋪且填充滿整個容器或某個方向) ♠背景圖片滾動 background-attachment：scroll 預設值。背景圖像會隨著頁面其餘部分的滾動而移動。 fixed 當頁面的其餘部分滾動時，背景圖像不會移動。||inherit 規定應該從父元素繼承 background-attachment 屬性的設置。 ♠背景定位 background-position:左右對齊方式(left||center||) 上下對齊方式(top||bottom); 也可以將對齊方式寫成數值(或百分比%):左邊數值(%) 頂部數值(%) ♠背景的大小 background-size background-size: auto;        自動，預設以圖片大小 background-size：px或百分比，若只設置一個值，則第二個值會被設置為 "auto"。 background-size: cover;       將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。 background-size: contain;     把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。但是不超出容器 background-size: 100px 100%;  寬高比例改變 ♠背景的開始位置 background-origin 寫法{background-origin:padding-box背景從邊框之後開始(預設)||border-box背景圖從邊框開始||content-box背景從內容開始}     5.邊框樣式 border 邊框線的縮寫：{border:border-width border-style border-color;} demo：四邊邊框相同：{border:1px solid #00F}； 若想單獨一條邊的話，哪個方向的自己挑：{border-[left||right||top||bottom]:border-width border-style border-color;}   ♜邊框線的樣式 border-style：none(不加邊框線,預設)|| hidden(隱藏邊框線)|| dotted(點狀虛線)|| dashed(線狀虛線,常用) solid(實線,常用)|| double(雙實線)|| groove(淺色實線)|| ridge(深淺色實線)|| inset(左上深右下淺的實線)|| outset(左上淺右下深的實線) ♜邊框線的寬度 border-width,值是以px為單位的數值. ♜邊框線的顏色 border-color,值是顏色的英文單詞或者十六進位的顏色. ♜inherit：規定應該從父元素繼承 border 屬性的設置。

 


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

-Advertisement-
Play Games
更多相關文章
  • jQuery 滑動選項卡SmartTab
    Smart Tab Overview Smart Tab is a jQuery plugin for tabbed interface. It is flexible and very easy to implement. It has a lot of features that you wil ...
  • js和jquery獲取當前元素的內容
    html代碼 <div>測試文本</div>js:div.innerHTMLjQuery:div.html() ...
  • es6筆記7^_^class
    1.定義類 2.類聲明 3.變數提升 4.類表達式 匿名的 命名的 5.原型方法 6.靜態方法 7.類繼承 8.Species 9.super 關鍵字可以用來調用其父類的構造器或者類方法 上面代碼首先用class定義了一個“類”，可以看到裡面有一個constructor方法，這就是構造方法，而thi ...
  • 最容易理解的貪吃蛇小游戲
    最後的效果圖如下： ...
  • [nodejs,mongodb,angularjs2]我的便利貼-web應用練習
    1.目的：學習nodejs連接使用mongodb,用angularjs2展示數據 2.使用技術： 資料庫: mongodb 後端數據獲取: nodejs 前端數據展示: angularjs2 ...
  • GIt的基本操作
    基本操作 安裝與配置 init add與commit git add 快照的內容寫入緩存區 git commit 將緩存區內容添加到倉庫中。 clone vim 狀態的意思是，這個文件在我們將它添加到緩存之後又有改動 status diff 尚未緩存的改動：git diff 查看已緩存的改動： gi ...
  • js實現360度圖片旋轉
    ▓▓▓▓▓▓ 大致介紹 這次是一個簡單的效果，就是思路的問題 效果： ▓▓▓▓▓▓ 思路 旋轉的效果就是根據滑鼠的的移動距離來顯示不同的圖片，形成視覺差，仿佛就是在正真的旋轉 由於效果是根據滑鼠的移動距離來操作的，即移動的像素值。如果按照預設的情況，移動滑鼠的時候圖片就旋轉的太快了，所以我們要給滑鼠 ...
  • select下拉框插件jquery.editable-select
    項目中有個需求，下拉框既可以下拉選擇，也可以手動填寫 html代碼 js代碼 獲取值 用了這個插件以後，這塊是一個input,type="text" 參數 filter 選擇option以後，是否過濾 預設 true effects 點擊的時候，下拉框的過渡效果 有default，slide，fad ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類