从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）

复习：从零开始学前端：形变 — 今天你学习了吗？（CSS：Day21）

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）
- 前言
- 第二十二节课：css3新属性scss和less
- - 一、CSS3滤镜属性
  - 二、CSS3计算属性
  - 三、less和sass的概念
  - 四、less和sass的变量
  - 五、less和sass的嵌套
  - 六、less和sass的访问符
  - 七、less的混入
  - 八、sass的混入
  - 九、less和sass的总结
  - 十、HTML5语义化标签

前言

恶性循环，学不会，补习，补习，落下课程，补习~

第二十二节课：css3新属性scss和less

一、CSS3滤镜属性

css3滤镜属性filter：filter属性将模糊或颜色偏差等图形效果应用于元素。

属性值	作用
blur()	给图片模糊处理，值越大，模糊越大，单位使用px
brightness()	调整图片宽度，值越大亮度越亮，0%全黑，100%图片原本亮度单位使用%
contrast()	函数给图片增加灰度，值越小，灰度越灰，0%全灰，单位%

二、CSS3计算属性

calc()：此函数让你在声明CSS属性值时执行一些计算。
适用语法：
with：calc(100%-30px)
calc()使用注意点：
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如“with：calc(12%+5em)”这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

三、less和sass的概念

css具有以下几个缺点：

语法不够强大，比如无法嵌套书写，导致模块开发中需要书写很多重复的选择器。
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

sass：https://www.sass.hk/guide/
less：https://less.bootcss.com/

但是，CSS预处理器也不是万能的，CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。更大的问题在于，预编译很容易造成后代选择器的滥用。
所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，CSS预处理器有没有解决更大的麻烦。

四、less和sass的变量

在less中我们使用“@”符来声明变量。
例如：

@color：blue;
.one{color:@color}

在sass中我们使用“$”符来声明变量。
例如：

$color:blue;
.one{color:$color}

五、less和sass的嵌套

在我们之前写css的话，因为权重的关系我们写的话都需要把后代的选择都选择上，这样就会导致我们每次的css选择器都非常的冗长、繁琐，但是leaa和sass就非常的方便了。
例如：

.one{font:20px}
.one .two{color:pink}

我们可以写成

.one{font:20px;.two{color:pink}
}

六、less和sass的访问符

.one{width:100px;height:100px;}
.one:hover{background-color:pink}

我们可以通过less和sass可以写成
.one{
width:100px;height:100px;
&:hover{backgroung-color:pink}
}

七、less的混入

我们也可以把一些其他选择器样式混入到另一个选择器当中

.one{color:red}
.two{font:20px;one()}

八、sass的混入

sass的混入和less就有一点不一样了，首先是利用@mixin声明混入的选择器，然后就是利用@include去混入

@mixin roubded-corners{boe=rder-redius:5px;
}
.notice{background-color:green;border:2px solid #00aa00;border-radius:5px;
}

九、less和sass的总结

sass和less都属于css预处理器，其基本思想是，用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用。

不同之处：

编译环境不一样less是基于JavaScript，是在客户端处理的。sass是基于ruby的，是在服务器端处理的。
变量符不一样，less是@，而sass是&。
输出设置，less没有输出设置，sass提供4种输出选项：nested，compact，compressed和expanded。
sass支持条件语句，可以使用if()else{}，for{}循环等等，而less不支持。

十、HTML5语义化标签

HTML5新增的语义化标签主要有：
<article>、<section>、<nav>、<aside>、<header>、<footer>等等…

优点：

为了在没有CSS的情况下，页面也能呈现出很地内容结构、代码结构
比<div>标签有更加丰富的含义，方便开发与维护
方便搜索引擎能识别页面结构，有利于SEO
方便其他设备解析（如移动设备、盲人阅读器等）
有利于合作，遵守W3C标准

header标签和hgroup标签：
放在页面或布局的顶部，一般放置导航栏或标题，如：

<header><h1>甜柚~</h1>
</header>

一个文档中可以包含一对或者一对以上的<header>标签。
如果有连续多个h1~h6标签就用hgroup。

nav标签：
表示页面的导航，也可以在<header>标签中使用，还可以显示在侧边栏中。一个页面之中可以有多个<nav>标签。为了方便搜索引擎解析，最好是将主要的链接放在nav中。

<header><nav><li><a href="index.html">首页</a></li><li><a href="one.html">例子1</a></li><li><a href="two.html">例子2</a></li></nav>
</header>

aside标签：
所包含的内容不是页面的主要内容、具有独立性，是对页面的补充。
<aside>一般使用在页面、文章的侧边栏、广告、友情链接等区域。

footer标签：
一般放在页面或则页面中的某个区块的底部，包含版权信息、联系方式等信息。一个页面也可以有多个footer。

article标签：
<article>元素应该应用于=在相对比较独立、完整的内容区块，所以我们可以在一篇博客、一个论坛帖子、一篇新闻报道或则一个用户评论中使用<article>元素。article可以互相嵌套。

section标签：
一组或者一节内容。包含的内容是一个明确的主题，通常有标题区域。

预习：从零开始学前端：OPPO商城轮播图 — 今天你学习了吗？（CSS：Day23）

------学向勤中得，萤窗万卷书。

从零开始学前端：css3新属性scss和less --- 今天你学习了吗？（CSS:Day22）相关推荐

从零开始学前端：OPPO商城轮播图 --- 今天你学习了吗？（CSS：Day23）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:css3新属性scss和less - 今天你学习了吗?(CSS:Day22) 文章目录从零开始学前端:程 ...
从零开始学前端：标签渐变和媒体查询 --- 今天你学习了吗？（CSS：Day25）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS:Day25) 复习:从零开始学前端:grid布局和音频和媒体查询 - 今天你学习了吗?(CSS:Day24) 文章目录从零开始学 ...
从零开始学前端：显示隐藏与文本溢出 --- 今天你学习了吗？（CSS：Day16）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:浮动 - 今天你学习了吗?(CSS:Day15) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
从零开始学前端：伪元素和盒子模型 --- 今天你学习了吗？（CSS：Day13）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS元素模式的转换和CSS三大特性 - 今天你学习了吗?(CSS:Day12) 文章目录从零开始学前端 ...
从零开始学前端：购物车和鲜花价格排序 --- 今天你学习了吗？（JS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:对象序列化与反序列化.冒泡排序.数组去重 - 今天你学习了吗?(JS:Day11) 文章目录从零开始学前端 ...
从零开始学前端：字符串和数组的方法 --- 今天你学习了吗？（JS：Day10）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:作用域.执行顺序 - 今天你学习了吗?(JS:Day9) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
从零开始学前端：形变（小游戏：3D翻滚盒子） --- 今天你学习了吗？（CSS：Day21）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:过渡和动画 - 今天你学习了吗?(CSS:Day20) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
从零开始学前端：CSS盒子模型属性 --- 今天你学习了吗？（CSS：Day14）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:伪元素和盒子模型 - 今天你学习了吗?(Day13) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
从零开始学前端：jQuery官网 --- 今天你学习了吗？（CSS：Day26）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:标签渐变和媒体查询 - 今天你学习了吗?(CSS:Day25) 文章目录从零开始学前端:程序猿小白也可以 ...

从零开始学前端：css3新属性scss和less --- 今天你学习了吗？（CSS:Day22）