发表于： 2018-07-23 20:59:08
1 630
今天完成的事情：今天完成了一部分任务十二，预计明天可以交任务十二，然后写了任务十一的任务总结还有深度思考。
明天计划的事情：明天写任务十二，然后提交任务十二还有写任务十二的深度思考还有任务总结.
收获：
嵌套。selector 和 property 都可以嵌套。
换变量。如果变量在某个selector嵌套层里面，那它只在该层起作用，但可用!global强制其为全局变量.
!important： 不能在property的嵌套层中用变量。
sass和less的区别：
（1）Less和Sass的主要不同就是他们的实现方式。
（2）Less是基于JavaScript，是在客户端处理的。
（3）Sass是基于Ruby的，是在服务器端处理的。
（4）关于变量在Less和Sass中的唯一区别就是Less用@，而Sass用的是$。
1.如何使用less?
1.动态样式语言
静态样式语言：即CSS，作为一门“语言”，CSS并不称职，缺少一门编程语言必备的基本要素：如变量、数据类型、运算、逻辑结构、函数、继承等；导致样式文件的修改和维护困难！
动态样式语言：在静态样式语言的基础上，添加了一门真正的语言所必需的元素：变量、数据类型、运算、逻辑结构、函数、继承等，从而大大提高样式的可修改和可维护性。
2.动态样式语言——Less概述
LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。
Less的语法基于CSS，为CSS添加了很多动态语言的特性。
2.如何使用sass?
变量（$Variable）
变量以$开头，既可以用于选择器(Selector)，也可以用于属性(Property)和属性值(Value)。
当用于属性值时，通常可以直接引用；当用于选择器、属性和某些复杂属性值(e.g. font-size/line-height)时，使用 #{$var} 的形式引用。
嵌套（Nesting）
嵌套可以分为选择器嵌套和属性嵌套，使用 & 表示在嵌套中对父元素的引用。
混合（Minxin）
可传递参数，通常与 @include 配合使用，提高代码复用率。
继承（Extend）
当某一类元素拥有大量相同属性时，可以通过继承来简化代码，提高代码复用率。
函数及运算 （Function）
SASS内置了颜色、数字等函数，并支持四则运算及分支、遍历等特性，同时允许自定义函数。
3.less和sass有什么区别？
（1）Less和Sass的主要不同就是他们的实现方式。
（2）Less是基于JavaScript，是在客户端处理的。
（3）Sass是基于Ruby的，是在服务器端处理的。
（4）关于变量在Less和Sass中的唯一区别就是Less用@，而Sass用的是$。
4.如何使用gulp编辑less？
gulp：gulp是自动化构建工具,构建工具可以使繁琐的工作简单化，提高开发人员的工作效率，对于前端开发开发人员来说，我们通常用gulp来合并文件，压缩文件，编译less和sass文件等。
less：less 是动态的样式表语言，通过简洁明了的语法定义，使编写 css的工作变得非常简单。程序员通过变量和函数来定义less文件，通过less文件编译成css文件以便使用，less引入变量和函数的概念可以很方便高效的管理和维护css样式文件。
通过gulp和插件gulp-less执行编译less文件的任务
在项目目录中创建你需要编译的less文件（例如项目目录中css/index.less文件）。 通过gulp执行任务之前需要配置执行任务的文件，在项目目录中创建gulpfile.js文件，文件内容如下，gulp通过该配置执行任务。
任务耗时一天，预计时间内完成.
任务链接：https://wjxhd.github.io/task/html/task10.html
脑图：
学习了编码规范
为什么要遵守编码规范？
1、好的编码规范可以尽可能的减少一个软件的维护成本，并且几乎没有任何一个软件，在其整个生命周期中，均由最初的开发人员来维护；
2、好的编码规范可以改善软件的可读性，可以让开发人员尽快而彻底地理解新的代码；
3、好的编码规范可以最大限度的提高团队开发的合作效率；
4、长期的规范性编码还可以让开发人员养成好的编码习惯，甚至锻炼出更加严谨的思维。
符合web标准，语义化html，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。
html规范
1、页面的第一行添加标准模式声明<!DOCTYPE html>
2、代码缩进：tab键设置四个空格（通常在软件右下角设置相应空格大小）
3、html中除了开头的DOC和'UTF-8'或者head里特殊情况可以大写外，其他都为小写，css类都为小写
4、建议为html根元素指定lang属性，从而为文档设置正确的语言lang="zh-CN"
5、不同doctype在不同浏览器下会触发不同的渲染模式< meta http-equiv="X-UA-Compatible" content="IE=Edge">
6、非特殊情况下样式文件必须外链至< head >...< /head>之间;非特殊情况下JavaScript文件必须外链至页面底部
7、尽可能减少div嵌套
8、在页面中尽量避免使用style属性,即style="…";写在相应的样式文件中
9、对于属性的定义，确保全部使用双引号，绝不要使用单引号
10、背景图片请尽可能使用sprite技术,减小http请求
11、给区块代码及重要功能(比如循环)加上注释,方便后台添加功能
12、不要使用@import,与<link>标签相比,@import指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。
CSS规范
排版规范
1、如果是在html中写内联的css，则必须写成单行
2、每一条规则的大括号{前后加空格
3、属性名冒号之前不加空格，冒号之后加空格
4、每一个属性值后必须添加分号，并且分号后加空格
5、多个selector共用一个样式集，则多个selector必须写成多行形式
class命名
1、规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_
2、命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
3、不允许通过1、2、3等序号进行命名；避免class与id重名
4、class用于标识某一个类型的对象，命名必须言简意赅
5、尽可能提高代码模块的复用，样式尽量用组合的方式
6、规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名
CSS书写规范
1CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
比较重要的
相关的属性声明应该以下面的顺序分组处理：
1、Positioning位置属性（position, top, right, z-index, display, float等）
2、Box model盒模型 （width,height,padding,margin）
3、Typographic排版（font,line-height,letter-spacing,color,text-align等）
4、Visual外观（background,border等）
Positioning处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。
其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。
返回列表
评论