CSS文本屬性-CSS字體屬性-CSS選擇器
CSS文本
text-decoration
- 用于設(shè)置文字的裝飾線
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.baidu {
text-decoration: underline;
cursor: pointer;
}
.Google {
text-decoration: line-through;
cursor: pointer;
}
.bing {
text-decoration: overline;
cursor: pointer;
}
.mi {
text-decoration: none;
}
</style>
</head>
<body>
<a >百度一下</a>
<span class="baidu">百度一下</span>
<span class="Google">google一下</span>
<span class="bing">必應(yīng)</span>
<a class="mi">小米</a>
</body>
</html>
text-transform
- 用于設(shè)置文字的大小寫轉(zhuǎn)換
- capitalize 每個(gè)單詞的首字母大寫
- upperCase 每個(gè)單詞的字母變大寫
- lowercase 每個(gè)單詞的字母變小寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.info {
text-transform: capitalize;
}
</style>
</head>
<body>
<div class="info">my name is why</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.info {
/* text-transform: capitalize; */
/* text-transform: uppercase; */
text-transform: lowercase;
}
</style>
</head>
<body>
<div class="info">my name is why, AGE IS 18</div>
</body>
</html>
text-indent
- 第一行文本的縮進(jìn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
/* text-indent: 10px; */
text-indent: 2em;
}
</style>
</head>
<body>
<h2>標(biāo)題</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid nisi quam
accusamus, obcaecati accusantium sapiente corporis. Placeat enim obcaecati
iusto dolorum voluptatem commodi nisi aliquid voluptates tenetur,
perspiciatis temporibus delectus.
</p>
</body>
</html>
text-align
- 定義行內(nèi)內(nèi)容如何相對(duì)他的塊父元素對(duì)齊
- left 左對(duì)齊
- right 右對(duì)齊
- center 正中間顯示
- justify 兩端對(duì)齊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
background-color: #ff0000;
color: #ffffff;
/* text-align: left; */
/* text-align: center; */
text-align: right;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
background-color: #FF0000;
height: 300px;
/* text-align: left; */
text-align: center;
/* text-align: right; */
}
img {
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/gouwujie01.jpg" alt="">
<img src="../images/gouwujie01.jpg" alt="">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
background-color: #FF0000;
height: 300px;
text-align: center;
}
.content {
background-color: #00FF00;
height: 200px;
width: 200px;
/* display: inline-block; */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 200px;
background-color: red;
color: white;
/* text-align: center; */
/* text-align: right; */
text-align: justify;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, itaque
minima porro nesciunt aperiam deserunt voluptatum distinctio laudantium
inventore repellendus natus fugiat iste omnis eius quod eos, ut quo
placeat.
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 200px;
background-color: red;
color: white;
/* text-align: center; */
/* text-align: right; */
text-align: justify;
text-align-last: justify;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, itaque
minima porro nesciunt aperiam deserunt voluptatum distinctio laudantium
inventore repellendus natus fugiat iste omnis eius quod eos, ut quo
placeat coderbin.
</div>
</body>
</html>
word-spacing && letter-spacing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
letter-spacing: 20px;
word-spacing: 50px;
}
</style>
</head>
<body>
<div class="box">my name is coderwhy</div>
</body>
</html>
CSS字體
font-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.home {
font-size: 20px;
}
.box {
/* font-size: 50px; */
/* 相對(duì)于其父元素的字體大小 */
/* font-size: 2em; */
font-size: 200%;
}
</style>
</head>
<body>
<div class="home">
<div class="box">我是div元素</div>
</div>
<div class="box1">我是div元素</div>
</body>
</html>
font-family
- 用于設(shè)置文字的字體名稱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
</style>
</head>
<body>
<div>font-family</div>
</body>
</html>
font-weight
- 用于設(shè)置文字的粗細(xì)
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
- normal 400
- bold 700
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
font-weight: bolder;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
<div>我是div元素</div>
</body>
</html>
font-style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
/* 斜體 */
/* font-style: italic; */
/* font-style: normal; */
/* 傾斜 */
font-style: oblique;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>
font-variant
- 影像小寫字母的顯示形式
- normal
- small-caps 講小寫字母替換為縮小過的大寫字母
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
font-variant: small-caps;
}
</style>
</head>
<body>
<div class="box">My Name Is Coderwhy</div>
</body>
</html>
line-height
- 用于設(shè)置文本的行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
background-color: #ff0000;
color: white;
width: 200px;
line-height: 2;
}
</style>
</head>
<body>
<div class="box">
我是div元素我是div元素我是div元素我是div元素我是div元素我是div元素我是div元素我是div元素我是div元素我是div元素我是div元素我是div元素
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
height: 100px;
background-color: #f00;
color: #fff;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>
font縮寫屬性
- font
- font-style font-variant font-weight font-size/line-height font-family
- font-style font-variant font-weight 可以隨意調(diào)換順序仔夺，也可以省略
- /line-height 可以省略 诞帐，如果不省略，必須跟在font-size后面
- font-size font-family不可以調(diào)換順序狼讨，不可以省略
- font-style font-variant font-weight font-size/line-height font-family
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
/* font-size: 30px;
font-weight: 700;
font-variant: small-caps;
font-style: italic;
font-family: serif;
line-height: 30px;
background-color: red; */
font: italic small-caps 700 30px/30px serif;
background-color: red;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>
CSS選擇器
- 找到特定的網(wǎng)頁(yè)元素進(jìn)行設(shè)置樣式
- 概念
- 按照一定的規(guī)則選出符合條件的元素燕偶，為之添加css樣式
- 選擇器
- 通用選擇器
- 元素選擇器
- 類選擇器
- id選擇器
- 屬性選擇器
- 組合選擇器
- 偽類選擇器
- 偽元素選擇器
通用選擇器
- 所有的元素被選中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
font-size: 30px;
background-color: #f00;
}
</style>
</head>
<body>
<div>我是div元素</div>
<p>我是p元素</p>
<div>
<h2>我是h2元素</h2>
<p>我也是p元素<span>呵呵呵呵</span></p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
font-size: 30px;
background-color: #f00;
}
/* 更推薦的做法 */
body,
p,
div,
h2,
span {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>我是div元素</div>
<p>我是p元素</p>
<div>
<h2>我是h2元素</h2>
<p>我也是p元素<span>呵呵呵呵</span></p>
</div>
</body>
</html>
元素選擇器
class選擇器
id選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
color: red;
}
.box {
color: blue;
}
#home {
color: gray;
}
</style>
</head>
<body>
<div>我是div1</div>
<div class="box">我是div2</div>
<div id="home">我是div3</div>
<p class="box">我是p元素</p>
<div class="box one">我是div元素</div>
<div class="box-one box-first">我是div元素</div>
<div class="box-one box_first">我是div元素</div>
<div class="boxOne BoxFirst">我是div元素</div>
</body>
</html>
- - 連字符
屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
[title] {
color: red;
}
[title="div"] {
background-color: blue;
}
</style>
</head>
<body>
<div>我是div元素</div>
<div title="div">我也是div元素</div>
<p>我是p元素</p>
<h2 title="h2">我是h2元素</h2>
</body>
</html>
- [attr*=val] 屬性值包含某一個(gè)值val
- [attr^=val] 屬性值以val開頭
- [attr&=val] 屬性值以val結(jié)尾
- [attr|=val] 屬性值等于val或者以val開頭后面緊跟著連字符-
- [attr~=val] 屬性值包含val伤靠，如果有其他值必須以空格和val分割
后代選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 后代選擇器 */
.home span {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div class="home">
<div class="box">
<p>我是p元素</p>
<span>呵呵呵呵</span>
</div>
<div class="content">
<div class="desc">
<p>
<span>哈哈哈哈</span>
</p>
</div>
</div>
</div>
<span>嘻嘻嘻</span>
<div>
<span>嘿嘿嘿</span>
</div>
</body>
</html>
子代選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 后代選擇器 */
.home span {
color: red;
font-size: 30px;
}
.home > span {
background-color: green;
}
</style>
</head>
<body>
<div class="home">
<span>啦啦啦啦</span>
<div class="box">
<p>我是p元素</p>
<span>呵呵呵呵</span>
</div>
<div class="content">
<div class="desc">
<p>
<span>哈哈哈哈</span>
</p>
</div>
</div>
</div>
<span>嘻嘻嘻</span>
<div>
<span>嘿嘿嘿</span>
</div>
</body>
</html>
兄弟選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box + .content {
color: red;
}
.box ~ div {
font-size: 30px;
}
</style>
</head>
<body>
<div class="home">
<div class="box">呵呵呵呵</div>
<div class="content">哈哈哈</div>
<div>嘻嘻嘻嘻</div>
<div>嘿嘿嘿嘿</div>
</div>
</body>
</html>
交集選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div.box {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div class="box content">我是div元素</div>
<p class="box">我是p元素</p>
</body>
</html>
并集選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body,
p,
h1,
h2 {
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>我是p元素</p>
<h1>我是h1元素</h1>
</body>
</html>
偽類選擇器
- 偽類
- 偽類是選擇器的一種范咨，它用于選擇處于特定狀態(tài)的元素
- 動(dòng)態(tài)偽類
- link
- visited
- hover
- active
- focus
- 目標(biāo)偽類
- target
- 語(yǔ)言偽類
- lang()
- 元素狀態(tài)偽類
- enabled
- disabled
- checked
- 結(jié)構(gòu)偽類
- nth-child
- nth-last-child
- nth-of-type
- nth-last-of-type
- first-child
- last-child
- first-of-type
- last-of-type
- root
- only-child
- only-of-child
- empty
- 否定偽類
- not()
- 動(dòng)態(tài)偽類
- lvha
- link
- 未訪問的鏈接
- visited
- 已訪問的鏈接
- hover
- 懸停
- active
- 活躍(點(diǎn)擊不放手)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
a:link {
color: red;
}
a:visited {
color: green;
}
a:focus {
color: yellow;
}
a:hover {
color: blue;
}
a:active {
color: purple;
}
</style>
</head>
<body>
<a >小米</a>
</body>
</html>
內(nèi)容回顧
一刹碾、CSS屬性燥撞、文本
1.1.text-decoration
- 裝飾線
1.2.text-transform
- 形變
1.3.text-indent
- 首行縮進(jìn)
- 10px
- 2em
1.4.text-align
- 案例
- 文字的居中
- 案例
- 圖片的劇中
- 案例
- div元素的居中
1.5.letter-spacing && word-spacing
二、CSS屬性 - 字體
2.1.font-size
- 20px
- 2em
- 200%
2.2.font-family
- 原理
- 讀取操作操系統(tǒng)的字體
- 或網(wǎng)絡(luò)字體
- 一個(gè)或者多個(gè)值
2.3.font-style
2.4.font-variant
2.5.line-height
2.6.font縮寫屬性
- font-size/line-height font-family
三迷帜、CSS選擇器
3.1.選擇器
- 通用選擇器
- 元素選擇器
- class選擇呢器
- id選擇器
- 屬性選擇器
- 后代選擇器
- 子代選擇器
- 兄弟選擇器
- 所有兄弟
- 相鄰兄弟
- 交集選擇器
- 并集選擇器
- 偽類選擇器
3.2.偽類
- 狀態(tài)
- lvha (愛恨)
課后作業(yè)
一. 完成課堂所有代碼（總結(jié)物舒、整理）
二. 具體說明text-align居中的條件
text-align居中針對(duì)是行內(nèi)級(jí)元素，比如圖片img戏锹，文字等
對(duì)于塊級(jí)元素冠胯，想要實(shí)現(xiàn)居中，可以通過display: inline-block將塊級(jí)元素轉(zhuǎn)行成行內(nèi)塊元素
三. line-height為什么可以讓文字居中锦针？
line-height表示一行文字的高度荠察，也就是兩行文字基線之間的間距
當(dāng)line-height=height置蜀，就可以使這行文字在div內(nèi)部垂直居中
這是因?yàn)樾懈?文字高度=行距，而行距平均分成上下兩塊悉盆，就使文本垂直居中了
