WEB前端第十課——CSS字體、文本、列表屬性

来源:https://www.cnblogs.com/husa/archive/2020/07/21/13352667.html
-Advertisement-
Play Games

1.字體屬性 color,規定文本的顏色,如 div{color:red;} font-style,規定文本顯示方式,如 p.normal {font-style: normal;} ,有normal(正常顯示)、italic(斜體顯示,字體結構有一定變化)、oblique(傾斜顯示,僅僅是文本的傾 ...


1.字體屬性

  color,規定文本的顏色,如 div{color:red;}

  font-style,規定文本顯示方式,如 p.normal {font-style: normal;} ,有normal(正常顯示)、italic(斜體顯示,字體結構有一定變化)、oblique(傾斜顯示,僅僅是文本的傾斜版本)

  font-variant,設定小型大寫字母,小型大寫字母不同於一般的大寫字母,也不是小寫字母,實例 p {font-variant: small-caps; },屬性值:normal(預設值)、small-caps(小型大寫字母)、inherit(從父元素繼承)

  font-weight,設置文本字體粗細,包含4個屬性值:normal(正常,預設值)、bold(粗體)、bolder(更粗)、lighter(更細),還可以設置“100~900”9個數字等級,400相當於normal,700相當於bold

  font-size,設置文本字體大小,如 div {font-size: 30px; },像素(pixels)通常作為設定絕對大小的單位,em則作為設定相對大小的單位,瀏覽器預設的文本字體大小是16px=1em

  font-family,定義文本的字體類別,如 h1 {font-family: 宋體, serif;},為了防止用戶代理上沒有安裝設定字體,可以通過使用特定字體名 + serif通用字體系列的方式來解決這個問題

  類似於background簡寫,也可以使用font簡寫

  但不同於background簡寫的是,書寫font簡寫的屬性值必須嚴格按照官方規定的順序(上述列示的順序,color不屬於font屬性),同時size屬性值和family屬性值必須有

2.letter-spacing,設置字元間距,實例:div {letter-spacing: 3px; }

3.opacity,針對整個元素設置顏色透明度(包括文本、背景等),屬性值範圍為“ 0~1 ”,1為不透明,0為完全透明,和rgba中的“a”作用相同類似

4.overflow,設置內容溢出元素框時顯示方式,通過設置屬性值控制,visible(預設值,內容不會被處理,溢出顯示)、hidden(隱藏)、auto(自動,溢出時顯示滾動條)、scroll(顯示滾動條)

5.text-overflow,設置文本溢出包含元素時的顯示方式,屬性值:clip(修剪文本)、ellipsis(顯示省略號來代表被修剪的文本)、string(使用給定字元串代表被修剪的文本)

6.white-space,設置如何處理元素內的空白和換行

  屬性值:

    normal,空白和換行符會被瀏覽器忽略

    pre,空白和換行符會被瀏覽器保留

    nowrap,文本在同一行顯示,不會換行

    pre-wrap,保留空白符,但正常進行換行(保留換行符和自動換行)

    pre-line,合併空白符,但保留換行符

    inherit,從父元素繼承white-space屬性值

7.text-align,文本對齊方式,屬性值:left、center、right,實例:p {text-align: center; }

8.text-decoration,規定文字有無裝飾,屬性值:none(預設,無)、underline(文字裝飾下劃線)、overline(文字裝飾上劃線)、line-through(文字裝飾貫穿線,類似刪除線)、blink(文字閃爍)

9.text-transform,設置文本中字母大小寫,屬性值:none(預設,無)、capitalize(將每個單子的首字母轉換成大寫)、uppercase(全部字母轉換成大寫)、lowercase(全部字母轉換成小寫)

10.text-indent,設置首行文本縮進,屬性值為數字,實例:p {text-indent: 2em; },屬性值使用像素(px)也可以

11.Word-wrap,設置當前行超過指定容器的邊界是是否換行,屬性值:normal(預設,只在允許的斷字點換行)、break-Word(在長單詞或URL地址內部進行換行)

12.vertical-align,設置文本的垂直對齊方式,是容器中元素相對於父元素中內容的對齊方式,

         常用屬性值:top(頂端對齊)、middle(居中對齊)、bottom(底端對齊)、super(垂直對齊文本上標)、sub(垂直對齊文本下標)

   測試代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css導入</title>
    <style>
        div{
            width: 500px;
            height: 300px;
            background-color: aquamarine;
        }
        a{
            display: inline-block;height: 150px; width: 100px; background-color: blanchedalmond;
            vertical-align:bottom; margin: 3em 0em 0em 0em;
        }
    </style>
</head>
<body>
    <div>
        測試vertical-align垂直對齊方式
        <a href="">空鏈接</a>
    </div>
</body>
</html>

  測試效果:

       

 

13.line-height,設置對象的行高(不允許使用負值),屬性值:normal(預設)、number(設置數字,此數字會與當前字體尺寸相乘來設置行間距/行高)、length(設置固定值行間距)

       我們一般用行高來使一行文字垂直居中,當行高等於容器高度時,文字垂直居中 

14.list-style-image,設置列表項標記的圖像(項目符號),只有一個用於引導圖片的url屬性,語法:ul {list-style-image: url("markimg.jpg"); }

         整體項目符號重置需作用於<ul>,單個設置則作用於<li>上

15.list-style-position,設置列表項標記與文本內容如何排列,屬性值:outside(預設,項目符號放在文本以外)、inside(項目符號放在文本以內),語法:ul {list-style-position: inside; }

16.list-style-type,設置列表項所使用的預設標記(效果與HTML中ul行內屬性style類似),屬性值:none(無符號)、disc(實心圓)、circle(空心圓)、square(實心方塊),語法:ul {list-style-type: disc; }

17.list-style簡寫,將之前幾個屬性合併為一個複合屬性,通過“list-style”一個屬性就可以定義幾種屬性值,屬性值的書寫順序(非嚴格):list-style-image  list-style-position  list-style-type

        語法實例:ul {list-style: url ("markimg.jpg")  outside  disc; },前面設置了圖片,最後還要設置項目符號的目的是,如果圖片未能正常顯示,可以有項目符號來代替


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

-Advertisement-
Play Games
更多相關文章
  • 對於sql優化,除了索引之外,執行計劃和統計信息是無法繞開的一個話題,如果sql優化(所有的RDBMS)脫離了統計信息的話就少了一個為什麼的過程,味道就感覺少了一大半。剛接觸Postgresql,粗淺地學習總結一下Postgresql相關的統計信息。 postgresql 進程模型 開始之前,有必要 ...
  • 目錄結構 目錄名作用 bin 存放系統腳本 conf 存放配置文件 contrib zk附加功能支持 dist-maven maven倉庫文件 docs zk文檔 lib 依賴的第三方庫 recipes 經典場景樣例代碼 src zk源碼 conf 目錄 conf 目錄用來存檔配置文件,zoo.cf ...
  • kafka的配置分為 broker、producter、consumer三個不同的配置 一 、BROKER 的全局配置 最為核心的三個配置 broker.id、log.dir、zookeeper.connect 。 系統 相關 ##每一個broker在集群中的唯一標示,要求是正數。在改變IP地址,不 ...
  • 資料庫索引,相信大家都不陌生吧。 索引是對資料庫表中一列或多列的值進行排序的一種結構,使用索引可快速訪問資料庫表中的特定信息。作為輔助查詢的工具,合理的設計索引能很大程度上減輕db的查詢壓力,db我們都知道,是項目最核心也是最薄弱的地方,如果壓力太大很容易產生故障,造成難以預計的影響。所以,不管是日 ...
  • 太累了,不想來回覆制粘貼,多麼想有一鍵發佈到各大寫作平臺上的功能。 說重點,Golang學習系列第五天: Golang和PostgreSQL開發 RESTful API:https://blog.csdn.net/dong19891210/article/details/107424704 ...
  • 7 種數據類型分為簡單和複雜兩種 簡單數據類型: number, string, boolean, null, undefined, symbol 簡單數據類型存儲方式:直接存放在Stack(棧)里 註意:string可以存在棧也可存在堆 複雜數據類型:object(包括array和function ...
  • 隨著技術的發展,移動設備越來越流行,並且不同設備間屏幕尺寸和屏幕像素的差異,移動端開發麵臨著多解析度適配的問題。 ...
  • 關於函數name屬性,不同聲明方式有所差異,沒有規律只能硬記 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...