美文网首页
css多个样式

css多个样式

作者: 新晋小牛牛 | 来源:发表于2017-02-14 19:53 被阅读45次

说到可以定义多个样式,强调一点:许多新手朋友常常大量使用,如一个块元素需要设置边框,绿色文字和灰色背景所以就在css里定义:

.border { border:1px solid #f60;}
.color { color:#080;}
.bg { background:#ccc;}
然后在块元素上增加:
<div class="border color bg">此处显示新 Div 标签的内容</div>

其实这是一个非常不好的写法,这样表面看似达到了代码重用性,但实际当中,当需要把其中一个元素的的边框改为2px,怎么改?如果把.border的边框改了,那么所有应用这一样式的元素都改了。如果再在代码中增加一个样式,那么又得去改html代码,和代码和结构分离的理念相违背了。一个好的代码布局,不管以后怎么改风格,只用改样式表,而不用去改html代码,这才真正做到两者分离了。

相关文章

  • [jQuery]设置css样式

    获取css样式 设置单个css样式 设置多个css样式

  • jQuery学习:css操作/属性操作

    css操作 修改单个样式.css(name,value) 修改多个样式.css(obj) 获取样式.css(nam...

  • css多个样式

    说到可以定义多个样式,强调一点:许多新手朋友常常大量使用,如一个块元素需要设置边框,绿色文字和灰色背景所以就在cs...

  • react样式使用的第三方插件

    在react使用css样式直接使用.css文件多个css文件定义相同命名会造成样式的混乱,使用styled-com...

  • 1-6.CSS基础

    一、CSS全称 CSS(Cascading Style Sheets)指层叠样式表,层叠的意思是多个样式可以按照样...

  • 前端 css 选择器 2018-07-05

    css层叠样式表多个样式用;(分号)隔开, id去指定的位置是唯一标识 href指向外部css的样式表 css的注...

  • 餐厅练习

    css 层叠样式表 多个样式用 ;(分号) 隔开, id 去指定的位置 是唯一标识 href 指向外部css的样式...

  • sublime 快捷方式 3月 前端 02Day

    css 层叠样式表 多个样式用 ;(分号) 隔开, id 去指定的位置 是唯一标识 href 指向外部css的样式...

  • PHP从入门到精通,018第三章CSS之CSS的基本语法(DAY

    二、CSS基础 (一)、CSS基本语法: CSS样式表由语法规则组成,由多个语法规则组成样式表 一个CSS语法规则...

  • jQuery操作样式与属性

    jQuery操作样式 css操作 功能:设置或者修改样式,操作的是style属性 操作单个样式 设置多个样式 获取...

网友评论

      本文标题:css多个样式

      本文链接:https://www.haomeiwen.com/subject/rjkfwttx.html