德宏網(wǎng)站建設(shè)公司活動(dòng)營銷案例100例
一、CSS介紹
1.1 什么是CSS
CSS(Cascading Style Sheet)，層疊樣式表,用于控制頁面的樣式.
CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級(jí)精確控制, 實(shí)現(xiàn)美化頁面的效果. 能夠做到頁面的樣式和結(jié)構(gòu)分離.?
1.2 基本語法規(guī)范
選擇器 + {?條/N條聲明}?
? 選擇器決定針對誰修改 (找誰)? ? 聲明決定修改啥. (干啥)
? 聲明的屬性是鍵值對. 使用?; 區(qū)分鍵值對, 使用?: 區(qū)分鍵和值.?
<style>p {/* 設(shè)置字體顏? */ color: red;/* 設(shè)置字體?? */ font-size: 30px;}
</style>
<p>hello</p>
例如：
注意：
1.CSS一般寫到style標(biāo)簽中（其他方式后面介紹）；
2.style標(biāo)簽一般放到head標(biāo)簽中；?
1.3 CSS引入方式
CSS有三種引入方式：
1.行內(nèi)樣式：將style標(biāo)簽作為屬性寫到起始標(biāo)簽內(nèi)。
?
2.內(nèi)部樣式：
將style標(biāo)簽寫到HTML語句中。
?
3.外部樣式：
將CSS語句寫到.css文件中。
三種引入方式對比：
1. 行內(nèi)樣式會(huì)出現(xiàn)大量的代碼冗余, 不方便后期的維護(hù)，所以不常用
2. 內(nèi)部樣式, 只適合于寫簡單樣式.?只針對某個(gè)標(biāo)簽生效. 缺點(diǎn)是不能寫太復(fù)雜的樣式.?
3. 外部樣式，html和css實(shí)現(xiàn)了完全的分離, 企業(yè)開發(fā)常用方式.?
1.4 CSS書寫規(guī)范
樣式大小寫
統(tǒng)一使用小寫字母。
空格規(guī)范
1.冒號(hào)后面帶空格。
2.選擇器和 } 之間帶空格。
二、CSS選擇器
CSS 選擇器的主要功能就是選中頁面指定的標(biāo)簽元素. 選中了元素, 才可以設(shè)置元素的屬性.?
CSS的選擇器主要有標(biāo)簽選擇器、class選擇器、id選擇器、復(fù)合選擇器、通配符選擇器。
?2.1 標(biāo)簽選擇器
即將HTML中的標(biāo)簽作為選擇器的選擇器，如：
/* 選擇所有的a標(biāo)簽, 設(shè)置顏?為紅? */
a {color: red;
}
/* 選擇所有的div標(biāo)簽, 設(shè)置顏?為綠? */
div {color: green;
}示例：
2.2 ID選擇器
！！！標(biāo)簽選擇器改變的是整個(gè)頁面中所有標(biāo)簽為該標(biāo)簽的屬性，而ID選擇器改變的只是頁面中標(biāo)簽id為目標(biāo)id的屬性，往往改變的是單個(gè)標(biāo)簽的屬性（id不重復(fù)的情況下）。
/* 選擇id為submit的元素, 設(shè)置顏?為紅? */
#submit {color: red;
}！！！注意：使用ID選擇器要再id前加 # 以區(qū)分id與標(biāo)簽的區(qū)別。?
示例：
2.3 類選擇器
即通過標(biāo)簽中的class屬性來改變標(biāo)簽的屬性的選擇器。
用來改變幾個(gè)類屬性相同的標(biāo)簽的屬性。
/* 選擇class為font32的元素, 設(shè)置字體??為32px */
.font32 {font-size: 32px;
}！！！注意：通過再class名前加“ . “來區(qū)分它為類選擇器。
示例：
2.4 通配符選擇器
/* 設(shè)置??所有元素, 顏?為紅?*/
* {color: red;
}示例：
2.4 復(fù)合選擇器
類型一：
/*只設(shè)置 ul標(biāo)簽下的 li標(biāo)簽下的 a標(biāo)簽, 顏?為紅?*/
ul li a {color: blue;
}ul li a 之間以空格隔開，表示將ul標(biāo)簽下的li標(biāo)簽下的a標(biāo)簽的顏色改為blue，它們之間是父子關(guān)系。?
類型二：
?
?
ul ， ol {color:red;
}?ol li 之間以逗號(hào)隔開，表示將所有的ul ol標(biāo)簽都改為紅色，它們之間是兄弟關(guān)系。
?三、常用CSS
<div class="div1">我是一個(gè)div</div>3.1 color
color:設(shè)置字體顏色
.text1{color: red;
}結(jié)果如下：
?其中，顏色有以下三種表達(dá)方式：
1.英文單詞：如red、green等
?
2.rgb代碼的顏色：如rgb(255,0,0)(即用三原色表示）
?
3.十六進(jìn)制表示：如#ff00ff（即將三原色的值用十六進(jìn)制表示出來）
?3.2 font-size
font-size用于設(shè)置字體大小
.div1 {font-size: 50px;} 結(jié)果如下：
3.3 border（邊框）
邊框是?個(gè)復(fù)合屬性, 可以同時(shí)設(shè)置多個(gè)樣式, 不分前后順序, 瀏覽器會(huì)根據(jù)設(shè)置的值自動(dòng)判斷 。
.text1{border: 1px solid purple;
}結(jié)果如下：
?邊框分為上下左右（top、buttom、left、right）四個(gè)部分，我們也可以單獨(dú)對邊框的某部分進(jìn)行設(shè)置，如：
上面border的屬性分別為邊框粗細(xì)、樣式還有顏色。也可以根據(jù)下表分開設(shè)置：
也就是說，上面的代碼相當(dāng)于：
.text1 {/* border: 1px purple solid; */border-width: 1px;border-style: solid;border-color: purple;
}這三個(gè)屬性可以通過1~4個(gè)值來指定（以border-width為例）：
<1>當(dāng)指定一個(gè)值時(shí)：同時(shí)設(shè)置4條邊的寬度；
<2>當(dāng)指定二個(gè)值時(shí)：第一個(gè)值設(shè)置頂部和底部，第二個(gè)值設(shè)置左側(cè)和右側(cè)；
<3>當(dāng)指定三個(gè)值時(shí)：第一個(gè)值設(shè)置頂部，第二個(gè)值設(shè)置左側(cè)和右側(cè)，第三個(gè)值設(shè)置底部；
<4>?當(dāng)指定四個(gè)值時(shí)：按照頂不，右側(cè)，底部，左側(cè)（順時(shí)針）設(shè)置；
其它兩個(gè)屬性類似。
?3.4 width和height
width: 設(shè)置寬度?
height: 設(shè)置高度
注意：只有塊級(jí)元素才可以設(shè)置寬高！！！（即獨(dú)占一行的元素，如h1~h6等），比如改變span標(biāo)簽的高度和寬度是不會(huì)生效的。
如果一定要設(shè)置行內(nèi)標(biāo)簽的寬高呢？我們可以通過使用display屬性修改元素的顯示模式。
?
? display: block 改成塊級(jí)元素 [常用]?
?
? display: inline 改成行內(nèi)元素 [很少用]?
3.5 padding（內(nèi)邊距）和 margin（外邊距）
padding: 內(nèi)邊距, 設(shè)置內(nèi)容和邊框之間的距離.?
內(nèi)容默認(rèn)是頂著邊框放置的. 用 padding 來控制這個(gè)距離
.text1 {padding: 20px;
}?
?margin：外邊距，設(shè)置元素與元素之間的距離。
.text1 {margin: 20px;
}?
注意：和border一樣，padding和margin也是?個(gè)復(fù)合樣式, 可以對四個(gè)方向分開設(shè)置?
? padding-top?
? padding-bottom?
? padding-left?
? padding-right?
? margin-top
? margin-bottom
? margin-left?
? margin-right?
?
?示例：
！！！內(nèi)邊距和外邊距是相對的。
?