css

層疊樣式表,作用是為標簽加效果

<div style="background: red">123</div>

基本選擇器

元素選擇器

標簽名稱{css屬性:值}

div{width:100px;}

id選擇器

id{}

html代碼:
<div id="d1">

    </div>

css寫法:
    #d1{
        background-color: green;
        width: 100px;
        height: 100px;
    }

類選擇器

.class1{屬性:值}

html代碼:
<div id="d1" >
    baby
</div>

<div id="d2" >
   熱巴
</div>

<div id="d3" >
    唐藝昕
</div>


css寫法:
.c1{
    background-color: green;
    width: 100px;
    height: 100px;
}

屬性選擇器

html代碼:
<div id="d5"  xx="ss">
    baby
</div>

<div id="d2"  xx="kk">
   熱巴
</div>

css寫法:
[xx]{
           /*屬性查找*/
           background-color: green;
    width: 100px;
    height: 200px;
       }


        [xx='ss']{
            /*屬性帶屬性值查找*/
    background-color: green;
    width: 100px;
    height: 200px;
}

后代選擇器

html代碼:

div id="d1"  xx="ss">
        <span>
            <a href="http://www.baidu.com">baby</a>
        </span>
    </div>
    <div id="d2"  xx="kk">
        <a href="http://www.baidu.com">熱巴</a>
    </div>
    <div id="d3" >
        唐藝昕
    </div>
    <a href="http://www.baidu.com">xxxxxxx</a>

div a{    color: yellow;}

組合選擇器

div,a{ color: yellow;}

html代碼:
div id="d1"  xx="ss">
        <span>
            <a href="http://www.baidu.com">baby</a>
        </span>
    </div>
    <div id="d2"  xx="kk">
        <a href="http://www.baidu.com">熱巴</a>
    </div>
    <div id="d3" >
        唐藝昕
    </div>
    <a href="http://www.baidu.com">xxxxxxx</a>
    
    
css代碼: 
注意:a標簽字體顏色設定,必須找到a標簽才能設定
	#d1 a,#d3 a{
        background-color: pink;
        color:yellow;
    }

css樣式引入方式

head標簽中引入

