HTML以及CSS

印度阿三17 2020-10-07

展開全文

1、網(wǎng)頁(yè)的組成部分
頁(yè)面由三部分內(nèi)容組成！
分別是內(nèi)容（結(jié)構(gòu)）、表現(xiàn)、行為。
內(nèi)容（結(jié)構(gòu)），是我們?cè)陧?yè)面中可以看到的數(shù)據(jù)。我們稱之為內(nèi)容。一般內(nèi)容我們使用
html 技術(shù)來(lái)展示。
表現(xiàn)，指的是這些內(nèi)容在頁(yè)面上的展示形式。比如說(shuō)。布局，顏色，大小等等。一般使用
CSS 技術(shù)實(shí)現(xiàn)
行為，指的是頁(yè)面中元素與輸入設(shè)備交互的響應(yīng)。一般使用 javascript 技術(shù)實(shí)現(xiàn)。

2、HTML 簡(jiǎn)介
Hyper Text Markup Language （超文本標(biāo)記語(yǔ)言）簡(jiǎn)寫：HTML
HTML 通過(guò)標(biāo)簽來(lái)標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。網(wǎng)頁(yè)文件本身是一種文本文件，
通過(guò)在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫
面如何安排，圖片如何顯示等）

3、HTML 文件的書寫規(guī)范

<html> 表示整個(gè) html 頁(yè)面的開始
<head> 頭信息
<title>標(biāo)題</title> 標(biāo)題
</head>
<body> body 是頁(yè)面的主體內(nèi)容
頁(yè)面主體內(nèi)容
</body>
</html> 表示整個(gè) html 頁(yè)面的結(jié)束
Html 的代碼注釋 <!-- 這是 html 注釋，可以在頁(yè)面右鍵查看源代碼中看到 -->

4、HTML 標(biāo)簽介紹

（1）標(biāo)簽的格式:
<標(biāo)簽名>封裝的數(shù)據(jù)</標(biāo)簽名>
（2）標(biāo)簽名大小寫不敏感。
（3）標(biāo)簽擁有自己的屬性。
i. 分為基本屬性： bgcolor="red" 可以修改簡(jiǎn)單的樣式效果
ii. 事件屬性： onclick="alert('你好！');" 可以直接設(shè)置事件響應(yīng)后的代碼。
（4）標(biāo)簽又分為，單標(biāo)簽和雙標(biāo)簽。
i. 單標(biāo)簽格式： <標(biāo)簽名 /> br 換行 hr 水平線
ii. 雙標(biāo)簽格式: <標(biāo)簽名> ...封裝的數(shù)據(jù)...</標(biāo)簽名>

（5）標(biāo)簽的語(yǔ)法：
<!-- ①標(biāo)簽不能交叉嵌套 -->
正確：<div><span>早安</span></div>
錯(cuò)誤：<div><span>早安</div></span>
<hr />
<!-- ②標(biāo)簽必須正確關(guān)閉 -->
<!-- i.有文本內(nèi)容的標(biāo)簽： -->
正確：<div>早安</div>
錯(cuò)誤：<div>早安
<hr />
<!-- ii.沒有文本內(nèi)容的標(biāo)簽： -->
正確：<br />
錯(cuò)誤：<br>
<hr />
<!-- ③屬性必須有值，屬性值必須加引號(hào) -->
正確：<font color="blue">早安</font>
錯(cuò)誤：<font color=blue>早安</font>
錯(cuò)誤：<font color>早安</font>
<hr />
<!-- ④注釋不能嵌套 -->
正確：<!-- 注釋內(nèi)容 --> <br/>
錯(cuò)誤：<!-- <!-- 這是錯(cuò)誤的 html 注釋 --> -->
<hr />
注意事項(xiàng)：
html 代碼不是很嚴(yán)謹(jǐn)。有時(shí)候標(biāo)簽不閉合，也不會(huì)報(bào)錯(cuò)。

5、常用標(biāo)簽介紹文檔：w3cschool.CHM

5.1 font字體標(biāo)簽

<body>
<!-- 字體標(biāo)簽
需求 1 ：在網(wǎng)頁(yè)上顯示 我是字體標(biāo)簽 ，并修改字體為 宋體，顏色為紅色。
font 標(biāo)簽是字體標(biāo)簽 , 它可以用來(lái)修改文本的字體 , 顏色 , 大小 ( 尺寸 )
color 屬性修改顏色
face 屬性修改字體
size 屬性修改文本大小
-->
<font color="red" face=" 宋體" size="7">我是字體標(biāo)簽</font>
</body>

