HTML5+CSS3 DAY5

一丢丢can

已于 2022-10-14 12:39:35 修改

阅读量183

点赞数

分类专栏： Html5+css3 文章标签： css3 html5 前端

于 2022-10-13 12:29:37 首次发布

本文链接：https://blog.csdn.net/weixin_47527002/article/details/127294444

版权

Html5+css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>标签引入这个文件

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>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说