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