5.2 特殊字符

常用特殊字符表：

?其他特殊字符：

<body>
<!-- 特殊字符
需求 1 ：把 <br> 換行標(biāo)簽 變成文本 轉(zhuǎn)換成字符顯示在頁(yè)面上
常用的特殊字符 :
< ===>>>> <
> ===>>>> >
空格 ===>>>>  
-->
我是<br>標(biāo)簽<br/>
hello 
                  

         大家好啊!
</body>

5.3 標(biāo)題標(biāo)簽

標(biāo)題標(biāo)簽是 h1 到 h6依次由大到小

<body>
<!-- 標(biāo)題標(biāo)簽
需求 1 ：演示標(biāo)題 1 到 標(biāo)題 6 的
h1 - h6 都是標(biāo)題標(biāo)簽
h1 最大
h6 最小
align 屬性是對(duì)齊屬性
left 左對(duì)齊 ( 默認(rèn) )
center 劇中
right 右對(duì)齊
-->
<h1 align="left">標(biāo)題 1</h1>
<h2 align="center">標(biāo)題 2</h2>
<h3 align="right">標(biāo)題 3</h3>
<h4>標(biāo)題 4</h4>
<h5>標(biāo)題 5</h5>
<h6>標(biāo)題 6</h6>
<h7>標(biāo)題 7</h7>
</body>

5.4、超鏈接（在網(wǎng)頁(yè)中所有點(diǎn)擊之后可以跳轉(zhuǎn)的內(nèi)容都是超連接）

<body>
<!-- a 標(biāo)簽是 超鏈接
href 屬性設(shè)置連接的地址
target 屬性設(shè)置哪個(gè)目標(biāo)進(jìn)行跳轉(zhuǎn)
_self 表示當(dāng)前頁(yè)面 ( 默認(rèn)值 )
_blank 表示打開新頁(yè)面來(lái)進(jìn)行跳轉(zhuǎn)
-->

<a >百度</a><br/>
<a  target="_self">百度_self</a><br/>
<a  target="_blank">百度_blank</a><br/>
</body>

5.5、列表標(biāo)簽、列表標(biāo)簽

無(wú)序列表 、 有序列表

<body>
<!-- 需求 1 ：使用無(wú)序，列表方式，把東北 F4 ，趙四，劉能，小沈陽(yáng)，宋小寶，展示出來(lái)
ul 是無(wú)序列表
type 屬性可以修改列表項(xiàng)前面的符號(hào)
li 是列表項(xiàng)
-->
<ul type="none">
<li>張三</li>
<li>李四</li>
<li>王麻子</li>
<li>黑客</li>
</ul>

<ol type="none">
<li>張三</li>
<li>李四</li>
<li>王麻子</li>
<li>黑客</li>
</ol>
</body>

5.6 、img 標(biāo)簽標(biāo)簽

img 標(biāo)簽可以在 html 頁(yè)面上顯示圖片

<body>
<!-- 需求 1 ：使用 img 標(biāo)簽顯示一張美女的照片。并修改寬高，和邊框?qū)傩?img 標(biāo)簽是圖片標(biāo)簽 , 用來(lái)顯示圖片
src 屬性可以設(shè)置圖片的路徑
width 屬性設(shè)置圖片的寬度
height 屬性設(shè)置圖片的高度
border 屬性設(shè)置圖片邊框大小
alt 屬性設(shè)置當(dāng)指定路徑找不到圖片時(shí) , 用來(lái)代替顯示的文本內(nèi)容
在 JavaSE 中路徑也分為相對(duì)路徑和絕對(duì)路徑 .
相對(duì)路徑 : 從工程名開始算
絕對(duì)路徑 : 盤符 :/ 目錄 / 文件名
在 web 中路徑分為相對(duì)路徑和絕對(duì)路徑兩種
相對(duì)路徑 :
. 表示當(dāng)前文件所在的目錄
.. 表示當(dāng)前文件所在的上一級(jí)目錄
文件名 表示當(dāng)前文件所在目錄的文件 , 相當(dāng)于 ./ 文件名 ./ 可以省略
絕對(duì)路徑 :
正確格式是 : http://ip:port/ 工程名 / 資源路徑
錯(cuò)誤格式是 : 盤符 :/ 目錄 / 文件名
-->
<img src="1.jpg" width="200" height="260" border="1" alt=" 美女找不到"/>
<img src="../2.jpg" width="200" height="260" />
<img src="../imgs/3.jpg" width="200" height="260" />
<img src="../imgs/4.jpg" width="200" height="260" />
<img src="../imgs/5.jpg" width="200" height="260" />
<img src="../imgs/6.jpg" width="200" height="260" />
</body>

