糟糕的css用法 1
现在网站追求越来越漂亮好看,越来越炫,所以css是必不可少的.可是我发现许多人使用css的方式是不对的,至少是不推荐的.
比如下面的css用法不对
(1)一个页面对应一个css文件
这种做法是我深恶痛绝的,为什么呢?可重用性太差了!
比如哪天我突然要改变一个按钮的样式,那就坏了,只要包含按钮的页面的样式我都得改,比如有20个页面包含了按钮,那么我就得修改20个css文件,这不要人命吗?
根本原因:相同的样式重复出现在多个文件中.
(2)编写css样式时直接修改html标签的样式
例如:
没有通过id或class,这种方式非常不好,因为它的影响是完全开放的,任何一个页面引入该css文件就会受到影响.我项目中就遇到了.当时我们使用了WebCalendar.js 作为日期控件,本来界面应该是:
但是实际的效果是:
原因:引入的css竟然影响了其他控件.这不是我们期望的效果.
正确的方式应该是:
想要应用该css怎么办?加上class就行了.
(3)相同的代码出现在多个地方
这段css代码竟然出现了至少四次.如果客户说要修改行(line-height)的高度,那么我就要同时修改至少四个地方.这不是自己人坑自己人吗?
(4)滥用id
例如:
我们要知道id的权重是最高的.在日常开发中,我们更多的情况是会遇到如下情况:
#header a { border:2px dashed #000 }
假设这是我们的一个项目,现在我们决定要把一个在 header 的 另一个link设置成无边框,随手一写,我们添加了:
.special-link { border:none }
然后再在 html 中添加了一个 special-link 的class 类,这下解决我们的问题了吗? 答案是:没有! 由于 id 的权重如此之高,我们需要更高权重的声明才能实现我们的需求。
下面这样写才是正确的:
#header .special-link { border: none }
附件是我总结的html笔记:html02.zip
- html02.zip (1.9 MB)
糟糕的css用法 1的更多相关文章
- Normalize.css用法
1 Normalize.css用法 重置样式非常多,Normalize.css和reset是两个常用的重置 CSS 文件 http://necolas.github.io/normalize.css/ ...
- CSS用法简介
CSS(Cascading Style Sheets层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. 1.基本使用语法 ...
- less css用法思维导图
Less 是一个Css 预编译器,可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,让你的Css更具维护性,主题性,扩展 ...
- css笔记 css用法:
前端框架:AdminLTE https://almsaeedstudio.com/themes/AdminLTE/index2.html CSS学习教程: http://www.divcss5.co ...
- 点击盒子选中里面的单选框,并给盒子添加相应样式,美化单选框、复选框样式css用法,响应式滴
pc效果图: 移动端效果图: 代码直接上: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- CSS用法总结(持续更新)
一.html,body{height:100%} 解决了容器高度不足(容器高度由子元素高度决定,而%按照父元素的百分比),无法用%布局页面的问题 把html和body的高度设置为浏览器高度,此时会出现 ...
- CSS用法
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- 构建前端第4篇之---使用css用法 height
张艳涛 写于2021-1-20 height: 100%; What: html的元素标签,例如 <html>,<body>,<div>都有height的css属 ...
- css用法大全
direction:控制文本方向 ltr:默认.文本方向从左到右. rtl:文本方向从右到左. inherit:规定应该从父元素继承 direction 属性的值. <select name=& ...
随机推荐
- 【BZOJ 4059】 (分治暴力|扫描线+线段树)
4059: [Cerc2012]Non-boring sequences Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 632 Solved: 22 ...
- BZOJ.2111.[ZJOI2010]排列计数(DP Lucas)
题目链接 对于\(a_i>a_{i/2}\),我们能想到小根堆.题意就是,求构成大小为\(n\)的小根堆有多少种方案. 考虑DP,\(f[i]\)表示构成大小为\(i\)的小根堆的方案数,那么如 ...
- Code Forces 698A Vacations
题目描述 Vasya has nn days of vacations! So he decided to improve his IT skills and do sport. Vasya know ...
- 吴恩达-coursera-机器学习-week10
十七.大规模机器学习(Large Scale Machine Learning) 17.1 大型数据集的学习 17.2 随机梯度下降法 17.3 小批量梯度下降 17.4 随机梯度下降收敛 17.5 ...
- CentOS 7搭建OpenVPN-Admin
安装注意要点: 1.用户及目录权限 2.openvpn配置文件/etc/openvpn/server.conf,可以设置不同的转发模式等等 3.全程使用apache,不要用其它的如nginx这些,不然 ...
- LPC43xx SGPIO I2C Implementation
I²C SGPIO Configuration SGPIO is a hardware feature of LPC4300 series. There are 16 SGPIO pins calle ...
- 最近5年183个Java面试问题列表及答案[最全]
Java 面试随着时间的改变而改变.在过去的日子里,当你知道 String 和 StringBuilder 的区别(String 类型和 StringBuffer 类型的主要性能区别其实在于 Stri ...
- 在触屏设备上面利用html5裁剪图片
前言 如今触屏设备越来越流行,并且大多数已经支持html5了.针对此.对触屏设备开发图片裁剪功能, 让其能够直接处理图片.减轻服务端压力. 技术点 浏览器必须支持html5,包含fileReader. ...
- 给第三方dll强签名
假若我们要对第三方控件或者是其他的没有源代码的DLL文件想做类似的处理,增加强名称签名,怎么处理,是很多人都会面对的问题. 步骤: 1.首先采用反汇编工具ildasm生成中间语言. ildas ...
- 交叉编译Python-2.7.13到ARM(aarch64)平台
方法跟交叉编译Python-2.7.13到ARM(aarch32)平台基本一样, 不同的地方只是把工具链换成编译aarch64的工具链,这里可以参考用qemu搭建aarch64学习环境. 创建目录: ...