【CSS3】css开篇基础（6）

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的基础上更加熟练运用前端

8.JavaScript专栏

        在学习html5和css3的基础上使我们的前端使用更高级

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

2.属性选择器 

属性选择器是CSS的一种选择器，用于根据HTML元素的属性来选择元素。它允许你根据元素是否具有某个属性，或属性的具体值来应用样式。以下是几种常用的属性选择器及其用法：

1.E[att]     选择具有att属性的E元素

2.E[att="val"]     选择具有att属性且属性值等于val的E元素

3.E[att^="val"]    匹配具有att属性且值以val开头的E元素

4.E[att$="val"]    匹配具有att属性且值以val结尾的E元素

5.E[att*="val"]     匹配具有att属性且值中含有val的E元素

其 [] 权重跟类选择器一样都为10. 

3.结构伪类选择器

结构伪类选择器是CSS中用于选择元素的特定状态或位置的伪类。它们可以帮助开发者更灵活地选择元素，基于元素在文档中的结构或其关系。以下是一些常见的结构伪类选择器及其用法： 

 对于：nth中的 n我们可以是表达式，比如2n，2n+1等，n是从0开始计算的。

nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子，然后看看是否和E匹配，不匹配则不生效。

nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子 ，这个就很稳定了。

该选择器权重为10. 

4.伪元素选择器

常见的伪元素选择器有::before，::after 。

伪元素选择器生成的元素默认情况下是行内元素。这意味着使用伪元素（如::before和::after）时，默认情况下内容会像普通文本一样在行内排列。不过，可以通过CSS样式将伪元素修改为块级元素（block element）或其他显示类型。 

新创建的这个元素在文档树中是找不到的，所以我们称为伪元素 

伪元素 ::before 和 ::after 必须具有 content 属性，否则不会生成任何内容。即使你为伪元素应用了其他样式（如颜色、背景等），如果没有定义 content 属性，伪元素将不会在页面上显示。 content属性用于插入文本内容。

5.border-box

box-sizing一般为content-box（默认值），不包含padding和boder。

当 box-sizing 设置为 border-box 时，宽度和高度会包含内边距和边框，因此内容区域的宽度会自动根据设置的内边距和边框大小进行调整，而不会超出设置的宽度和高度。

6. 将图片模糊处理

filter将模糊或颜色偏移等图形效果应用于元素

filter:函数;

filter:blur(5px)       

blur为模糊处理，数值越大越模糊

7.calc函数 

calc()此CSS函数让你在声明CSS属性值时执行一些计算。
width: calc(100%-80px);
括号里面可以使用 +-*/来进行计算。 

8. 过渡

transition: 要过渡的属性  花费时间  运动曲线  何时开始；

属性：可以是宽度、高度、背景颜色、内外边距（如果想给所有的属性都变化过渡，那么写一个all就行）

花费时间：单位是秒（必须写单位）

运动曲线：默认是ease（可以省略）如0.5s

何时开始：单位是秒（必须写单位）可以设置延迟触发时间 默认是0s（可以省略）

谁做过渡给谁加，添加过渡，一般是鼠标经过，所以要设置好hover中的过渡后的值。

 9.SEO优化 

SEO优化：
对网站进行深度的优化，在搜索引擎上提升网站的排名
 

title网站的名字       网站名（产品名）+网站的介绍（不超过30个汉字），写在<title></title>中间

description对于网站的简短描述       <meta name="description"  content=......>

keywords页面关键词，搜索引擎的关注点之一    <meta name="keywords"  content=......>

它们都写在head标签中间