CSS3给网页穿上美丽的外衣
二、給網(wǎng)頁穿上美麗的外衣
1、本章目標(biāo)
掌握CSS的語法結(jié)構(gòu)和在網(wǎng)頁中的應(yīng)用
掌握CSS的文本和字體樣式
掌握CSS背景樣式
2、為什么要使用css
使用css，可以讓原始的頁面即黑色文字頁面變得豐富起來，漂亮起來，實(shí)現(xiàn)我們想要的排版布局的效果
3、css是什么
層疊樣式表（Cascading Style Sheet）
html是骨架。css是衣服，起到裝飾的作用，花花綠綠的
4、CSS的優(yōu)勢
- 內(nèi)容與表現(xiàn)分離
- 網(wǎng)頁的表現(xiàn)統(tǒng)一，容易修改
- 豐富的樣式，使頁面布局更加靈活
- 減少網(wǎng)頁的代碼量，增加網(wǎng)頁的瀏覽速度，節(jié)省網(wǎng)絡(luò)帶寬
- 運(yùn)用獨(dú)立于頁面的CSS，有利于網(wǎng)頁被搜索引擎收錄
5、css代碼書寫的位置
1、內(nèi)聯(lián)式（頭部）
head標(biāo)簽的內(nèi)部
寫法在同一文件里，寫在head里面，寫style標(biāo)簽里面。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>h1{color: red;}</style> </head> <body><h1>我是h1</h1></body> </html>2、外聯(lián)式
在不同的文件中，需要新建一個css 文件，然后在head中寫link 按table，在href中寫入css代碼路徑，關(guān)聯(lián)起來即可。同一個html文件，可以引入無數(shù)個css文件。
- 新建一個css文件 。示例：外聯(lián)樣式.css
- 新建html，導(dǎo)入css樣式
3、內(nèi)部
在標(biāo)簽內(nèi)部，寫css樣式 在開始標(biāo)簽內(nèi)部，寫style=”color:blue” ，
<body><h1 style="color: green;">我是h1</h1></body>6、css樣式的優(yōu)先級
css樣式的優(yōu)先級
內(nèi)部樣式>內(nèi)聯(lián)樣式表>外聯(lián)樣式表
7、css代碼樣式
選擇器{
? 屬性：值；
? 屬性：值；
}
8、選擇器的類型
1、標(biāo)簽選擇器，通過標(biāo)簽來選擇頁面元素。直接寫標(biāo)簽名
h1{
屬性：值；
}
2、id選擇器
通過自定義的id來選擇元素，id唯一，不可重復(fù)id=”id名”
#id名{
屬性：值；
}
3、類選擇器
通過自定義的類名來選擇元素，類可以重復(fù)，可以多個，class=”類名”
.類名{
屬性：值；
}
9、選擇器優(yōu)先級
ID選擇器>類選擇器>標(biāo)簽選擇器
范圍越小，優(yōu)先級越高
10、字體樣式
修改字體時，只要電腦內(nèi)有的字體都可以進(jìn)行修改
怎么看電腦內(nèi)裝的字體，計(jì)算機(jī)，c盤，Windows，fonts,就可以看到我們電腦上裝的所有字體
設(shè)置字體大小，學(xué)習(xí)新的一個知識，px像素。
font-weight 取值 100——900的范圍 字體加粗
字體顏色：直接color
11、文本樣式
-
color顏色取值的格式
1、直接寫顏色 也要復(fù)合寫法 yellowgreen 黃綠色
2、16進(jìn)制
3、RGB 紅綠藍(lán) 三原色
顏色不需要記，ui會給你的
-
文字對齊方式
text-align: center 居中
right 右對齊
left 左對齊
對齊參照點(diǎn)不同 ，對齊的方式也不同，以父級元素為標(biāo)準(zhǔn)，不設(shè)寬度，默認(rèn)為瀏覽器寬度。暫時有這個概念，盒子模型學(xué)完就推翻了
如果想要指定對齊，需要設(shè)置寬和高
寬：weight 高：hight
-
text-indent 首行縮進(jìn)
單位可以是px，像素，也可以是em，即縮幾個字體，根據(jù)全部字體的大小來變化，首行縮進(jìn)用em比較合適
開啟控制臺進(jìn)行調(diào)整
-
line-height： 設(shè)置行高，設(shè)置文字的垂直居中 line-height，和父元素的高度保持一致，即垂直居中
-
設(shè)置文本裝飾
text-decoration: line—throw 中劃線
? underline 下劃線
? overline 上劃線
12、偽類語法
| | |
**注釋：**在 CSS 定義中，a:hover 必須位于 a:link 和 a:visited 之后，這樣才能生效！
**注釋：**在 CSS 定義中，a:active 必須位于 a:hover 之后，這樣才能生效！
13、鼠標(biāo)形狀 cursor：
hover 當(dāng)鼠標(biāo)移動到上面的時候，執(zhí)行的樣式
語法 ：
a:hover{cursor: move;}visited 針對a標(biāo)簽超鏈接，當(dāng)鏈接從未訪問過時，顯示初始顏色，只要點(diǎn)擊過，就顯示visite設(shè)置的顏色。
鼠標(biāo)指針變化
直接在style下面寫屬性cursor：值；
其中的值分別代表：
pointer:指針變小手
move: 移動
wait: 等待（不要用）
14、制作京東新聞資訊頁
15、div標(biāo)簽
div就是一個容器，一個盒子。把東西都裝在一起。目的就是為了方便管理，把頁面分成一塊一塊的，管理界面，進(jìn)行調(diào)整的時候，不需要一個個的調(diào)整，可以拿著盒子一個個的調(diào)整，更加方便快捷。
背景圖片和插入img的圖片，img直接插入，背景圖片是用來做背景的 ，和桌面一樣
坐標(biāo)移動的原理
div背景圖片 圖片小 div大
background：url(“圖片路徑”) no-repeat（不平鋪） 坐標(biāo)（x軸） y軸；
? background: url(“1.jpg”) no-repeat 80px 90px;
? 移動坐標(biāo) x軸為左負(fù) 右正 y軸為上負(fù) 下正 ，可以直接寫像素值
? 若移動左上右下等等，可以直接用上 top 下 bottom 左 left 右 right
? 居中 center
? 例：移動到右下
? background: url(“1.jpg”) no-repeat right bottom;
?
div背景圖片，圖片大，div小的時候
可以直接用坐標(biāo)進(jìn)行調(diào)整，左負(fù)右正，上負(fù)下正，控制臺，進(jìn)行調(diào)整
練習(xí)：
制作我的購物車
16、span標(biāo)簽
span是一個文字標(biāo)簽 等于小括號
? 移動坐標(biāo) x軸為左負(fù) 右正 y軸為上負(fù) 下正 ，可以直接寫像素值
? 若移動左上右下等等，可以直接用上 top 下 bottom 左 left 右 right
? 居中 center
? 例：移動到右下
? background: url(“1.jpg”) no-repeat right bottom;
?
div背景圖片，圖片大，div小的時候
可以直接用坐標(biāo)進(jìn)行調(diào)整，左負(fù)右正，上負(fù)下正，控制臺，進(jìn)行調(diào)整
練習(xí)：
制作我的購物車
[外鏈圖片轉(zhuǎn)存中…(img-7KtnYo72-1629374083250)]
16、span標(biāo)簽
span是一個文字標(biāo)簽 等于小括號
span的添加，不會對文字造成任何的變化，目的作用在于，將一段文字中的某一個或者幾個文字進(jìn)行樣式的更改，可以用span盡心包裹，然后設(shè)置span 格式
總結(jié)
以上是生活随笔為你收集整理的CSS3给网页穿上美丽的外衣的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 零基础带你飞web前端教程带你探究web
- 下一篇： html怎么添加图片幻灯,使用CSS3实