4.CSS文本属性
css Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等
1.文本颜色
color用于定义文本的颜色
表示 | 属性值 |
预定义的颜色值 | red,green,blue等 |
十六进制 | #FF0000,#FF6600,#29D794 |
RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
开发中最
常用的是十六进制
2.对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
属性值 | 解释 |
left | 左对齐(默认值) |
ringht | 右对齐 |
center | 居中对齐 |
3.装饰文本
text-decoration属性规定添加到文本的修饰,可以给文本添加下划线,删除线,上划线
属性值 | 描述 |
none | 默认,没有装饰线(最常用) |
underline | 下划线。链接a自带下划线(常用) |
overline | 上划线(几乎不用) |
line-through | 删除线(不常用) |
4.文本缩进
text-indent属性用来指定文本第一行的缩进,通常是将段落的首行缩进
通过设置该属性,所有元素第一行都可以缩进一个给定的长度,甚至长度可以是负值
em是一个相对单位,就是当前元素一个文字的大小,如果当前元素没有设置大小,则会按照父元素的一个文字大小
5.行间距
line-height属性用于设置行间的间距,可以控制文字行与行之间的距离
5.css的引入方式
1.css的三种样式表
(1)行内样式表(行内式)
是在元素标签内部的style属性中设定css样式,适合于修改简单样式
- style其实就是标签的属性
- 可以控制当前的标签设置样式
- 并没有体现出结构与样式相分离的思想
(2)内部样式表(嵌入式)
是写到html页面内部,是将所有的css代码抽取出来,单独放到一个<style>标签内
- <style>标签理论上可以放在html文档的任何地方,但一般会放在文档的<head>标签中
- 通过此种方式,可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰,但是没有实现结构与样式的完全分离
(3)外部样式表(链接式)
实际开发都是外部样式表,适合于样式比较多的情况,核心是:样式单独写到css文件中,之后把css文件引入到html页面中使用
引入外部样式表分为两步:
1.新建后缀名为.css的样式文件,把所有css代码都放到此文件中
2.在html页面中,使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">
6.Chrome调试工具
Chrome浏览器提供了一个非常好的调试工具,可以用来调试我们的HTML结构和CSS 样式
1.打开调试工具
打开Chrome浏览器,按下F12键或者右击页面空白处->检查
CSS第二天
1.Emmet语法
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法
1.快速生成HTML结构语法
2.快速生成css结构语法
css采取简写形式即可
如:tac:text-align:center,w200按tab可以生成width:200px,lh26按tab可以生成line-height:26px
3.快速格式化代码
Vscode快速格式化代码:shift+alt+f
也可以设置当我们保存页面的时候自动格式化代码:
1.文件->首选项->设置
2.搜索format on save,勾选上
以后都可以自动保存格式化代码
2.css的复合选择器
在css中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的
- 复合选择器可以更准确,更高效地选择目标元素
- 复合选择器是由两个或多个基础选择器,通过不同方式组合而成的
- 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等
1.后代选择器
又称为包含选择器,可以选择父元素里面的子元素。
元素1 元素2 { }
上述语法表示选择元素1里面的所有元素2(后代元素)
- 元素1和元素2中间用空格隔开
- 元素1是父亲,元素2是后代,最终选择的是元素2
- 元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可
- 元素1 和元素2可以是任意基础选择器
2.子元素选择器
子选择器只能选择作为某元素的最近一级子元素,简单理解就是选亲儿子元素
语法:元素1>元素2{样式声明}
上述语法表示选择元素1里面的所有直接后代(子元素)元素2
- 元素1和元素2中间用大于号隔开
- 元素1是父集,元素2是子集,最终选择的是元素2
- 元素2必须是亲儿子,其孙子,重孙子之类不归他管
3.并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明。
并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分
- 元素中间用逗号隔开
- 常用于集体声明
4.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给连接添加特殊效果,或选择第一个,第n个元素
伪类选择器书写的最大特点是用冒号(:)表示,比如:hover、:first-child
伪类选择器很多,比如有链接伪类,结构伪类等
5.链接伪类选择器
注意事项:
- 为了确保生效,按照LVHA的顺序说明:link-:visited-:hover-:active
- 因为a链接在在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式
6.focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标,一般情况<input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说