-
文本属性
-
*(掌握) *text-decoration: 文本装饰线
- underline: 下滑线
- line-through: 删除线
- overline: 上滑线
- none: 无修饰线
-
了解 text-transform: 文字大小写转换
- capitalize: 首字母大写
- uppercase: 全字母大写
- lowercase: 全字母小写
-
*(了解) *text-indent: 首行缩进
<!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 { /* 缩进2个字符,1em为当前字符的大小,如果字符为16px,则1em=16px */ text-indent: 2em; } </style> </head> <body> <h2>标题</h2> <p> 阿嘎就安静发ava发啥发AV啊v啊嘎嘎嘎各发噶v啊v啊v撒啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊www呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊早早早早早早早早早早早早早早早早早早早早早早早早早早早早早早啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊古古怪怪古古怪怪古古怪怪古古怪怪古古怪怪滚滚滚滚滚滚滚滚滚啊啊 </p> </body> </html> -
text-align
-
属性
- left
- right
- center
- justify: 两端对齐, 最后一行除外;最后一行生效: text-align-last
- 直译: 文本对齐方式
- MDN: 定义行内内容(例如文字)如何相对于它的块父元素对齐
- W3C: 描述行内级元素如何相对于它的块父元素对齐
<!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: #f00; color: white; /* 最后一行无效 */ text-align: justify; /* 最后一行有效 */ text-align-last: justify; } </style> </head> <body> <div class="box"> In the grand tapestry of life, family is the thread that weaves through our past, present, and future. It is a sanctuary of love, a sanctuary we carry within us wherever we go. For, in the end, it is the bonds of family that give our lives meaning, purpose, and a place to call home. </div> </body> </html> -
-
word-spacing
- 单词间距
-
letter-spacing
- 字符间距
-
-
字体属性
-
font-size: 字体大小
-
浏览器默认字体大小为16px
-
三种字体大小的单位
- px: 像素,最常使用
- em: 1em等于当前元素的字体大小
- 百分比: 相对于包含块的字体大小
<!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-size: 24px; } */ .px { font-size: 50px; } .em { /* 32px */ font-size: 2em; } .percent1 { /* 14.4px */ font-size: 90%; } </style> </head> <body> <div class="px">我是px表示方式</div> <div class="em">我是em表示方式</div> <div class="percent1">我是百分比表示方式</div> </body> </html> -
-
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> </head> <style> .fontfamily { /* 字体中有多个单词加引号,表示为一个整体*/ font-family: 'Courier New', Courier, monospace; } </style> <body> <div class="fontfamily"> Font-Family字体族 </div> </body> </html> -
font-weight: 字体粗细
-
取值
- 100|200|300|400|500|600|700|800|900
- normal: 正常,默认,对应数字的400
- bold: 加粗,对应数字的700,strong,b,h1-h6默认都是该值
-
-
*(了解) *font-style
-
取值
- normal: 默认
- italic: 斜体,(字体本身支持斜体时,显示的斜体)
- oblique: 倾斜,(不管字体支不支持斜体,都可以让字体倾斜显示)
-
-
*(了解) *font-vaiant
-
影响小写字母的显示形式
-
取值
- normal
- small-caps: 将小写字母代替为缩小过后的大写字母
-
-
*(掌握) *line-height
- 行高: 设置一行文本所占据的高度;两行文字基线之间的间距
-
- 总结: 设置line-height等于父元素的高度,能够让文本在父元素中垂直居中
```
<!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 {
color: white;
background-color: red;
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>
```
- font
- 缩写属性
```
<!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;
/* 缩写属性 */
/* 缩写特性
font-style font-variant font-weight font-size/line-height font-family
前三个属性可省略,也可随意调换位置
/line-height可以省略
font-size,font-family不可以省略和调换位置
*/
font: italic small-caps 700 30px/30px serif;
}
</style>
</head>
<body>
<div class="box">font缩写</div>
</body>
</html>
```
-
选择器
-
通用选择器: 选择所有的元素
- *{样式}
-
元素选择器: 元素名称
- 元素名称{}
-
类选择器: class
- .类名{}
-
ID选择器: id
- #id名{}
-
属性选择器
- [属性名| 属性名=值] {}
-
后代选择器
- 所有后代: 父选择器 子选择器{}
- 直接后代: 父选择器>子选择器{}
-
兄弟选择器
- 相邻兄弟选择器: 选择器+ 选择器{}
- 普遍兄弟选择器: 选择器~ 选择器{}
-
交集选择器
- 选择器1选择器2: {}, 既符合选择器1也符合选择器2
-
并集选择器
- 选择器1,选择器2....{}
-
伪类选择器: developer.mozilla.org/zh-CN/docs/…
-
动态伪类(重点,暂时掌握)
- link: 只能用于a元素
- visited: 只能由于a元素
- hover: 不只用于a元素
- active: 不只用于a元素
- focus: 不只用于a元素
-
目标伪类: target
-
语言伪类: lang()
-
元素状态伪类
-
结构伪类
-
否定伪类
-
-
伪元素选择器
- ::first-line 针对首行文本设置属性
- ::first-letter 针对首个文本设置属性
<!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: 500px; background-color: red; color: #fff; } /* 首行文本选择器 */ .box::first-line { color: yellow; font-size: 30px; } /* 首个文本选择器 */ .box::first-letter { color: skyblue; font-weight: 700; } </style> </head> <body> <div class="box"> 伪类让你可以将样式应用于元素，不仅与文档树内容有关，也与外部因素有关——如与导航历史有关的（例如，:visited）、与其内容的状态有关的（如某些表单元素上的 :checked）或者与鼠标位置有关的（如 :hover，它可以让你知道鼠标是否在一个元素上）。 </div> </body> </html>- ::before
- ::after
<!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> .item::before { content: "www"; } .item::after { /* content: "hhh"; */ content: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/hotboard/hot.png) } .box4::after { /* 不能省略 */ content: ""; display: inline-block; width: 15px; height: 15px; background-color: red; } </style> </head> <body> <div class="box1 item"> 哈哈哈 </div> <div class="box2 item"> 嘿嘿嘿 </div> <div class="box3 item"> 嘻嘻嘻 </div> <div class="box4">呜呜呜</div> </body> </html>
-
