引言 : 博主目前是一名iOS開發者, 所會的語言有Objective-C 和 Swift, 目前正在學習前端, 增強一下技術能力; 這篇文章只是作為我的筆記發在這里, 供自己業余時間看看; 全是很基礎的東西, 看到的小伙伴 酌情略過 吧_
1. 行內樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行內樣式</title>
</head>
<!--
單值屬性: 只有一個屬性值
復合屬性: 有多個屬性值
-->
<body style="background-color: white">
<!--行內樣式-->
<div style="color: red; font-size: 30px; background-color: #101fff">我是div</div>
<p style="font-size: 30px; border: 2px solid;">我是p標簽段落</p>
</body>
</html>
2. 頁內樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-頁內樣式</title>
<!--
網站 = N個網頁 + 服務器 + 數據庫
-->
<!--頁內樣式標簽-->
<style>
body {
background-color: antiquewhite;
}
div {
color: red;
font-size: 30px;
border: 3px dashed lightgray;
}
p {
color: green;
font-size: 20px;
background-color: white;
}
</style>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<div>我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div</div>
<p>我是段落標簽</p>
<p>我是段落標簽</p>
<p>我是段落標簽我是段落標簽我是段落標簽我是段落標簽我是段落標簽我是段落標簽我是段落標簽</p>
</body>
</html>
3. 外部樣式
-
創建外部樣式如下
4687E009-B3BC-40EB-9BC8-F055C58F7A3C.png 代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-外部樣式</title>
<!--引入-->
<link href="CSS/index.css" rel="stylesheet">
<!--
CSS規律
1.就近原則:
2.疊加原則:
-->
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
4. 選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
/*標簽選擇器*/
div {
color: red;
}
p {
color: green;
}
/*類選擇器*/
.test1 {
color: black;
}
/*id選擇器*/
#first {
font-size: 30px;
}
/*并列選擇器 相當于邏輯或, 逗號表示或者*/
p , #first {
border: 1px #ffd1f5 dashed;
}
/*復合選擇器 相當于邏輯與, 中間啥也不寫(空格都不能有)*/
div.test1 {
border: 2px red solid;
}
/*后代選擇器*/
div .test3 a {
font-size: 50px;
}
</style>
</head>
<body>
<div id="first">11111111111111111111</div>
<div>11111111111111111111</div>
<div>11111111111111111111</div>
<div class="test1">11111111111111111111</div>
<p class="test1">22222222222222222222222222</p>
<p>22222222222222222222222222</p>
<p>22222222222222222222222222</p>
<p>22222222222222222222222222</p>
<div id="test2">
<p class="test3">我是段落
<a href="#">我是特別大的超級鏈接</a>
</p>
</div>
</body>
</html>
5. 選擇器的優先級
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-選擇器的優先級別</title>
<!--
CSS遵循
1.相同級別的選擇器: a.就近 b.疊加
2.優先級
important > 行內(內聯) > id > 類 > 標簽 > 通配符 > 子類標簽
3.選擇器的針對性越強, 他的優先級越高 (權值)
-->
<style>
/*important 權值為1000*/
/*行內屬性大于所有其他屬性, 唯獨小于important*/
div {
color : black !important;
}
/*權值為 100 + 1*/
div#main {
color : burlywood;
}
/*id選擇器*/ /*權值:100*/
#main {
color: black;
}
#second {
color: burlywood;
}
/*類選擇器*/ /*權值:10*/
.test1 {
color: goldenrod;
}
.test2 {
color: purple;
}
/*標簽選擇器*/ /*權值:1*/
div/*權值:1*/ {
color: red;
}
div/*權值:1*/ {
color: green;
}
/*通配符選擇器, 最好不要用, 性能很差, 優先級最低*/ /*權值:0*/
* {
font-size: 50px;
}
</style>
</head>
<body>
<!--id只能有一個-->
<div id="main" class="test1 test2">我是div</div>
</body>
</html>
6. 標簽類型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
background-color: red;
width: 300px;
height: 100px;
}
p {
background-color: green;
width: 50px;
}
span {
background-color: #ffd1f5;
width: 300px;
height: 100px;
}
a {
background-color: teal;
}
input {
width: 300px;
height: 50px;
}
button {
width: 250px;
height: 20px;
}
</style>
</head>
<body>
<!--塊級標簽 (單獨占一行) 如:div, p, h1, h2, ul, li-->
<div>我是塊級標簽</div>
<p>段落</p>
<!--行內標簽 (多行能同時顯示在同一行, 高度和寬度取決于內容的尺寸, 無法改變高度) 如: span, a, label-->
<span>我是span, 行內標簽</span>
<a href="#">我是超鏈接, 行內標簽</a>
<span>我是span, 行內標簽</span>
<span>我是span, 行內標簽</span><br>
<!--行內-塊級標簽 (多個可以顯示在同行, 能隨時設置寬高)-->
<input placeholder="我是輸入框">
<button>我是按鈕</button>
</body>
</html>
