資訊專欄INFORMATION COLUMN
摘要：文本標題元素注意在一個頁面中最好只使用一個標題因為瀏覽器只會抓取一個多了沒用示例代碼標題元素元素默認效果是顯示最大顯示最小默認效果是由瀏覽器自帶樣式提供可以通過進行修改每個標題元素是獨占一行并且是垂直排列在實際開發中常用的標題元素最
文本 標題元素
注意: 在一個HTML頁面中最好只使用一個
因為瀏覽器只會抓取一個多了沒用
示例代碼:
一花一世界
一葉一孤城
娃哈哈
爽歪歪
加多寶
王老吉
示例代碼:
一花一世界,一葉一孤城,阿里路亞,哈哈哈哈哈哈哈,個嘎嘎嘎嘎嘎嘎嘎嘎
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替代
上標與下標元素
< sup >上標元素
< sub >下標元素
< hr >元素 - 表示水平線 -> 目前多被CSS替代
示例代碼:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim fuga fugiat illo repellat totam?
這就是上標元素 E=MC2公式。
這就是下標元素 H2O。
效果示例圖:
< br> 表示換行
空元素 - 只有開始元素,滅有結束元素
< br> 是html5版本的寫法
< br /> 是html4的寫法 - 不推薦使用
注意:
瀏覽器對空個的處理 - 又稱空白折疊
如果空格的數量是一個的話 - 那么瀏覽器會自動識別
如果空格的數量大于一個或多個的話 - 瀏覽器只會識別一個
總結: 空格多了沒用,瀏覽器默認識別一個
示例代碼:
一 花 一 世 界
效果顯示圖:
備注: 不是太常用 - 因為在CSS中可以實現這些效果
示例代碼:
一花一世界 一葉一孤城
這個就是傳說中的縮進效果
說明：
這個就是傳說中的添加雙引號。
這是傳說中的斜體那里是斜體這里不是
還是斜體還是那里是斜體
黑龍江在這里
地址：這里是地址
用法:
< del >表示刪除線
< ins >改正線
示例代碼:
馬上出錯了,
刪除在這里,改正在這里,完美
效果圖:
備選字體系列 - 用戶電腦中已安裝的字體
問題 - 必須選擇使用用戶電腦中存在的字體系列
問題 - 一般存在的字體可選數量不多
解決: 可以一次性指定多個字體系列 - 中間使用逗號分隔
示例代碼:
字體大小一花一世界
一葉一孤城
字體大小分兩個值:
像素值
百分比值 - 相對于瀏覽器頁面默認字體大小(16px)
注意: 一般不建議使用相對值,因為不知道相對值的大小 - 無法確定字體到底是多大!
字體加粗字體加粗 - 建議使用數字值 (原因跟字體大小相似)
font屬性font屬性 - 必須是按順序排列否則無效
順序是:
font-style(字的斜體) - font-weight(字體加粗) - font-size(字體大小) - font-family(字體類型)
font: bold italic large serif ;文本裝飾
一花一世界
行間距就是設置每行之間的距離
也可以稱之為行高 - 可以實現垂直居中
示例代碼:
一花一世界
一花一世界
效果圖分析:
備注: 調整字母間距允許設置漢字之間的間距
因為瀏覽器會把漢字默認成為字母
示例代碼:
woshidashuaige
one static style
亞古獸變身
效果顯示圖:
注意: 瀏覽器默認向左對齊
示例代碼:
花花世界
一花一世界
一葉一孤城
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?
效果顯示圖:
注意: 垂直方向對齊 - 是指圖片的某個位置與文本對齊
示例代碼:
Lorem ipsum
dolor sit amet, consectetur adipisicing elit.
效果顯示圖:
text-indent(文本縮進)
文本縮進效果只控制首行 - 使用像素值控制
示例代碼:
效果顯示圖:
-注意: 文本陰影設置偏移量時需要水平和垂直同時設置否則無效
示例代碼:
一花一世界
注意: 當需要多個陰影效果時中間用逗號隔開
示例代碼:
text-shadow: 5px 5px #00FFFF,-5px -5px #33FF33;
效果顯示圖:
word-break:break-all - 是強行將單詞進行拆分
注意: 這個屬性只對英文有效
示例代碼:
http://www.chinanews.com/gn/2018/07-18/8570713.shtml
效果顯示圖:
CSS3新增引入Web字體
在當前工程中，導入指定字體文件
當用戶訪問HTML頁面時，加載指定的字體文件
可以在HTML頁面使用指定字體系列
示例代碼:
yihuayishijie
代碼分析圖:
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52934.html
摘要：文本標題元素注意在一個頁面中最好只使用一個標題因為瀏覽器只會抓取一個多了沒用示例代碼標題元素元素默認效果是顯示最大顯示最小默認效果是由瀏覽器自帶樣式提供可以通過進行修改每個標題元素是獨占一行并且是垂直排列在實際開發中常用的標題元素最 文本 標題元素 注意: 在一個HTML頁面中最好只使用一個標題 因為瀏覽器只會抓取一個多了沒用 示例代碼: 一花一世界 一葉一孤城 娃哈哈 爽歪歪...
摘要：鏈接與圖像鏈接元素元素表示鏈接元素作用從當前頁面跳轉到指定頁面屬性設置指定跳轉頁面的路徑路徑分類相對路徑相對于當前頁面的路徑絕對路徑訪問的路徑地址不變化示例代碼相對路徑的鏈接文本陰影案例他是鏈接絕對路徑的鏈接他也 鏈接與圖像 鏈接元素 < a >元素 - 表示鏈接元素 作用 - 從當前html頁面跳轉到指定html頁面 屬性 href - 設置指定跳轉html頁面的路徑 ...
摘要：鏈接與圖像鏈接元素元素表示鏈接元素作用從當前頁面跳轉到指定頁面屬性設置指定跳轉頁面的路徑路徑分類相對路徑相對于當前頁面的路徑絕對路徑訪問的路徑地址不變化示例代碼相對路徑的鏈接文本陰影案例他是鏈接絕對路徑的鏈接他也 鏈接與圖像 鏈接元素 < a >元素 - 表示鏈接元素 作用 - 從當前html頁面跳轉到指定html頁面 屬性 href - 設置指定跳轉html頁面的路徑 ...
摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
閱讀 1697·2021-10-09 09:44
閱讀 3263·2021-09-27 13:36
閱讀 1520·2021-09-22 15:33
閱讀 1274·2021-09-22 15:23
閱讀 1159·2021-09-06 15:02
閱讀 1695·2019-08-29 16:14
閱讀 2901·2019-08-29 15:26
閱讀 2408·2019-08-28 18:08
