第五章 CSS美化網頁元素
阿新 • • 發佈:2018-11-01
一.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);