【翻译】VisualStudio11中的CSS编辑器改进(asp.net 4.5系列)-ScottGu-阿里云开发者社区

开发者社区> xland> 正文

【翻译】VisualStudio11中的CSS编辑器改进(asp.net 4.5系列)-ScottGu

简介: 这是我所发的关于ASP .NET 4.5系列博文的第七篇文章。 下一个版本的.NET和Visual Studio包括大量的新特性和新功能 在开发ASP.NET 4.5 WebForms和Mvc的时候 你会看到很多功能上的改进 (不管是基于核心ASP.
+关注继续查看

这是我所发的关于ASP .NET 4.5系列博文的第七篇文章。

下一个版本的.NET和Visual Studio包括大量的新特性和新功能

在开发ASP.NET 4.5 WebForms和Mvc的时候

你会看到很多功能上的改进

(不管是基于核心ASP.NET还是一些其他的扩展)

在本篇文章中将会涵盖

下一个版本的VisualStudio关于支持在ASP.NET中使用CSS3的一些改进

CSS Color Picker

在VisualStudio的早起版本中,

CSS编辑器的智能提示引擎包括了一个颜色名称的下拉列表(硬编码)

新版本的VisualStudio

使用了一个功能齐全的颜色选择器

可以很容易的创建新的颜色样式

也可以很容易的从样式表内选择其他地方使用过的颜色

当你使用CSS编辑器编辑一个CSS样式的颜色属性时

一个颜色拾色器将会自动出现

默认情况下

他显示了之前您使用过的颜色

以及一些推荐使用的颜色

你可以使用鼠标或者键盘在这个列表中选择一个颜色

image

你可以选择”+”图标以展开一个更精细颜色选择列表

移动opacity(透明度)滑块,

可以控制alpha通道自动把任何颜色转化成CSS3 RGBA值

还有一个“颜色选择”功能

可以让你使用“吸管”工具从浏览器或其他应用程序中拾取颜色

(译者:造就该有这个功能了!)

image

在这个60秒的视频中,演示了颜色拾取器的使用方法

跨浏览器和CSS3片段

写样式表时,有时会有一些重复的工作,

经常会为不同版本的浏览器写兼容样式

在某些情况下需要写五个相同的值

为了支持所有的浏览器

必须做这些乏味的工作

在新版本的VisualStudio中

支持CSS片段,自动生成所有浏览器厂商的特定属性

这意味着没有更多繁琐的搜索和打字工作以使你的CSS兼容所有浏览器

css片段就像我们在VS中使用其他代码片段一样

(译者注:关于CodeSnippet的内容,请参看这里)

例如:调用CSS3的transition属性

只要简单的输入“transition”或者从智能提示中选择此样式即可

image

然后按tab键,VisualStudio会执行CSS的transition的代码片段

并生成相应的代码,以支持所有的浏览器!

并且可以只改一次样式值,就可以把所有选中值都改掉

(译者:真好啊!)

image

点此观看关于CSS代码片段的六十秒视频

CSS层级缩进

现实中,开发网站的样式表代码时,

你会发现保持良好的缩进和层级关系已经成为一个趋势

一个树状的CSS样式

可以更好的体现样式之间的层级关系

和在样式属于哪些网页中的元素

image

在VisualStudio的早期版本中

手动保持这些层级缩进是比较繁琐的工作

如果你格式化CSS代码(译者注:这里应该是指按快捷键ctl+e,d),

会清空所有的层级和缩进

这就要求你必须谨慎的使用代码格式化功能

在VisualStudio的下一个版本中,

加入了创建CSS的层级结构的功能

并且可以只格式化选中的内容

这使得审查复杂的样式关系和样式间的层级关系变得非常容易

VisualStudio中全新的CSS编辑器也支持常见的CSS  hack

这方面的内容也会体现在CSS的层级结构中

image

关于CSS层级结构和60秒视频

小节

在asp.net和VisualStudio的新版本中将更容易的使用CSS

这篇文章包括一些我们在VS上支持CSS编辑器的改进

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Netbeans源代码编辑技巧——使用代码补全和代码生成
原文 Netbeans源代码编辑技巧——使用代码补全和代码生成 使用代码补全生成代码 一般来说,代码补全对于自动填充缺失的代码是有帮助的,例如标识符和关键字。截至 NetBeans IDE 6.0,您现在甚至可以用代码补全来生成整个方法。
873 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9492 0
ASP.NET MVC 音乐商店 - 5. 通过支架创建编辑表单
转自 http://www.cnblogs.com/haogj/archive/2011/11/15/2249143.html 在上一章,我们已经从数据库获取数据,然后显示出来,这一章,我们将允许编辑数据。
745 0
ASP.NET MVC 音乐商店 - 5 通过支架创建编辑表单 续
转自http://www.cnblogs.com/haogj/archive/2011/11/15/2249147.html 查看 StoreManager 控制器的代码 现在,Store Manager 控制器中已经包含了一定数量的代码,我们从头到尾重新过一下。
923 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13176 0
ASP.NET Core Razor 编辑表单 - ASP.NET Core 基础教程 - 简单教程,简单编程
原文:ASP.NET Core Razor 编辑表单 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Razor 编辑表单 上一章节我们介绍了标签助手和 HTML 助手,也使用标签助手和 HTML 助手分别创建了一个职工列表,感觉好像有点喜欢上标签助手和 HTML 助手了,正好之前我们只讲解了如何列出数据,没有讲解如何创建表单来添加和修改数据 要不本章节我们就来讲讲? 顺带多用用标签助手和 HTML 助手 本章中,我们将继续讨论标签助手。
1461 0
+关注
xland
上市公司研发部门经理 管理着40个人以上的技术团队; 服务过诸多大型客户; 为很多知名开源项目提交过代码; 开发过几十万用户的APP; 技能:C++/.NET/JS/架构
329
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载