免費(fèi)AI編程助手
第04章-CSS3基礎(chǔ)屬性
2022-05-18 23:31 更新
第04章-前端核心技術(shù)-CSS3基礎(chǔ)屬性
項(xiàng)目經(jīng)理(作者)：張明星
學(xué)習(xí)目標(biāo)
- 了解
CSS是什么
- 掌握
CSS的簡單使用
- 掌握
CSS樣式創(chuàng)建和引入的方法重點(diǎn)
- 掌握
CSS背景的使用重點(diǎn)
- 掌握
CSS文本的樣式重點(diǎn)
- 掌握
CSS連接的樣式重點(diǎn)
CSS簡介
什么是 CSS
CSS指層疊樣式表 (Cascading Style Sheets)- 定義如何顯示 HTML 元素
- 多個(gè)樣式定義可層疊為一
CSS 語法
CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明:
- 選擇器通常是您需要改變樣式的
HTML元素。 - 每條聲明由一個(gè)屬性和一個(gè)值組成。
- 屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。
- 每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開。
CSS 創(chuàng)建（引入方式）
插入樣式表的方法有三種:
- 外部樣式表(External style sheet)
- 內(nèi)部樣式表(Internal style sheet)
- 內(nèi)聯(lián)樣式(Inline style)
外部樣式表
外部樣式需要?jiǎng)?chuàng)建獨(dú)立的css文件，并且使用link標(biāo)簽引入，推薦使用
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>內(nèi)部樣式表
內(nèi)部樣式直接在html文件內(nèi)部使用style標(biāo)簽引入，通常放在head標(biāo)簽中
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式直接在某個(gè)標(biāo)簽上通過style屬性的引入，必須依賴與某個(gè)標(biāo)簽，不通用，但是優(yōu)先級(jí)最高
<p?style="color:sienna;margin-left:20px">這是一個(gè)段落。</p>多重樣式優(yōu)先級(jí)
（內(nèi)聯(lián)樣式）\> （內(nèi)部樣式）\>（外部樣式）\> 瀏覽器默認(rèn)樣式
注意：如果外部樣式放在內(nèi)部樣式的后面，則外部樣式將覆蓋內(nèi)部樣式。
CSS簡單選擇器
選擇器用于選擇哪些元素
元素選擇器（選一種元素）
p {
text-align:center;
}
設(shè)置HTML文檔中所以 p 標(biāo)簽的文字居中對(duì)齊。
案例01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: red;
}
</style>
</head>
<body>
<p>前端學(xué)習(xí)之CSS 元素選擇器</p>
<p>前端學(xué)習(xí)之CSS 元素選擇器</p>
<p>前端學(xué)習(xí)之CSS 元素選擇器</p>
</body>
</html>
所有p標(biāo)簽，無論在哪里都會(huì)被修改為紅色字體
效果展示
id 選擇器（選一個(gè)）
id 選擇器可以為標(biāo)有特定id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設(shè)置id選擇器。CSS 中 id 選擇器以 # 來定義。
#abc {
text-align:center;
}案例02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#text{
color: red;
}
</style>
</head>
<body>
<div id="text">前端學(xué)習(xí)之CSS id選擇器</div>
</body>
</html>
ID屬性不要以數(shù)字開頭，數(shù)字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。
效果展示
class 選擇器（選多個(gè)）
class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個(gè)元素中使用。
class 選擇器在HTML中以class屬性表示，在 CSS中，類選擇器以一個(gè)點(diǎn).號(hào)顯示：
在以下的例子中，所有擁有 center 類的 HTML 元素均為居中。
案例03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.text{
color: red;
}
</style>
</head>
<body>
<div class="text">
前端學(xué)習(xí)之CSS class選擇器
</div>
<div class="text">
第二個(gè)DIV
</div>
<div class="text">
三個(gè)DIV都是同一個(gè)text類，所以文字都是紅色
</div>
</body>
</html>類名的第一個(gè)字符不能使用數(shù)字！它無法在 Mozilla 或 Firefox 中起作用。
效果展示
三種選擇器優(yōu)先級(jí)
id選擇器（選一個(gè)） \> class選擇器（選多個(gè)） \> 元素選擇器 （選一種元素）
CSS 尺寸
尺寸主要指寬度和高度屬性
| 屬性 | 描述 |
|---|---|
height |
設(shè)置元素的高度。 |
max-height |
設(shè)置元素的最大高度。 |
max-width |
設(shè)置元素的最大寬度。 |
min-height |
設(shè)置元素的最小高度。 |
min-width |
設(shè)置元素的最小寬度。 |
width |
設(shè)置元素的寬度。 |
注：width: 200px; margin: auto;可以讓 區(qū)塊元素 居中。
注：給上級(jí)元素添加text-align: center屬性可以讓 內(nèi)聯(lián)元素 居中，因?yàn)閮?nèi)聯(lián)元素等同于文字處理。
案例04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.text1{
width: 200px;
height: 50px;
background-color: #DC143C;
}
</style>
</head>
<body>
<div class="text1">
寬度為200px|高度為50px
</div>
</body>
</html>效果展示
CSS 背景顏色
| 屬性 | 描述 |
|---|---|
| background-color | 設(shè)置背景顏色（red、#00aaff、#0af、rgb(0,255,0)、rgba(0,255,0,1)、hsl(360,10%,1%)） |
rgb
RGB是從顏色發(fā)光的原理來設(shè)計(jì)定的，通俗點(diǎn)說它的顏色混合方式就好像有紅、綠、藍(lán)三盞燈，當(dāng)它們的光相互疊合的時(shí)候，色彩相混，而亮度卻等于三者亮度之總和，越混合亮度越高，即加法混合。
- 紅色（R）
- 綠色（G）
- 藍(lán)色（B）
hsl
HSL 即色相、飽和度、亮度（英語：Hue, Saturation, Lightness）。
- 色相（H）是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。
- 飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取 0-100% 的數(shù)值。
- 亮度（L），取 0-100%，增加亮度，顏色會(huì)向白色變化；減少亮度，顏色會(huì)向黑色變化。
| 值 | 描述 |
|---|---|
| hue - 色相 | 定義色相 (0 到 360) - 0 (或 360) 為紅色, 120 為綠色, 240 為藍(lán)色 |
| saturation - 飽和度 | 定義飽和度; 0% 為灰色， 100% 全色 |
| lightness - 亮度 | 定義亮度 0% 為暗, 50% 為普通, 100% 為白 |
案例05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#bg{
height: 200px;
/* 1.顏色單詞 */
background-color: red;
/* 2.三位16進(jìn)制 */
background-color: #F56;
/* 3.六位16進(jìn)制 */
background-color: #0000FF;
/* 4.rgb(255,255,255) */
background-color: rgb(10,255,125);
/* 5.rgba(255,255,255,1) */
background-color: rgba(10,255,125,1);
/* 6.hsl(360,100%,100%) */
background-color: hsl(0,100%,50%);
/* 7.hsla(360,100%,100%,1) */
background-color: hsla(0,100%,50%,0.1);
}
</style>
</head>
<body>
<div id="bg"></div>
</body>
</html>效果展示
CSS 背景圖片
背景圖片包括多個(gè)屬性，可以分別設(shè)置也可以合并設(shè)置
| 屬性 | 描述 |
|---|---|
| background-color | 設(shè)置背景顏色（red、#00aaff、#0af、rgb(0,255,0)、rgba(0,255,0,1)、hsl(360,10%,1%)） |
| background-image | 設(shè)置背景圖片（url(img/logo.png)） |
| background-repeat | 設(shè)置背景圖片是否重復(fù)（no-repeat、repeat） |
| background-attachment | 設(shè)置背景圖片是否固定（scroll、fixed） |
| background-position | 設(shè)置背景圖片的位置（left、right、top、bottom、center、%、px） |
| background-size（不可合并） | 設(shè)置背景的大?。╬x、%、cover、contain） |
注意：background屬性設(shè)置多個(gè)背景時(shí)，用逗號(hào)分隔開來。
background-size屬性
| 值 | 描述 |
|---|---|
| 像素 | 設(shè)置背景圖片高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置的高度。如果只給出一個(gè)值，第二個(gè)是設(shè)置為 auto(自動(dòng)) |
| 百分比 | 將計(jì)算相對(duì)于背景定位區(qū)域的百分比。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置的高度。如果只給出一個(gè)值，第二個(gè)是設(shè)置為"auto(自動(dòng))" |
| cover | 此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。 |
| contain | 此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。 |
如：
<style type="text/css">
#bg{
background-color: #8B0000;
background-color: url('image/banner.jpg');
background-repeat: no-repeat repeat;
background-attachment: fixed;
background-position: center top;
}
</style>
或者
<style type="text/css">
#bg{
background: #ffffff url('banner.jpg') no-repeat fixed center top;
}
</style>案例06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#bg{
background: #8B0000 url('image/banner.jpg') no-repeat fixed center top;
background-size: 80% 200px;
}
</style>
</head>
<body>
<div id="bg">
<br/><br/><br/><br/><br/>
哈哈
<br/><br/><br/><br/><br/>
</div>
</body>
</html>效果展示
CSS 文本
文本屬性有很多，常用的如下，描述中括號(hào)內(nèi)的內(nèi)容需要重點(diǎn)記憶
| 屬性 | 描述 |
|---|---|
| color | 設(shè)置文本顏色（純文字） |
| direction | 設(shè)置文本方向（ltr：[left to right]；rtl） |
| unicode-bidi | 設(shè)置文本是否被重寫（bidi-override） |
| letter-spacing | 設(shè)置字符間距 （像素單位px，百分比單位） |
| word-spacing | 設(shè)置字（單詞間的空格）間距（像素單位px，百分比單位） |
| white-space | 設(shè)置元素中空白的處理方式（pre：保留空格和換行；pre-line：只保留換行；nowrap：不保留空格和換行；normal：默認(rèn)） |
| vertical-align | 設(shè)置元素的垂直對(duì)齊（表格、圖片、內(nèi)聯(lián)元素）（top、middle、bottom） |
| text-align | 水平對(duì)齊元素中的文本（內(nèi)聯(lián)子元素）（left、right、center） |
| text-decoration | 向文本添加上、中、下劃線（overline、line-through、underline、none） |
| text-indent | 縮進(jìn)元素中文本的首行（像素單位px，百分比單位） |
| text-transform | 控制元素中的字母（lowercase、uppercase） |
案例07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML CSS樣式</title>
<style type="text/css">
#direction{
direction: rtl;/*direction和unicode-bidi必須同時(shí)使用*/
unicode-bidi: bidi-override;/*只有使用該屬性重寫文字，文字方向才會(huì)改變*/
letter-spacing: 10px;/*字母間距10像素*/
word-spacing: 10px;/*單詞間距10像素*/
white-space: pre-wrap;/*控制是否正常顯示空格和換行*/
color: blueviolet;
}
#direction span{
color: crimson;
font-size: 18px;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="direction">
<span>天地不仁</span> Hello world
</div>
</body>
</html>效果展示
CSS3 文字陰影
語法：
text-shadow: h-shadow v-shadow blur color;
注意： text-shadow屬性設(shè)置多重陰影文本，用逗號(hào)分隔開來。
| 屬性值 | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置。允許負(fù)值。 |
| v-shadow | 必需。垂直陰影的位置。允許負(fù)值。 |
| blur | 可選。模糊的距離。 |
| color | 可選。陰影的顏色。 |
案例08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML CSS樣式</title>
<style type="text/css">
#content {
background: #ffffff url('bg.jpg') no-repeat fixed 100% 100%;
background-size: 100% 100%;
word-break: break-word;/*文字自動(dòng)換行*/
}
h1 {
background-color: rgba(5, 66, 77, 0.8);
color: white;
text-align: center;
text-shadow: #FF0000 5px 5px 2px;
}
h4 {
background-color: rgba(55, 66, 5, 0.6);
color: wheat;
text-align: center;
}
.desc {
background-color: rgba(55, 123, 77, 0.7);
color: white;
text-align: center;
}
#content .pre {
text-align: center;
white-space: pre-line;
}
</style>
</head>
<body>
<div id="content">
<h1>HTML CSS樣式</h1>
<h4>第一部分 Web前端入門必備</h4>
<p class="desc">本階段主要學(xué)習(xí)Web前端開發(fā)的基礎(chǔ)技能，包括HTML5、CSS3、JavaScript，學(xué)習(xí)掌握Web網(wǎng)頁的基本布局、排版、特效、動(dòng)畫等。HTML是目前最流行的網(wǎng)頁制作語言。CSS樣式表在網(wǎng)頁設(shè)計(jì)中變得越來越重要。JavaScript是動(dòng)態(tài)腳本語言，是實(shí)現(xiàn)網(wǎng)頁動(dòng)態(tài)效果的核心。三者搭配，網(wǎng)頁必成。</p>
<div class="pre">
01、HTML 基本標(biāo)簽及W3C標(biāo)準(zhǔn)
02、HTML 語法|標(biāo)簽|屬性
03、HTML 文本格式化|實(shí)體字符
04、HTML 圖像|表格|列表|超鏈接
05、HTML 框架|表單|表單元素
06、HTML5音視頻多媒體
07、CSS 基礎(chǔ)語法|簡單選擇器
08、CSS 背景|文本|字體
09、CSS 列表|超鏈接|表格樣式
10、CSS 盒子模型|邊框|輪廓|邊距
11、CSS 尺寸|定位|顯示|浮動(dòng)
12、CSS 偽類|復(fù)雜選擇器
13、JS 基本語法|變量|運(yùn)算|選擇結(jié)構(gòu)|循環(huán)結(jié)構(gòu)
14、JS 函數(shù)|對(duì)象|正則表達(dá)式|內(nèi)置對(duì)象
15、JS DOM對(duì)象|BOM對(duì)象|瀏覽器適配
16、實(shí)戰(zhàn)：制作天貓商城網(wǎng)頁
</div>
</div>
</body>
</html>效果展示
CSS 字體
CSS字體屬性定義字體，加粗，大小，文字樣式。
| Property | 描述 |
|---|---|
| font | 在一個(gè)聲明中設(shè)置所有的字體屬性 |
| font-family | 指定文本的字體系列 |
| font-size/line-height | 指定文本的字體大小 |
| font-style | 指定文本的字體斜體（斜體：italic） |
| font-weight | 指定字體的粗細(xì)（100：不加粗；900：加粗【bold】）。 |
font-variant |
以小型大寫字體或者正常字體顯示文本。（small-caps） |
font屬性合并寫法的順序：
font-style
font-variant
font-weight
font-size/line-height
font-family
如果行高和高度一樣，可以簡單的讓單行文字垂直居中。
height:50px;
line-height:50px;字體系列
font-family 屬性應(yīng)該設(shè)置幾個(gè)字體名稱作為一種"后備"機(jī)制，如果瀏覽器不支持第一種字體，他將嘗試下一種字體。
注意: 如果字體系列的名稱超過一個(gè)字，它必須用引號(hào)，如Font Family："宋體"。多個(gè)字體系列是用一個(gè)逗號(hào)分隔指明：
p{
font-family:"楷體","微軟雅黑";
}CSS單位
絕對(duì)單位：（像素單位）
設(shè)置一個(gè)指定大小的文本，不允許用戶在所有瀏覽器中改變文本大小，確定了輸出的物理尺寸時(shí)絕對(duì)大小很有用
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}相對(duì)大小：(可變單位)
Em：相對(duì)于直接上級(jí)的元素的字體大小來設(shè)置大小Rem：相對(duì)于html的元素字體大小來設(shè)置大小百分比：相對(duì)于元素自身的大小來設(shè)置大小
vw: 1vw 等于視口寬度的1%
vh: 1vh 等于視口高度的1%
- vmin : 選取
vw和vh中最小的那個(gè)
vmax: 選取vw和vh中最大的那個(gè)
瀏覽器默認(rèn)大小和普通文本段落一樣，是16像素（16px=1em）。
如果上級(jí)元素的字體大小為20px，則（20px=1em）。
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
上面的例子，em的文字大小是與前面的例子中像素一樣。
不過，如果使用 em 單位，則可以在所有瀏覽器中調(diào)整文本大小。
CSS 超鏈接屬性
鏈接的樣式，可以用任何CSS屬性（如顏色，字體，背景等）。特別的鏈接，可以有不同的樣式，這取決于他們是什么狀態(tài)。
這四個(gè)鏈接狀態(tài)是：
a:link- 正常，未訪問過的鏈接
- a:visited - 用戶已訪問過的鏈接
a:hover- 當(dāng)用戶鼠標(biāo)放在鏈接上時(shí)
a:active- 鏈接被點(diǎn)擊的那一刻
注意： a:hover 必須在 a:link 和 a:visited 之后寫，需要嚴(yán)格按順序才能看到效果。
注意： a:active 必須在 a:hover 之后。
案例09
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a:link {
color: #000000;
}
/* 未訪問鏈接*/
a:visited {
color: #00FF00;
}
/* 已訪問鏈接 */
a:hover {
color: #FF00FF;
}
/* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {
color: #0000FF;
}
/* 鼠標(biāo)點(diǎn)擊時(shí) */
</style>
</head>
<body>
<a href="" target="_blank">這是一個(gè)鏈接</a>
</body>
</body>
</html>效果展示
CSS后代選擇器
后代選擇器（descendant selector）又稱為包含選擇器。使用符合空格
后代選擇器可以選擇作為某元素后代的元素。
舉例來說，如果您希望只對(duì) ul 元素中的 li元素應(yīng)用樣式，而不對(duì)ol元素中的li元素應(yīng)用樣式，可以這樣寫：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul li {
line-height: 50px;
}
</style>
</head>
<body>
<ul>
<li><a href="">系統(tǒng)管理</a></li>
<li><a href="">會(huì)員管理</a></li>
</ul>
</body>
</html>以上內(nèi)容是否對(duì)您有幫助：
更多建議：