css常用樣式對文本的處理演練

来源:https://www.cnblogs.com/dhnblog/archive/2020/02/14/12310291.html

CSS文本屬性可定義文本的外觀,這是毫無疑問的,其次css可以通過以下屬性改變文字的排版,比方說letter-spacing實現字元間距text-indent: 2em;完成首行縮進2字元word-spacing改變了文字的間距,direction改變文本從左至右的閱讀順序,white-space處... ...


CSS文本屬性可定義文本的外觀,這是毫無疑問的,其次css可以通過以下屬性改變文字的排版,比方說letter-spacing實現字元間距text-indent: 2em;完成首行縮進2字元word-spacing改變了文字的間距,direction改變文本從左至右的閱讀順序,white-space處理字元間空白text-transform實現文字大小寫text-align改變文字排版對齊,至於我們常看到的產品介紹中的省略號“...”如何實現以及文字如何貼圖對齊,盡在下麵代碼詳情中一一介紹。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>css常用樣式對文本的處理演練</title>
 7     <style type="text/css">
 8     div#box{
 9         letter-spacing: 2px;/*字元間距*/
10         text-indent: 2em;/*首行縮進2字元*/
11         width: 300px;/*容器寬度*/
12         height: 200px;/*容器高度*/
13         color: #000;/*文本顏色*/
14         background-color:rgb(255,0,0);/*容器背景色*/
15     }
16     p{
17         word-spacing: 5px;/*文字間距*/
18         direction: rtl;/*文本方向*//*預設文本方向從左至右ltr,left to right*/
19         white-space:normal;/*處理空白符*/
20         /*通過使用該屬性,可以影響瀏覽器處理字之間和文本行之間的空白符的方式。從某種程度上講,預設的 XHTML 處理已經完成了空白符處理:
21         它會把所有空白符合併為一個空格。所以給定以下標記,它在 Web 瀏覽器中顯示時,各個字之間只會顯示一個空格,同時忽略元素中的換行:*/
22     }
23     /*文本修飾*/
24     p.text{
25         text-decoration: underline;
26         text-decoration: overline;
27         text-decoration: none;
28         text-transform: uppercase;/*全部大寫*/
29         text-transform: lowercase;/*全部小寫*/
30         text-transform: capitalize;/*首字母大寫*/
31     }
32     /*文本對齊方式*/
33     div{
34         text-align: left; /*文本居左*/
35         text-align: right; /*文本居左*/
36         text-align: center; /*文本居中*/
37         text-align: justify;/*兩端對齊*/
38     }
39     /* 問題:我們通常看到的類似這樣的http://www.mi.com/seckill 商品介紹中的省略號...如何實現? */
40     div#box{
41         width: 400px;
42         height: 50px;
43         white-space: nowrap;/*文本不換行*/
44         overflow: hidden;/*文本穿出隱藏*/
45         text-overflow: ellipsis;/*省略號*/
46         line-height: 50px;/*文本垂直對齊*/
47     }
48     /* 問題:當插入圖片,如何讓文本與圖片頂對齊圍繞 */
49     img{
50         width: 200px;
51         float: left;
52         vertical-align: bottom;/*文本垂直 middle  top bottom */
53     }
54     div>p{
55         float: left;/*文本貼圖對齊*/
56     }
57     </style>
58 </head>
59 <body>
60     <div id="box">撩人情話:1.我並非言辭誇張或虛情假意。我覺得,這個世界已經待我極好。從前我也不曾這麼認為。直到,我在芸芸眾生之中遇見你。遇見一道光,讓我此生再無遺憾,再不畏懼。2.我是個固執的人,從不願挪動原則半分,
61     可你來了之後,我的原則就成了你。3.喜歡一個人是藏不住的,即使嘴巴不說,也會從眼睛里跑出來。我喜歡你,認真且慫,從一而終。</div>
62     <p class="text">I'm a stubborn person. I never want to move half of the principles, but after you come, my principles become you.</p>
63     <div class="pic">
64         <img src="https://i-beta.cnblogs.com/assets/adminlogo.gif" alt="">我是個固執的人,從不願挪動原則半分,可你來了之後,我的原則就成了你。
65     </div>
66 </body>
67 </html>

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

