【【前端开发】优化代码之减少引入，css预编译语言的优点，stylus的使用】的更多相关文章

【前端开发】优化代码之减少引入，css预编译语言的优点，stylus的使用

前言:我必须得承认在最最最开始的时候,我对于css的预编译是非常不以为然的,这是错误的.一般在页面编写过程中,我会将需要reset的css放在reset.css中,讲会需要重复用到的放置到public.css中,对于常用的几个数据,例如字体font-10,font-12,font-24,font-36,对于margin来说margin-top-10,margin-bottom-10等等,这样修改起来也非常方便,不过在看了(瞬间忘记了书名)以后,减少引入能够优化页面性能. 我们都知道,浏览器的工作…

前端开发【第2篇：CSS】

鸡血 样式的属性多达几千个,但别担心,按照80-20原则,常用的也就几十个,你完全可以掌握它. Css初识 HTML的诞生 早期只有HTML的时候为了让HTML更美观一点,当时页面的开发者会把颜色写到标签里面,想想一下一堆标签一堆属性:颜色.字体等,总结一个字就是“乱” 为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style). 所有的主流浏览器均支持层叠样式表. CSS语法和CSS优先级 1.CSS…

laravel 中CSS 预编译语言 Sass 快速入门教程

CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没有完善的编码规范,编写的 CSS 代码会非常冗余且难以维护. 为了解决上述问题,出现了很多 CSS 预编译语言,CSS 预编译语言是基于 CSS 语言的语法扩展,除了能解决上述缺乏语言特性带来的问题之外,还支持嵌套书写,减少重复输入父级选择器(可理解为 CSS 中的继承机制),提高了代码的可读性和编…

Front End Developer Questions 前端开发人员问题（二）CSS 后续

问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 31.视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再次出现,和只出现一次分别 怎么做?)答:视差滚动(Parallax Scrolling)就是这样的效果之一.这种技术通过在网页向下滚动的时候,控 制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果.原理:(1)CSS3实现优点:开发时间短.性能和开发效率比较好,缺点是不能兼容到低版本的浏览…

CSS预编译语言-LESS

LESS的作用 CSS层叠样式表,它是标记语言,不是编程语言:所有的预编译CSS语言(less/sass…)都是赋予了CSS的面向对象思想 LESS的编译 LESS叫做预编译CSS:写好的LESS代码浏览器是不能渲染的,需要我们把它编译成为能渲染的CSS才可以 开发环境 在本地开发中这是开发环境 生产环境 本地开发完成了,我们需要把代码上传到服务器上,服务器上的环境叫做生产环境 在开发环境下,我们一般都通过导入LESS插件(less-2.5.3.min.js)来随时编译LESS代码 <!--re…

css预处理器 sass和stylus对比以及常用功能

在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sass部分,均来自于阮一峰老师的SASS用法指南 .同时不会对sass和stylus的具体用法做十分细致的介绍,感兴趣的同学可参考如下资料进行系统的学习. sass中文官网 sass用法指南 stylus官网 stylus中文文档 下面就对二者的常用功能做一个简单的对比 1.安装 sass时基于Rub…

Web前端开发基础 第四课（CSS小技巧1）

垂直居中-父元素高度确定的单行文本 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的.如下代码: <div class="container"> hi,imooc! </div> css代码: <style> .container{ height:100px; line-height:100px; background:#999; } </style> <!DOC…

Web前端开发基础 第四课（CSS小技巧）

水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.如下代码: html代码: <body> <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示.</div> </body> css代码: <style> div.txt…

Web前端开发基础 第四课（CSS元素模型）

css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float.在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.层模…

Web前端开发基础 第四课（CSS元素分类）

元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 常用的内联元素有: <a>…