整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 是一種標(biāo)記語言，用于創(chuàng)建網(wǎng)頁和應(yīng)用程序。它的基本結(jié)構(gòu)由以下三個(gè)部分組成：
一個(gè) HTML 的基本結(jié)構(gòu)示例如下：
SS(Cascading Style Sheets) ，層疊樣式表（級聯(lián)樣式表），用于設(shè)置HTML頁面中的文本內(nèi)容的字體、大小、對齊方式等，圖片的寬高、邊框樣式、邊距等以及頁面的布局排版等各種外觀顯示樣式。
CSS以HTML為基礎(chǔ)，可以針對不同的瀏覽器設(shè)置不同的樣式。CSS的出現(xiàn)可以說拯救了我們的頁面，讓HTML 專注去做結(jié)構(gòu)呈現(xiàn)， 而樣式全部交給 CSS來美化。
CSS樣式規(guī)則，具體格式如下：
CSS語法由兩部分組成：選擇器和聲明。 聲明包括：屬性和屬性值
選擇符 {屬性: 屬性值 ; 屬性:屬性值}
規(guī)則：
CSS放到什么位置呢？ 怎么讓它跟我們的HTML文件關(guān)聯(lián)起來呢？
內(nèi)聯(lián)樣式，又稱行內(nèi)樣式、行間樣式、內(nèi)嵌樣式。是通過標(biāo)簽的style屬性來設(shè)置元素的樣式。
<標(biāo)簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內(nèi)容 </標(biāo)簽名>
<h2 style="color:red;">
紅色標(biāo)題
</h2>
內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的head頭部標(biāo)簽中，并且用style標(biāo)簽定義
當(dāng)我們頁面比較復(fù)雜，大量的內(nèi)部樣式，會(huì)導(dǎo)致頁面看上去不美觀，而且不利于維護(hù)。這時(shí)我們通常將所有的樣式放在一個(gè)或多個(gè)以 .CSS 為擴(kuò)展名的外部樣式表文件中，通過link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中。
樣式表 | 特點(diǎn) | 使用 | 控制范圍 | 優(yōu)先級 |
行內(nèi)樣式表 | 書寫方便，權(quán)重高 | 較少 | 控制單個(gè)標(biāo)簽（小） | 高 |
內(nèi)部樣式表 | 結(jié)構(gòu)和樣式部分分離 | 較多 | 控制一個(gè)頁面（中） | 與書寫的順序有關(guān)，后書寫的高 |
外部樣式表 | 結(jié)構(gòu)和樣式完全分離，需要引入 | 最多，推薦使用 | 控制整個(gè)網(wǎng)站（多） | 與書寫的順序有關(guān)，后書寫的高 |
網(wǎng)頁中的標(biāo)簽很多，為了更好的完成我們的網(wǎng)頁布局，我們需要在不同地方會(huì)放不同類型的標(biāo)簽。
根據(jù)標(biāo)簽在網(wǎng)頁中的顯示模式，可以將HTML標(biāo)簽一般分為塊級標(biāo)簽和行內(nèi)標(biāo)簽兩種類型，即塊元素和行內(nèi)元素。
鏈接里面不能再放鏈接！
通過設(shè)置display的值，改變元素的顯示模式。
成 | 語言 | 描述 |
結(jié)構(gòu) | HTML | 網(wǎng)頁元素和內(nèi)容 |
表現(xiàn) | CSS | 網(wǎng)頁元素頁面樣式） |
行為 | JavaScript | 網(wǎng)頁交互 |
CSS，層疊樣式表（Cascading Style Sheet），給網(wǎng)頁中的HTML標(biāo)簽設(shè)置樣式
CSS寫在一個(gè)單獨(dú)的.css文件中，通過link標(biāo)簽在網(wǎng)頁中引入
<link rel="stylesheet" href="文件路徑">CSS寫在網(wǎng)頁的head標(biāo)簽中，用style標(biāo)簽包裹
<style>
/* 寫在style標(biāo)簽中的樣式 */
</style>CSS寫在標(biāo)簽的style屬性中
<標(biāo)簽名 style="行內(nèi)樣式寫在這"></標(biāo)簽名>三種CSS樣式引入方式的區(qū)別
引入方式 | 書寫位置 | 作用范圍 | 使用場景 |
外部樣式 | CSS寫在單獨(dú)的css文件中，通過link標(biāo)簽引入 | 多個(gè)頁面 | 項(xiàng)目中 |
內(nèi)部樣式 | CSS寫在head頭部style標(biāo)簽中 | 當(dāng)前頁面 | 案例演示中 |
行內(nèi)樣式 | CSS寫在標(biāo)簽的style屬性中 | 當(dāng)前標(biāo)簽 | 配合js使用 |
選擇器，就是選取（查找）需要設(shè)置樣式元素的方式
選擇器 {
屬性名: 屬性值;
}屬性名和屬性值合稱為css屬性
通過元素名稱，選取（查找）相同元素，然后對相同元素設(shè)置CSS樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>我愛中國</p>
<p>我愛人民</p>
<div>我愛家鄉(xiāng)</div>
</body>
</html>小結(jié)：
1、無論嵌套多少層，只要元素名稱相同都會(huì)被找到
通過類名稱，找到頁面中所有帶這個(gè)類名稱的元素，然后對其設(shè)置CSS樣式
類選擇器，也有人叫class選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.color-style {
color: red;
}
</style>
</head>
<body>
<p class="color-style">我愛中國</p>
<p>我愛人民</p>
<div class="color-style">我愛家鄉(xiāng)</div>
</body>
</html>小結(jié)：
1、所有元素都有class屬性，class屬性的屬性值叫類名
2、類名由數(shù)字、字母、下劃線、中劃線組成，不能以數(shù)字、中劃線開頭
3、一個(gè)元素可以有多個(gè)類名，類名之間用空格隔開
通過元素id屬性的屬性值，找到頁面中帶這個(gè)id屬性值的元素，然后對其設(shè)置CSS樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#one {
color: red;
}
</style>
</head>
<body>
<p id="one">我愛中國</p>
<p id="two">我愛人民</p>
<div>我愛家鄉(xiāng)</div>
</body>
</html>小結(jié)：
1、所有元素都有id屬性
2、id屬性值在一個(gè)頁面中是唯一的
3、一個(gè)元素只能有一個(gè)id屬性值
查找頁面中所有的元素，然后對其設(shè)置CSS樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
color: red;
}
</style>
</head>
<body>
<p id="one">我愛中國</p>
<p id="two">我愛人民</p>
<div>我愛家鄉(xiāng)</div>
</body>
</html>小結(jié)：
1、通常用于網(wǎng)頁重置樣式，不常用
根據(jù)選擇器查找符合條件的元素，再根據(jù)后代選擇器查找符合條件的元素，然后對其設(shè)置CSS樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#one p {
color: red;
}
</style>
</head>
<body>
<div id="one">
<p>我愛中國</p>
<p>我愛人民</p>
<div>我愛家鄉(xiāng)</div>
<div>
<p>我愛中國</p>
<p>我愛人民</p>
</div>
</div>
<div id="two">
<p>我愛中國</p>
<p>我愛人民</p>
<div>我愛家鄉(xiāng)</div>
<div>
<p>我愛中國</p>
<p>我愛人民</p>
</div>
</div>
</body>
</html>根據(jù)多個(gè)選擇器各自查找符合條件的元素，然后對其設(shè)置CSS樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p,h3 {
color: red;
}
</style>
</head>
<body>
<p>我愛中國</p>
<h3>我愛人民</h3>
<div>我愛家鄉(xiāng)</div>
</body>
</html>字體樣式，針對文字本身樣式
字體相關(guān)的CSS屬性
屬性 | 說明 |
font-family | 字體類型 |
font-size | 字體大小 |
font-weight | 字體粗細(xì) |
font-style | 字體風(fēng)格 |
color | 字體顏色 |
語法：
font-family: 字體1,字體2,字體3...;說明：
1、font-family屬性可是設(shè)置多個(gè)屬性值，用英文逗號隔開，生效順序是從左到右。瀏覽器默認(rèn)字體類型一般是"宋體"
2、字體類型只有一個(gè)英文單詞，則不需要加上引號；字體類型是多個(gè)英文單詞或中文的，則需要加上雙引號
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
font-family: Arial;
}
h3 {
font-family: monospace;
}
div {
font-family: "新宋體";
}
</style>
</head>
<body>
<p>我愛中國</p>
<h3>我愛人民</h3>
<div>我愛家鄉(xiāng)</div>
</body>
</html>語法：
font-size: 數(shù)字 + px說明：
1、px是像素單位，單位需要設(shè)置，否則無效
2、谷歌瀏覽器默認(rèn)文字大小是16px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
font-size: 18px;
}
div {
font-size: 36px;
}
</style>
</head>
<body>
<p>我愛中國</p>
<div>我愛家鄉(xiāng)</div>
</body>
</html>語法：
font-weight: normal/bold/100~900說明：
屬性值 | 說明 |
normal | 正常（默認(rèn)值） |
bold | 較粗 |
100~900 | 取100~900九種數(shù)值 |
實(shí)際開發(fā)一般會(huì)設(shè)置bold，不設(shè)置默認(rèn)是normal
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
font-weight: normal;
}
div {
font-weight: bold;
}
</style>
</head>
<body>
<p>我愛中國</p>
<div>我愛家鄉(xiāng)</div>
</body>
</html>語法：
font-style: 取值說明：
屬性值 | 說明 |
normal | 正常（默認(rèn)值） |
italic | 斜體 |
oblique | 斜體 |
不是所有字體都有italic屬性值，如果沒有italic的，則用oblique
font連寫
語法：
font: style weight size family;說明：
1、可以省略前兩項(xiàng)，省略了相當(dāng)于設(shè)置了默認(rèn)值
不常用，作為了解
語法：
color: 顏色值說明：
color屬性取值常用有兩種，一種是關(guān)鍵字（比如red、green、blue），另外一種是16進(jìn)制RGB值（#000000，#FFFFFF）
問題一：給同一個(gè)元素設(shè)置了相同的屬性樣式，哪個(gè)生效？
答：樣式會(huì)層疊（覆蓋），寫在最后面的會(huì)生效。
問題二：html里面有注釋，css有沒有注釋，如何寫？
<style>
/* 采用元素選擇器給p元素設(shè)置css樣式 */
p {
color: #000000; /* p元素字體顏色為黑色 */
}
</style>文本樣式，針對段落的排版效果
文本相關(guān)CSS屬性
屬性 | 說明 |
text-indent | 首行縮進(jìn) |
text-align | 水平對齊 |
text-decoration | 文本修繕 |
text-transform | 大小寫轉(zhuǎn)換 |
line-height | 行高 |
letter-spacing | 字母間距 |
word-spacing | 詞間距 |
語法：
text-indent: 像素值說明：
縮進(jìn)大小和字體大小是有關(guān)的，縮進(jìn)1個(gè)字的空間等同于1個(gè)字的字體大小。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
font-size: 14px;
text-indent: 28px;
}
</style>
</head>
<body>
<p>舜發(fā)于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
</body>
</html>語法：
text-align: 取值說明：
text-align屬性取值
屬性值 | 說明 |
left | 左對齊（默認(rèn)值） |
center | 居中對齊 |
right | 右對齊 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.one {
text-align: left;
}
.two {
text-align: center;
}
.three {
text-align: right;
}
</style>
</head>
<body>
<p class="one">生于憂患死于安樂</p>
<p class="two">生于憂患死于安樂</p>
<p class="three">生于憂患死于安樂</p>
</body>
</html>語法：
text-decoration: 取值說明：
text-decoration屬性值
屬性值 | 說明 |
none | 去除所有的劃線效果（默認(rèn)值） |
underline | 下劃線 |
line-throught | 中劃線 |
overline | 頂劃線 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.one {
text-decoration: none;
}
.two {
text-decoration: underline;
}
.three {
text-decoration: line-through;
}
.four {
text-decoration: overline;
}
</style>
</head>
<body>
<p class="one">生于憂患死于安樂</p>
<p class="two">生于憂患死于安樂</p>
<p class="three">生于憂患死于安樂</p>
<p class="four">生于憂患死于安樂</p>
</body>
</html>語法：
text-transform: 取值說明：
text-transform屬性取值
屬性值 | 說明 |
none | 無轉(zhuǎn)換（默認(rèn)值） |
uppercase | 轉(zhuǎn)換為大寫 |
lowercase | 轉(zhuǎn)換為小寫 |
capitalize | 單詞首字母大寫 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.one {
text-transform: none;
}
.two {
text-transform: uppercase;
}
.three {
text-transform: lowercase;
}
.four {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="one">Hello World</p>
<p class="two">Hello World</p>
<p class="three">Hello World</p>
<p class="four">hello world</p>
</body>
</html>語法：
line-height: 取值;說明：
1、取值可以是一個(gè)固定的數(shù)值（比如24px），也可以是一個(gè)百分?jǐn)?shù)（比如150%）
line-height: 150%;2、使用font-size屬性和line-height屬性的組合，可以讓行高與字體大小之間保持一定的比例
font-size: 16px;
line-height: 1.53、使用line-height屬性的繼承值。如果父元素的line-height屬性有值，那么子元素及后代元素會(huì)繼承父元素的行高
body {
line-height: 1.5;
}
p {
font-size: 16px;
}行高的設(shè)置要大于字體大小的設(shè)置，才會(huì)顯得好看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p {
font-size: 16px;
line-height: 24px;
}
</style>
</head>
<body>
<p>舜發(fā)于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能</p>
</body>
</html>字間距
語法：
letter-spacing: 像素值說明：
letter-spacing屬性用來設(shè)置兩個(gè)字之間的距離，一個(gè)英文字母或漢字都是當(dāng)做一個(gè)字來處理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p {
letter-spacing: 10px;
}
</style>
</head>
<p>are you ok.你好嗎？</p>
<body>
</body>
</html>詞間距
語法：
word-spacing: 像素值;說明：
word-spacing屬性用來設(shè)置英文單詞之間的距離
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p {
word-spacing: 10px;
}
</style>
</head>
<p>are you ok.你好嗎？</p>
<body>
</body>
</html>元素基本可以定義邊框，邊框樣式由邊框?qū)挾取⑦吙蛲庥^和邊框顏色三個(gè)屬性組成。
屬性 | 說明 |
border-width | 邊框的寬度 |
border-style | 邊框的外觀 |
border-color | 邊框的顏色 |
語法：
border-width: 像素值;說明：
邊框border-width屬性值是一個(gè)像素值
語法：
border-style: 取值;說明：
border-style取值有三個(gè)
屬性值 | 說明 |
none | 無樣式 |
dashed | 虛線 |
solid | 實(shí)線 |
語法：
border-color: 顏色關(guān)鍵字/16進(jìn)制RGB值<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div {
border-width: 1px;
border-style: solid;
border-color: red;
}
</style>
</head>
<div>hello,world</div>
<body>
</body>
</html>語法：
border: border-width border-style border-color;案例：
div {
border: 1px solid red;
}元素都是盒子模型，都是有四條邊的，分別是上、下、左、右。所以又可以為元素某一邊邊設(shè)置邊框樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div {
width: 300px;
height: 200px;
border-top: 1px dashed darkred;
border-bottom: 2px solid green;
border-left: 3px solid grey;
border-right: 4px dashed lightseagreen;
}
</style>
</head>
<div></div>
<body>
</body>
</html>定義列表項(xiàng)符號
在HTML中，無序列表和有序列表是通過標(biāo)簽ul、ol的type屬性來定義的
<ol type="a">
<li>my</li>
<li>your</li>
</ol>
<ul type="disc">
<li>my</li>
<li>your</li>
</ul>接觸了css后，得改成list-style-type屬性來定義。HTML專心負(fù)責(zé)結(jié)構(gòu)，CSS專心負(fù)責(zé)樣式。
語法：
list-style-type: 取值;說明：
ol元素的list-style-type屬性值
屬性值 | 說明 |
decimal | 阿拉伯?dāng)?shù)字：1、2、3…（默認(rèn)值） |
lower-roman | 小寫羅馬數(shù)字：i、ii、iii… |
upper-roman | 大寫羅馬數(shù)字：I、II、III… |
lower-alpha | 小寫英文字母：a、b、c… |
upper-alpha | 大寫英文字母：A、B、C… |
ul元素的list-style-type屬性值
屬性值 | 說明 |
disc | 實(shí)心圓●（默認(rèn)值） |
circle | 空心圓○ |
square | 正方形■ |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
ol {
list-style-type: lower-alpha;
}
ul {
list-style-type: square;
}
</style>
</head>
<body>
<ol>
<li>my</li>
<li>your</li>
</ol>
<ul>
<li>my</li>
<li>your</li>
</ul>
</body>
</html>去除列表項(xiàng)符號
隨著技術(shù)和審美不斷的提高，實(shí)際開發(fā)中都是直接去除列表項(xiàng)符號
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
ol,ul {
list-style-type: none;
}
</style>
</head>
<body>
<ol>
<li>my</li>
<li>your</li>
</ol>
<ul>
<li>my</li>
<li>your</li>
</ul>
</body>
</html>有序列表或無序列表設(shè)置了list-style-type: none后，樣式都一樣了。
語法：
list-style-image: url(圖片路徑);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
ul {
list-style-image: url("small.png");
}
</style>
</head>
<body>
<ul>
<li>my</li>
<li>your</li>
</ul>
</body>
</html>list-style-image不能控制圖片大小，實(shí)際開發(fā)中用background來替代
語法：
caption-side: 取值;說明：
caption-side屬性取值
屬性值 | 說明 |
top | 標(biāo)題在頂部（默認(rèn)值） |
bottom | 標(biāo)題在底部 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
table,tr,th,td {
border: 1px solid gray;
}
table {
caption-side: bottom;
}
</style>
</head>
<body>
<table>
<caption>學(xué)生成績</caption>
<tr>
<th>姓名</th>
<th>數(shù)學(xué)</th>
</tr>
<tr>
<td>曹操</td>
<td>85</td>
</tr>
<tr>
<td>劉備</td>
<td>75</td>
</tr>
</table>
</body>
</html>語法：
border-collapse: 取值;說明：
border-collapse屬性取值
屬性值 | 說明 |
separate | 邊框分開，有空隙（默認(rèn)值） |
collapse | 邊框合并，無空隙 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
table,tr,th,td {
border: 1px solid gray;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<caption>學(xué)生成績</caption>
<tr>
<th>姓名</th>
<th>數(shù)學(xué)</th>
</tr>
<tr>
<td>曹操</td>
<td>85</td>
</tr>
<tr>
<td>劉備</td>
<td>75</td>
</tr>
</table>
</body>
</html>語法：
border-spacing: 像素值;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
table,tr,th,td {
border: 1px solid gray;
}
table {
border-spacing: 10px;
}
</style>
</head>
<body>
<table>
<caption>學(xué)生成績</caption>
<tr>
<th>姓名</th>
<th>數(shù)學(xué)</th>
</tr>
<tr>
<td>曹操</td>
<td>85</td>
</tr>
<tr>
<td>劉備</td>
<td>75</td>
</tr>
</table>
</body>
</html>語法：
width: 像素值;
height: 像素值;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
img {
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<img src="small.png" alt="">
</body>
</html>語法:
border: 1px solid red;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
img {
width: 40px;
height: 40px;
border: 1px solid red;
}
</style>
</head>
<body>
<img src="small.png" alt="">
</body>
</html>水平對齊
語法：
text-align: 取值;說明：
text-align屬性取值
屬性值 | 說明 |
left | 左對齊（默認(rèn)值） |
center | 居中對齊 |
right | 右對齊 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.i1 {
text-align: left;
}
.i2 {
text-align: center;
}
.i3 {
text-align: right;
}
</style>
</head>
<body>
<div class="i1">
<img src="small.png" alt="">
</div>
<div class="i2">
<img src="small.png" alt="">
</div>
<div class="i3">
<img src="small.png" alt="">
</div>
</body>
</html>圖片的水平對齊屬性設(shè)置是在圖片標(biāo)簽的父標(biāo)簽上實(shí)現(xiàn)的
垂直對齊
語法：
vertical-align: 取值;說明：
vertical-align屬性取值
屬性值 | 說明 |
top | 頂部對齊 |
middle | 中部對齊 |
baseline | 基線對齊 |
bottom | 底部對齊 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.i1 {
vertical-align: top;
}
.i2 {
vertical-align: middle;
}
.i3 {
vertical-align: baseline;
}
.i4 {
vertical-align: bottom;
}
</style>
</head>
<body>
<div>
<span>hello,world</span>
<img class="i1" src="small.png" alt="">
<span>hello,world</span>
<hr>
</div>
<div>
<span>hello,world</span>
<img class="i2" src="small.png" alt="">
<span>hello,world</span>
<hr>
</div>
<div>
<span>hello,world</span>
<img class="i3" src="small.png" alt="">
<span>hello,world</span>
<hr>
</div>
<div>
<span>hello,world</span>
<img class="i4" src="small.png" alt="">
<span>hello,world</span>
<hr>
</div>
</body>
</html>語法：
float: 取值;說明：
float屬性取值
屬性值 | 說明 |
left | 元素向左浮動(dòng) |
right | 元素向右浮動(dòng) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
img {
float: left;
}
</style>
</head>
<body>
<img src="small.png" alt="">
<p>舜發(fā)于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
</body>
</html>語法：
background-color: 顏色值;說明：
顏色值有兩種表示方式，一種是顏色關(guān)鍵字，另外一種是16進(jìn)制RGB值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div {
width: 200px;
height: 100px;
/* 背景顏色 */
background-color: burlywood;
}
</style>
</head>
<body>
<div>hello,world</div>
</body>
</html>引入背景圖片
語法:
background-image: url(圖片路徑)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div {
height: 180px;
width: 180px;
background-image: url("small.png");
}
</style>
</head>
<body>
<div></div>
</body>
</html>背景圖片重復(fù)
語法：
background-repeat: 取值;說明：
background-repeat屬性取值
屬性值 | 說明 |
repeat | 在水平方向和垂直方向上同時(shí)平鋪（默認(rèn)值） |
repeat-x | 只在水平方向（x軸）上平鋪 |
repeat-y | 只在垂直方向（y軸）上平鋪 |
no-repeat | 不平鋪 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div {
height: 180px;
width: 180px;
background-image: url("small.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div></div>
</body>
</html>背景圖片位置
語法：
background-position: 水平距離 垂直距離通過像素值定圖片位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div {
height: 180px;
width: 180px;
border: 1px solid red;
background-image: url("small.png");
background-repeat: no-repeat;
background-position: 10px 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>通過關(guān)鍵字定位圖片位置
水平方向左left、中center、右right
垂直方向上top、中center、下bottom
通過水平方向、垂直方向組合出9種方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div {
height: 180px;
width: 180px;
border: 1px solid red;
background-image: url("small.png");
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>背景圖片固定
語法：
background-attachment: 取值;說明：
background-attachment屬性取值
屬性值 | 說明 |
scroll | 隨元素一起滾動(dòng)（默認(rèn)值） |
fixed | 固定不動(dòng) |
語法：
a {}
a:link {}
a:visited {}
a:hover{}
a:active{}說明：
偽類 | 說明 |
a:link | a元素未訪問時(shí)的樣式 |
a:visited | a元素訪問后的樣式 |
a:hover | 鼠標(biāo)經(jīng)過a元素時(shí)的樣式 |
a:active | 鼠標(biāo)點(diǎn)擊時(shí)的樣式 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
a {
text-decoration: none;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>實(shí)際開發(fā)，一般設(shè)置a、a:hover樣式就可以了
每一個(gè)元素都是由內(nèi)容區(qū)、內(nèi)邊距、邊框、外邊距組成
屬性 | 說明 |
content | 內(nèi)容區(qū)，可以是文本或圖片 |
padding | 內(nèi)邊距，用于定義內(nèi)容與邊框之間的距離 |
border | 邊框，用于定義元素的邊框 |
margin | 外邊距，用于定義當(dāng)前元素與其他元素之間的距離 |
語法：
width: 像素值;
height: 像素值;
overflow: 取值;說明：
overflow屬性值
屬性值 | 說明 |
visible | 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。 |
hidden | 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。 |
scroll | 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 |
auto | 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 |
inherit | 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
img {
width: 30px;
height: 30px;
}
p {
width: 50px;
height: 50px;
overflow: hidden;
}
</style>
</head>
<body>
<img src="small.png" alt="">
<p>舜發(fā)于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
</body>
</html>如果要給行內(nèi)元素設(shè)置寬高，則需要給元素設(shè)置display: inline-block屬性
語法：
padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;padding: 上下左右像素值;
padding: 上下像素值 左右像素值;
padding: 上像素值 右像素值 下像素值 左像素值;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
p {
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<p>舜發(fā)于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
</body>
</html>邊框知識(shí)參考2.6
語法：
margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;margin: 上下左右像素值;
margin: 上下像素值 左右像素值;
margin: 上像素值 右像素值 下像素值 左像素值;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
p {
border: 1px solid red;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<p>舜發(fā)于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
<p>舜發(fā)于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
</body>
</html>正常文檔流就是我們沒有使用浮動(dòng)或者定位去改變的默認(rèn)情況，按照從上到下，從左到右順序的元素布局情況。
語法：
float: 取值說明：
屬性值 | 說明 |
left | 元素向左浮動(dòng) |
right | 元素向右浮動(dòng) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
#f {
background-color: beige;
padding: 10px;
}
#s1 {
background-color: gray;
float: left;
}
#s2 {
background-color: aqua;
float: left;
}
</style>
</head>
<body>
<div id="f">
<div id="s1">box1</div>
<div id="s2">box2</div>
</div>
</body>
</html>語法：
clear: 取值;說明：
clear屬性值
屬性值 | 說明 |
left | 清除左浮動(dòng) |
right | 清除右浮動(dòng) |
both | 同時(shí)清除左浮動(dòng)和右浮動(dòng) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
#f {
background-color: beige;
padding: 10px;
}
#s1 {
background-color: gray;
float: left;
}
#s2 {
background-color: aqua;
float: left;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="f">
<div id="s1">box1</div>
<div id="s2">box2</div>
<div class="clear"></div>
</div>
</body>
</html>語法：
position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
#s1 {
position: fixed;
top: 20px;
left: 100px;
color: red;
}
</style>
</head>
<body>
<div id="f">
<div id="s1">回到頂部</div>
<div id="s2">
<p>內(nèi)容區(qū)</p>
......
</div>
</div>
</body>
</html>相對定位，指的是該元素的位置是相對于它的原始位置計(jì)算而來的
語法：
position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
#f div {
width: 100px;
height: 50px;
background-color: burlywood;
margin: 10px;
}
.s2 {
position: relative;
top: 5px;
left: 30px;
}
</style>
</head>
<body>
<div id="f">
<div class="s1">1</div>
<div class="s2">2</div>
<div class="s3">3</div>
</div>
</body>
</html>把元素定位到任意你想要的位置，完全脫離文檔流
語法：
position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
#f div {
width: 100px;
height: 50px;
background-color: burlywood;
margin: 10px;
}
.s2 {
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div id="f">
<div class="s1">1</div>
<div class="s2">2</div>
<div class="s3">3</div>
</div>
</body>
</html>用法：
position: static;說明：
元素position屬性的默認(rèn)值是static
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
