【CSS3】css开篇基础（2）

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。

如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣，记得关注我👀👀以便不错过每一篇精彩。

当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力，一起进步！

加油，一起CHIN UP！💪💪

🔗个人主页：E绵绵的博客
📚所属专栏：

1. JAVA知识点专栏

        深入探索JAVA的核心概念与技术细节

2.JAVA题目练习

        实战演练，巩固JAVA编程技能

3.c语言知识点专栏

        揭示c语言的底层逻辑与高级特性

4.c语言题目练习

        挑战自我，提升c语言编程能力

5.Mysql数据库专栏

        了解Mysql知识点，提升数据库管理能力

6.html5知识点专栏

        学习前端知识，更好的运用它

7. css3知识点专栏

        在学习html5的基础上更加熟练运用前端

📘 持续更新中，敬请期待❤️❤️

2.Emmet语法

它是前端开发者提高编码效率的强大工具。通过掌握其简洁的缩写语法，你可以更快速地编写HTML和CSS代码，专注于项目的核心逻辑和设计 

虽然它并不是每个编译器或开发环境都内置支持的，但它在许多现代的代码编辑器和集成开发环境（IDE）中都能找到。比如vscode，sublime text；

创建基本HTML结构:

提醒一下，如果直接.demo或者#two默认是 div标签。

使用自增符号 $ 的示例 :

 使用{}的示例：

 以上都是html结构标签快速生成，下面是css的快速生成

CSS 基本采取简写形式即可：
1.比如w200 按tab 可以生成 width: 200px;

2.比如lh26 按tab 可以生成 line-height:26px; 

总之该快捷生成都输入首字母。

3.复合选择器 

 后代选择器

后代选择器用空格分隔，选择某个元素内的所有后代元素。

注意后代选择器不只是可以有两个基础选择器，还可以有多个基础选择器，如div p span

子元素选择器 

子元素选择器是 CSS 中的一种选择器，用于选择某个元素的直接子元素。子选择器使用 > 符号来连接父元素和子元素。

 并集选择器

并集选择器用于将多个选择器组合在一起，以便对它们应用相同的样式规则。这种方法可以减少代码冗余，提高CSS的可维护性和效率。

 

任何形式的选择器都可以作为并集选择器的一部分，包含其他复合选择器和简单选择器。

伪类选择器

伪类链接选择器 

常用的链接伪类选择器

1. :link
2. :visited
3. :hover
4. :active

 

 

 

 为了确保生效，请按照LVHA的循顺序声明:link-:visited-:hover-:active

 一般我们日常用的多的是 hover选择器，所以一般工作中多是用这种代码：

 伪类focus选择器

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 <input>类表单元素才能获取,因此这个选择器也针对于表单元素来说。

input:focus{
background-color:yellow;
}

 当鼠标选中该表单，该表单背景颜色会变为黄色。

 4.元素显示模式

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页，这时候就要用到元素显示模式。
元素显示模式就是元素(标签)以什么方式进行显示，分为三种：块元素，行内元素，行内块元素。

块元素 

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<i>等,其中<div> 标签是最典型的块元素

块级元素的特点:
比较霸道，自己独占一行。
高度，宽度、外边距以及内边距都可以控制。
是一个容器及盒子，里面可以放行内元素或者块级元素

注意:
文字类的元素内不能使用块级元素

如<p>标签主要用于存放文字，因此<p>里面不能放块级元素,特别是不能放<div>

同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素 

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素。

行内元素的特点:

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的，
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意:
链接里面不能再放链接
有个特殊情况 链接<a>里面可以放块级元素如图片，但是给 <a>转换一下块级模式最安全

行内块元素 

在行内元素中有几个特殊的标签，<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。我们称它们为行内块元素。

行内块元素的特点:  

可以和相邻行内元素或行内块元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个(行内元素特点)。
高度，行高、外边距以及内边距都可以控制(块级元素特点)。

元素显示模式的转换 

特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性比如想要增加链接 <a>的触发范围。 

转换为块元素:display：block

转换为行内元素:display：inline

转换为行内块元素:display ：inline-block

 

5.单行文字在块元素中垂直居中的原理

要让单行文字在块元素中垂直居中，我们只要将文字行高等于块元素的高度。

---

行高的上空隙和下空隙把文字挤到中问了,是如果行高小于盒子髙度,文字会偏上,如果行高大于盒子高度,则文字偏下。

6.背景 

背景颜色 

设置元素的背景颜色，可以使用颜色名称、十六进制、RGB、RGBA、HSL 等颜色值。

在这里我们还要讲个背景颜色半透明设置：

颜色设置中的rgba() 允许你为颜色添加透明度（alpha 通道，第四个参数），透明度值范围从 0（完全透明）到 1（完全不透明）。

背景图片 

background-image属性描述了元素的背景图像。实际开发常见于logo 或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)

.element {
    background-image: url('images/background.jpg');
}

其中地址可以是相对地址也可以是绝对地址。

背景图片平铺 

 如果需要在HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

背景图片位置 

当参数是方位名词。

方位名词关键字

• 水平关键字: left, center, right
• 垂直关键字: top, center, bottom

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和 top left 效果一致

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

当参数是精确单位，精确单位一般指的是百分比或者px
如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标

如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

其中精确单位都是从左到右，从上到下。

/* 背景图像位于元素的 25% 水平位置和 75% 垂直位置 */
.element {
    background-position: 25% 75%;
}

/* 背景图像距离左边缘 50px，距离上边缘 100px */
.element {
    background-position: 50px 100px;
}

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标 

背景图片固定 

background-attachment 属性用于指定背景图像是否随着页面内容的滚动而滚动。其常用值包括：

• scroll（默认）：背景图像会随着内容滚动。
• fixed：背景图像固定在视口，不随内容滚动。

要实现固定背景图片，关键在于将 background-attachment 设置为 fixed。

背景属性复合写法 

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。

从而节约代码量当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为:

background:背景颜色, 背景图片地址 背景平铺 背景图像滚动 背景图片位置;