css

[译]WTF,HTML&CSS?

绝非是标题党,下面的东西至少让你少踩几次坑,翻译完才发现这篇文章已经有人翻译过了,但是经过对比,还是自以为翻译的要用心点:(。 译自:http://wtfhtmlcss.com/。 —————译文————— 一些HTML和CSS的组合也许会让你忍不住爆粗口,下面是整理出的列表 声明文档模型 如果遗漏文档模型会导致,浏览器使用怪异模式渲染页面,表格,输入框等会显得畸形。 盒模型的计算方式 元素设置了padding,border-width之后width值就会变大,如果要改变这种计算的方式,可以使用box-sizing:border-box来重置。 移动端Safari下的rem单位 移动端Safari支持rem单位,但它在使用其作为媒体查询时候会变得很糟糕,页面中的文字会在不同大小间不停闪烁。 对于现在,解决的方案便是,使用em代替rem。 html { font-size: 16px;

  • xiaodao
    xiaodao
7 min read
css

【译】html&CSS教程

之前做过译文预告,立下宏愿要完全翻译完,现实非常骨感,至今才翻译到第六篇,忍不住了先放到这里做个目录。 术语、语法和介绍 元素和语义化 盒模型和定位 排版 背景和渐变 无序列表,有序列表和定义列表 图片、音频和视频 创建表单 使用表格来组织数据 貌似github page的速度十分不佳,还经常性抽风,好吧,择个黄道吉日换个地方,farbox.com或者自己搭建个…… 最后再插一句,个人认为这个教程和网上流行的其他教程都不一样,由浅入深,适时点缀点高级经验,文字、代码、示例混排,同涉及了常用的HTML5和CSS3部分,可以说这个更像一个教程。

  • xiaodao
    xiaodao
1 min read
css

堆叠按钮

相信大家业已了解CSS3 icon font的诸多优势,在之前的文章中较为详细的介绍了icon font的制作和应用,但美中不足的是制作出的按钮icon只能为单色,而且受限与icon矢量缩放的特新,在单个字体中的形状也不会太复杂,今天的译文或许可以提供一种新的思路。 英文地址:http://conor.cc/posts/icon-stacks ————–以下为译文————————————— 结合不同的icon font 字形可以创建组合式的超级icon(mega-icon)。 如果你最近才加入设计师和开发者的队伍中并在使用icon font,那么你很可能正处在蜜月期。对于我来说,在我第一次在App中使用这些甜蜜而可伸缩的字形的时候,icon font就像是上帝送来的礼物。向混乱的雪碧图,farewall中的PNG,GIF,JPG图片说再见把,我再也不会为背景图片的位置是-1384px还是-1385px而折磨自己了。 在我尝试将所有的雪碧图和图片从我的代码仓库中移除的时候,

  • xiaodao
    xiaodao
4 min read
css

译文预告——html,css新手教程

译前碎语——自从之前的css3笔记的系列之后,博客的更新频率便慢了许多,人也浮躁了很多,恰好看到这个教程,共有10篇,一口气读下来感觉很是不错,和网上相思教程的最大不同便是这个先导涉及了html5的部分知识,同时也顺带了很多作者的实践心得,很是值得通读,可谓是老少皆宜:) 译文共有10章,如果时间上不容许也可以读读本博之前的文章html和css简介。 ————-3.29————- 原本计划还是写在这个博客,结果发现有诸多不便,于是便放在了github page上面,绑了域名learn.hicc.me. 抽空简单设计了下样式,还未应用上去,等到译文完成,再做打算把。 [![gitbub pages 样式](https://oeuys8rx2.qnssl.

  • xiaodao
    xiaodao
1 min read
css

css基线之道

译者注:网页设计布局中一直比较流行网格对齐,但只是针对水平的对齐,很少或者没有涉及垂直对齐,这篇文章很详细的讲解了垂直网格,乃至基线对其的相关,而css3中的多列布局的也使其显得更为重要,因此还是很有必要去了解学习,至少也是一种思路。 ——————————译文——————————- 这或许是因为缺少基线网格的理解和欣赏,更或者是因为基线网格是出了名的难以实现, 迄今为止还没有人拿着蓝图让它成功实现。 有些人甚至认为基线在网络上是多余的,基线作为一种排版术语和网络上的行为,在网络上遵循的规则有别于用于印刷的,line-height和真正的行距之间令人沮丧的差异就是最明显的例子。 目前,无论怎样,让我们先假设基线至少在某种程度上对于来说网页设计师是一种有用的工具。但是它到底是什么样的一种工具,在我们手上有什么可以自由使用的工具来实现它,并且最重要的是,这到底值不值得。 垂直网格和模式识别在数学计算和为实现基线对齐而进行将在的轻移之前,不妨来了解其根本的本质:垂直网格。在了解为什么的同时,也就有了很好的准备和更大的动力来着手解决怎样去实现基线对齐,这个有时让人沉闷而又着迷的问题。 垂直网格,可以简单的理解为涉及到结构高度和垂直排列元素之间的间距,

  • xiaodao
    xiaodao
22 min read
css

css3基础笔记

从7月份入职,开始写css3笔记的系列文章,保持一周一篇的进度,到现在这个系列的基本算是完了,这个系类的文章大多都是很粗浅的把css3乃至css2的知识串了一边(基本包含了语法、对应的示例、以及个人的总结性经验),定位为一个适合新手的可快速查阅的css3系列,此目录后续也会陆续细化完善。 HTML简介 css简介 css选择器以及各个浏览器对css3选择器的支持 文本相关属性:text-shadow、text-overflow、文本换行、文本模块text-module其他属性 盒模型相关属性:弹性盒模型介绍以及示例、边框border属性、背景background属性、溢出overflow、盒模型解析模式box-sizing、resize、nav-index、content属性、外轮廓线outline属性 css3多列布局 css3渐变属性,以及ie下使用滤镜实行渐变和半透明 css3动画属性 其他的css3设备类型、

  • xiaodao
    xiaodao
1 min read
animation

css3笔记——2D动画

css动画中主要包括变形、转换和动画,有2D和3D两部分,首先是2D的动画部分。 一、css变形Transformation W3C中有2D变形和3D变形的的草案中定义了变形属性值有none和transform-function,transform-function包括: matrix():定义了矩阵变换,即基于X和Y坐标重新定位元素的位置(较为复杂,其使用在次暂不探讨,可点此查看详情)。 translate():移动元素,基于X和Y坐标重新定位元素,值应该为两个,第一个表示水平方向,为正数时基于右边框向右移动,第二个值表示垂直方向,当为正数时基于上边框向下移动。若只有一个值的情况下表示水平移动。 scale():缩放元素对象,可以使任意元素对象尺寸发生变化,取值包括正数和负数(首先反转元素在缩放元素),以及小数(使用小于1的小数来缩小元素),值应该为两个,第一个代表宽,第二个代表高,

  • xiaodao
    xiaodao
4 min read
css

css3笔记——渐变gradients

渐变无疑对网页的呈现有着很好的帮助,webkit最早支持渐变,随后火狐也开始支持渐变,但是语法上和webkit的不同,之后css3中也将渐变列入标准,语法与FF的相似。 之前的浏览器都不支持标准的写法,因此稍微早点的博客或者书籍都是分开描述两者的实现,但是现在webkit优化了渐变属性,而Firefox16之后也支持了标准的写法,因此本文主要讨论下css3规范中的写法。 渐变可以分为两类,线性渐变(linear)和径向渐变(radial)两种,css3渐变属性中值比较多,但是稍稍想想便可提炼出来渐变需要的值,渐变方式 ,始末点,变化着的颜色,以及颜色间的距离(步长),如果是线性渐变则还有渐变的角度。如果用过ps的渐变对此应该不难理解。 下面分别讨论线性和径向渐变。 一、线性渐变 css规范中标准的语法为: = linear-gradient( [ [ | to ] ,]? [, ]+ ) 第一个值定义了线性渐变的角度,

  • xiaodao
    xiaodao
6 min read
break-after

css3笔记——columns多列布局

css2.1中并没有专门的布局属性,因此css3种新增了多列自动布局的功能,Multi-colum Layout。 Columns属性——定义多列布局 columns是多列布局的基本属性,具体定义多列布局时的属性有: column-width属性可以定义每列的宽度,其值有 | auto。 column-count属性定义了对象的列数,其值为 | auto 。 column-gap属性定义了列与列之间的间距,其值有normal | 。 column-rule属性定义了每列之间边框的属性,其用方式与border使用一致。 column-span属性定义了元素的跨列显示或者单列显示,其值有 1 | all。 column-fill属性定义了栏目的高度是否统一,其值有auto | balance,值为auto的时候各列的高度对着其内容的变化而自动变化,而值为balance时,各列的高度将会根据内容最多的那一列的高度进行统一。 其实列css为: .box { column-count:3;

  • xiaodao
    xiaodao
3 min read
clearfix

css3笔记——resize、nav-index、content属性

一.resize属性 该属性设置浏览器提供哪种尺寸调节机制来允许用户自由缩放浏览器中元素的大小,其支持的属性有: none:不能缩放元素,默认只。 both:允许用户调节元素的宽度和高度。 horizontal:允许用户调节元素的宽度。 vertiacl:允许用户调节元素高度。 inherit:默认继承。 resize属性是css3中一个非常实用的属性,比借助于JavaScript模拟来的轻量,但是进过测试使用resize,若是元素定了高度或者宽度,则缩放不能小于所定的宽度或者高度,而且在视觉上没有明确的指示,也没有鼠标手势,只能从一个角度缩放元素。 二.nav-index属性,定义导航序列号 导航的序列号可以改变页面中元素通过键盘操作获得焦点的顺序。nav-index的值有: auto:浏览器默认的顺序。 :必须为正整数,数字越小越先被导航,若不同元素的数值一样,

  • xiaodao
    xiaodao
2 min read
css

css3笔记——外轮廓线outline属性

css2.1规范中便定义了元素的外轮廓线,但是浏览器的支持并不好,而在css3中增强了outline的属性,其扩展之后的属性有: :定义轮廓边框的颜色。 :定义轮廓边框的样式。 :定义轮廓边框宽度。 :定义轮廓边框偏移位置的数值。 inherit:默认值,继承。 当然其派生为四个外轮廓线属性: outline-color,该属性定义轮廓边框的颜色,除了支持所有的颜色外,还支持关键字invert,invert对屏幕上的像素点进行反转,而无论背景色是什么,主要用来保证焦点框的可见。 outline-style,定义了轮廓边框的样式,该属性的值和相应的用法和border-style相同,有none、dotted、dashed、solid、double、groove、ridge、inset、outset。但是hidden值并不是一个合法的轮廓样式。

  • xiaodao
    xiaodao
1 min read
box-sizing

css3笔记——盒模型解析模式,box-sizing属性

css3规范中新增了UI(User-Interface)模块,用来控制互用界面的呈现方式。符合标准的现代浏览器中盒子的width和height属性代表的是盒子的content区域,而在ie7以下的浏览器中对元素的呈现方式中border和padding都包含在width和height中,这样就造成了混乱,因此css3中新增了box-sizing属性来定义盒模型的尺寸解析方式,其值有: content-box:该属性维持css3以前盒模型的组成模式,即元素width/height=border+padding+content。 border-box:标准值,即元素width/height=content。 首先css的代码为: .box { width:250px; height:250px; border:5px solid #690; padding:10px;

  • xiaodao
    xiaodao
1 min read
css

css3笔记——溢出内容处理,overflow属性

overflow属性定义当一个块级元素溢出元素的框(它作为内容的包含块)时候,是否裁切显示。在css3中扩展了overflow属性,overflow-x属性定义了水平方向上的裁切,overflow-y定义了垂直方向上的裁切,它们的值有: visible:默认值,不裁切内容,也不添加滚动条,元素将被裁切为包含对象的窗口大小,且clip属性设置无效。 auto:在需要时裁切并添加滚动条,该属性为body和textarea元素的默认值。 hidden:不显示超出元素尺寸的内容。 scroll:当内容超出元素尺寸时,overflow-x显示为横向滚动条。overflow-y显示为纵向滚动条。 no-display:当内容超出显示元素的尺寸的时候不显示元素,此时类似添加了display:none的声明,未获得浏览器支持(在文章发表时,可查看demo)。 no-content:当内容超出元素尺寸时不显示元素,此时类似添加了visibility:

  • xiaodao
    xiaodao
1 min read
background

css3笔记——增强的background属性

css3中增强了background属性,其值为[,]*。css3中容许使用多个背景图像,之间用逗号分割,表示为一个背景图像层,每个背景图像层中都可包含 [background-image] | [background-color] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position] | [background-attachment] 各自的意思为: background-image:定义背景图片。 background-color:定义背景颜色。 background-origin:定义背景的显示区域。 background-clip:指定背景的裁剪区域。 background-repeat:设置背景图像是否以及如何重复铺排。 background-size:设置背景图片的大小。 background-position:设置背景图片的位置。 background-attachment:设置背景图像的显示方式。 css3中新增的background子属性为background-origin,background-clip和background-size,

  • xiaodao
    xiaodao
3 min read
border-color

css3笔记——边框border

一,border-color css1中便有border-color属性,css3中增强了其功能,其值为,支持多个颜色设置,如果设置n个颜色值,且边框宽度为n像素,那么每个颜色占1个像素,依次显示在边框上。若边框宽度像素数量大于颜色个数,则除最后一个颜色外,其余颜色占1个像素的宽度,其余宽度被最后一个颜色占有。 border-color派生的子属性: border-top-color border-right-color border-bottom-color border-left-color 而对于边框的宽度不同情况如下图示 [![border](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/09/border1.jpg "border1")](https:

  • xiaodao
    xiaodao
4 min read
css

css3笔记——弹性盒模型(Flexible Box Module)简介

css3在css2的基础上新增了盒模型的属性,提出了弹性盒模型的概念。 首先使用弹性和模型(Flexible Box Module),需要定义父容器display的属性,但因为Flexible经常变动具体的属性值有所不同(参考): 2009年以前display为box或者inline-box、box-{*}。 2011年,设置display为flexbox或者flex()函数。 2012-2013最新的则是display:flex; 或者flex-{*}。 注:弹性盒模型只有chrome和FF支持。 box-orient定义盒子的布局取向 box-orient定义了盒子内元素的流动布局方向,属性有 horizontal 从左到右在一条水平线上显示子元素。 vertical:从上到下在一条垂直线上显示子元素。 inline-axis:默认值,盒子元素沿着内联轴显示子元素。 block-axis:沿着块轴显示子元素。 注:inline-axis和block-axis是根据书写模式来决定。

  • xiaodao
    xiaodao
4 min read
css

css3笔记——文本模块Text Module其他属性

css3中出现了文本模块Text Module的概念,是单独将文本相关的属性制订规则,形成文本模型,相较与之前的版本,css3完善了文本相关的属性。 white-space-collapse 用于设置或者检索对象内包含的空格字符,属性有: collapse 使用一个单一的字符序列呈现空白(或在某些情况下,没有字符)。 preserve 呈现所有的空白,换行符将被保留 preserve-breaks 抛弃所有空白,但保留空白 discard 抛弃所有空白 2.text-wrap css3中使用text-wrap和word-wrap控制文本换行。text-wrap设置或者检索对象内文本的换行模式。属性有: normal 自动换行模式 none 不换行模式 unrestrained 无限制模式 suppress

  • xiaodao
    xiaodao
5 min read
css

css3笔记——控制文本换行

当文本超出边界之后可能会需要文本换行显示,因此就会需要css的文本换行属性。 不可否认IE浏览器在文字处理方面走在了其他的浏览器前面,IE定义了较为详细的文字多行显示属性。 line-break 控制日文的换行 word-wrap 属性为break-word时,文本换行。 word-break 属性为break-all时容许非东亚单词在字内断开;属性为keep-all时不容许东亚字符(如中文、韩文、日文)在字内断开。 white-space 属性为nowrap时,强制文字在一行显示,不容许换行;属性为pre时,显示预定义的文本格式。 css3中纳入上述的几个属性(link)下面以demo为例探究下在容器宽度较小的情况下不同属性在不同浏览器的表现。 1.在不使用上述属性的情况下(或者word-wrap;word-break均取normal时),各个浏览器的表现一样,如下图所示,浏览器对中文的渲染呈现很好,会自动换行,

  • xiaodao
    xiaodao
3 min read
css

css3笔记——定义css设备类型-Media Queries

最近在学习和使用twitter bootstrap框架,涉及到响应式布局,因此将css3的设备类型相关知识整理下。 css2.1中也可以为不同的设备设计不同的css,通过 or 开定义不同设备的css,但是只有很少的设备支持。 而随着移动互联网的兴起,css3提出了媒体查询Media Queries 的概念。 Media Queries可以获得 浏览器窗口的宽和高 设备的宽和高 设备的手持方向,横向还是竖向 分辨率 @media的用法介绍 语法为@media: {sRules } :指定设备名称, all aural 语音和音乐合成器 Braille 触觉反馈设备 embossed 凸点字符(

  • xiaodao
    xiaodao
2 min read
css

解决网站动态生成空白双引号

在调试网页的时候可能会发现一个问题,网页中某个地方有一段空白区域,不是有css引起的空白,通过浏览器的网页调试工具查看,譬如用chrome右键审查元素发现这块空白是由双引号引起的。如下图(图片来自网络) [![空白现象](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/09/08408A2C132A07AF494A017343B9F5C10DFD0E5EF698_373_310.gif "空白现象")](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/09/08408A2C132A07AF494A017343B9F5C10DFD0E5EF698_373_310.gif)

  • xiaodao
    xiaodao
1 min read
css

css3笔记——text-overflow属性

css3新增了text-overflow属性,应用场景多是处理单行的文本省略,仅仅用来决定文本溢出时候是否显示省略号。 具体的用法为:text-overflow:clip | ellipsis | ellipsis-word clip表示不显示省略标记 ellipsis表示当对象内文本溢出时显示省略号,省略标记插入最后一个字符 ellipsis-word也是显示省略号,但是省略标记插入最后一个词。(demo中经过实验,浏览器表现与clip一样) 需要注意的事,省略号的显示还得需要white-space:nowrap和overflow:hidden属性的配合,如下面demo所用css代码: .clip, .ellipsis, .ellipsis_word { overflow:hidden; white-space:nowrap; width:100px; background:red; } .clip

  • xiaodao
    xiaodao
1 min read
border-image

css3笔记——border-image-slice属性介绍以及各个浏览器的不同呈现

在css3中新增了border-image属性,用来定义边框的背景,它有很多的子属性,比较难理解与操作的便是border-image-slice属性,border-image-slice定义了如如何slice背景图像,使之以不同的方式装饰边框。 borde-image-slice属性值比较特殊,也是需要小心控制的地方。 属性值不带单位,默认为px。 支持百分比值。百分比值是相对背景图的大小,譬如widthheight的背景图,设置slice属性为10%后,其实际的属性值为height10%  width10%   height10%  width*10% 其工作的原理可以理解为:首先根据四个属性值a b c d按顺时针方向确定四个点(ad左上A点、ab右上B点、bc右下C点、cd坐下D点),然后再根据box的大小,将背景图根据A、B、C、

  • xiaodao
    xiaodao
4 min read
css

解决因浮动定位导致js控制的滚动条无法将内容显示完全

有时候如果列表类的内容超出范围,比如max-height之后会设置overflow来控制显示的方式,而如果使用默认的scroll会发现网页中出现的滚动条是很原始的滚动条,这样会影响整体网页的风格,因此会考虑更改滚动条的显示,但是css控制话,有诸多的不便,因此会考虑用js。 js控制的话,有时候会在滚动内容中生成一端滚动条的代码,而如果滚动内容使用float定位有时候会出现内容在滚动的时候无法显示完全,因为这个时候滚动条也在css的控制下参与浮动,会出现计算错误。 当然解决方法自然是在不影响整体网页布局的情况了下,删除float控制,设置每个列表项目的max-height 然后设置这个列表的margin和padding这样来布局,这样就不会出现内容无法完全显示的问题了。 —————————-以下搜集自网络————— 在CSS中很多时候会用到浮动来布局,也就是经常见到的float:left或者float:right,前者是左浮动(往左侧向前边的非浮动元素浮动,如果全是浮动得元素的话,就按照流式来浮动从左到右,放不下就换行),后者是右浮动。 其实并不完全如此: 要注意以下几点: 1、  浮动元素会被自动设置成块级元素,

  • xiaodao
    xiaodao
4 min read

Subscribe to cc log