5.7?、表格標(biāo)簽?

<body>
<!--
需求 1：做一個(gè) 帶表頭的 ，三行，三列的表格，并顯示邊框
需求 2：修改表格的寬度，高度，表格的對(duì)齊方式，單元格間距。
table 標(biāo)簽是表格標(biāo)簽
border 設(shè)置表格標(biāo)簽
width 設(shè)置表格寬度
height 設(shè)置表格高度
align 設(shè)置表格相對(duì)于頁(yè)面的對(duì)齊方式
cellspacing 設(shè)置單元格間距
tr 是行標(biāo)簽
th 是表頭標(biāo)簽
td 是單元格標(biāo)簽
align 設(shè)置單元格文本對(duì)齊方式
b 是加粗標(biāo)簽
-->
<table align="center" border="1" width="300" height="300" cellspacing="0">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>

5.8 跨行列標(biāo)簽

<body>
<!-- 需求 1：
新建一個(gè)五行，五列的表格，
第一行，第一列的單元格要跨兩列，
第二行第一列的單元格跨兩行，
第四行第四列的單元格跨兩行兩列。
colspan 屬性設(shè)置跨列
rowspan 屬性設(shè)置跨行
-->
<table width="500" height="500" cellspacing="0" border="1">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
</body>

5.9 iframe 框架標(biāo)簽

ifarme 標(biāo)簽它可以在一個(gè) html 頁(yè)面上,打開一個(gè)小窗口,去加載一個(gè)單獨(dú)的頁(yè)面.

<body>
我是一個(gè)單獨(dú)的完整的頁(yè)面<br/><br/>
<!--ifarme 標(biāo)簽可以在頁(yè)面上開辟一個(gè)小區(qū)域顯示一個(gè)單獨(dú)的頁(yè)面
ifarme 和 a 標(biāo)簽組合使用的步驟:
1 在 iframe 標(biāo)簽中使用 name 屬性定義一個(gè)名稱
2 在 a 標(biāo)簽的 target 屬性上設(shè)置 iframe 的 name 的屬性值
-->
<iframe src="3. 標(biāo)題標(biāo)簽.html" width="500" height="400" name="abc"></iframe>
<br/>
<ul>
<li><a href="0- 標(biāo)簽語(yǔ)法.html" target="abc">0-標(biāo)簽語(yǔ)法.html</a></li>
<li><a href="1.font 標(biāo)簽.html" target="abc">1.font 標(biāo)簽.html</a></li>
<li><a href="2. 特殊字符.html" target="abc">2.特殊字符.html</a></li>
</ul>
</body>

5.10 表單標(biāo)簽

什么是表單?
表單就是 html 頁(yè)面中,用來(lái)收集用戶信息的所有元素集合.然后把這些信息發(fā)送給服務(wù)器.

