css總結

css選擇器

id選擇器---用#

class類選擇器---用.

元素選擇器---用元素標籤

屬性選擇器---input[type=」text」]{

                            Border:2px;

}

僞類選擇器

	/*未訪問時*/ a:link{
	color:black;
	text-decoration: none;
	}
	/*訪問後*/
	a:visited{
	color: gainsboro;
	}
	/*移入*/
	a:hover{
	background: lightpink;
	}
	/*點擊時，那一瞬間*/
	a:active{
	font-size: 30px;
	background: rosybrown;
	}

根元素選擇器

:root{
	background: gainsboro;
	}

空元素選擇器

table :empty{
	background: darkblue;

}

自動獲取焦點

input[type="password"]:focus{
	border:10px dashed #DDC90F;
}

選擇被選中的元素

input[type="checkbox"] :checked{
	font-size: 20px;
	}

選中時變成。。。。

p::selection{
	background: deeppink;
	color: papayawhip;
	}

選中時第一行變成。。。。

.div2:first-line{
	color: slateblue !important;
	}

選中時第一個字變成。。。。

.div2:first-letter{
	font-size: 20px;
	font-weight: 900;
	}

在內容以前和以後加內容（與content一塊兒用）

.div2:before{
	content: "我說：";
	}
	.div2:after{
	content: "再見！";
	}

通用選擇器（選擇全部元素）

*{
	margin: 0;
	padding: 0;
	}

選擇除了e元素以外全部元素

：not（e）

選擇第n行元素

ul li:nth-child(n){

           background:red

}

選擇倒數第你n行元素

ul li:nth-last-child(n) {

           background:red

}

選擇奇數行元素

ul li:nth-child(odd){

           background:red

}

選擇偶數行元素

ul li:nth-child(even){

           background:red

}

選擇3n+2行元素

ul li:nth-child(3n+2){

           background:red

}

多個元素一塊兒選擇

h1,h2,h3,h4,h5,h6{
	font-weight: normal;
	}

第四課

Css樣式

.p1{
	/*font-weight: bold;*/ 設置字體寬度
	/*font-weight: 400;*/
	/*font-weight: 700;*/
	font-weight: 900;
	/*font-style: italic;*/ 設置字體樣式(傾斜)
	font-style: oblique;
	/*首行縮進*/
	text-indent: 20px;
	/*字間距*/
	letter-spacing: 20px;
	line-height: 40px; 行間距
	}

 

.p2{
		word-spacing: 20px; 設置詞間距對英文有效
		/*所有大寫*/
		/*text-transform: uppercase;*/
		/*所有小寫*/
		/*text-transform: lowercase;*/
		/*首字母大寫*/
		text-transform: capitalize;
		}
