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
  • 前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據,比如SQL伺服器的連接串或者是OAuth2的Secret等,這些敏感數據在代碼中是不太安全的,我們不應該在源代碼中存儲密碼和其他的敏感數據,一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型,用戶可以根據需要進行修改 ...
  • 前言 整理這個官方翻譯的系列,原因是網上大部分的 tomcat 版本比較舊,此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎,輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 如果讓你來做一個有狀態流式應用的故障恢復,你會如何來做呢? 單機和多機會遇到什麼不同的問題? Flink Checkpoint 是做什麼用的?原理是什麼? ...
  • C++ 多級繼承 多級繼承是一種面向對象編程(OOP)特性,允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護,並促進代碼重用。 多級繼承的語法 在 C++ 中,使用 : 符號來指定繼承關係。多級繼承的語法如下: class DerivedClass : public BaseClass1 ...
  • 前言 什麼是SpringCloud? Spring Cloud 是一系列框架的有序集合,它利用 Spring Boot 的開發便利性簡化了分散式系統的開發,比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子,而是將市面上開發得比較好的模塊集成進去,進行封裝,從 ...
  • class_template 類模板和函數模板的定義和使用類似,我們已經進行了介紹。有時,有兩個或多個類,其功能是相同的,僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • 目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制),V是羅馬數字5,是UNI ...