一、使用高效是CSS ①：使用外联样式替代行间样式或内嵌样式。 不推荐使用内联样式： 不推荐使用内嵌样式： 推荐使用外联样式： ②：为了兼容老版本的浏览器，建议使用link引入外部样式表的方式替代@import导入样式的方式。@import是css2.1提出来的，所以老的浏览器不支持。 不推荐@import导入方法：@impory url("style.css"); 推荐引入外部样式表方式： ③：使用继承：将子元素共同使...
盒子的内心世界 1.模型 通过CSS的眼睛 在CSS看来，HTML的所有元素都被看成了盒子：段落，标题，块引用，列表，列表项等。甚至内联元素。 盒子的组成 内容区（content）：包含内容（文本或图像） 内边距（padding）：可选的 边框（border）：可选的 外边距（margin）：可选的 示图 2.简单介绍 内容区 内容区会存放文本或图像。 在浏览器的周围，看不到上图其周...
通过使用CSS，控制文本的字体，风格和颜色 1.基本操作： 1 body{ 2 font-family: Verdana, Geneva, Tahoma, sans-serif 3 } 4 5 body{ 6 font-size: 14px 7 } 8 9 body{10 color: silver11 }12 13 body{14 font-weight: bold15 }16 17 body{18 text-decoration: underline19 } 注释： font-family：定制页面中使用的字体 font-size：控制字体大小 color：为文本设...
原文：A Close Look at CSS Box Shadow CSS的box-shadow可以被用来给块级元素一个外阴影或者是内阴影。接下来让我们仔细地看一下这个CSS的特性吧。 举例 下面有三个把CSS的box-shadow属性使用在div里的例子。 例１：简单的外阴影 下面是是给副标题添加阴影的样式。 box-shadow:0 0 10px gray; 例2：内阴影 一个内阴影可以通过使用inset属性值来渲染出来。 box-shadow:inset 0 0 10px; 例3：偏移外阴...
笔记分享： 用法：到官网(http://daneden.github.io/animate.css/)，下载animate.min.css文件。点击这里 1、首先引入animate css文件 2、给指定的元素加上指定的动画样式名 这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。 您可以更改动画的持续时间，增加延迟或改变显示次数： #yourElement { -vendor-animation-duration: 3s; -...
1. 效果： 告诉浏览器这是一段短引用，让浏览器以合适的方法来显示 注： 不能直接以双引号直接代替，因为有些浏览器的效果不是双引号。 不要忘了移动设备，和语音浏览器，对引用的表现不是双引号这么简单。 好处： 方便搜索引擎寻找带引用的网页。 可以用CSS对引用设置样式，比如：要灰色斜体的引用。 2. 效果： 单独显示较长引用，使其自成一段...
在生产环境中如果依靠前端引用JSXTransformer.js文件来实现JSX向JavaScript的转换，那是绝对不靠谱的。所以，使用Reactjs的童鞋就需要使用更有逼格的方式来完成这项任务。作为现在最常用的前端构建工具gulp搭配上Browserify来搞定这个问题那真是拉风的不要不要的 ：） 废话不多说，咱们来点直接的吧。 源代码 我们这次的任务就是让这段满目疮痍的源代码变得更优化，千里之行，这是开始。如果有童鞋看不懂这段代码是用来做...
规则结构 每个规则都有两个基本部分：选择器和声明块。声明块由一个或多个声明组成，每个声明则是一个属性—值对。每个样式表由一系列规则组成。 h1{color: red;background: yellow;} 选择器分类 【0】通配选择器 星号*代表通配选择器，可以与任何元素匹配 *{color: red;} 【1】元素选择器 文档的元素是最基本的选择器 html{color: black;}p...
假设DIV区域是宽高是100px 个数有几十个 我想让他 随着屏幕宽度自适应显示每行的个数， 并且每行的DIV列表都居中对齐， 左右距离相等 求CSS代码 回复讨论(解决方案) 并且每行的DIV列表都居中对齐， 这个是很难做到的，我能想到的方法是用js来做 Swapping Songs.main {margin:0 auto}.main .nav {width:100px; border:1px ...
属性选择器： 1.完全匹配的属性选择器。 就是完全匹配的字符串。 [id=article]{ color:red; } 2.包含匹配选择器。包含有指定的字符串。 语法是：[attribute*=value] attribute 指的属性名，value 指的是属性值， 包含采用“*=”符号。 [id*=article]{ color:red; } 3.首字符匹配选择器。只要开头字符符合匹配。 语法是：[att...
CSS全名层叠样式表，层叠的含义有三个：1.按照特殊性的高低，特殊性高的覆盖特殊性低的样式声明；2.不同属性的样式声明要合并；3.后出现的相同的样式声明覆盖先出现的。所以要改变样式的优先级也有三种方法：1.提升选择器的特殊性；2.改变样式的先后顺序；3.在需要提升优先级的样式声明分号前面加上！important； 层叠样式表实际上也是一种语言--样式设计语言。既然是一种语言，它就会有自己的语法。层叠样式表的语法虽然和HTML...
首先，我们需要安装Firefox（猛击此处下载）,或者确定你已经安装的版本已经高于3.1;第二步，安装前端开发人员最普及的开发工具 Firebug；第三步，安装CSS Usage 0.3.4.1；第四步，在浏览器中打开我们要优化的页面（本地的页面也可以），点击右下角的firebug小图标，打开firebug工具窗口，我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。 首先我们来分析最上面的三个功能按钮的使用 Scan: 通过字面意思我们就能知道,...
编写好的CSS代码能提升页面的渲染速度。本质上，一条规则都没有引擎解析的最快。MDN上将CSS选择符归拆分成四个主要类别，如下所示，性能依次降低。 ID 规则 Class 规则 标签规则 通用规则 对效率普遍认识是从Steve Souders在2009年出版的《高性能网站建设进阶指南》开始的，虽然Souders的书中罗列的非常详细，你可以在这里查看完整列表引用。你也可以在谷歌的高效的CSS选择器的最佳实践中查看更多...
前端工程师对写标准的前端代码的重视程度很高。这些最佳标准实践并不是那个权威组织发布的，而是由大量的前端工程师们在实践过程中的经验总结，目的在于提高代码的可读性，可维护性和性能。那么接着上一篇，我们再来谈谈CSS代码的一些标准实践。 1，命名 和其他语言规范一样，css的命名也讲究命名要有意义，命名要尽可能短但是要足够表达含义；命名的词用连字符连接。 不规范的命名： 1 #navigation{2 }...
各位大神，我希望我的一个表格宽度为屏幕的40%，但不能小于400，我的CSS改怎么写呢？谢谢大神们指教。 回复讨论(解决方案) width: 40%; min-width: 400px; 谢谢大神！！学会了！我试试！