web前端開發學習筆記-05-css新增方法
阿新 • • 發佈：2018-12-16
原課程在這裡：https://www.icourse163.org/learn/BJFU-1003382003?tid=1003609002#/learn/announce
方法一：行內
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p style="color:red;font-size:20px" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ 方法二：內嵌式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lorem</title>
<style>
p{
color:red;
font-size:20px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ 方法三：單獨檔案（.css）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lorem</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</ p{
color:red;
font-size:12px;
}
擴充套件：
設定兩個段落，然後分別取名p1，p2，然後配置不同的屬性，會怎麼樣？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lorem</title>
<style>
p1{
color:red;
font-size:20px;
}
p2{
color:blue;
font-size:10px;
}
</style>
</head>
<body>
<p1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p1><br><hr>
<p2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p2>
</body>
</html>
優先順序：
- 多重樣式可以層疊，可以覆蓋
- 樣式的優先順序按照“就近原則”：
- 行內樣式>內嵌樣式>連結樣式>瀏覽器預設樣式