Web前端开发规范之css规范

html-css012

Web前端开发规范之css规范,第1张

今天小编要跟大家分享的文章是关于Web前端开发规范之css规范。Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。来和小编一起看一看css规范的原则吧!

css规范

1、编码规范为utf-8。

2、协作开发及分工:i会根据各个模块,同时根据页面相似程序,事先写**体框架文件,分配给前端人员实现内部结构&表现&行为。共用css文件base.css由i书写,协作开发过程中,每个页面请务必都要引入,此文件包含reset及头部底部样式,此文件不可随意修改。

3、class与id的使用:id是唯一的并是父级的,class是可以重复的并是子级的,所以id仅使用在大的模块上,class可用在重复使用率高及子级中。id原则上都是由我分发框架文件时命名的,为JS预留钩子的除外。

4、为JS预留钩子的命名,请以js_起始,比如:js_hide,js_show。

5、class与id命名:大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文&数字&来组合命名,如i_comment,fontred,width200。避免使用中文拼音,尽量使用简易的单词组合。总之,命名要语义化,简明化

6、规避class与id命名(此条重要,若有不明白请及时与i沟通):a)通过从属写法规避,示例见d。b)取父级元素id/class命名部分命名,示例见d。c)重复使用率高的命名,请以自己代号加下划线起始,比如i_clear。d)a,b两条,适用于在2中已建好框架的页面,如,要在2中已建好框架的页面代码中加入新的div元素,按a命名法则:...,样式写法:#mainnav.firstnav{.......}按b命名法则:...,样式写法:.main_firstnav{.......}

7、css属性书写顺序,建议遵循:布局定位属性-->自身属性-->文本属性-->其他属性.此条可根据自身习惯书写,但尽量保证同类属性写在一起.属性列举:布局定位属性主要包括:display&list-style&position(相应的top,right,bottom,left)&float&clear&visibility&overflow

自身属性主要包括:width&height&margin&padding&border&background。

文本属性主要包括:color&font&text-decoration&text-align&vertical-align&white-space&

其他&content。

8、书写代码前,提高样式重复使用率。

以上就是小编今天为大家分享的关于Web前端开发规范之css规范的文章,希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助,想要了解更多Web前端知识记得关注北大青鸟Web培训官网,最后祝愿小伙伴们工作顺利,成为一名优秀的Web前端工程师。

今天小编要跟大家分析的文章是关于Web前端工程师要了解的html+css基础知识。正在从事Web前端工作的小伙伴们来和小编一起看一看吧,希望本篇文章能够对正在从事Web前端工作和学习的小伙伴们有所帮助。

一、什么是HTML?

HTML即超文本标记语言(HyperTextMarkupLanguage),是用来描述网页的一种语言。

超文本标记语言的结构包括"头"部分(外语:Head)、和"主体"部分(外语:Body),其中"头"部提供关于网页的信息,"主体"部分提供网页的具体内容。

标记语言是一套标记标签(markuptag)

HTML使用标记标签来描述网页

如下代码:

MyFirstHeading

Myfirstparagraph.

例子解释:

与之间的文本描述网页

与之间的文本是可见的页面内容

与之间的文本被显示为标题

之间的文本被显示为段落

二、HTML元素

HTML文档是由HTML元素定义的。

HTML元素指的是从开始标签(starttag)到结束标签(end

tag)的所有代码。

td{border:1pxsolid#cccpadding:5pxmargin:auto}

td>p{text-align:left}

td>pspan{text-align:centerdisplay:block}

开始标签

元素内容

结束标签

Thisisaparagraph

href="default.htm">

Thisisalink

注释:开始标签常被称为开放标签(openingtag),结束标签常称为闭合标签(closingtag),大多数HTML元素可拥有属性。

空的HTML元素:

没有内容的HTML元素被称为空元素。在XHTML、XML以及未来版本的HTML中,所有元素都必须被关闭。

在开始标签中添加斜杠,比如:

就是没有关闭标签的空元素,而

是关闭空元素的正确方法,HTML、XHTML和XML都接受这种方式。

即使

在所有浏览器中都是有效的,但使用

其实是更长远的保障。

HTML提示:使用小写标签

HTML标签对大小写不敏感:

等同于

。许多网站都使用大写的HTML标签。

W3School使用的是小写标签,因为万维网联盟(W3C)在HTML4中推荐使用小写,而在未来(X)HTML版本中强制使用小写。

三、HTML属性

HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。

属性总是以名称/值对的形式出现,比如:name="value"。

属性总是在HTML元素的开始标签中规定。

属性实例:

HTML链接由标签定义。链接的地址在href属性中指定:

Thisisa

link

注释:属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='Bill"HelloWorld"Gates'。

HTML提示:使用小写属性

属性和属性值对大小写不敏感。

不过,万维网联盟在其HTML4推荐标准中推荐小写的属性/属性值。

而新版本的(X)HTML要求使用小写属性。

一些常见HTML属性:

td{border:1pxsolid#cccpadding:5pxmargin:auto}

td>p{text-align:left}

td>pspan{text-align:centerdisplay:block}

属性

描述

class

classname

规定元素的类名(classname)

id

id

规定元素的唯一id

style

style_definition

规定元素的行内样式(inline

style)

title

text

规定元素的额外信息(可在工具提示中显示)

四、HTML编辑器

使用Notepad或TextEdit来编写HTML

可以使用专业的HTML编辑器来编辑HTML:

AdobeDreamweaver

MicrosoftExpressionWeb

CoffeeCupHTMLEditor

五、HTML标题

标题(Heading)是通过

-等标签进行定义的。

Thisisaheading 定义最大的标题。

Thisisaheading 定义最小的标题。

注释:浏览器会自动地在标题的前后添加空行。

注释:默认情况下,HTML会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

以上就是小编今天为大家分享的关于Web前端工程师要了解的html+css基础知识的文章,希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助,想要了解更多Web前端相关知识记得关注北大青鸟Web培训官网,最后祝愿小伙伴们工作顺利,成为一名优秀的Web前端工程师。