CSS3筆記之基礎篇(三)文字與字體

要點一、text-overflow與word-wrap

text-overflow:設置是否使用一個省略標記(...)標示對象內文本的溢出。

word-wrap:設置文本行為,當前行超過指定容器的邊界時是否斷開轉行。

語法如下:

注意:要實現文字溢出時產生省略號的效果,需要把這兩個屬性聯合起來使用,代碼如下:

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap; 

要點二、嵌入字體@font-face

@font-face能夠加載服務器端的字體文件,讓瀏覽器可以顯示用戶電腦里沒有安裝的字體。

語法:

@font-face {font-family : 字體名稱;src : 字體文件在服務器上的相對或絕對路徑;
}

這樣設置之后,就可以像使用普通字體一樣在(font-*)中設置字體樣式。

比如:

p {font-size :12px;font-family : "My Font";/*必須項,設置@font-face中font-family同樣的值*/
}

要點三、文本陰影text-shadow

text-shadow可以用來設置文本的陰影效果。

語法:

text-shadow: X-Offset Y-Offset blur color;

X-Offset:表示陰影的水平偏移距離,其值為正值時陰影向右偏移,反之向左偏移;??????

Y-Offset:是指陰影的垂直偏移距離,如果其值是正值時,陰影向下偏移,反之向上偏移;

Blur:是指陰影的模糊程度,其值不能是負值,如果值越大,陰影越模糊,反之陰影越清晰,如果不需要陰影模糊可以將Blur值設置為0;

Color:是指陰影的顏色,其可以使用rgba色。

比如,我們可以用下面代碼實現設置陰影效果。

text-shadow: 0 1px 1px #fff

?

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249327.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249327.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249327.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

XV6操作系統代碼閱讀心得(二):進程

1. 進程的基本概念 從抽象的意義來說,進程是指一個正在運行的程序的實例,而線程是一個CPU指令執行流的最小單位。進程是操作系統資源分配的最小單位,線程是操作系統中調度的最小單位。從實現的角度上講,XV6系統中只實現了進程&…

webservices

https://blog.csdn.net/VitaminZH/article/details/81123571

.Net Core 商城微服務項目系列(十二):使用k8s部署商城服務

一、簡介 本篇我們將會把商城的服務部署到k8s中,同時變化的還有以下兩個地方: 1.不再使用Consul做服務的注冊和發現,轉而使用k8s-dns來實現。 2.不再使用Ocelot作為業務網關,使用Traefik來實現。 正如上面所講,服務發現…

HTML、CSS知識點總結,淺顯易懂。

一,htmlcss基礎 1-1 Html和CSS的關系 學習web前端開發基礎技術需要掌握:HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什么的: 1. HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息&#xf…

Thinking in Java 源代碼 source code 在IDEA上運行

參考我52的文章:https://www.52pojie.cn/thread-912471-1-1.html 轉載于:https://www.cnblogs.com/AI-Cobe/p/10605434.html

CSS知識體系圖譜

轉自:https://blog.csdn.net/A13330069275/article/details/78448415

python2 pip安裝包等出現各種編碼錯誤UnicodeDecodeError: 'ascii'(/或者utf-8) codec can't decode byte 0xd2......

1.問題描述: python2環境,pip安裝包時報錯UnicodeDecodeError: ascii(/或者utf-8) codec cant decode byte 0xd2... 類似如下情況 2.原因分析 一開始依據網上給出的教程修改python安裝路徑下的各種文件,添加各種編碼,始終無法解決…

mybatis自動生成代碼

https://blog.csdn.net/qq_31169429/article/details/89137896

leetcood學習筆記-111-二叉樹的最小深度

題目描述: 第一次提交: class Solution(object):def minDepth(self, root):""":type root: TreeNode:rtype: int"""if not root:return 0if root.left and root.right:return min(self.minDepth(root.left)1,self.minDept…

深入淺析HTML5中的article和section的區別

在HTML5中,為了使文檔的結構更加清晰明確,追加了幾個與頁眉、頁腳、內容區塊等文檔結構相關聯的結構元素。內容區塊是指將HTML頁面按邏輯分割后 的單位。例如對于書籍來說,章、節可以稱為內容區塊;對于博客網站來說,導…

IPV6 簡單總結

1. 轉帖別人的內容 來源:https://www.2cto.com/net/201112/114937.html 2. 本地用IPV6單播地址 (包括鏈路本地單播地址 和 站點本地單播地址) 2.1 鏈路本地單播地址 規定了鏈路本地和站點本地兩種類型的本地使用單播地址。鏈路本地地址用在單鏈路上, 而…

源碼分析

https://blog.csdn.net/taifei/article/details/73546836

面向對象第一單元總結

一、對面向對象的理解 有位同學給java的面向對象做了一個形象生動的類比,我覺得很有道理,大概按我的理解如下: 結構的形成看圖之前,我們要先明白,世界上是先有了實體,才有了一步步抽象至以上的體系結構&…

理解HTML語義化

1、什么是HTML語義化&#xff1f; <基本上都是圍繞著幾個主要的標簽&#xff0c;像標題&#xff08;H1~H6&#xff09;、列表&#xff08;li&#xff09;、強調&#xff08;strong em&#xff09;等等> 根據內容的結構化&#xff08;內容語義化&#xff09;&#xff0c;…

maven上傳命令

mvn deploy:deploy-file -DgroupIdcom.oracle -DartifactIdojdbc8 -Dversion12.2.0.1 -Dpackagingjar -DfileC:\Users\Admin\Desktop\ojdbc8.jar -Durlhttp://116.247.107.83:8081/repository/maven-releases/ -DrepositoryIdmy-nexus-releases

cocos2dx 開啟控制臺

打開 SimulatorWin.cpp 把這句啟用&#xff1a; #define SIMULATOR_WITH_CONSOLE_AND_MENU 1 這句本來因為#define隱藏了轉載于:https://www.cnblogs.com/mingfuqishi/p/9774301.html

網頁編排規則

所謂大綱&#xff0c;簡單來說就是文檔中各內容區塊的結構編排。可以分為顯式編排和隱式編排2種方式。 顯式編排&#xff1a;明確使用section元素創建文檔結構&#xff0c;在每個內容區塊內使用標題 隱式編排&#xff1a;不明確使用section等元素&#xff0c;根據頁面中所書寫的…

基本動態規劃題集

觀察下面的數字金字塔。寫一個程序查找從最高點到底部任意處結束的路徑&#xff0c;使路徑經過數字的和最大。每一步可以從當前點走到左下方的點也可以到達右下方的點。 在上面的樣例中,從13到8到26到15到24的路徑產生了最大的和86。 【輸入】 第一個行包含R(1≤ R≤1000)&…

springboot項目間接口調用實現:RestTemplate

https://blog.csdn.net/zhanglf02/article/details/89842372

python入門學習的第三天

step 1 時間 Python有兩個模塊&#xff0c;time和calendar&#xff0c;它們可以用于處理時間和日期 首先 import time 導入時間模塊 然后 print time.time() 這個叫時間戳&#xff0c;它是從1970年1月1日午夜到現在時刻的秒數 print time.localtime(time.time()) print time.st…