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