CSS樣式鏈接和文字常用屬性


行內: <div style="color:red;"></div>

內嵌<style>div{background-color:red;}</style>

外部引用

<link rel="stylesheet"(樣式表) href="./xxx.css">

 xxx.css文件:  div{color:red}

CSS文字屬性

color : #999999; /*文字顏色*/

font-family : 宋體,sans-serif; /*文字字體*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜體*/

font-variant:small-caps; /*小字體*/

letter-spacing : 1pt; /*字間距離*/

line-height : 200%; /*設置行高*/

font-weight:bold; /*文字粗體*/

vertical-align:sub; /*下標字*/

vertical-align:super; /*上標字*/

text-decoration:line-through; /*加刪除線*/

text-decoration: overline; /*加頂線*/

text-decoration:underline; /*加下划線*/

text-decoration:none; /*無修飾線*/

text-transform : capitalize; /*首字大寫*/

text-transform : uppercase; /*英文大寫*/

text-transform : lowercase; /*英文小寫*/

text-align:right; /*文字右對齊*/  

text-align:left; /*文字左對齊*/

text-align:center; /*內部元素居中*/

text-align:justify; /*文字分散對齊*/

vertical-align:top; /*垂直對齊該行元素內的最大元素頂部/

vertical-align:bottom; /*垂直對齊該行元素內的最大元素的底部*/

vertical-align:middle; /*垂直居中對齊*/

vertical-align:text-top; /*垂直對齊父元素的頂部*/

vertical-align:text-bottom; /*垂直對齊父元素的底部*/

top、bottom、text-top、text-bottom區別:

 

 

<p style="font-size: 15px; text-decoration: overline ;">一個

              <top>top對齊</top>

              <span style="font-size: 30px; text-decoration: overline;">方式</span>

         </p>

         <p style="font-size: 15px; text-decoration: overline ;">一個

              <ttop>text-top對齊</ttop>

              <span style="font-size: 30px; text-decoration: overline;">方式</span>

         </p>

         <p style="font-size: 15px; text-decoration: overline ;">一個

              <bottom>bottom對齊</bottom>

              <span style="font-size: 30px; text-decoration: overline;">方式</span>

         </p>

         <p style="font-size: 15px; text-decoration: overline ;">一個

              <tbottom>text-bottom對齊</tbottom>

              <span style="font-size: 30px; text-decoration: overline;">方式</span>

         </p>

 

運行結果:

overflow:hidden;//隱藏文本溢出部分。

white-space:nowrap;//對文本不換行。

text-overflow:ellipsis;//溢出部分用省略表示(基於前兩個屬性都有的情況下)

text-overflow:clip;//剪切。

text-overflow:".....";//自定義格式。

position:absolute;//設置文檔的位置為絕對定位,relative表示相對定位。

right:50px;//表示該元素距離右邊元素的距離為50px,使用該元素必需設置position元素。

z-index;/*指定元素的堆疊順序*/

clip:rect(top,right,bottom,left);/*剪切圖形*/

flex//flex布局,在使用flex布局的時候,需要將父容器的flex的display設置為“display:flex;”。

title:"提示信息“   title元素用在指定的元素上,會出現提示信息。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM