CSS3 内容学习

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

以下内容记录的是关于CSS3的内容学习

---

一、两个公共样式文件

reset.css
Normalize.css

二、CSS预处理：

2.1 less less官网

###2.1.1 变量 ：@变量名：值；

@bg:blue;

header{
background-color: @bg;
}
section{
background-color: @bg;
}
footer{
    background-color: @bg;
}

2.1.2 运算符 ：+、-、*、/

2.1.3 函数 : .函数名（形参）{}

//定义
    .函数名（形参）{
    函数体
    }
//调用
.函数名（实参）

2.1.4 嵌套 以及&：hover

ul{
    li{
        list-style: none;
        font-size: 20px;
        span{
            background-color: @bg;
        }
        &:hover{
            font-size: 40px;
        }
    }

}

2.2 sass

2.2.1 基于Ruby语言开发

2.2.2 MAC系统不需要下载

2.2.3 windows系统需要下载ruby软件进行安装

2.2.4 下载安装地址：sass下载

2.2.5 使用：style.scss

2.2.5.1 变量：$变量名称：值

2.2.5.2 运算符和& :用法同less

2.2.5.3 自定义函数

定义：@函数名（形参）{@return 形参}
调用：函数名（实参）

2.3 工具编译 koala :将less或sass文件转换成css文件

2.3.1 koala官网：koala官网

2.3 CSS3选择器

• :first-child
• :last-child
• :nth-child(2) : 第二个
• ::selection :选择被用户选取的元素部分

2.4 浏览器内核前缀： “：：内核前缀”

• -webkit- Safari, 谷歌浏览器等使用Webkit引擎的浏览器
• -moz- 火狐等使用Mozilla浏览器引擎的浏览器
• -o- Opera浏览器
• -ms- Internet Explorer 浏览器

---

总结

以上就是今天要讲的内容。