1. 程式人生 > >CSS美化網頁元素

CSS美化網頁元素

一.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);