css 样式三元运算_20条书写CSS代码的建议
.square {
width: 80px;
height: 80px;
}
.red {
background-color: #F44336;
margin-bottom: 40px;
}
.blue {
background-color: #2196F3;
margin-top: 30px;
}
其实上述两个元素在垂直方向上的距离并不是 70px, 而是 40px, 蓝色正方形的 margin 没有被计算在内。有很多的方法消除这种默认的行为,但最好的方法是只使用一个方向上的 margin 属性,比如说 margin-bottom 。02、利用盒子模型布局盒子模型自然有其存在的理由。float 和 inline-block 当然也可以工作,但它们都是样式化文档的基础工具,而不是整个网站。从某种意义来说, Flexbox 是为更容易更精确创建我们想要的布局而设计的。Flexbox 模型提供的一系列属性给了开发者更大的灵活性,而且你一旦熟悉了它们,那创建任何响应式布局都是轻而易举的事。浏览器对 Flexbox 的支持也已经接近完美,所以已经没有什么理由能够阻止你使用 Flexbox 了。
.container {
display: flex;
/* Don't forget to add prefixes for Safari */
display: -webkit-flex;
}
03、执行 CSS 重置尽管这些年来情形已经有所好转,但是各浏览器的默认行为还是存在很多分歧。解决这个问题最好的办法就是使用一个 CSS 重置文件为所有元素重新设置默认样式。这可以让你在一个纯净的样式环境下工作,并且在所有浏览器中产生相同的结果。有很多的库做这个工作做的非常不错,比如 normalize.css, minireset, 和 ress, 纠正了浏览器间的不一致。如果你不想使用库,你也可以自己制作一个简单的 CSS 重置,像下面这样。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
这可能看上去比较苛刻,但是消除了默认的 margin 和 padding 我们将更容易的摆放我们的元素,而不用担心它会占用额外的空间。box-sizing: border-box 是一个很受用的属性,我们将在下面介绍这个属性。04、为所有元素使用 Border-box许多初学者不知道 box-sizing 属性,但它的确很重要。了解它的最好办法就是看看它的两个可选值。content-box(default) - 当我们为元素设置了宽度和高度,但那只是内容的尺寸。所有的 padding 和 border 都在不包含在内容当中,也就是在内容的外部。举例来说,如果我们有一个 div它的宽度为 100px, padding 为 10px, 那么它的实际宽度为 120px。border-box - padding和 border 被包含在 宽度和高度当中。如果一个 div 的宽度为 100px ,而被设置了 box-sizing: border-box, 那么它的宽度将始终是 100px, 无论你添加多少 padding 和 border 。为所有元素设置 border-box 将有利于样式化,而且你在也不用做乏味的数学运算了。05、图像作为背景当你为自己的站点添加图片时,尤其是你想做响应式设计的时候,利用一个 div 标签并为其设置 background 属性,而不是使用 元素。似乎额外的工作并没有起到任何作用,但实际上这更利于你对图片设置样式,保持它们原有的尺寸或者根据比例变化,这需要借助 background-size,background-size 还有一些其它的属性。
Img element
Div with background image
img {
width: 300px;
height: 200px;
}
div {
width: 300px;
height: 200px;
background: url('');
background-position: center center;
background-size: cover;
}
section{
float: left;
margin: 15px;
}
这种技术的一个缺点是你页面的可访问性可能略有打击,因为你的图片不会被屏幕阅读器和引擎正确抓取。这个问题可以被 object-fit 解决,但它还不被所有浏览器支持。06、更好的 Table 边框HTML 中的 table 没什么意思。它们非常古怪,难以设计成响应式的,而且很难与整体风格一致。比如说,你想为 table 和其中的元素添加上边框,你可能会得到下面的结果。正如你所见到的,它有很多重复的边框而且看起来不是很好,有一个非常快速且简单的去除双边框的方法,就是将 border-collapse: collapse 添加到 table.这样看起来就好多了。07、更好的注释方式CSS 可能不是一门编程语言但它的代码仍然需要被记录,所以一些简单的注释将会对你的同事或者未来的自己很有帮助!对于 CSS 中的一些比较大的模块,比如主要模块或者媒体查询,使用风格化的注释并且在其后留下一些空行。
/*---------------
#Header
---------------*/
header { }
header nav { }
/*---------------
#Slideshow
---------------*/
.slideshow { }
设计中的一些细节或那些不是特别重要的模块,可以用单行注释。
/* Footer Buttons */
.footer button { }
.footer button:hover { }
另外,值得注意的是,CSS 中没有 // 注释,所以当你需要注释的时候你需要使用 /* */ 符号。
/* Do */
p {
padding: 15px;
/*border: 1px solid #222;*/
}
/* Don't */
p {
padding: 15px;
// border: 1px solid #222;
}
08、命名连接当 class 或者 id 不止一个单词的时候,需要使用 - 符号连接, CSS 对大小写不敏感,所以骆驼命名法不是一个好的选择。很久以前,下划线不被支持所以破折号成为了默认约定。
/* Do */
.footer-column-left { }
/* Don't */
.footerColumnLeft { }
.footer_column_left { }
09、不要重复设置CSS 的许多属性值都是从 DOM 树中的上一级继承下来的,因此命名为层叠样式表。让我们以 font 为例 - 它几乎总是继承自父节点,你不需要为页面中的每一个元素设置该属性。你只需要为 或者 设置 font 样式,然后让它一级一级流传下去就可以了。下面是一个很好的例子。
html {
font: normal 16px/1.4 sans-serif;
}
当然,在任何一个子元素中你都可以按照自己的需求改变这一样式。我要说的就是能使用继承获得的属性就不要再去一一指定了。10、CSS 动画与变换不要通过直接更改元素的宽度和高度去动画元素,或者是更改 left/right/top/bottom。最好的办法是使用 transform() 属性因为它提供了更加圆滑的过渡效果而且可以让你的意图在阅读代码时更加易于理解。下面是一个例子,我们想动画一个 ball,让它往右滑动。不要去改变 left 的值,最好是使用 translateX() 。
.ball {
left: 50px;
transition: 0.4s ease-out;
}
/* Not Cool*/
.ball.slide-out {
left: 500px;
}
/* Cool*/
.ball.slide-out {
transform: translateX(450px);
}
transform 以及它的所有方法(translate, rotate, scale 等)拥有几乎一致的浏览器兼容性,你可以自由使用它们。11、不要 DIY, 使用库CSS 社区非常的庞大而且不断出现新的库。库被提供于各种用途,从小片段到完善的框架,用于构建响应式程序,而且它们当中大部分都是开源的。所以下次当你碰到 CSS 问题的时候,在你想自己动手去解决问题的时候,最好先去 Github 或者 CodePen 找找是否已经存在可用的解决方案。12、保持选择器的特指度低不是所有 CSS 选择器都是生而相等的,当新手开发者书写 CSS 代码的时候通常期望它们写的选择器能够覆盖之前所有已存在的样式。但是事情并不总像我们想的那样,就像下面这个例子:
a{color: #fff;padding: 15px; }a#blue-btn {background-color: blue; }a.active {background-color: red; }
我们想为所有按钮添加 .active 类使其变为红色,但这是不起作用的,因为按钮已经被一个 id 选择器设置了 background-color,而 id 选择器具有更高的特指度。它们之间的规则就像下面这样:ID (#id) > Class (.class) > Type (比如 header)。特指度是可以堆叠的,所以 a#button.active 的特指度是高于 a#button 的。使用特指度高的选择器将使你不断的使用更高的去覆盖那些原本存在的选择器,这将最终导致 !important 效果。13、不要使用 !important很认真的告诉你,不要使用 !important。即时的一个快速修复在将来可能导致大量的重写。相反,找出你 CSS 选择器不工作的原因,并且尝试去修复它。只有在一种情景中使用 !important 是可以接受的,那就是你想覆盖那些在 HTML 中定义的行内样式。而且书写行内样式也是一种非常糟糕的方式,建议停止使用。14、使用 text-transform在 HTML 中,当你使用大写字母的时候可能是出于某种语义目的,比如说你想强调一个单词的重要性。
Employees MUST wear a helmet!
如果出于某种目的你将一组文本都设置成大写,可以在 HTML 中正常书写文本,然后利用 CSS 转换其大小写。它们看起来都是一样的,但是如果不在上下文中,你的内容将更有意义。
Star Wars: The Force Awakens
这同样适用于大写或者小写的字符串 - text-transform 属性可以将它们处理的很好。15、Em, Rem 和 Pixel人们在对元素和文本设置尺寸应该用 em,rem 还是 px 有很多的争论。事实是,这三者都是可行的,有自己的优点和缺点。所有的开发者和项目都是不同的,所以不应该有什么严格的规则说明什么时候该用哪一种。下面是一些提示和良好的做法:em - 1 em 的大小与直接父元素的字体大小有关。通常用于媒体查询,em 对响应式设计而言是非常棒的 ,但是将每个元素的 em 值转换为 px 的比例是非常难以计算的,因为你可能要在 DOM 树上逐级跟踪元素。rem - 以 元素中的 font-size 为基准, rem 将比例化页面中的标题和段落变得很容易。保持 中默认的 font-size 并且为其它的元素设置 rem 是一种非常棒的方法。px - 像素是最精确的控制方式,但是在 响应式设计中它并不友好,因为它不会随屏幕大小变化而自动缩放。它们是可靠的,易于理解的,并且在值和实际结果之间呈现出良好的视觉联系。下面我要说的是,不要害怕尝试。去使用它们并且找出哪一种是你最喜欢的。有时候 em 和 rem 很省事,尤其对于响应式界面。16、在大项目中使用预处理器你可能已经听说过它们了 - Sass, Less, PostCSS, Stylus 。预处理器是 CSS 发展的下一阶段。它们提供的功能诸如变量, CSS 函数,选择器嵌套以及其它一些非常酷的东西。这使得 CSS 代码非常易于管理,尤其在大项目中。举个简单的例子,下面是使用了 CSS 变量和函数的 Sass 代码片段。.movie-poster { text-transform: uppercase;}
$accent-color: #2196F3;
a {
padding: 10px 15px;
background-color: $accent-color;
}
a:hover {
background-color: darken($accent-color,10%);
}
使用 CSS 预处理器的唯一缺点是,它们需要编译成真正的 CSS 代码,但是如果你已经决定在你的项目中使用一个构建脚本,那么这就不再是你应该烦恼的问题了。如果你想了解更多关于预处理器的知识,请查看目前最受欢迎的两个系统的教程 - Sass 和 Less。17、Autoprefixers为各个浏览器添加前缀算得上是书写 CSS 代码最恼人的问题了。它们不一致,你永远无法精确的你需要哪一个,而且如果你真的去一个个适配并将它们都放到样式表中,你会发现这是一场噩梦。感谢上天,有很多工具可以自动的帮你实现这一过程,甚至可以让你指定你需要支持的浏览器 :在线工具:Autoprefixer文本编辑器插件 - Sublime Text, Atom库 - Autoprefixer18、在项目中使用精简代码为了提高网站或app的页面加载速度我们需要总是使用精简代码 . 代码的精简版本会移除掉空白和重复的部分,这样会削减文件的大小. 当然,这样的话你的 CSS 代码将会变得非常难以阅读,所以最好总是提供一个 .min 的精简版本和一个常规的发展版本.有很多不同的方法去精简 CSS 代码 :
- 在线工具 - CSS Minifier, CSS Compressor
- 文本编辑插件 - Sublime Text, Atom
- 库 - Minfiy , CSSO 和 CSSNano
根据你的工作流程,你可以选用上述一个选项,但是建议你总是使用某种方式自动执行此过程。19、Can I Use不同的浏览器仍然存在着很多不一致的兼容性问题, 利用 caniuse 或者其它类似的服务检测你正在使用的属性是否被广泛支持, 是否需要添加前缀, 或者说是否会在某平台下出现 bug .仅仅检测是否仍然是不够的, 你仍然需要测试布局是否会无缘无故的崩溃. 充分了解用户经常使用的浏览器也会提供很大的帮助, 因此你可以看到好的支持是非常关键的.20、Validate验证 CSS 代码可能没有验证 HTML 或者 JavaScript 代码重要, 但是在一个 CSS 验证器上运行你的代码还是有帮助的, 它会提示你是否书写了错误或者比较糟糕的代码, 甚至会给出一些比较中肯的建议帮助你改进代码。
css 样式三元运算_20条书写CSS代码的建议相关推荐
- css 样式三元运算_CSS扩展语言——Sass入门指南
一.Sass概况 今天来聊聊sass吧,之前用了很久的less,刚开始接触的时候感觉这东西就是个神器. 写CSS时间长了自然就能发现CSS在书写的时候的不足之处,不能嵌套,没有变量,更加不能像js那样 ...
- php html5 css样式,怎么在html页面写css样式表
本教程操作环境:windows7系统.html5和css3版,该方法适用于所有品牌电脑. 在html页面写css样式表 1.首先可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css ...
- 前端开发审查元素时CSS样式有个横线(该CSS样式定义后无效) 的解决办法
问题概述 关于这个问题,博主是在前端开发,样式调试的时候遇到的, 进行盒模型,CSS Debugger调试时,遇到样式设值后不可用的情况! 如下图: 解决办法 左看右看,上看下看,最终发现是前面在编码 ...
- 在HTML中 表示内嵌CSS样式的标记,html怎么加css样式
html怎么加css样式?下面本篇文章就来给大家介绍一下在HTML中添加CSS样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.行内式(使用style属性,在HTML标 ...
- css样式 数据展示,教程:使用CSS设置数据样式
为状态层创建样式¶ 默认的SLD文件 states 层如下: version="1.0.0" xmlns="http://www.opengis.net/sld" ...
- tomcat部署php项目 css样式丢失_webpack 打包编译有些CSS样式莫名消失?
点击右上方红色按钮关注"web秀",让你真正秀起来 相信很多小伙伴已经遇到过了,在使用webpack构建项目(npm run build),部署项目后,会发现有些CSS样式丢失了, ...
- html中引入css样式表的三种方式,css引用的几种方式是什么?
HTML怎么引用CSS样式?css引用的几种方式是什么?下面本篇文章就来给大家介绍一下在HTML中引用CSS样式的几种方法,希望对大家有所帮助. 1.行内式 在HTML标签中,使用style属性设置C ...
- 如何通过js改变css样式,如何通过JS 动态改变CSS样式
如何通过JS 动态改变CSS样式0 豆豆dou...2013.09.15浏览640次分享举报 .TLIWREGION3CSS { position:absolute; left:32px; top:4 ...
- html可以用多个css样式吗,关于多个页面css样式表问题
CSS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成"公共型样式".&q ...
最新文章
- 【OpenCV】IplImage类型图像ROI矩形区域的快速获取
- java-判断相同和对象比较大小
- [译] Go: 理解 Sync.Pool 的设计
- php总是报错,php - 简单工厂模式中的问题,总是报错
- html网页动态显示效果,html的table用法(让网页的视觉效果显示出来)
- 基于Visual C++2013拆解世界五百强面试题--题5-自己实现strstr
- [你必须知道的.NET]第二十回:学习方法论
- 与 HarmonyOS 拼速度?谷歌正式推出 Fuchsia OS!
- ubuntu 字符集与乱码
- Python爬虫系列(二)——Python爬虫批量下载百度图片
- Input鼠标键盘输入
- JavaScript 实现全选,分组全选,列表折叠。
- Redis RDB和AOF
- 1146 mysql_MySQL--ERROR 1146 (42S02):table doesn’t exist
- Vue教程-可视化图表
- tapestry3常见问题
- 在服务器 和 虚拟机中 查看代码 samba source insight
- Mongodb入门(CRUD与安装)
- 基于Web的在线教师备课系统毕业设计
- 官宣:传智播客品牌全新升级为「传智教育」
热门文章
- python检查https过期_记录用certbot续签HTTPS时,python的pip源出现问题
- 1768: 回文平方数(进制转换)
- 全链路压测构建高可用应用最佳实践
- Hologres揭秘:深度解析高效率分布式查询引擎
- 他来了他来了!阿里云混合云全新升级高燃来袭!
- android魅族进度条,魅族基于安卓 10 的首个 Flyme 内测版已推送:16s Pro/16s 尝鲜,可强制开启 90Hz 刷新率...
- mysql ddl crash,MySQL5.6 crash-safe replication一个坑
- Springboot中艾特Controller和艾特RestController之间的区别
- V$SESSION_LONGOPS
- Python档案袋(列表、元组、字典、集合 )