實體符號,可以讓網頁顯示一些特殊符號,比如說 <p> 這個標簽,默認是不會顯示在頁面上,那么如何讓它顯示在頁面上?
實體標簽就是干這個的。
比如想將這句話顯示在網頁中: 段落標簽是<p></> 默認情況下p標簽在網頁是不顯示的。
層疊樣式表(英文全稱:Cascading Style Sheets) *層疊:多個樣式可以作用在同一個html的元素上,同時生效
是一種用來表現HTML或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。
CSS很像化妝,通過不同的CSS將同樣的HTML內容打造為不同的呈現結果。
所以,前端程序員相互表白的時候可以說:you are the CSS to my HTML.
這是不是CSS是對HTML進行美化和布局作用的最好總結?
根據定義CSS的位置不同,分為行內樣式、內部樣式和外部樣式
也稱為內聯樣式
直接在標簽中編寫樣式,通過使用標簽內部的style屬性;
一般在測試的時候使用居多:
語法:
<html標簽 style="樣式1:值1;樣式2:值2;....樣式N:值N;">hello my css</html標簽>
案例:
<div style="color: red;">hello my css</div>
弊端:只能對當前的標簽生效,沒有做到內容和樣式相分離,耦合度太高。
定義在head標簽內,通過style標簽,該標簽內容就是CSS代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>內部樣式</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>hello my css</div>
</body>
</html>
1、提前定義css資源文件
2、在head標簽內,定義link標簽引入外部樣式文件。
lina.css文件,放在與html頁面同級的css文件夾中:
div {
color: red;
}
html頁面中的引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部樣式</title>
<link rel="stylesheet" href="css/lina.css" />
</head>
<body>
<div>hello my css</div>
</body>
</html>
作用域的范圍:外部樣式表>內部樣式表>行內樣式表
優先級:外部樣式表<內部樣式表<行內樣式表;
同樣的樣式作用在同一個標簽身上:就近原則;不同樣式作用在同一個標簽身上:疊加生效。
基本格式:由兩個主要的部分構成:選擇器,以及一條或多條聲明:
選擇器 {
屬性1:值1;
屬性2:值2;
...
}
選擇器:篩選具有相似特征的元素
屬性和屬性值之間用冒號分割,不同的屬性之間用分號隔開。
例如:
注釋是用來解釋你的代碼,并且可以隨意編輯它,瀏覽器會忽略它。
CSS注釋以 /* 開始, 以 */ 結束
/*這是CSS的注釋*/
div {
color: red; /*文字顏色是紅色*/
}
選擇具有相同id屬性值的元素,建議html頁面中的id值唯一
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。
PS: ID屬性不要以數字開頭,數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。
雖然多個元素可以使用同一個id選擇器控制樣式,但是不推薦。如果需要同樣的樣式對多個標簽生效,使用class選擇器。
選擇具有相同的class屬性值的元素。
class 選擇器用于描述一組元素的樣式,class 選擇器有別于id選擇器,class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中,類選擇器以一個點"."號顯示:
PS:類名的第一個字符不能使用數字!它無法在 Mozilla 或 Firefox 中起作用。
選擇具有相同標簽名稱的元素。
定義選擇器語法:標簽名稱{};PS:標簽名稱必須是html提供好的標簽。
使用標簽選擇器:自動使用在所有的同名的標簽上
ID選擇器 > 類選擇器 > 標簽選擇器
當多個選擇器作用在同一個標簽上的時候,如果屬性沖突,看優先級;如果不沖突,樣式疊加生效。
行內樣式 > 內部樣式 >外部樣式
同樣,三個樣式表中都有內容作用在同一個html標簽的時候,如果屬性沖突,看優先級;如果不沖突,樣式疊加生效。
跟顏色相關的取值分3種:
1、顏色的單詞 red blue...
2、rgb(紅,綠,藍)三色的取值范圍是0-255 rgb(255,0,0)
rgba(紅,綠,藍,透明度),透明度取值:0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
3、#值1值2值3 :值的范式是00-FF 十六進制數字組成的 例如:#FF0000
PS:只有塊狀元素可以設置寬高,行級元素設置不生效。
取值方式有2種:
1:數值 絕對數字 單位是像素PX
2:百分比:占據父元素的比例
以谷歌瀏覽器為例說明。
快捷鍵F12或者工具條中的開發者工具調出以下內容。
在elements中可以看到當前頁面的所有標簽,在styles中可以看到html元素對應的樣式。
所有HTML元素可以看作盒子,在CSS中,"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子,封裝周圍的HTML元素,它包括:邊距,邊框,填充,和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
盒子模型說明圖:
元素的實際寬度和高度:
當我們計算一個元素實際在頁面占有的總寬度計算公式是這樣的:
總元素寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的:
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
CSS 的 Float(浮動),會使元素向左或向右移動,其周圍的元素也會重新排列。
Float(浮動),往往是用于圖像,但它在布局時一樣非常有用。
元素的水平方向浮動,意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果你把幾個浮動的元素放到一起,如果有空間的話,它們將彼此相鄰。
元素浮動之后,周圍的元素會重新排列,為了避免這種情況,使用 clear 屬性。
clear 屬性指定元素兩側不能出現浮動元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動</title>
<style>
div{
width: 400px;
height: 200px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!--沒有浮動屬性的元素都屬于常規文檔流:從上往下從左往右依次顯示
浮動的元素都脫離了常規文檔流;
為了好理解:大家可以認為浮動元素屬于一層,非浮動元素屬于一層
如果想要非浮動元素不受浮動元素的影響,需要使用clear屬性
-->
<div style="background: rgba(255,0,0,0.5); float: left;">
div1-左浮動,脫離常規文檔流,緊貼父元素或者上一個同方向浮動
</div>
<div style="background: lawngreen; width: 600px; height: 350px; ">
div2-未浮動,常規文檔流,
<br/>PS:此時div1在div2的上方顯示,因為div1和div2是不同文檔流中的元素,顯示互不影響
如果不想讓div2被浮動元素影響,需要添加clear屬性。
添加clear: left;之后div2就會忽略div1浮動的影響,在div1層后面顯示,不會重疊了,大家可以自己試驗一下
</div>
<div style="background: lightblue; float: right; width: 1800px;">
div3-右浮動,脫離常規文檔流,緊貼父元素或者上一個同方向浮動
</div>
<div style="background: lightcoral; width: 600px; height: 350px; ">
div4-未浮動,常規文檔流,
<br/>PS:此時div3在div4的上方顯示,因為div3和div4是不同文檔流中的元素,顯示互不影響
如果不想讓div4被浮動元素影響,需要添加clear屬性。
添加clear: right;之后div4就會忽略div3浮動的影響,在div3層后面顯示,不會重疊了,大家可以自己試驗一下
clear屬性有三個取值:left、right、both;分別是取出左浮動、有浮動和所有浮動元素的影響
</div>
<div style="background: lavender;">
div5-未浮動,常規文檔流,
</div>
</body>
</html>
控制內容溢出元素框時顯示的方式。
overflow屬性有以下值:
值 | 描述 |
visible | 默認值。內容不會被修剪,會呈現在元素框之外。 |
hidden | 內容會被修剪,并且其余內容是不可見的。 |
scroll | 內容會被修剪,但是瀏覽器會顯示滾動條以便查看其余的內容。 |
auto | 如果內容被修剪,則瀏覽器會顯示滾動條以便查看其余的內容。 |
inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
注意:overflow 屬性只工作于指定高度的塊元素上。
注意: 在 OS X Lion ( Mac 系統) 系統上,滾動條默認是隱藏的,使用的時候才會顯示 (設置 "overflow:scroll" 也是一樣的)。
display屬性設置一個元素應如何顯示,visibility屬性指定一個元素應可見還是隱藏。
隱藏一個元素可以通過把display屬性設置為"none",或把visibility屬性設置為"hidden"。但是請注意,這兩種方法會產生不同的結果。
visibility:hidden可以隱藏某個元素,但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說,該元素雖然被隱藏了,但仍然會影響布局。
display:none可以隱藏某個元素,且隱藏的元素不會占用任何空間。也就是說,該元素不但被隱藏了,而且該元素原本占用的空間也會從頁面布局中消失。
CSS樣式有以下三個:
由兩個或多個基礎選擇器,通過不同方式組合而成的。
可以更準確更精細的選擇目標元素標簽。
語法:* {} 一般去掉標簽的一些默認效果的時候使用,或者整站通用效果時使用。但是不推薦,一般將 * 替換為常用標簽的名稱,并用逗號分隔,其實就是使用并集選擇器。
并集選擇器(CSS選擇器分組)是各個選擇器通過,連接而成的,通常用于集體聲明。
語法:選擇器1,選擇器2,......選擇器N{}
意思是多個選擇器都是通用的樣式。任何形式的選擇器(包括標簽選擇器、class類選擇器id選擇器等),都可以作為并集選擇器的一部分。
條件:交集選擇器由兩個選擇器構成,找到的標簽必須滿足:既有標簽一的特點,也有標簽二的特點。
語法:h3.class{ color:red; }
其中第一個為標簽選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,例如div.list。
交集選擇器是并且的意思。 即...又...的意思
例如: table.bg 選擇的是: 類名為 .bg 的 表格標簽,但用的相對來說比較少。
概念:后代選擇器又稱為包含選擇器。
作用:用來選擇元素或元素組的子孫后代。
其寫法就是把外層標簽寫在前面,內層標簽寫在后面,中間用空格分隔,先寫父親爺爺,在寫兒子孫子。
格式:父級 子級{屬性:屬性值;屬性:屬性值;}
語法:.class h3{color:red;font-size:16px;}
當標簽發生嵌套時,內層標簽就成為外層標簽的后代。
子孫后代都可以這么選擇。 或者說,它能選擇任何包含在內 的標簽。
作用:子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。
其寫法就是把父級標簽寫在前面,子級標簽寫在后面,中間跟一個 > 進行連接。
語法:.class>h3{color:red;font-size:14px;}
比如: .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>復合選擇器</title>
<style>
/*全局選擇器:
一般去掉標簽的一些默認效果的時候使用,或者整站通用效果時使用。但是不推薦,
*/
*{
color: #333;/*定義全局文字顏色,統一色彩基調*/
}
/*并集選擇器:通常用于集體聲明
替換全局選擇器;
*/
div,p,dldt,dd{
/*去掉瀏覽器的默認樣式*/
margin: 0;
padding: 0;
color: #333;/*定義全局文字顏色,統一色彩基調*/
}
/*交集選擇器*/
li.myli{
color: red;
}
/*后代選擇器*/
ul li{
font-size: 28px;
}
.myUL li{
font-family: "微軟雅黑";
}
.myUL li a{
text-decoration: line-through;
}
/*子元素選擇器*/
.demo>h3{
color: red;
}
</style>
</head>
<body>
<ul>
<li>li11111111111</li>
<li class="myli">li22222222222</li>
<li>li33333333333</li>
<li>li44444444444<a href="">點擊我試試</a></li>
<li class="myUL">
<ul>
<li>li11111111111</li>
<li class="myli">li22222222222</li>
<li>li33333333333</li>
<li>li44444444444
<a href="">點擊我試試</a>
</li>
</ul>
</li>
</ul>
<ol>
<li>li11111111111</li>
<li>li22222222222</li>
<li>li33333333333</li>
<li>li44444444444</li>
</ol>
<div class="demo">
div1
<h3>靜夜思</h3>
<ul>
<li><h3>靜夜思----li</h3></li>
</ul>
</div>
</body>
</html>
偽類選擇器:和類選擇器相區別類選擇器是一個點 比如 .demo {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{} 。
作用:用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果, 比如可以選擇 第1個,第n個元素。
因為偽類選擇器很多,比如鏈接偽類,結構偽類等等。我們這里先給大家講解鏈接偽類選擇器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽類選擇器</title>
<style>
/*偽類選擇器*/
a:link{
color: red;/*默認顏色是紅色*/
}
a:visited{
color: blue;/*訪問過的頁面是藍色*/
}
a:hover{
color: green;/*鼠標懸浮是綠色*/
font-size: 28px;
}
a:active{
color: gold;/*按下鼠標不放手是金色*/
font-family: "微軟雅黑";
}
</style>
</head>
<body>
<a href="03-常用樣式.html" target="_blank">常用樣式</a>
<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
<a href="05-綜合練習.html" target="_blank">綜合練習</a>
</body>
</html>
注意**
a { /* a是標簽選擇器 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是鏈接偽類選擇器 鼠標經過 */
color: red; /* 鼠標經過的時候,由原來的 灰色 變成了紅色 */
}
選擇器 | 作用 | 特征 | 使用情況 | 隔開符號及用法 |
后代選擇器 | 用來選擇元素后代 | 是選擇所有的子孫后代 | 較多 | 符號是空格 p .one |
子代選擇器 | 選擇 最近一級元素 | 只選親兒子 | 較少 | 符號是> .nav>p |
交集選擇器 | 選擇兩個標簽交集的部分 | 既是 又是 | 較少 | 沒有符號 p.one |
并集選擇器 | 選擇某些相同樣式的選擇器 | 可以用于集體聲明 | 較多 | 符號是逗號 .nav, .header |
鏈接偽類選擇器 | 給鏈接更改狀態 | 較多 | 重點記住 a{} 和 a:hover 實際開發的寫法 |
昨天我們在《使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作》(目錄在結尾)中學習了設置單元格以及其中內容的空間間距和背景顏色。
其中添加列向單元格背景顏色只需要修改對應的<tr>標簽中的style屬性,而修改行向標簽需要修改不同<tr></tr>標簽中的<td>標簽的style屬性,這樣操作起來就非常的麻煩,那有沒有簡便的修改行向單元格背景顏色的方法呢?
當然有!
開發團隊給出了<colgroup><col></col></colgroup>這樣的組合來解決這個問題,下面讓我們詳細學習。
<colgroup></colgroup>標簽是一個給行向單元格打組的標簽,在頁面中不會顯示。
<col></col>標簽是來具體設置行向單元格數量和顏色的標簽。
示例代碼如下:
<colgroup><col span="1" style="background-color:#ff0000;"></col></colgroup>
這段代碼添加到"第一個頁面.html"當中就可以,具體代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>第一個網頁</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">表格的頭部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的腳部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格標題</caption>
<colgroup>
<col span="1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>
頁面效果如圖:
因為第一列和最后一列只有一行所以,也都變紅了。
其中span的數量代表行數。
如果把span等號后面的數改成2,因為表格只有兩行,所以整個表格都紅了。
表格嵌套
我們可以通過向表格中添加表格實現表格嵌套。表格嵌套可以把一個單元格分成行向或列向分割單元格。
代碼示例如下:我們把"一列一行"分割成列向兩個單元格。
<tr><td><table border="1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>
使用
<table border="1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
這段代碼替換文字"一列一行"即可。
頁面效果如圖所示:
留個思考題,大家可以思考一下行向分割單元格怎么寫。
今天的內容結束了。
全部示例代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>第一個網頁</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">表格的頭部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的腳部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格標題</caption>
<colgroup>
<col span="1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>
<table border="1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>
喜歡的小伙伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!
學到這里,相信大家已經有獨立讀懂HTML代碼說明的能力了,明天我會為大家講解16進制顏色表示方法。之后會給大家推薦html代碼參考手冊的鏈接。如果您是零基礎的話,學完16進制顏色表示方法后,基本上就可以無障礙的閱讀html代碼參考手冊了,如果閱讀起來還是有困難,請繼續看后面我為大家講解一些常用元素及屬性的文章,已及html中特殊符號的輸入方法,全部做完后再結束這套教程。
如果您有任何疑問或不解歡迎關注并私信我。
HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作
HTML是什么?——零基礎自學網頁制作
第一個HTML頁面如何寫?——零基礎自學網頁制作
HTML頁面中head標簽有啥用?——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作
使用HTML添加表格1(基本元素)——零基礎自學網頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作
使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作
HTML表單4(form的action、method屬性)——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息,我們會在24小時內與您取得聯系。