更多相關文章
  • 背景介紹 我們在工作中難免會寫一些重覆性的代碼,所以需要我們具備一定的抽象能力,比如把共同的邏輯抽取到抽象類中,也可以通過一些工具類來避免冗餘代碼 今天這篇文章就是把一個調用服務的重試功能抽取出一個工具類,以備復用。這裡為了方便介紹,把調用服務簡化成方法的調用,被調用的 foo 方法如下: ~~~ ...
  • 1 SQL 的哲學 形如 Linux 哲學一切都是文件,在 SQL 領域也有這樣一條至理名言 2 關係資料庫 所謂關係資料庫(Relational database)是創建在關係模型基礎上的資料庫,藉助於集合代數等數學概念和方法來處理資料庫中的數據。 現實世界中的各種實體以及實體之間的各種聯繫均用關 ...
  • 該文為《 MySQL 實戰 45 講》的學習筆記,感謝查看,如有錯誤,歡迎指正 一、索引簡介 索引就類似書本的目錄,作用就是方便我們更加快速的查找到想要的數據。 索引的實現方式比較多,常見的有 ,`有序數組 搜索樹`。 1.1 哈希表 是將數據以 的形式存儲起來,簡單來說就是將 通過哈希函數換算成數 ...
  • 資料庫索引是資料庫系統中一個重要的概念,索引也叫做 key ,是一種用於提升資料庫查詢效率的數據結構,我們可以把索引理解成一本書的目錄,通過目錄我們可以快速找到對應章節的內容,同樣的,通過資料庫索引,我們可以快速找到數據表中對應的記錄。 ...
  • 上一章聊到 TsFile 的文件組成,以及數據塊的詳細介紹。詳情請見: 時序資料庫 Apache-IoTDB 源碼解析之文件數據塊(四) 打一波廣告,歡迎大家訪問IoTDB 倉庫,求一波 Star。 這一章主要想聊聊: TsFile索引塊的組成 索引塊的查詢過程 索引塊目前在做的改進項 索引塊 索引 ...
  • 簡單介紹了線性佈局和相對佈局,同時分析了xml文件三個固定開頭xmlns:namespace-prefix="namespaceURI" ...
  • 在無序列表ul>li中,無線列表的標誌是出現在各列表前面的圓點。在有序列表ol>li中,前面預設帶有數字,如何修改列表前面的項目符號,只需要通過list-style調整就好,常見的符號有(/*內容註釋部分*/)list-style-type:circle;/*空心圓*/list-style:none... ...
  • 常見的color, font-family, background 等css屬性都能夠設置鏈接的樣式,a鏈接的特殊性在於能夠根據它們所處的狀態來設置它們的樣式。a標簽與人交互的4個狀態屬於偽類狀態切換,常見的鏈接四種狀態為:a:link - 普通的、未被訪問的鏈接a:visited - 用戶已訪問的... ...
一周排行
  • 枚舉是 C 中最有意思的一部分,大部分開發人員只瞭解其中的一小部分,甚至網上絕大多數的教程也只講解了枚舉的一部分。那麼,我將通過這篇文章向大傢具體講解一下枚舉的知識。我將從大家都瞭解的部分開始講解,然後再講解大家所不知道的或者瞭解很少的部分。 零、基礎知識 枚舉是由開發人員聲明的一種 值類型 ,它在 ...
  • 一. elasticsearch on windows 1.下載地址: https://www.elastic.co/cn/downloads/elasticsearch 如果瀏覽器下載文件慢,建議使用迅雷下載,速度很快。下載版本為7.5.2 2. 修改配置文件 下載後解壓,找到config\jvm ...
  • 最近因為” 新冠” 疫情在家辦公,學習了 ASP.NET Core MVC 網站的一些知識,記錄如下。 ...
  • Regex.Replace("<!--(.|[\r\n])*?-->",string.Empty) ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7743118.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講結構型設計模式的第四個模式--組合模式。當我們談到這個模式的時候,有一個物件和這個模式很像,那就是“俄羅斯套娃”。“俄羅斯套娃”是 ...
  • 一、前言 Entity Framework(後面簡稱EF)作為微軟家的ORM,自然而然從.NET Framework延續到了.NET Core。 二、程式包管理器控制台 為了能夠在控制臺中使用命令行來操作EF,需要先安裝Microsoft.EntityFrameworkCore.Tools。 安裝 ...
  • 項目gitHub地址 點我跳轉 今天給大家帶來一個C#裡面的時間工具類,具體的直接看下麵代碼 1 using System; 2 3 namespace ToolBox.DateTimeTool 4 { 5 public static class DateTimeExtend 6 { 7 /// < ...
  • 《C# 6.0 本質論》 [作者] (美) Mark Michaelis (美) Eric Lippert[譯者] (中) 周靖 龐燕[出版] 人民郵電出版社[版次] 2017年02月 第5版[印次] 2017年02月 第1次 印刷[定價] 108.00元 【前言】 成功學習 C# 的關鍵在於,要盡 ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7772184.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講結構型設計模式的第五個模式--外觀模式。先從名字上來理解一下外觀模式,當看到“外觀”這個詞時,很容易想到“外表”這個詞語,兩者有著 ...
  • 在 C 中存在一個名叫靜態類型檢查的機制,這個機制可以讓編譯器幫助我們把類型不服的用法找出來,從而使得應用程式在運行期間加少一些類型檢查的操作。但是有時候我們還是需要進行運行期類型檢查,比如我們在設計框架時將方法的參數類型定義為 object ,那麼這時我們就有很大的可能需要將 object 類型的 ...
x