芯学苑 web前端开发中常用的CSS3有哪些新特性

html-css014

芯学苑 web前端开发中常用的CSS3有哪些新特性,第1张

CSS3实现圆角(border-radius),阴影(box-shadow),

对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)//旋转,缩放,定位,倾斜

增加了更多的CSS选择器 多背景 rgba

在CSS3中唯一引入的伪元素是::selection.

媒体查询,多栏布局

border-image

如果网页背景是白色的,可以设一个小的span定在想实现半角的那个地方,设置宽高为0,给设置边框 例如

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>带缺角的水平菜单 </title>

<style>

#menu{ font-family:Arialfont-size:14px}

#menu a , #menu a:visited{ float:leftdisplay:blockposition:relativebackground:#c00color:#ffftext-decoration:nonepadding:6px margin:1px 0 0 1px }

#menu a span{ height:0width:0border-bottom:6px solid #c00border-left: 6px solid #fffposition:absolutetop:0left:0overflow:hidden}

#menu a:hover{ color:#333background:#f90}

#menu a:hover span{ border-bottom:6px solid #f90}

</style>

</head>

<body>

<div id="menu">

<a href="#"><span class="left"></span>Home</a>

<a href="#"><span class="left"></span>Contact Us</a>

<a href="#"><span class="left"></span>Web Dev</a>

<a href="#"><span class="left"></span>Web Design</a>

<a href="#"><span class="left"></span>Map</a>

</div>

</body>

</html>

今天小编要跟大家分享的文章是关于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前端工程师。