成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

HTML與CSS中的文本個人分享

iliyaku / 1557人閱讀

摘要：文本標(biāo)題元素注意在一個頁面中最好只使用一個標(biāo)題因為瀏覽器只會抓取一個多了沒用示例代碼標(biāo)題元素元素默認(rèn)效果是顯示最大顯示最小默認(rèn)效果是由瀏覽器自帶樣式提供可以通過進(jìn)行修改每個標(biāo)題元素是獨占一行并且是垂直排列在實際開發(fā)中常用的標(biāo)題元素最

文本 標(biāo)題元素

注意: 在一個HTML頁面中最好只使用一個

標(biāo)題

因為瀏覽器只會抓取一個多了沒用

示例代碼:




一花一世界


一葉一孤城


娃哈哈


爽歪歪


加多寶


王老吉
段落元素

示例代碼:



一花一世界,一葉一孤城,阿里路亞,哈哈哈哈哈哈哈,個嘎嘎嘎嘎嘎嘎嘎嘎


Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aperiam asperiores consectetur ea, ex exercitationem explicabo harum illum laboriosam laudantium, libero necessitatibus, nulla provident quae quidem rerum soluta totam.

效果分析圖:

其他語義化元素

< b >元素 - 表示粗體，指的是效果加粗 -> 目前多被CSS替代

< i >元素 - 表示斜體，指的是效果傾斜 -> 目前多被CSS替代

上標(biāo)與下標(biāo)元素

< sup >上標(biāo)元素

< sub >下標(biāo)元素

< hr >元素 - 表示水平線 -> 目前多被CSS替代

示例代碼:




Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim fuga fugiat illo repellat totam?


這就是上標(biāo)元素 E=MC2公式。


這就是下標(biāo)元素 H2O。

效果示例圖:

換行元素

< br> 表示換行

空元素 - 只有開始元素,滅有結(jié)束元素

< br> 是html5版本的寫法

< br /> 是html4的寫法 - 不推薦使用

空白

注意:

瀏覽器對空個的處理 - 又稱空白折疊

如果空格的數(shù)量是一個的話 - 那么瀏覽器會自動識別

如果空格的數(shù)量大于一個或多個的話 - 瀏覽器只會識別一個

總結(jié): 空格多了沒用,瀏覽器默認(rèn)識別一個

示例代碼:

一          花 一 世 界

效果顯示圖:

語義化元素

備注: 不是太常用 - 因為在CSS中可以實現(xiàn)這些效果

示例代碼:



一花一世界

一葉一孤城





    
這個就是傳說中的縮進(jìn)效果





說明：這個就是傳說中的添加雙引號。





這是傳說中的斜體那里是斜體這里不是




還是斜體還是那里是斜體





    
黑龍江在這里

    
地址：這里是地址
內(nèi)容修改

用法:

< del >表示刪除線

< ins >改正線

示例代碼:

馬上出錯了,刪除在這里,改正在這里,完美

效果圖:

字體系列

備選字體系列 - 用戶電腦中已安裝的字體

問題 - 必須選擇使用用戶電腦中存在的字體系列

問題 - 一般存在的字體可選數(shù)量不多

解決: 可以一次性指定多個字體系列 - 中間使用逗號分隔

示例代碼:





一花一世界


一葉一孤城
字體大小

字體大小分兩個值:

像素值

百分比值 - 相對于瀏覽器頁面默認(rèn)字體大小(16px)

注意: 一般不建議使用相對值,因為不知道相對值的大小 - 無法確定字體到底是多大!

字體加粗

字體加粗 - 建議使用數(shù)字值 (原因跟字體大小相似)

font屬性

font屬性 - 必須是按順序排列否則無效

順序是:

font-style(字的斜體) - font-weight(字體加粗) - font-size(字體大小) - font-family(字體類型)

font: bold italic large serif ;
文本裝飾 




一花一世界
行間距

行間距就是設(shè)置每行之間的距離

也可以稱之為行高 - 可以實現(xiàn)垂直居中

示例代碼:

    


一花一世界


一花一世界

效果圖分析:

字母間距和單詞間距

備注: 調(diào)整字母間距允許設(shè)置漢字之間的間距

因為瀏覽器會把漢字默認(rèn)成為字母

示例代碼:

 



woshidashuaige


one static style


亞古獸變身

效果顯示圖:

水平方向?qū)R方式

注意: 瀏覽器默認(rèn)向左對齊

示例代碼:





花花世界


一花一世界


一葉一孤城


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam aut facere fugit ipsa iste laboriosam natus nulla, sapiente sint soluta tenetur voluptas voluptatem? Assumenda cupiditate ipsa laborum minus modi?