<body>
<!--需求 1:創(chuàng)建一個(gè)個(gè)人信息注冊(cè)的表單界面。包含用戶名，密碼，確認(rèn)密碼。性別（單選），興趣愛好（多選），國(guó)籍（下拉列表）。
隱藏域，自我評(píng)價(jià)（多行文本域）。重置，提交。-->
<!--
form 標(biāo)簽就是表單
input type=text 是文件輸入框 value 設(shè)置默認(rèn)顯示內(nèi)容
input type=password 是密碼輸入框 value 設(shè)置默認(rèn)顯示內(nèi)容
input type=radio 是單選框 name 屬性可以對(duì)其進(jìn)行分組 checked="checked"表示默認(rèn)選中
input type=checkbox 是復(fù)選框 checked="checked"表示默認(rèn)選中
input type=reset 是重置按鈕 value 屬性修改按鈕上的文本
input type=submit 是提交按鈕 value 屬性修改按鈕上的文本
input type=button 是按鈕 value 屬性修改按鈕上的文本
input type=file 是文件上傳域
input type=hidden 是隱藏域 當(dāng)我們要發(fā)送某些信息，而這些信息，不需要用戶參與，就可以使用隱藏域（提交的
時(shí)候同時(shí)發(fā)送給服務(wù)器）
select 標(biāo)簽是下拉列表框
option 標(biāo)簽是下拉列表框中的選項(xiàng) selected="selected"設(shè)置默認(rèn)選中
textarea 表示多行文本輸入框 （起始標(biāo)簽和結(jié)束標(biāo)簽中的內(nèi)容是默認(rèn)值）
rows 屬性設(shè)置可以顯示幾行的高度
cols 屬性設(shè)置每行可以顯示幾個(gè)字符寬度
-->
<form>
用戶名稱：<input type="text" value=" 默認(rèn)值"/><br/>
用戶密碼：<input type="password" value="abc"/><br/>
確認(rèn)密碼：<input type="password" value="abc"/><br/>
性別：<input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked" />女<br/>
興趣愛好：<input type="checkbox" checked="checked" />Java<input type="checkbox" />JavaScript<input
type="checkbox" />C  <br/>
國(guó)籍：<select>
<option>--請(qǐng)選擇國(guó)籍--</option>
<option selected="selected">中國(guó)</option>
<option>美國(guó)</option>
<option>小日本</option>
</select><br/>
自我評(píng)價(jià)：<textarea rows="10" cols="20">我才是默認(rèn)值</textarea><br/>
<input type="reset" value="abc" />
<input type="submit"/>
</form>
</body>

表單格式優(yōu)化：

<form>
<h1 align="center">用戶注冊(cè)</h1>
<table align="center">
<tr>
<td> 用戶名稱：</td>
<td>
<input type="text" value=" 默認(rèn)值"/>
</td>
</tr>
<tr>
<td> 用戶密碼：</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>確認(rèn)密碼：</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>性別：</td>
<td>
<input type="radio" name="sex"/>男
<input type="radio" name="sex" checked="checked" />女
</td>
</tr>
<tr>
<td> 興趣愛好：</td>
<td>
<input type="checkbox" checked="checked" />Java
<input type="checkbox" />JavaScript
<input type="checkbox" />C  
</td>
</tr>
<tr>
<td>國(guó)籍：</td>
<td>
<select>
<option>--請(qǐng)選擇國(guó)籍--</option>
<option selected="selected">中國(guó)</option>
<option>美國(guó)</option>
<option>小日本</option>
</select>
</td>
</tr>
<tr>
<td>自我評(píng)價(jià)：</td>
<td><textarea rows="10" cols="20">我才是默認(rèn)值</textarea></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
</body>

表單提交：

<body>
<!--
form 標(biāo)簽是表單標(biāo)簽
action 屬性設(shè)置提交的服務(wù)器地址
method 屬性設(shè)置提交的方式 GET(默認(rèn)值)或 POST
表單提交的時(shí)候，數(shù)據(jù)沒有發(fā)送給服務(wù)器的三種情況：
1、表單項(xiàng)沒有 name 屬性值
2、單選、復(fù)選（下拉列表中的 option 標(biāo)簽）都需要添加 value 屬性，以便發(fā)送給服務(wù)器
3、表單項(xiàng)不在提交的 form 標(biāo)簽中
GET 請(qǐng)求的特點(diǎn)是：
1、瀏覽器地址欄中的地址是：action 屬性[ ? 請(qǐng)求參數(shù)]
請(qǐng)求參數(shù)的格式是：name=value&name=value
2、不安全
3、它有數(shù)據(jù)長(zhǎng)度的限制
POST 請(qǐng)求的特點(diǎn)是：
1、瀏覽器地址欄中只有 action 屬性值
2、相對(duì)于 GET 請(qǐng)求要安全
3、理論上沒有數(shù)據(jù)長(zhǎng)度的限制
-->
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login" />
<h1 align="center">用戶注冊(cè)</h1>
<table align="center">
<tr>
<td> 用戶名稱：</td>
<td>
<input type="text" name="username" value=" 默認(rèn)值"/>
</td>
</tr>
<tr>
<td> 用戶密碼：</td>
<td><input type="password" name="password" value="abc"/></td>
</tr>
<tr>
<td>性別：</td>
<td>
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" checked="checked" value="girl" />女
</td>
</tr>
<tr>
<td> 興趣愛好：</td>
<td>
<input name="hobby" type="checkbox" checked="checked" value="java"/>Java
<input name="hobby" type="checkbox" value="js"/>JavaScript
<input name="hobby" type="checkbox" value="cpp"/>C  
</td>
</tr>
<tr>
<td>國(guó)籍：</td>
<td>
<select name="country">
<option value="none">--請(qǐng)選擇國(guó)籍--</option>
<option value="cn" selected="selected">中國(guó)</option>
<option value="usa">美國(guó)</option>
<option value="jp">小日本</option>
</select>
</td>
</tr>
<tr>
<td>自我評(píng)價(jià)：</td>
<td><textarea name="desc" rows="10" cols="20">我才是默認(rèn)值</textarea></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
</body>

5.11 其他標(biāo)簽

<body>
<!--需求 1：div、span、p 標(biāo)簽的演示
div 標(biāo)簽 默認(rèn)獨(dú)占一行
span 標(biāo)簽 它的長(zhǎng)度是封裝數(shù)據(jù)的長(zhǎng)度
p 段落標(biāo)簽 默認(rèn)會(huì)在段落的上方或下方各空出一行來(lái)（如果已有就不再空）
-->
<div>div 標(biāo)簽 1</div>
<div>div 標(biāo)簽 2</div>
<span>span 標(biāo)簽 1</span>
<span>span 標(biāo)簽 2</span>
<p>p 段落標(biāo)簽 1</p>
<p>p 段落標(biāo)簽 2</p>
</body>

6、CSS

6.1 CSS 是「層疊樣式表單」。是用于(增強(qiáng))控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。

6.2 語(yǔ)法規(guī)則

選擇器：瀏覽器根據(jù)“選擇器”決定受 CSS 樣式影響的 HTML 元素（標(biāo)簽）。
屬性 (property) 是你要改變的樣式名，并且每個(gè)屬性都有一個(gè)值。屬性和值被冒號(hào)分開，并
由花括號(hào)包圍，這樣就組成了一個(gè)完整的樣式聲明（declaration），例如：p {color: blue}
多個(gè)聲明：如果要定義不止一個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分開。雖然最后一條聲明的
最后可以不加分號(hào)(但盡量在每條聲明的末尾都加上分號(hào))

?例如：

p{
color:red;
font-size:30px;
}

注：一般每行只描述一個(gè)屬性，CSS 注釋：/*注釋內(nèi)容*/

6.3 css的嵌入方式

第一種：
在標(biāo)簽的 style 屬性上設(shè)置”key:value value;”，修改標(biāo)簽樣式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--需求 1：分別定義兩個(gè) div、span 標(biāo)簽，分別修改每個(gè) div 標(biāo)簽的樣式為：邊框 1 個(gè)像素，實(shí)線，紅色。-->
<div style="border: 1px solid red;">div 標(biāo)簽 1</div>
<div style="border: 1px solid red;">div 標(biāo)簽 2</div>
<span style="border: 1px solid red;">span 標(biāo)簽 1</span>
<span style="border: 1px solid red;">span 標(biāo)簽 2</span>
</body>
</html>

這種方式的缺點(diǎn)：
1.如果標(biāo)簽多了。樣式多了。代碼量非常龐大。
2.可讀性非常差。
3.Css 代碼沒什么復(fù)用性可方言。

第二種

在 head 標(biāo)簽中，使用 style 標(biāo)簽來(lái)定義各種自己需要的 css 樣式。
格式如下：
xxx {
Key : value value;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style 標(biāo)簽專門用來(lái)定義 css 樣式代碼-->
<style type="text/css">
/* 需求 1：分別定義兩個(gè) div、span 標(biāo)簽，分別修改每個(gè) div 標(biāo)簽的樣式為：邊框 1 個(gè)像素，實(shí)線，紅色。*/
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<div>div 標(biāo)簽 1</div>
<div>div 標(biāo)簽 2</div>
<span>span 標(biāo)簽 1</span>
<span>span 標(biāo)簽 2</span>
</body>
</html>

這種方式的缺點(diǎn)。
1.只能在同一頁(yè)面內(nèi)復(fù)用代碼，不能在多個(gè)頁(yè)面中復(fù)用 css 代碼。
2.維護(hù)起來(lái)不方便，實(shí)際的項(xiàng)目中會(huì)有成千上萬(wàn)的頁(yè)面，要到每個(gè)頁(yè)面中去修改。工作量太大了

第三種

把 css 樣式寫成一個(gè)單獨(dú)的 css 文件，再通過(guò) link 標(biāo)簽引入即可復(fù)用。
使用 html 的 <link rel="stylesheet" type="text/css" href="./styles.css" /> 標(biāo)簽導(dǎo)入 css 樣
式文件

（1）css 文件內(nèi)容

div{
border: 1px solid yellow;
}
span{
border: 1px solid red;
}

（2）html文件代碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link 標(biāo)簽專門用來(lái)引入 css 樣式代碼-->
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div>div 標(biāo)簽 1</div>
<div>div 標(biāo)簽 2</div>
<span>span 標(biāo)簽 1</span>
<span>span 標(biāo)簽 2</span>
</body>
</html>

6.4 CSS 選擇器

標(biāo)簽名選擇器的格式是：
標(biāo)簽名{
屬性：值;
}
標(biāo)簽名選擇器，可以決定哪些標(biāo)簽被動(dòng)的使用這個(gè)樣式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 選擇器</title>
<style type="text/css">
div{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
span{
border: 5px dashed blue;
color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<!--
需求 1：在所有 div 標(biāo)簽上修改字體顏色為藍(lán)色，字體大小 30 個(gè)像素。邊框?yàn)?1 像素黃色實(shí)線。
并且修改所有 span 標(biāo)簽的字體顏色為黃色，字體大小 20 個(gè)像素。邊框?yàn)?5 像素藍(lán)色虛線。
-->
<div>div 標(biāo)簽 1</div>
<div>div 標(biāo)簽 2</div>
<span>span 標(biāo)簽 1</span>
<span>span 標(biāo)簽 2</span>
</body>
</html>

（1）id 選擇器
id 選擇器的格式是：
#id 屬性值{
屬性：值;
}
id 選擇器，可以讓我們通過(guò) id 屬性選擇性的去使用這個(gè)樣式。

（2）class 選擇器（類選擇器）
class 類型選擇器的格式是：
. class 屬性值{
屬性：值;
}
class 類型選擇器，可以通過(guò) class 屬性有效的選擇性地去使用這個(gè)樣式。

（3）組合選擇器
組合選擇器的格式是：
選擇器 1，選擇器 2，選擇器 n{
屬性：值;
}
組合選擇器可以讓多個(gè)選擇器共用同一個(gè) css 樣式代碼。

6.5 常用樣式

（1）字體顏色
color：red；
顏色可以寫顏色名如：black, blue, red, green 等
顏色也可以寫 rgb 值和十六進(jìn)制表示值：如 rgb(255,0,0)，#00F6DE，如果寫十六進(jìn)制值必
須加#

（2）寬度

width:19px;
寬度可以寫像素值：19px；
也可以寫百分比值：20%；

（3）高度

height:20px;
高度可以寫像素值：19px；
也可以寫百分比值：20%；

（4）背景顏色

background-color:#0F2D4C

（5）字體樣式：
color：#FF0000；字體顏色紅色
font-size：20px; 字體大小

（6）紅色 1 像素實(shí)線邊框
border：1px solid red;
（7）DIV 居中
margin-left: auto;
margin-right: auto;
（8）文本居中：
text-align: center;
（9）超連接去下劃線
text-decoration: none;
（10）表格細(xì)線
table {
border: 1px solid black; /*設(shè)置邊框*/
border-collapse: collapse; /*將邊框合并*/
}
td,th {
border: 1px solid black; /*設(shè)置邊框*/
}
（11）列表去除修飾
ul {
list-style: none;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css 常用樣式.html</title>
<style type="text/css">
div{
color: red;
border: 1px yellow solid;
width: 300px;
height: 300px;
background-color: green;
font-size: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
table{
border: 1px red solid;
border-collapse: collapse;
}
td{
border: 1px red solid;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
</ul>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<a >百度</a>
<div>我是 div 標(biāo)簽</div>
</body>
</html>

來(lái)源：https://www./content-4-742451.html

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：印度阿三17 > 《開發(fā)》

舉報(bào)/認(rèn)領(lǐng)