博客

前端干货 – 实用 CSS BACKGROUND 属性使用手册

background 属性是CSS中用于设置元素背景的属性,最简单的background属性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片。而不用图片的话,最早的background只能使用纯色填充,现在却可以使用各种渐变效果。现在所用的模型来自于CSS Backgrounds and Borders Module Level 3所定义的规范,主要分成了8个子属性。

背景颜色之 background-color

background-color 是最早,最古老,最…常用的属性之一,取值是唯一的,颜色值。

背景图片之 background-image

background-image顾名思义是设置背景“图片”的,这里的图片并非我们通常意义上理解的“图片”,而是由CSS Image Values and Replaced Content Module所规定的一系列内容,用以替代CSS2中所规定的background-image属性与list-style-image属性中的url参数,或者作为伪元素content的值。现在浏览器也没有完全实现这些,可用的包括url()引用图片,和渐变“图片”,然后以逗号分隔所有图片(如果有)。

阅读全文

标准
博客

如何编写可维护的CSS

在参与规模庞大、历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要:

  • 保持 CSS 便于维护
  • 保持代码清晰易懂
  • 保持代码的可拓展性

为了实现这一目标,我们要采用诸多方法。

本文档第一部分将探讨语法、格式以及分析 CSS 结构;第二部分将围绕方法论、思维框架以及编写与规划 CSS 的态度。

CSS 文档分析

无论编写什么文档,我们都应当尽力维持统一的风格,包括统一的注释、统一的语法与统一的命名规范。

总则

尽量将行宽控制在 80 字节以下。渐变(gradient)相关的语法以及注释中的 URL 等可以算作例外,毕竟这部分我们也无能为力。

我倾向于用 4 个空格而非 Tab 缩进,并且将声明拆分成多行。

单一文件与多文件

有人喜欢在一份文件文件中编写所有的内容,而我在迁移至 Sass 之后开始将样式拆分成多个小文件。这都是很好的做法。无论你选择哪种,下文的规则都将适用,而且如果你遵守这些规则的话你也不会遇到什么问题。这两种写法的区别仅仅在于目录以及区块标题。

阅读全文

标准
博客

2016 最流行的 CSS Reset 解决方案

CSS Reset是什么?

在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。

 

为什么要重置它?

因为浏览器的品种很多,每个浏览器的默认样式也是不同的,比如<button>标签,在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的,所以,通过重置button标签的CSS属性,然后再将它统一定义,就可以产生相同的显示效果。

 

目前最流行的5种解决方案:

Eric Meyer’s “Reset CSS” 2.0

CSS Web 标准专家 Eric Meyer 的解决方案,发布于 2011.01.26。

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

阅读全文

标准
博客

2015年16个最佳的免费响应式HTML5框架

HTML5框架是一类有助于快速轻松创建响应式网站的程序包。这些HTML5框架有着能减轻编程任务和重复代码负担的神奇功能。关于免费的HTML5框架,种类繁多,并且大多很受欢迎,因为它们能够允许我们用更少的时间和精力去创建一个令人惊艳的网站。

下面这些既是响应式的HTML5框架,又跨浏览器兼容。而且这些免费的HTML5框架非常轻巧,所以不会拖累你网站的速度。感兴趣了吧,那么下面,我将为大家隆重揭晓2015年16个最佳的免费响应式HTML5框架!

1)Twitter Bootstrap

Bootstrap是最流行的HTML5框架之一。这是一款用于Web开发的时尚、直观、强大的前端框架。它有着用于开发响应式网站的所有组件,如12列响应式网格、定制jQuery插件、bootstrap编辑器等等。

HTML5-framework-1

官方网站:http://twitter.github.io/bootstrap/

阅读全文

标准
博客

利用HTML和CSS实现常见的布局

单列布局

水平居中

水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)

使用inline-block 和 text-align实现

.parent{text-align: center;}
.child{display: inline-block;}

优点:兼容性好;
不足:需要同时设置子元素和父元素

使用margin:0 auto来实现

.child{width:200px;margin:0 auto;}

优点:兼容性好
缺点: 需要指定宽度

使用table实现

.child{display:table;margin:0 auto;}

优点:只需要对自身进行设置
不足:IE6,7需要调整结构

阅读全文

标准