1. 程式人生 > >CSS3美化網頁!!

CSS3美化網頁!!

一.span標籤:能讓某幾個文字或者某個詞語凸顯出來
        <p>
           今天是11月份的<span>第一天</span>,地鐵卡不打折了
        </p>

二.字型風格
      font-family:字型型別
      font-size:字型大小
      font-style:字型風格
      font-weight:字型粗細
      font: 風格 粗細 大小 型別;
三.文字樣式

      color 設定文字顏色 rgb(0,0,255),rgba(0,0,255,0.5)
      text-align 設定元素水平對齊方式
      text-indent 設定首行文字的縮排
      line-height 設定文字的行高
      text-decoration 設定文字的裝飾
      vertical-align 設定文字垂直方式
      text-shadow 設定文字陰影 text-shadow: 顏色 x軸偏移位置 y軸偏移位置 模糊半徑
四.超連結偽類
單擊訪問前
     .class01:link{
        color: green;
      text-decoration: none;
     }
單擊訪問後
      .class02:visited{
       color: pink;
       text-decoration: none;
}
滑鼠懸浮
    .class03:hover{
      color: aqua;
     text-decoration: none;
     }
單擊未釋放
     .class04:active{
      color: red;
      text-decoration: none;
     }
五.列表樣式
       list-style-type 列表項前圖示
       list-style-image 列表項前圖片
       list-style-image:url(../image/QQ圖片20181101095555.png);

六.背景樣式
      background-color 設定背景顏色
      background-image 設定背景影象
      background-repeat 設定影象是否平鋪
      background-position 設定背景影象位置
      background: 背景顏色 背景影象 x軸偏移位置 y軸偏移位置 平鋪;
七.漸變
       IE瀏覽器是Trident核心,加字首:-ms-
       Chrome瀏覽器是Webkit核心,加字首:-webkit-
       Safari瀏覽器是Webkit核心,加字首:-webkit-
       Opera瀏覽器是Blink核心,加字首:-o-
       Firefox瀏覽器是Mozilla核心,加字首:-moz-

     background: -webkit-gradient(linear,left bottom,right top,from(red),to(blue));
     background: linear-gradient(to bottom left,red,black);