CSS 技術
一、CSS 技術介紹
CSS 是「層疊樣式表單」，是用于(增強)控制網頁樣式并允許將樣式資訊與網頁內容分離的一種標記性語言，
二、CSS 語法規則
選擇器：選擇器決定了哪些HTML元素需要使用此樣式；
屬性：就是需要改變的樣式名，屬性名和值使用":"分割，屬性宣告結束一定要加"；"
多個屬性：另起一行，接著寫即可，
舉例：
p{
color:red;
font-size:20px;
}
注：一般每行只描述一個屬性
三、CSS的注釋
/* 注釋內容 */
四、CSS 和HTML 的結合方式
1.第一種
需求1：分別定義兩個 div、span 標簽，分別修改每個 div 標簽的樣式為：邊框1 個像素，實線，紅色，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS和HTML結合</title> </head> <body> <!--需求1：分別定義兩個 div、span 標簽，分別修改每個 div 標簽的樣式 為：邊框1 個像素，實線，紅色，--> <div style="border: 1px solid red;">div1</div> <div style="border: 1px solid red;">div2</div> <span>span1</span> <span>span2</span> </body> </html>
效果如下：
以上方式的缺點？
1.如果標簽多了，樣式多了，代碼量非常龐大；
2.可讀性非常差；
3.CSS樣式沒有得到復用；
2.第二種
需求1：分別定義兩個 div、span 標簽，分別修改每個 div 標簽的樣式為：邊框1 個像素，實線，紅色，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS和HTML結合</title> <style type="text/css"> /*需求1：分別定義兩個 div、span 標簽，分別修改每個 div 標簽的樣式*/ /*為：邊框1 個像素，實線，紅色，*/ div{ border: 1px solid red; } </style> </head> <body> <div>div1</div> <div>div2</div> <span>span1</span> <span>span2</span> </body> </html>
效果如下：
以上方式的缺點？
1. 只能在同一頁面內復用代碼，不能在多個頁面中復用 css 代碼，
2. 維護起來不方便，實際的專案中會有成千上萬的頁面，要到每個頁面中去修改，作業量太大了，
3.第三種
創建一個hello.css檔案，內容如下：
div {
border: 1px solid red;
}
span{
border: 1px dashed blue;
}
在HTML頁面的head標簽中使用link標簽引入即可：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS和HTML結合</title> <link rel="stylesheet" href="hello.css" type="text/css"> </head> <body> <div>div1</div> <div>div2</div> <span>span1</span> <span>span2</span> </body> </html>
效果如下：
五、CSS選擇器
1.標簽名選擇器
格式：
標簽名{
屬性名: 值;
}
需求 1：在所有 div 標簽上修改字體顏色為藍色，字體大小 30 個像素，邊框為 1 像素黃色實線，并且修改所有 span 標簽的字體顏色為黃色，字體大小 20 個像素，邊框為 5 像素藍色虛線，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS和HTML結合</title> <style type="text/css"> div{ color: blue; font-size: 30px; border: 1px yellow solid; } span{ color: yellow; font-size: 20px; border: 5px blue dashed; } </style> </head> <body> <!--需求 1：在所有 div 標簽上修改字體顏色為藍色，字體大小 30 個像素，邊框為 1 像素黃色實線，--> <!--并且修改所有 span 標簽的字體顏色為黃色，字體大小 20 個像素，邊框為 5 像素藍色虛線，--> <div>div1</div> <div>div2</div> <span>span1</span> <span>span2</span> </body> </html>
效果如下：
2.id選擇器
格式：
#id屬性值{
屬性名: 值;
}
需求 1：分別定義兩個 div 標簽，第一個 div 標簽定義 id 為 id001 ，然后根據 id 屬性定義 css 樣式修改字體顏色為藍色，字體大小 30 個像素，邊框為 1 像素黃色實線，第二個 div 標簽定義 id 為 id002 ，然后根據 id 屬性定義 css 樣式 修改的字體顏色為紅色，字體大小 20 個像素，邊框為 5 像素藍色點線，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS和HTML結合</title> <style type="text/css"> #id001{ color: blue; font-size: 30px; border: 1px yellow solid; } #id002{ color: red; font-size: 20px; border: 5px blue dotted; } </style> </head> <body> <!--需求 1：分別定義兩個 div 標簽， 第一個 div 標簽定義 id 為 id001 ，然后根據 id 屬性定義 css 樣式修改字體顏色為藍色， 字體大小 30 個像素，邊框為 1 像素黃色實線， 第二個 div 標簽定義 id 為 id002 ，然后根據 id 屬性定義 css 樣式 修改的字體顏色為紅色， 字體大小 20 個像素，邊框為 5 像素藍色點線，--> <div id="id001">div1</div> <div id="id002">div2</div> </body> </html>
效果如下：
3.類選擇器（class選擇器）
格式：
.class屬性值{
屬性：值;
}
需求 1：修改 class 屬性值為 class01 的 span 或 div 標簽，字體顏色為藍色，字體大小 30 個像素，邊框為 1 像素黃色實線，需求 2：修改 class 屬性值為 class02 的 div 標簽，字體顏色為灰色，字體大小 26 個像素，邊框為 1 像素紅色實線，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS和HTML結合</title> <style type="text/css"> .class01{ color: blue; font-size: 30px; border: 1px yellow solid; } .class02{ color: gray; font-size: 26px; border: 1px red solid; } </style> </head> <body> <!--需求 1：修改 class 屬性值為 class01 的 span 或 div 標簽，字體顏色為藍色， 字體大小 30 個像素，邊框為 1 像素黃色實線， 需求 2：修改 class 屬性值為 class02 的 div 標簽，字體顏色為灰色， 字體大小 26 個像素，邊框為 1 像素紅色實線，--> <div class="class01">div標簽1</div> <div class="class02">div標簽2</div> <span class="class01">span標簽1</span> <span class="class02">span標簽2</span> </body> </html>
效果如下：
4.組合選擇器
格式：
選擇器1,選擇器2...{
屬性：值;
}
需求 1：修改 的 div 標簽 和 id="id01" 所有的 span 標簽，字體顏色為藍色，字體大小 20 個像素，邊框為 1 像素黃色實線，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS和HTML結合</title> <style type="text/css"> .class01,#id01{ color: blue; font-size: 20px; border: 1px yellow solid; } </style> </head> <body> <!--需求 1：修改 的 div 標簽 和 id="id01" 所有的 span 標簽，字體顏色為藍色， 字體大小 20 個像素，邊框為 1 像素黃色實線，--> <div class="class01">div標簽1</div> <div class="class02">div標簽2</div> <span id="id01">span標簽1</span> <span class="class02">span標簽2</span> </body> </html>
效果如下：
六、常用樣式
1.字體顏色
color：red；
顏色可以寫顏色名如：black, blue, red, green 等
顏色也可以寫 rgb 值和十六進制表示值：如 rgb(255,0,0)，#00F6DE，如果寫十六進制值必須加#，
2.寬度width
width: 19px;
寬度可以寫像素值：19px；
也可以寫百分比值：20%；
3.高度height
height: 20px;
高度可以寫像素值：19px；
也可以寫百分比值：20%；
4.背景顏色
background-color:#0F2D4C
5.字體樣式
字體顏色：color
字體大小：font-size
6.邊框
border：1px solid red;
7.div居中
margin-left: auto;
margin-right: auto;
8.文本居中
text-align: center;
9.超鏈接去下劃線
text-decoration: none;
10.表格細線
table{
border: 1px solid black;
border-collapse: collapse;
}
th,td{
border: 1px solid black;
}
11.串列去除修飾
ul{
list-style: none;
}
示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS常用樣式</title> <style type="text/css"> div{ color: red; border: 1px solid yellow; width: 300px; height: 300px; background-color: green; font-size: 30px; margin-left: auto; margin-right: auto; text-align: center; } table{ border: 1px solid black; border-collapse: collapse; } td{ border: 1px solid black; } a{ text-decoration: none; } ul{ list-style: none; } </style> </head> <body> <div>我是div標簽</div> <table> <tr> <td>1.1</td> <td>1.2</td> </tr> </table> <a href="http://www.baidu.com">百度一下</a> <ul> <li>1111111</li> <li>1111111</li> <li>1111111</li> <li>1111111</li> </ul> </body> </html>
效果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/207115.html
標籤：其他
上一篇：Python_初識函式