使用 calc() 创建 CSS 网格
calc() 是 CSS3 的一个属性，可以使用加、减、乘、除数学表达式进行运算，其基本语法如下： .article { float: left; width: calc(100% - 1em); } 你可以使用任何的长度值做为单位，如 em、px 或者百分比 %。 网格系统 在这篇文章中，我们主要使用 calc() 创建一个简单易用的网格系统。 HTML结构 就我个人而言，我比较喜欢 Seman…
CSS 学习笔记分享
一、CSS 注释 \/\*注释\*\/ 二、CSS 字体样式属性 1、font-size：子号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位 其中相对长度单位比较常用，推荐使用像素单位px。网页中普遍使用14px，默认16px。 注：尽量使用偶数的数字字号。ie 等老式浏览器支持奇数会有 bug。 2、font-family：字体 font-fam…
从 Sass 过渡到 PostCSS
Sass 多年来一直是我的首选。最近我有一段时间，想尝试使用 PostCSS 的 cssnext 插件来处理CSS样式。我一直想使用工具尝试写一些CSS的新特性。同时自己的个人网站也是一个最佳测试这些新特性的实验地。 第一步先了解我使用Sass写的东西，需要知道我用了些什么功能，以确保找到一个替代的工具（PostCSS插件）。下面这个列表是我项目中用到的一些功能： 引入部分（partial imp…
Sass 基础 颜色函数
色彩是设计的一个美妙元素和一个至关重要的工具,同时他能帮助你更好的抓住您的客户。更为重要的是，色彩能帮你表达某些特定的情感，把用户视线带到特点的地方或者帮助你传达信息。在 Web 设计中，主要依靠颜色来表达你的色彩。 如果你只是直接丢一堆颜色给用户，他们也不会集中注意力在你的设计上的。色彩很微妙，所以为了让色彩成为可被利用的工具我们必须正确使用它。像其他设计元素一样，色彩也要好好利用才能发挥它的魔…
使用 Sass 制作倾斜角度
最近，我不得不在一个网站大量使用倾斜角度作为其设计指南的一部分。倾斜角，是指一个区域它的顶部或底部边缘不是完全水平而是倾斜的。 实现这种效果有很多种方法。例如可以将base64编码的图片应用为背景，但这会使得它很难自定义（颜色，角度等）。 另一种方法是倾斜或旋转绝对定位的伪元素，然而倾斜变换是我最不愿意处理的一件事。 使用Sass时，可以使用动态编码生成 SVG 的 Angled Edges库。它…
前端工程师纳米学位 CSS 样式指南
该指南是你在项目进行过程中所需遵守的官方指南。优达学城的评估人员会根据该指南为你的项目打分。在前端网页开发的世界中，有很"最佳"样式供你选择。因此，为了减少学生在项目过程中因选择何种样式所产生的困惑，我们强烈建议所有学生在其项目中遵循这个样式指南。 一. 通用规则 1.1 编码 使用 UTF-8 。 确保你的编辑器将没有字节顺序标记的 UTF-8 用作字符编码。 1.2 字母大小写 仅使用小写。 …
编写如一 符合习惯的 CSS 的原则
以下文档将概述一个合理的 CSS 开发风格指导。本指导文件强烈鼓励开发者使用已经存在了的、常见的、合力的文风。您应该有选择地吸纳一些内容来创造您自己的风格指南。 1. 通用原则 “作为成功的项目的一员，很重要的一点是意识到只为自己写代码是很糟糕的行为。如果将有成千上万人使用你的代码， 那么你需要编写最具明确性的代码，而不是以自我的喜好来彰显自己的智商。” - Idan Gazit 别想着过早地优化…
Douban CSS 代码规范指南
1 CSS 浏览器支持标准 WinXP Win7 OS X IE9 B B IE8 A A IE7 B B IE6 B B Chrome16 A A A Chrome14 A A A Firefox10 A A A Firefox9 A A A Safari B B B Opera C C C （注：根据2012年4月数据整理） A级－交互和视觉完全符全设计的要求 B级－视觉上允许有所差异，但不破…
React-Native 样式指南
React-Native 的样式基本上是实现了 CSS 的一个子集，并且属性名不完全一致，所以当你开始在编写 React-Native 之前，可以先简要了解一下。 当前对应 RN 版本：v0.44。 Properties 属性 Text 文本（18） 属性名 取值 描述 color <color> 对应 CSS color 属性 fontFamily string 对应 CSS fon…
使用 Sass 混合宏来声明 CSS 伪类选择器
CSS3在选择器方面添加伪类选择器这方面的特性，比如 :nth-child(n)、:nth-of-type(n) 这样的选择器，其好处在这里就不多说了。 而今天我们要说的是在 Sass 中如何更灵巧的使用 CSS3 的一些伪类选择器。 为什么使用混合宏来定义伪类选择器 CSS3中伪类选择器怎么使用，我想不是什么大问题，但大家在使用伪类选择器时，或多或少感觉到了其不太方便与灵巧。不过不要急，现在借助…
将你的 CSS 项目转换成 Sass
在过去的一年里，我花了很多的时间在学习 Sass知识 以及提高 Sass 的技术水平。在与别人的交谈中，我发现从 CSS 项目转到 CSS 预处理器时，都有这样的担忧： 我不知道从哪里，从什么时候开始，将 CSS 项目转换成 Sass。 有大量的文档和技术诀窍介绍使用Sass和Compass来创建一个新的项目，但考虑到如何将一个CSS项目转换成Sass项目对部分同学有所帮助的时，我整理了这样的一个…
关于 Sass 3.4 你应该知道的一些事情
Sass 3.4 并不是离开 Sass 3.3 的一个开创性版本，并没有做过多的改变，但有一些小变化还是需要留意的。这些功能在Sass3.3测试版本就有显露出一些，但后面会得到更好的细化。我们来看看这些东西，这些东西对于Sass爱好者还是非常值得期待的。 在 Sass 3.4 中最终可以使用 & 来访问父选择器： ul { li { background: blue; &:hove…
如何使用 Sass 和 SMACSS 维护 CSS
我们一直以来都是 SMACSS 的忠实粉丝，然而一个纯 SMACSS 方法最适合于一个全新的项目中的普通CSS。我们的市场网站，我们使用了Sass编写样式，而且里面还有好几年的CSS遗留物。 我们最近在精减我们的CSS，让我们的团队更方便的维护，而在精减过程中，我们团队并没有扔掉我们现有的样式或者从零开始。 我们基于SMACSS方法着手解决SMACSS和 OOCSS 的问题，但从 BEM 和 To…
Sass 中连体符（&）的运用
在 CSS 中，要想给一个元素赋予一定的样式，我们必须得先取到这个元素。那么就得需要选择器，通过选择器来选择指定元素，然后赋予所需的样式。而CSS选择器有很多种，比如层次选择器中的后代选择器、兄弟选择器、通用兄弟选择器等。而这些选择器都通过元素与元素之间的关系来确定的，比如： .parent .child {...} 除了这些选择器，还有 伪类选择器: .ele:after{...} 有时候还有 …
编写 Sass 的八个技巧
Sass 可以编译出非常优秀的 CSS 样式表，或者说，这就是 Sass 要做的事情。 有效的使用Sass可以帮助你构建出干净的有效的 CSS，但如果运用不好，Sass 其实会让你的 CSS 文件变得更大，并且添加一些不必要的和重复的 CSS 代码。 下面一些编写Sass小技巧，可以有效帮助你编写出更好的Sass。 １、你的 Sass 结构 在你的项目中使用 Sass，管理好网站的结构是对每一个项…
- 共 8 页
- 1
