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