.div1{
			border: 1px solid #000;
			text-align: center; 橫向居中
			/*上線*/
			/*text-decoration: overline;*/  字體加上劃線
			/*text-decoration: underline;*/ 字體加下劃線
			/*中間刪除線*/
			/*text-decoration: line-through;*/
			/*橫向水平值 縱向值 模糊值 顏色*/ 字體隱影
			text-shadow: 5px 0 2px green;
table td{
				width: 30px;
				height: 60px;
				/*vertical-align: top;*/ 設置字體垂直居上
				/*vertical-align: bottom;*/ 設置字體垂直居下
				/*vertical-align: middle;*/ 設置字體垂直居中
				}
.box1{
	width: 400px;
	height: 400px;
	border: 5px double #000;
	/*background-color: red;*/ 設置背景顏色
	/*background-image: url("../img/logo_db.png");*/ 設置背景圖片
	/*background-repeat: no-repeat;*/ 設置背景平鋪（不平鋪）
	/*background-repeat: repeat-x;*/ 設置背景平鋪（x軸平鋪）
	/*background-repeat: repeat-y;*/ 設置背景平鋪（y軸平鋪）
	/*background-position: center right;*/ 設置背景中心居右
	/*background-size: 50%;*/ 設置背景大小（父元素的50%）
	/*擴展到足夠大超出部分隱藏*/
	/*background-size: cover;*/
	/*擴展到最大*/
	/*background-size: contain;*/
	background: yellow url("../img/logo_db.png") no-repeat center;
	}背景設置縮寫

 

Ul li {
	list-style: none; 列表樣式（無前面的圓點）
	/*空心圓*/
	/*list-style-type: circle;*/
	/*list-style-type: upper-roman;*/ 大寫羅馬數字
	list-style-image: url("../img/logo_db.png");前面圓點換成圖片
	}

        /*----------利用行高製做淘寶導航logo----------*/

        .change1{

            width: 154px;

            height: 30px;

            background-image: url(../img/logo_db.png);

            overflow: hidden;

        }

        .change1 a{

            display: block;

            /*background: red;*/

            line-height: 200px;

        }

 

        /*---------利用首航縮進製做淘寶導航logo----------*/

        .change2{

            width: 154px;

            height: 30px;

            background-image: url(../img/logo_db.png);

            text-indent: -1000px;

        }

        .change2 a{

            display: block;

        }

 

        /*--------利用定位製做淘寶導航logo----------*/

        .change3{

            width: 154px;

            height: 30px;

            font-size: 12px;

            color: transparent;

            text-decoration: none;

            position: relative;

        }

        .change3 span{

            width: 154px;

            height: 30px;

            background-image: url(../img/logo_db.png);

            position: absolute;

            top: 0;

            left: 0;

        }

        .change3A{

            text-decoration: none;

        }

 

        /*雪碧圖*/

        .spriteTest{

            width: 179px;

            height: 179px;

            border: 1px solid #000;

            background-image: url("../img/30d5bc953b7afba77514.jpg");

            background-size: 1000px 729px;

        }

        .spriteTest:hover{

            background-image: url("../img/30d5bc953b7afba77514.jpg");

            background-size: 1000px 729px;

            background-position: -279px 0;

             

  .box2{

            width: 100px;

            height: 100px;

            background: red;

            border-radius: 5px;  圓角設置

            box-shadow: 4px 0 5px #000;  隱影設置

        }

        /*漸變*/

        .box3{

            width: 500px;

            height: 100px;

            /*background: linear-gradient(#000,lightgrey);*/

            /*background: linear-gradient(to right,#000,lightgrey);*/

            background: linear-gradient(rgba(0,0,0,.5),rgba(252,12,12,.5));

        }

 

        /*轉換*/

        .box4{

            width: 200px;

            height: 200px;

            background: yellow;

            /*-webkit-transform: translate(50px,200px);*/

            /*-moz-transform: translate(50px,200px);*/

            /*-o-transform: translate(50px,200px);*/

            /*-ms-transform: translate(50px,200px);*/

            /*transform: translate(50px,200px);*/

            /*旋轉45度*/

            /*transform: rotate(45deg);*/

            /*放大x軸放大3倍 y軸放大0.5倍*/

            /*transform: scale(3,.5);*/

            /*transform: skew(45deg,0deg);*/拉扯

            /*transform: rotateX(80deg);*/繞x軸旋轉

            transform: rotateY(180deg);繞y軸旋轉

        }

 

        .box5{

            width: 100px;

            height: 100px;

            background: greenyellow;

            /*當點擊時背景顏色 漸變 過分*/

            -webkit-transition: all linear 2s;

        }

        .box5:hover{

            background: green;

        }

 

背景顏色自動變化

.box6{

            width: 100px;

            height: 100px;

            background: mediumspringgreen;

            /*簡寫方式：animation:動畫名稱 持續時間 移動方式 什麼時候(延時多久)開始 播放次數 反覆運動 （運動或者暫停 通常不使用）;*/

 

 

            /*animation-name: firstAnimation;*/

            /*animation-duration: 5s;*/

            /*animation-timing-function: linear; 線性過渡*/

        /*ease; 平滑*/

        /*ease-in; 慢到快*/

        /*ease-out;快到慢*/

        /*ease-in-out;慢到快再慢*/

        /*animation-delay: 2s;*/

            /*animation-iteration-count: infinite; 無限循環*/

        /*次數*/

        /*animation-direction: alternate; 輪流*/

        /*normal; 正常方向*/

        /*animation-play-state: running; 運行*/

        /*paused; 暫停*/

            -webkit-animation: yellowAndSuper 3s ease-in 2;

        }

        @keyframes yellowAndSuper {

            /*from{*/

                /*background: mediumspringgreen;*/

            /*}*/

            /*to{*/

                /*background: yellow;*/

            /*}*/

            0%{

                background: red;

            }

            20%{

                background: orange;

            }

            40%{

                background: yellow;

            }

            60%{

                background: green;

            }

            80%{

                background: blue;

            }

            100%{

                background: purple;

            }

        }