引言 : 博主目前是一名iOS開發(fā)者, 所會的語言有Objective-C 和 Swift, 目前正在學(xué)習(xí)前端, 增強(qiáng)一下技術(shù)能力; 這篇文章只是作為我的筆記發(fā)在這里, 供自己業(yè)余時間看看; 全是很基礎(chǔ)的東西, 看到的小伙伴 酌情略過 吧_
1. 行內(nèi)樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行內(nèi)樣式</title>
</head>
<!--
單值屬性: 只有一個屬性值
復(fù)合屬性: 有多個屬性值
-->
<body style="background-color: white">
<!--行內(nèi)樣式-->
<div style="color: red; font-size: 30px; background-color: #101fff">我是div</div>
<p style="font-size: 30px; border: 2px solid;">我是p標(biāo)簽段落</p>
</body>
</html>
2. 頁內(nèi)樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-頁內(nèi)樣式</title>
<!--
網(wǎng)站 = N個網(wǎng)頁 + 服務(wù)器 + 數(shù)據(jù)庫
-->
<!--頁內(nèi)樣式標(biāo)簽-->
<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>我是段落標(biāo)簽</p>
<p>我是段落標(biāo)簽</p>
<p>我是段落標(biāo)簽我是段落標(biāo)簽我是段落標(biāo)簽我是段落標(biāo)簽我是段落標(biāo)簽我是段落標(biāo)簽我是段落標(biāo)簽</p>
</body>
</html>
3. 外部樣式
-
創(chuàng)建外部樣式如下
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規(guī)律
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>
/*標(biāo)簽選擇器*/
div {
color: red;
}
p {
color: green;
}
/*類選擇器*/
.test1 {
color: black;
}
/*id選擇器*/
#first {
font-size: 30px;
}
/*并列選擇器 相當(dāng)于邏輯或, 逗號表示或者*/
p , #first {
border: 1px #ffd1f5 dashed;
}
/*復(fù)合選擇器 相當(dāng)于邏輯與, 中間啥也不寫(空格都不能有)*/
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. 選擇器的優(yōu)先級
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-選擇器的優(yōu)先級別</title>
<!--
CSS遵循
1.相同級別的選擇器: a.就近 b.疊加
2.優(yōu)先級
important > 行內(nèi)(內(nèi)聯(lián)) > id > 類 > 標(biāo)簽 > 通配符 > 子類標(biāo)簽
3.選擇器的針對性越強(qiáng), 他的優(yōu)先級越高 (權(quán)值)
-->
<style>
/*important 權(quán)值為1000*/
/*行內(nèi)屬性大于所有其他屬性, 唯獨小于important*/
div {
color : black !important;
}
/*權(quán)值為 100 + 1*/
div#main {
color : burlywood;
}
/*id選擇器*/ /*權(quán)值:100*/
#main {
color: black;
}
#second {
color: burlywood;
}
/*類選擇器*/ /*權(quán)值:10*/
.test1 {
color: goldenrod;
}
.test2 {
color: purple;
}
/*標(biāo)簽選擇器*/ /*權(quán)值:1*/
div/*權(quán)值:1*/ {
color: red;
}
div/*權(quán)值:1*/ {
color: green;
}
/*通配符選擇器, 最好不要用, 性能很差, 優(yōu)先級最低*/ /*權(quán)值:0*/
* {
font-size: 50px;
}
</style>
</head>
<body>
<!--id只能有一個-->
<div id="main" class="test1 test2">我是div</div>
</body>
</html>
6. 標(biāo)簽類型
<!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>
<!--塊級標(biāo)簽 (單獨占一行) 如:div, p, h1, h2, ul, li-->
<div>我是塊級標(biāo)簽</div>
<p>段落</p>
<!--行內(nèi)標(biāo)簽 (多行能同時顯示在同一行, 高度和寬度取決于內(nèi)容的尺寸, 無法改變高度) 如: span, a, label-->
<span>我是span, 行內(nèi)標(biāo)簽</span>
<a href="#">我是超鏈接, 行內(nèi)標(biāo)簽</a>
<span>我是span, 行內(nèi)標(biāo)簽</span>
<span>我是span, 行內(nèi)標(biāo)簽</span><br>
<!--行內(nèi)-塊級標(biāo)簽 (多個可以顯示在同行, 能隨時設(shè)置寬高)-->
<input placeholder="我是輸入框">
<button>我是按鈕</button>
</body>
</html>
