怎样在html中写css样式,css样式应该怎么写?
安利一下我场的NEC, 如果项目比较大,可以考虑使用CSS Modules
CSS文件的分类和引用顺序
通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类。
我们按照CSS的性质和用途,将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”,并以此顺序引用(按需求决定是否添加版本号)。
公共型样式:包括了以下几个部分:“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长样式”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。
特殊型样式:当某个栏目或页面的样式与网站整体差异较大或者维护率较高时,可以独立引用一个样式:“特殊的布局、模块和元件及扩展”、“特殊的功能、颜色和背景”,也可以是某个大型控件或模块的独立样式。
皮肤型样式:如果产品需要换肤功能,那么我们需要将颜色、背景等抽离出来放在这里。
CSS内部的分类及其顺序
重置(reset)和默认(base)(tags):消除默认样式和浏览器差异,并设置部分标签的初始样式,以减少后面的重复劳动!你可以根据你的网站需求设置!
统一处理:建议在这个位置统一调用背景图(这里指多个布局或模块或元件共用的图)和清除浮动(这里指通用性较高的布局、模块、元件内的清除)等统一设置处理的样式!
布局(grid)(.g-):将页面分割为几个大块,通常有头部、主体、主栏、侧栏、尾部等!
模块(module)(.m-):通常是一个语义化的可以重复使用的较大的整体!比如导航、登录、注册、各种列表、评论、搜索等!
元件(unit)(.u-):通常是一个不可再分的较为小巧的个体,通常被重复用于各种模块中!比如按钮、输入框、loading、图标等!
功能(function)(.f-):为方便一些常用样式的使用,我们将这些使用率较高的样式剥离出来,按需使用,通常这些选择器具有固定样式表现,比如清除浮动等!不可滥用!
皮肤(skin)(.s-):如果你需要把皮肤型的样式抽离出来,通常为文字色、背景色(图)、边框色等,非换肤型网站通常只提取文字色!非换肤型网站不可滥用此类!
状态(.z-):为状态类样式加入前缀,统一标识,方便识别,她只能组合使用或作为后代出现(.u-ipt.z-dis{},.m-list li.z-sel{}),具体详见命名规则的扩展相关项。
功能类和皮肤类样式为表现化的样式,请不要滥用!以上顺序可以按需求适当调整。
/* 重置 */
div,p,ul,ol,li{margin:0;padding:0;}
/* 默认 */
strong,em{font-style:normal;font-weight:bold;}
/* 统一调用背景图 */
.m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;}
/* 统一清除浮动 */
.g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';}
.g-bdc,.m-dimg ul,.u-tab{zoom:1;}
/* 布局 */
.g-sd{float:left;width:300px;}
/* 模块 */
.m-logo{width:200px;height:50px;}
/* 元件 */
.u-btn{height:20px;border:1px solid #333;}
/* 功能 */
.f-tac{text-align:center;}
/* 皮肤 */
.s-fc,a.s-fc:hover{color:#fff;}
怎样在html中写css样式,css样式应该怎么写?相关推荐
- js移除某个样式_js中如何移除css样式?
js中如何移除css样式? dom元素应用css有两种方式: ● 通过class类名和id名应用样式 ● 通过指定style属性应用样式 我们可以针对以上两种方式写移除css样式的方法 (相关课程推荐 ...
- php css去除h1样式,HTML中怎么设置h1的字体样式你知道吗?关于设置h1标签的样式详解...
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...
- CSS中定义多个链接样式,在CSS中定义【导航栏】超链接样式
1.案例css代码 .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标悬停黑色 */ .divcs ...
- html盒模型中border的写法,CSS盒模型--边框设置:border: 1px solid red(像素 样式 颜色 ),border-bottom:1px dotted #ccc...
盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...
- html的css样式中表示后代选择器,css样式,后代选择器
css介绍 CSS(层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). css语法(下图所示) 每个CS ...
- 在HTML中 表示内嵌CSS样式的标记,html怎么加css样式
html怎么加css样式?下面本篇文章就来给大家介绍一下在HTML中添加CSS样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.行内式(使用style属性,在HTML标 ...
- React学习(十)-React中编写样式CSS(styled-components)
虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 撰文 | 川川 VX-ID:suibichuanji 点 ...
- 在html语言描述中,css的特点有,css样式 css样式语言特点
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修 ...
- net中 css 控制 GridView 样式
net中 css 控制 GridView 样式 .GridViewStyle { border-right: 2px solid #A7A6AA; border-bottom: ...
- 前端:JS/28/CSS DOM动态样式(style对象,style 对象属性与CSS属性的转换),Event DOM,事件对象简介(DOM和IE中的Event对象),实例:点出满天小星星
CSS DOM动态样式 使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
最新文章
- TaskExecutor设计与实现
- 数据仓库与数据挖掘的一些基本概念
- K-Means算法理论及Python实现
- php注册树模式,php设计模式-注册树模式
- 《大数据》第1期“论坛”——对大数据国家战略的几点考虑
- 仿无名云易支付首页模板
- 值得收藏的Redis基础总结
- Android轩辕剑之ActionBar之三
- [第2节]数组,链表,跳表及其实际应用
- 2019国人工资报告:月薪过万是个槛?大部分网友表示月薪不足5K!
- python 视频 特效,Python实现高级电影特效
- 计算机用户授权原则,涉密信息系统严格设定用户权限,按照什么密级防护和什么授权管理的原则...
- 移动端适配:font-size设置方案的理解(浏览器调试移动端网页工具使用)
- [机器学习] SSE,MSE,RMSE,R-square指标讲解
- facenet 搭建人脸识别库
- 读书之后写笔记的软件哪个好
- 小米电视盒子怎样看电视直播?图文教程手把手装应用
- c++解一元三次方程
- React官网Hook API 索引模块知识点整理(五)
- android7.0夜间模式,Android 7.0隐藏的夜间模式 一个软件就能开启