分类:Div / Css / XML / HTML5 / SVG

HTML特殊字符显示, HTML 字符实体, HTML EntityCode, Character Entities, HTML Entities

HTML字符实体(Character Entities) 有些字符在HTML里有特别的含义,比如小于号<就表示HTML Tag的开始,这个小于号是不显示在我们最终看到的网页里的。那如果我们希望在网页中显示一个小于号,该怎么办呢? 这就要说到HTML字符实体(HTML Character Entities)了。 一个字符实体(Character Entity)分成三部分:第一部分是一个&符号,英文叫ampersand;第二部分是实体(Entity)名字或者是#加上实体(Entity)编号;第三部分是一个分号。 比如,要显示小于号,就可以写&lt;或者&#60;。 用实体(Entity)名字的好处是比较好理解,一看lt,大概就猜出是less than的意思,但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号,各种浏览器都能处理。 注意:Entity是区分大小写的。   如何显示空格 通常情况下,HTML会自动截去多余的空格。不管你加多少空格,都被看做一个空格。比如你在两个字之间加了10个空格,HTML会截去9个空格,只保留一个。为了在网页中增加空格,你可以使用&nbsp;表示空格。   最常用的字符实体(Character Entities)  … Read More

SASS界面编译工具——Koala的使用

《SASS界面编译工具——Codekit的使用》一文中图解了”CodeKit”图形工具编译SASS项目。由于CodeKit是一款付费工具,而且只能在Mac中使用,因此国内众多SASS爱好者,或者初学者也就无法体验CodeKit工具编译SASS项目。幸运的是,有一款国产图形工具Koala和CodeKit功能极其类似,支持多个平台,而且是开源的。 Koala Koala官网下载Koala Koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。不过在这篇文章中,我们仅介绍如何用Koala来编译SASS项目。 Koala特性 在介绍如何使用Koala之前,我们先简单的了解一下Koala具有哪些功能特性: 支持多语言:支持LESS、SASS、CoffeeScript和Compass; 实时编译:监听文件,当文件改变时自动执行编译,这一切都在后台运行,无需人工操作; 编译选项:可以设置各个语言的编译选项; 代码压缩:Less和Sass支持编译后自动压缩代码; 错误提示:在编译时如果遇到语法的错误,提供错误信息log,方便开发者定位代码错误位置; 跨平台运行:可以在Window、Linux和Mac OS X多个平台下完美运行。 Koala下载与安装 如果你决定使用Koala来编译您的SASS项目,那么你就得先安装一个Koala。要是你是第一次使用Koala,你可以到他的官网下载对应的版本,因为Koala提供多个环境的安装文件: Windows Mac OS X… Read More

HTML5: 利用SVG动画动态绘制文字轮廓边框线条

DEMO: 点击这里看效果 简要教程 这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效。SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单、精美的图标和文字。关于使用SVG制作图标方面的知识,请参考阅读ESSENTIAL ICONS。 制作流程 先用一张gif图片来看看效果: 制作SVG 1、首先你要下载和安装一款矢量图形编辑器,推荐使用Inkscape。 2、打开Inkscape,创建一个新的文档。在文档的左上角创建你的文字。 3、使用选择工具选取你创建的文字。 4、在Path菜单中,选择Object –> Path。然后保存为SVG。 5、使用文本编辑器打开你刚才保存的SVG。将一些不需要的标签去掉,每个路径只保留path部分即可,见下图: CSS 1、创建一个div作为包裹容器包住SVG。给这个div一个id,然后添加下面的css代码: #YOUR-SVG-CONTAINER {… Read More

如何制作HTML5 SVG描边文字

在很多时候,SVG是最容易在网页上做出文字特效的方法。现在SVG已经被所有的现代浏览器支持,包括IE9。要在页面上制作SVG文字,可以直接将SVG代码插入带页面中,SVG文字代码十分简单易懂。如下是一段SVG描边文字的代码: <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <text fill="#e96" style="font-size:60px; font-family: Futura Condensed ExtraBold, Arial Black, sans-serif; color: yellow;" stroke = "black" stroke-width… Read More

基本的SVG样式属性

SVG的样式属性和CSS的语法非常接近,有时甚至是一样的,经常会照成一些使用上的混乱。 注意,我们在这里讨论的是用于SVG代码本身出现的规则,而不是SVG被嵌入网页后被附加上去的规则样式。然而,如果你想从CSS属性来了解SVG,比较他们的语法规则是一种有效果的方法。 SVG 等效的CSS fill background-color或color fill-opacity background-color或color设置rgba/hsla opacity opacity stroke border-color stroke-width border-thickness stroke-opacity border-color设置rgba rx, ry border-radius 下面的属性在SVG和CSS中是一样的,只是在SVG的transformations和dimensions中稍有区别:… Read More

CSS3: 常用动画特效及4个最流行的动画库

一、animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现。 查看演示: https://daneden.github.io/animate.css/  github地址: https://github.com/daneden/animate.css 直接下载:animate.css-master  二、magic.css动画库 查看演示: http://www.17sucai.com/pins/demoshow/10001 github地址: https://github.com/miniMAC/magic 直接下载:magic-master 三、Effect.css 针对不同UI的CSS3动画和过渡效果集,包含了丰富的CSS3动画和过渡效果,包括: Modal overlay button list… Read More

HTML5: 全局属性

出处:http://www.cnblogs.com/starof/p/4593741.html 全局属性:对于任何一个标签都是可以使用的属性。 一、data-* 在html5之前需要在html标签上添加自定义属性来存储和操作数据,可能是会写<form role=”xxx”>,但这是种非常不规范的方式。 也正是因为有这种自定义属性的需求,在html规范里增加了自定义属性data-*属性。html5中开发人员可自定义任何想要的属性,只要加上前缀data-,通过这种方式避免与未来的html版本冲突。 <form data-type="comment" class="container"> ... </form> data-*自定义属性不影响页面布局,但可读可写。下面介绍怎样读写。 1、获取自定义属性 获取时通过dataset对象,使用”.”来获取属性,需要去掉data-前缀。 html: <div id='test' data-age="23">html5 data-*自定义属性 data-age</div>… Read More

CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)

BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧不前。 什么是BFC(Block formatting contexts) w3c规范中的BFC定义: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。 在BFC中,盒子从顶端开始垂直地一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠。 在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。 BFC的通俗理解: 首先BFC是一个名词,是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放是不受外界的影响的。转换为 BFC的理解则是:BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。)并且在一个 BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。 BFC的运用 在w3c的规范中,除了上面的一段定义之外,BFC的相关知识点分布地比较零散,但基本集中在float、绝对定位、margin… Read More

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

W3C规范 一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现。通俗的来说,页面的布局就是一个个盒子的排列和摆放。掌握了盒子呈现的本质,布局也就轻而易举。 在 W3C 规范中定义了标准的盒模型: Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding,… Read More

CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?

其实方法非常简单,直接写代码: <div style="background-image: url(http://your-image.jpg);"> <img src="http://your-image.jpg" style="visibility: hidden;" /> </div> 同时设置图片和背景图片,同时将图片设置为不可见(不是不显示),只显示背景图片。 这里用到技巧就是:display:none和visibility:hidden的区别 dispaly:none ; CSS1隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 visibility: hidden;设置或检索是否显示对象。与display属性不同,此属性为隐藏的对象保留其占据的物理空间。如果希望对象为可视,其父对象也必须是可视的。 一句话:display:none是看不见也摸不到,visibility:hidden看不见但摸得到。 本文:CSS: div高度自动适应背景图片的高度… Read More