<style>
    /* 選擇器{css屬性名稱:屬性值;css屬性名稱:屬性值;} */
    div{                               用了基本選擇器中的元素選擇器
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
給所有div標簽加樣式

外部檔案引入

（作業中常用的）

創建一個css檔案,stylesheet檔案,比如test.css檔案，里面寫上以下代碼
div{
    /* css注釋 */
    width: 200px;
    height: 200px;
    background-color: red;
}

在想使用這些css樣式的html檔案的head標簽中寫上下面的內容
<link rel="stylesheet" href="https://www.cnblogs.com/-xct/p/test.css"> href對應的是檔案路徑

行內樣式

<div style="background-color: red;height: 100px;width: 100px;"></div>

multiple="multiple"?

css樣式相關

display屬性

改變標簽屬性:
inline: 將塊級標簽變成了行內標簽
block:將行內標簽變成塊級標簽
inline-block: 同時具備行內標簽和塊級標簽的屬性,也就是不獨占一行,但是可以設定高度寬度
none: 設定標簽隱藏（了解，后面用）

html代碼

 <span>
        我是span標簽
    </span>
    <div >
        鵝鵝鵝,曲項向天歌!
    </div>

    <div >
        白毛浮綠水
    </div>

css寫法

span{display: block;}             將行內標簽變成塊級標簽
    .c1{
        background-color: red;    內容背景顏色
        height: 100px;            內容背景高度
        width: 100px;			  內容背景寬度
        display: inline;		  將塊級標簽變成行內標簽
        /*display: inline-block;*/  同時具備行內標簽和塊級標簽的屬性
         }

顏色設定

英文單詞:red;
十六進制: #ff746d;
rgb: rgb(155, 255, 236);

背景顏色透明度: rgba(255, 0, 0,0.3);      
單純的就是顏色透明度

標簽透明度（例如背景圖片透明度）: opacity: 0.3;         
0到1的數字,這是整個標簽的透明度

盒子模型

標簽占空間總大小=margin+border+padding+content

html代碼

<div>
	窗前明月光
</div>

css寫法

div{ width: 200px;   		 		         內容寬度
     height: 100px;  		 		         內容高度
     background-color: rgba(255, 0, 0,0.3);  內容背景顏色
     background-image: url("fage.png");      內容背景圖片 url寫圖片路徑,也可以是網路地址路徑
	 margin: 10px 15px		 		外邊距:上下 左右  距離無顏色
     border: 4px solid red;  		邊框:大小 樣式 顏色 
     padding: 4px 2px 6px 8px;   上4右2下6左8  內邊距       
}

margin 外邊距

距離其他標簽或者自己父級標簽的距離

html代碼

	<div>
        窗前明月光
    </div>
    <div >
        <div >
        </div>
    </div>

css寫法

  .c1{
        background-color: red;
        height: 100px;
        width: 100px;
	 /*margin: 10px 15px;*/     上下10，左右15
        margin-left: -10px;
    }
    .c2{
        background-color: green;
        height: 20px;
        width: 20px;
        /*margin: 10px 15px;*/
        margin-left: 20px;
    }

讓外邊距為零

body{
	margin: 0;
}

border 邊框

html代碼

<div>
	窗前明月光
</div>

css寫法

邊框簡寫方式,對四個邊框進行設定
<div style="border:1px solid red; ">           /*寬度/樣式/顏色*/
窗前明月光
</div>                                         

order-left: 1px solid green;  單對左邊邊框設定   
border-top: 1px solid blue;   上邊邊框       


細寫
border-width: 5px;  邊框寬度
border-style: dashed;  邊框樣式
border-color: aqua; 邊框顏色

padding 內邊距

內容和邊框之間的距離

html寫法

<div style="padding:1px solid red; ">   /*寬度/樣式/顏色*/
窗前明月光
</div>

padding: 6px 8px;           上下6左右8
padding: 4px 2px 6px 8px;   上4右2下6左8
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;

content: 內容部分

背景

html代碼

<div>
	窗前明月光
</div>

css寫法

background-color: #ff746d;            背景顏色
background-color: rgba(255, 0, 0,0.3);背景顏色
background-image: url("fage.png");   url寫圖片路徑,也可以是網路地址路徑

background-repeat: no-repeat;        不重復
background-repeat: repeat-y;		 y方向上
background-position: right top;      右上
（lift top,center top,right top,center bpttom）
background-position: 100px 50px;  	 離左邊邊多少,離右邊多少  一般通過css設定

簡寫方式: 
    background: #ff0000 url("fage.png") no-repeat right bottom;

高度寬度

css寫法:
	div{
        height: 100px;
        width: 100px;
        background-color: pink;
    }
    span{                        ！！！行級標簽不能設定高度寬度
        height: 100px;
        width: 100px;
        background-color: green;
    }

可以設定百分比，會按照父級標簽的高度寬度來計算

<div ><div >234</div></div>

css寫法:
	    .c1{
        width: 200px;
        height: 100px;
        background: red;
    }
        .c2{
            width: 50%;
            height: 50%;
            background: gold;
        }

字體相關

html代碼

<div>
	窗前明月光
</div>

css寫法

font-size: 50px;	/* 默認字體大小是16px */
color:green; 		/* 字體顏色 */

font-family: 		'楷體', '宋體';      瀏覽器如果不支持第一個選第二個，，，

font-weight: 400;    /* 字體粗細 100-900,默認是400 */

字體對齊

html代碼:
    <div>
        窗前明月光
    </div>

css寫法

div{  height: 100px;
      width:200px;
  	  background-color: yellow;
	  text-align: center;  水平居中  
	  line-height: 100px;  和height高度相同,標簽文本垂直居中
		/*垂直居中*/ 
	  text-align: right;右對齊

浮動

浮動的元素,不獨占一行,并且可以設定高度寬度

html代碼

<div > 

<div ></div>
<div ></div>
</div> 

<div ></div>

scc寫法

body{ margin: 0; }   要浮動,先讓默認為8的外邊距為0

c1{
background-color: red;  height: 100px;
width: 200px;  float: left;
}
.c2{
background-color: green;  height: 100px;
width: 200px;  float: right;
}

.c3{
background-color: pink;
height: 100px;
width: 100%;}

塌陷解決

父級標簽沒有高度了,子標簽一浮動,會讓下面的標簽頂上來

方式1：給父級標簽加高度不常用

方式2：清除浮動(clear屬性) 不常用

.c3{
background-color: pink;  height: 100px;
width: 100%;
clear: both;	（這個標簽上面不允許有浮動的元素）
}

方式3：子標簽底下加一個空白的帶clear屬性的div標簽常用

html代碼:

<div >
<div ></div>
<div ></div>
<div style="clear: both;"></div>
</div>
<div ></div>

方式4:div標簽后面用after拼一個內容為空的帶clear屬性的塊

需要先用偽元素選擇器

html代碼:

<div >
	<div ></div>
	<div ></div>
</div>
<div ></div>

css代碼:

.clearfix:after{
	content:'';         設定內容
	display:block;       設定塊
	clear:both;			設定clear屬性
}

偽元素 after

html代碼:

<div>
	一段文字
<div>

css代碼:

div{
	background-color:pink;
	height:100px;
	width:200px;}
div:after{
content:'?';
color:white;}

偽類 hover

html代碼:

<div>

</div>

css寫法:

.c1{
	background-color:red;
	height:300px;
	width:300px;}

.c1:hover{                                     /*滑鼠懸浮時設定效果*/
/*background-color:green;*/
background-image:url("a.png");
cursor:pointer;}      pointer 手
                      default 箭頭，crosshair 十字，progress 箭頭和沙漏

懸浮顯示其他標簽效果

html代碼:

<div>
<div>  </div>

</div>

css寫法:

.c1{background:black;
	height:400px;
	width:400px;
}

.c2{background:aqua;
	height:40px;
	width:40px;
	display:none;          改display為隱藏屬性
}

.c1:hover.c2{
	display:block;          滑鼠懸浮時顯示c2,改display為塊屬性
}

positon 定位

做一些小的范圍布局

html代碼:

<div >
	<div ></div>
	<div ></div>
</div>
<div ></div>

static 靜態定位

也就是標簽默認

relative 相對定位

相對于父級標簽移動,原來的位置還占著,不會造成下面的標簽頂上去的情況

css代碼:

position:relative;
left:100px;   離左邊
top:-100px;   離上面
/*bottom:*/	  離下面
/*right:*/    離右邊

absolute 絕對定位

相對于父級標簽移動,原來的位置不占著,會造成下面的標簽頂上去的情況

css代碼:

position:absolute;
top:20px;
left:80px;

fixed 固定定位

按照瀏覽器視窗的位置進行移動

html代碼:

<span><ahref="">回傳頂部</a></span>

css代碼:

.s1{
position:fixed;
left:40px;
bottom:20px;
}

優先級

!important>行內樣式>ID選擇器>類選擇器>標簽

越精準的定位優先級越高

繼承

標簽

類

id

!important

無敵

練習（下周一之前完成即可）：

通過html和css完成小米商城首頁的開發,暫不需要完成動態效果,有頁

面展示效果就可以（https://www.mi.com/）

注意：前端頁面效果可以通過很多種方式實作，沒有標準答案，大家

可以參考小米官網原始碼，也可以根據自己想法去實作

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/93634.html

標籤：Html/Css

上一篇：易優CMS：switch的基礎用法

下一篇：cookie，sessionstorage，localstorage區別

css入門

css

基本選擇器

元素選擇器

id選擇器

類選擇器

屬性選擇器

后代選擇器

組合選擇器

css樣式引入方式

head標簽中引入

外部檔案引入

行內樣式

css樣式相關

display屬性

顏色設定

盒子模型

margin 外邊距

border 邊框

padding 內邊距

content: 內容部分

背景

高度寬度

字體相關

字體對齊

浮動

塌陷解決

偽元素 after

偽類 hover

懸浮顯示其他標簽效果

positon 定位

static 靜態定位

relative 相對定位

absolute 絕對定位

fixed 固定定位

優先級

繼承

標簽

類

id

!important