css基礎4

来源:https://www.cnblogs.com/woheni/archive/2019/06/21/11065372.html
-Advertisement-
Play Games

今天是2019年6月21日,周五了。在這裡寫上一篇隨筆,主要內容是css基礎中的一些細節部分,話不多說,直接上! 一、背景漸變: background-image 線性漸變:linear-gradient(漸變方向,色標,色標,色標) 方向: 關鍵字: to top 從下往上 to bottom 從 ...


今天是2019年6月21日,周五了。在這裡寫上一篇隨筆,主要內容是css基礎中的一些細節部分,話不多說,直接上!

一、背景漸變: background-image

  • 線性漸變:linear-gradient(漸變方向,色標,色標,色標)
    • 方向:
    • 關鍵字:
      • to top    從下往上
      • to bottom   從上往下
      •  to left    從右往左
      •  to right    從左往右
    • 角度:deg  角度同時針一樣旋轉
    • 色標:顏色  0%
  • 徑向漸變:radial-gradient(【size at position】,色標,色標,)
    • 備註:size:漸變路徑;at:關鍵字;position:漸變圓心所在的位置
    • 關鍵字:left  right  center;top  bottom  center  

二、字體文本相關樣式

  • 字體屬性:font-family
  • 字體大小:font-size
  • 字體加粗:font-weight
  • 字體傾斜:font-style
  • 小型大寫:font-variant
  • 綜合屬性:font:font-style  font-variant  font-weight  font-size  font-family  

三、文本相關屬性

  • 文本顏色:color
  • 文本對齊方式:text-align  值:left  right  center
  • 文本修飾:text-decoration
  • 值:
    • none:無線條樣式
    • underline:下劃線
    • line-through:刪除線
    • overline:上劃線
  • 行高:一行文本所占的高度
    • 格式:line-height:height(文本居中)
    • 註意:一行文本,行高永遠和元素的上邊緣是重合的;當行高的高度大於文本的高度是,那麼該文本會在行高範圍內居中
  • 首行縮進:text-indent
  • 文本陰影:text-shadow
    • offsetx  offsety  blur  color

四、表格相關樣式

  • 屬性:color  font-size  border  width  height
  • 表格特有樣式:
    • border-collapse:邊框合併
    • border-seperate:邊框分離
    • border-spacing:相鄰單元格之間的距離,相當於cellspacing。
      • 備註:兩個值;第一個值代表的是水平距離,第二個值代表的是垂直距離
    • 主體:border-collapse:seperate
  • 表格佈局:table-layout
    • auto:預設的 自動表格佈局,根據內容來自動分類td高度
    • fixed:固定的  列寬度是由總寬度來平均分配的

五、td:vertical-align  垂直對齊方式

  • 使用場景:
    • 圖文混排時,定義文字相對於圖片的對齊方式
    •  td中設置單元格的垂直對齊方式

六、顯示方式設置

  • 屬性:display
  • 值:
    • block  讓元素變成快元素
    • inline-block  讓元素變成行內快元素
      • 註意:行內塊元素,只是可以設置寬高以及上下的margin;
      • 使用場景:一個行內塊元素需要設置寬高或者設置上下margin
    • inline  讓元素變成行內元素
    • none  隱藏元素:元素消失後,不占據頁面空間(脫離文檔流)
  • 註意:不要嘗試給一個快元素變成行內元素,因為沒有任何意義!

七、顯示效果

  • 定義:visibility:visible(可見)or hidden(隱藏)
  • 備註:display:none和visibility:hidden異同
  • 相同點:都是讓元素消失
  • 不同點:
    • display:none  消失後脫離文檔流,不占據頁面空間
    • visibility:hidden  消失後並沒有脫離文檔流,依然占據著頁面空間

八、游標樣式

  • 屬性:cursor
  • 值:default(預設)
    • pointer(小手)
    • wait(等待)
    • crosshair(十字游標)
    • not-allowed(禁用)

九、列表項:list-style

  • 有序列表:none(取消列表項的標誌)
  • 無序列表:disc(實心圓) circle(空心圓) square(實心方塊) none(無列表標誌)
  • 列表項位置:list-style-position:inside:  內部outside:  外部
  • 列表項圖片:list-style-image  url(路徑)

未完,待續!

 


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

-Advertisement-
Play Games
更多相關文章
  • [2019.06.21 學習筆記3] 1.<p>段落標簽 2.多用於文章、長篇文字,沒有內容字數限制 ...
  • [2019.06.21 學習筆記2] 1.標題標簽 2.<h1>到<h6>的字體是從大到小,都是加粗,沒有<h7> 3.如果要重定義<h>標簽的樣式,修改css樣式中的font-weight(字體粗細)、font-size(字體大小) ...
  • [2019.06.21 學習筆記1] 1.<a>定義超鏈接 2.必須屬性href,鏈接位置,對應一個url地址,href="url地址",顯示藍色並帶有下劃線(可去掉),必須寫(不寫也可以,但是最好寫) 不想指向任何頁面:href="#" <!-- 指向當前頁面最頂部,點擊後不會發生跳轉--> 指向 ...
  • highchart圖表的一個常見問題是不能複製文字 比如官網的某個圖表例子,文字不能選擇,也無法複製,有時產品會抓狂... 本文給出一個簡單的方案,包括一些解決的思路,希望能幫助到有需要的人 初期想了蠻久也搜了蠻多,沒搜到,找到的結論是圖表使用的是svg實現,必然無法選擇文字,似乎是個死問題,已經瀕 ...
  • 實現代碼如下: 一、Html代碼 二、jQuery代碼 ...
  • 註: ** 先來說下前端為什麼需要學習webpack吧!** 因為現在SPA流行,javascript的依賴包,less,scss.sass樣式文件的編譯。 更重要的是前端現在三大主流Vue.js 、React.js和AngluarJs都和webpack緊緊相連了。 說實話,現在不會一點webpac ...
  • 1.移動端視口問題 視口是指瀏覽器的可視區域,移動端的視口到底是多寬呢? 現在市面上的大部分手機,比如iphone X,它的預設視口寬度為980px,而一個iphone X的屏幕寬度僅僅為375px。看到問題了嗎?一個寬度只有375像素的手機,卻能夠顯示寬度為980像素的網頁,自然而然,網頁會被縮小 ...
  • filter 將模糊或者顏色偏移等圖像效果用於元素,通常用於調整圖像,背景和邊框的渲染 css 標準中已內置一些預定義效果的函數,也可通過url使用 "SVG濾鏡" 語法 濾鏡屬性 需要設定某一函數的值。如果該值無效,函數返回“none“。 url() url 函數接收一個XML文件,該文件是一個 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...