效果顯示圖:

垂直方向?qū)R方式

注意: 垂直方向?qū)R - 是指圖片的某個位置與文本對齊

示例代碼:

    



Lorem ipsum  dolor sit amet, consectetur adipisicing elit.

效果顯示圖:

文本縮進(jìn)

text-indent(文本縮進(jìn))

文本縮進(jìn)效果只控制首行 - 使用像素值控制

示例代碼:

效果顯示圖:

文本陰影

-注意: 文本陰影設(shè)置偏移量時需要水平和垂直同時設(shè)置否則無效
示例代碼:





一花一世界

注意: 當(dāng)需要多個陰影效果時中間用逗號隔開

示例代碼:

text-shadow: 5px 5px #00FFFF,-5px -5px #33FF33;

效果顯示圖:

文本換行

word-break:break-all - 是強(qiáng)行將單詞進(jìn)行拆分

注意: 這個屬性只對英文有效

示例代碼:







http://www.chinanews.com/gn/2018/07-18/8570713.shtml

效果顯示圖:

嵌入Web字體

CSS3新增引入Web字體

在當(dāng)前工程中，導(dǎo)入指定字體文件

當(dāng)用戶訪問HTML頁面時，加載指定的字體文件

可以在HTML頁面使用指定字體系列

示例代碼:





yihuayishijie

代碼分析圖:

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52934.html

相關(guān)文章

  • HTML與CSS中的文本個人分享

    摘要：文本標(biāo)題元素注意在一個頁面中最好只使用一個標(biāo)題因為瀏覽器只會抓取一個多了沒用示例代碼標(biāo)題元素元素默認(rèn)效果是顯示最大顯示最小默認(rèn)效果是由瀏覽器自帶樣式提供可以通過進(jìn)行修改每個標(biāo)題元素是獨占一行并且是垂直排列在實際開發(fā)中常用的標(biāo)題元素最 文本 標(biāo)題元素 注意: 在一個HTML頁面中最好只使用一個標(biāo)題 因為瀏覽器只會抓取一個多了沒用 示例代碼: 一花一世界 一葉一孤城 娃哈哈 爽歪歪...

    MartinHan 評論0 收藏0

  • HTML與CSS中的,鏈接與圖像個人分享

    摘要：鏈接與圖像鏈接元素元素表示鏈接元素作用從當(dāng)前頁面跳轉(zhuǎn)到指定頁面屬性設(shè)置指定跳轉(zhuǎn)頁面的路徑路徑分類相對路徑相對于當(dāng)前頁面的路徑絕對路徑訪問的路徑地址不變化示例代碼相對路徑的鏈接文本陰影案例他是鏈接絕對路徑的鏈接他也 鏈接與圖像 鏈接元素 < a >元素 - 表示鏈接元素 作用 - 從當(dāng)前html頁面跳轉(zhuǎn)到指定html頁面 屬性 href - 設(shè)置指定跳轉(zhuǎn)html頁面的路徑 ...

    cocopeak 評論0 收藏0

  • HTML與CSS中的,鏈接與圖像個人分享

    摘要：鏈接與圖像鏈接元素元素表示鏈接元素作用從當(dāng)前頁面跳轉(zhuǎn)到指定頁面屬性設(shè)置指定跳轉(zhuǎn)頁面的路徑路徑分類相對路徑相對于當(dāng)前頁面的路徑絕對路徑訪問的路徑地址不變化示例代碼相對路徑的鏈接文本陰影案例他是鏈接絕對路徑的鏈接他也 鏈接與圖像 鏈接元素 < a >元素 - 表示鏈接元素 作用 - 從當(dāng)前html頁面跳轉(zhuǎn)到指定html頁面 屬性 href - 設(shè)置指定跳轉(zhuǎn)html頁面的路徑 ...

    elisa.yang 評論0 收藏0

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對應(yīng)的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學(xué)如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術(shù)博客推薦推薦一些現(xiàn)在還在堅持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規(guī)范最佳實踐 本文的所列是實踐當(dāng)中得出的一套比較不錯的 CSS 書寫規(guī)范，可以結(jié)合自身團(tuán)隊發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

    mikasa 評論0 收藏0

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對應(yīng)的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學(xué)如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術(shù)博客推薦推薦一些現(xiàn)在還在堅持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規(guī)范最佳實踐 本文的所列是實踐當(dāng)中得出的一套比較不錯的 CSS 書寫規(guī)范，可以結(jié)合自身團(tuán)隊發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

    李世贊 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<