CSS樣式更改——文本Content

2021-02-19 IT共享之家

點擊上方「IT共享之家」,進行關注

回復「資料」可獲贈Python學習福利

前言

上篇文章主要講述了CSS樣式更改中的背景Background,這篇文章我們來談談文本Content內容的基礎用法。

文本Content1).首行縮進文本
<div style='text-indent:2em'></div>  可以設置負數 也可使用百分數 像素

2).文本對齊方式

<div style='text-align:center'></div>left   左邊right   右邊center  中間justify 兩端對齊

3).字間距
<div style='word-spacing:2em'></div> 可以設置負數 也可使用百分數 像素

4).文本間距

<div style='letter-spacing:2em'></div> 可以設置負數 也可使用百分數 像素

5).文本轉換

<div style='text-transform:none'></div>none         不轉換uppercase    大寫lowercase    小寫capitalize   首字母大寫

6).文本修飾
<div style='text-decoration:none'></div>none          不修飾underline     下劃線overline      上劃線line-through  中劃線blink         文本閃爍

7).文本空白符的處理
<div style='white-space:normal'></div>pre-line 合併空白符序列,但是保留換行符normal   忽略空白符nowrap   文本不會換行,直到<br>出現才換行pre      空白會被瀏覽器保留pre-wrap 保留空白符序列,但是正常地進行換行

8).文本方向
<div style='direction:ltr'></div>ltr     從左到右rtl     從右到左

9).文本行高
<div style='line-height:2'></div> 可使用百分數 像素

10).文本陰影

<div style='text-shadow:1px 1px 1px red'></div>

11).字符換行

<div style='word-wrap:normal'></div>normal 只在允許的斷字點換行break-word 在長單詞、URL地址內部進行換行

12).處理溢出文本
<div style='text-overflow:ellipsis'></div>clip           修剪文本ellipsis      省略符號來代表被修剪的文本string        使用給定的字符串來代表被修剪的文本

13).文本輪廓
<div style='text-outline:1px 1px red'></div>

14).文本換行

<div style='text-wrap:none'></div>normal          只在允許的換行點進行換行。none            不換行。元素無法容納的文本會溢出unrestricted    在任意兩個字符間換行。suppress        壓縮元素中的換行。瀏覽器只在行中沒有其它有效換行點時進行換行

參考文檔:W3C官方文檔(CSS篇)

二、總結

這篇文章主要介紹了CSS樣式更改篇中的文本Content基本設置,希望讓大家對CSS樣式更改有個簡單的認識和了解。

看完本文有收穫?請轉發分享給更多的人

IT共享之家

入群請在微信後臺回復【入群】

------------------- End -------------------

往期精彩文章推薦:

相關焦點

  • CSS樣式--字體屬性和文本屬性
    font字體屬性css樣式中,字體屬性有以下幾種:p{    font-size:50px; /*字體大小*/    line-height: 30px; /*行高*/文本屬性CSS樣式中,常見的文本屬性有以下幾種:letter-spacing: 0.5cm ; 單個字母之間的間距word-spacing: 1cm; 單詞之間的間距text-decoration: underline; 字體修飾:underline下劃線、line-through中劃線、overline上劃線
  • CSS樣式更改——字體設置Font&邊框Border
    點擊上方「IT共享之家」,進行關注回復「資料」可獲贈Python學習福利前言上篇文章主要講述了CSS樣式更改中的背景div style='font-family: sans-serif normal'></div>可用字體:SerifSans-serifMonospaceCursiveFantasyTimesCourier2).字體風格<div style='font-style:normal'></div>文本傾斜
  • CSS樣式更改——列表、表格和輪廓
    點擊上方「IT共享之家」,進行關注回復「資料」可獲贈Python學習福利前言上篇文章主要介紹了CSS樣式更改篇中的字體設置</ul>3).列表的位置<ul><li style='list-style-position:inside'></li></ul>inside 列表項目標記放置在文本以內
  • CSS基礎—CSS樣式如何應用到HTML元素
    一種方式是利用HTML元素的style屬性,樣式表作為style屬性的值,該方式也稱為行內樣式;一種方式是將樣式表放置在HTML網頁文檔head標籤內,每個樣式表賦予一個名稱,然後在HTML元素中通過class屬性引入樣式表,該方式也稱為內部樣式;再一種方式是單獨將樣式表寫入到一個文件,文件的擴展名為css,然後通過HTML的link標籤連結外部樣式表文件,在HTML元素中通過class屬性引入樣式表文件中的樣式表
  • 網頁設計HTML_CSS語言_外部樣式
    WWW_WEB_入門實踐—網頁設計HTML_CSS語言_外部樣式網頁內容與表現形式一般新聞或科技報導—文本與圖形
  • 【第170期】css文本換行你所不知道的技巧
    在文字換行處,我們可以使用inline/inline-block,因為方便我們設置background和padding值等等在換行處使用偽元素很簡單:cssh1 span::before {  content: "\A";}
  • DIV+CSS教程_DIV+CSS布局_DIV+CSS實例教程手冊
    風格5. css優先權6.8,三列固定寬度居中9,IE6的3像素bug第4天:垂直導航菜單和輔助彈出菜單1,垂直列表2,標籤的默認樣式3,css派生選擇器4,css選擇器的分組5,垂直二級清單6,相對定位和絕對定位
  • CSS實現自適應分隔線的N種方法
    具體實現如下html結構為<div class="title">我是分割線</div>css樣式為.title{ position: relative; text-align: center; overflow: hidden; font-size
  • CSS樣式全部屬性和難記憶點(歸納)
    有一些CSS的冷門樣式太多了,但是又想記住,可以看這篇文章,這篇文章包括了一些css需要記憶的一些屬性,不包括平時經常使用的(相信你已經接觸的太多了)偽類選擇器偽類作用:link未訪問:visited已訪問:hover滑鼠移動到連結上:active選定的連結文字陰影
  • (06)CSS 給文本加樣式:② 文本屬性 | CSS
    本文節選自「語雀」私有付費專欄「前端一萬小時 | 從零基礎到輕鬆就業」前言:作為上一篇《CSS 給文本加樣式:① 字體屬性》的兄弟文章,我們繼續逐一學習「文本屬性」是怎樣給文本加樣式的。對於「文本屬性」的學習,我們可以簡單分為:給這個文本加一些諸如「下劃線」、「上劃線」和「穿過文本的線」的裝飾大整形:把文本放在最和諧、最養眼的位置——文本布局。這個就類似於我們用的 Office 的 Word 裡:首行縮進、左對齊、右對齊、居中、行高、行間距等等。
  • CSS樣式「程式設計師培養之路第六天」
    >oblique 文本傾斜顯示第三節 文本屬性1、行高:line-heightline-height:50px;可以將父元素的高度撐起來文本水平對齊方式:text-align6、邊框顏色:outlineinput文本輸入框自帶邊框,且樣式醜陋,我們可以通過outline修改邊框outline:1px solid #ccc;outline:none清除邊框第五節、樣式重置
  • 理解CSS3 max/min-content及fit-content等width值
    (點擊上方公眾號,可快速關注)作者:張鑫旭(@張鑫旭)連結:http://www.zhangxinxu.com/wordpress/2016/05/css3像我這種只學HTML和CSS都有些應接不暇,我想,那些CSS3, HTML5, ES6/ES7, React, Angular, bootstrap, postcss, node都會的小夥伴,應該每天都只睡3-4個小時吧,好厲害!凡是存在就有其道理。那為何規範裡要給稀鬆常見的width屬性加幾個關鍵字呢?
  • 將CSS樣式代碼應用到HTML頁面的幾種方式
    今天跟大家聊一聊將CSS樣式應用到網頁的幾種方式。大家好!今天跟大家聊一聊將CSS樣式應用到網頁的幾種方式。CSS的代碼須應用到HTML頁面中才能達到樣式設定的目的。應用方法一般有三種:行內式、內嵌式和連結式。
  • CSS沒那麼難,入門篇(一)
    正確注釋方法如下:<style type="text/css"> body { /* 去除瀏覽器默認外邊距 */ margin: 0; }</style>樣式權重CSS樣式有連結樣式、標籤樣式、行間樣式連結樣式:引入外部層疊樣式表文件
  • css3必須了解的知識 css中常見的樣式屬性和值
    繼續上一篇文章的繼續了解css的基礎知識 全棧學習筆記,不同平臺不同的我!css中常見的樣式屬性和值字體與顏色背景屬性文本屬性邊框屬性*/ text-transform: lowercase;/*屬性控制文本的大小寫 */ /*capitalize 文本中的每個單詞以大寫字母開頭。
  • css樣式如何美化表格和邊框的外觀?
    如今大家習慣了使用DIV+CSS布局頁面,其實table+css曾經也是流行的頁面布局方式。下面深圳市博納網絡信息技術有限公司介紹css樣式如何美化表格和邊框的外觀。單一邊框雖然給表格添加了邊框,但是顯示的是多個邊框,其中包括了表格邊框、表頭邊框和單元格邊框,如果為表格添加下面的樣式,就可以將表格的邊框顯示為單一的邊框,效果如圖
  • 關於CSS樣式衝突排序的一個小試驗
    按照我們對CSS優先權的理解,最後定義的 CSS 樣式將會覆蓋在其之前定義的所有已經存在、或與之衝突的樣式,比如下面這個例子: //W3C//DTD XHTML 1.0 Transitional//EN" " https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" https://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content
  • HTML+CSS常見選擇題
    Name表示文本域的名稱B. Rows表示文本域的行數C. 當要改變該文本區的行和列時,主要是調用了name屬性的值D. 該文本框在輸入文本時,自動換行答案:C4.
  • CSS樣式大全
    (微信後臺回復「CSS」,即可獲得關於css設計的幫助文檔哦)字體屬性:(font)大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到,只要用數值就可以,單位:PX、PD樣式 {font-style: oblique;}(偏斜體) italic;(斜體) normal;(正常)行高
  • CSS樣式書寫規範
    .g-header > .g-header-des,  .g-content ~ .g-footer {      命名短且語義化良好 對於選擇器的命名,儘量簡潔且具有語義化,不應該出現 g-abc 這種語義模糊的命名。 規則聲明塊 當規則聲明塊中有多個樣式聲明時,每條樣式獨佔一行。