mac系统下怎样利用好sublime text 2编写html,css,js代码

html-css017

mac系统下怎样利用好sublime text 2编写html,css,js代码,第1张

Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但目前可以无限期试用)也是HTML和散文先进的文本编辑器。漂亮的用户界面和非凡的功能,例如迷你地图,多选择,Python的插件,代码段,等等。完全可自定义键绑定,菜单和工具栏。Sublime Text的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。

Sublime Text 2 被称作Windows下的TextMate,而根据其官网介绍,Sublime Text的特点如下:拥有高效、没有干扰的界面,在编辑方面的多选、宏、代码片段等功能,以及很有特色的Minimap。

自从 Sublime Text 2.0 正式版以来已经新增支持 Retina 视网膜屏、拖拽文本、构建系统得以优化、支持 CSS 自动完成以及高亮设置等新特点~

Sublime Text 2 的特色功能:

1.良好的扩展功能,官方称之为安装包(Package)。

2.右边没有滚动条,取而代之的是代码缩略图,这个功能非常赞

3.强大的快捷命令“可以实时搜索到相应的命令、选项、snippet 和 syntex, 按下回车就可以直接执行,减少了查找的麻烦。”

4.即时的文件切换。

5.随心所欲的跳转到任意文件的任意位置。

6.多重选择(Multi-Selection)功能允许在页面中同时存在多个光标。

7.支持 VIM 模式

8.支持宏,简单地说就是把操作录制下来或者自己编写命令,然后播放刚才录制的操作或者命令。

9.更新非常勤快

主要快捷键列表:

Ctrl+L 选择整行(按住-继续选择下行)

Ctrl+KK 从光标处删除至行尾

Ctrl+Shift+K 删除整行

Ctrl+Shift+D 复制光标所在整行,插入在该行之前

Ctrl+J 合并行(已选择需要合并的多行时)

Ctrl+KU 改为大写

Ctrl+KL 改为小写

Ctrl+D 选词 (按住-继续选择下个相同的字符串)

Ctrl+M 光标移动至括号内开始或结束的位置

Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)

Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)

Ctrl+Shift+/ 注释已选择内容

Ctrl+Z 撤销

Ctrl+Y 恢复撤销

Ctrl+M 光标跳至对应的括号

Alt+. 闭合当前标签

Ctrl+Shift+A 选择光标位置父标签对儿

Ctrl+Shift+[ 折叠代码

Ctrl+Shift+] 展开代码

Ctrl+KT 折叠属性

Ctrl+K0 展开所有

Ctrl+U 软撤销

Ctrl+T 词互换

Tab 缩进 自动完成

Shift+Tab 去除缩进

Ctrl+Shift+↑ 与上行互换

Ctrl+Shift+↓ 与下行互换

Ctrl+K Backspace 从光标处删除至行首

Ctrl+Enter 光标后插入行

Ctrl+Shift+Enter 光标前插入行

Ctrl+F2 设置书签

F2 下一个书签

Shift+F2 上一个书签

Sublime Text 2 所支持的格式:

Sublime Text 2 插件下载请点击这里~Sublime Text 2 插件安装方法:将下载的安装包解压缩至 Sublime Text 2 安装目录下的 Packages 中,而后在 preferences——packages 进行具体设置~

Sublime Text 2.0.1 更新内容:

1.Keyboard input while dragging a selection will cancel the drag

2.Improved backspace behavior when use_tab_stops and translate_tabs_to_spaces are true

3.Improved shift+drag behavior

4.Improved double click drag select behavior

5.About Window shows the license key details

6.Fixed a Goto Anything issue where pressing backspace could scroll the overlay incorrectly

7.Fixed a crash triggered by double clicking in the Goto Anything overlay

8.Fixed incorrect window position when dragging a tab in some scenarios

9.Added missing toggle_preserve_case command

10.word_wrap setting accepts “true” and “false” as synonyms to true and false

11.OSX: Fixed System Preferences menu not working

12.Linux: Added support for mice with more than 5 buttons

13.Linux: Fixed an occasional graphical glitch when running under Unity

支持运行环境:Windows XP/Vista/Win7/Win8

Sublime Text 2.0.1 便携版 下载(来自wkang956的汉化):

(8.2MB)(将替换文件夹中的“SublimeText.exe”替换“SublimeText2”目录中的同名文件即可运行)

css样式是HTML的一个补充,简单的css使用样式如下:

<html>

<body>

<div id=div></div>

</body>

<style type="text/css">

width:300px//设置div的宽度300像素

height:500px//设置div高度500像素

background-color:red//设置div的背景颜色为红色

</style>

</html>

css代码位于style之间,详细的css代码解释见代码注释。

css的基本语法

cascading stylesheet(级联样式表)。为网页提供外观(也就是,网页的表现形式)。将网页的外观写在一个css文件里,方便页面代码的维护(将表现与数据分离)。为方便大家学习css,我为大家分享css的基本语法如下:

css的基本语法

选择器{

属性1:属性值1

属性n:属性值n

符合选择器要求的标记,会添加对应的样式。

Chrome浏览器为SVG和CSS添加GPU加速功能

互联网有消息透露,谷歌正在为Chrome浏览器增加新的GPU加速功能。Chrome18浏览器将内建开关选项,让消费者选择使用GPU硬件加速基于矢量的SVG图形和CSS过滤器,让Chrome浏览器在未来网页显示上获得突破性速度,并且达成惊人的视觉效果。

Chrome浏览器的SVG和CSSGPU加速支持Windows,Mac,Linux和谷歌的Chrome操作系统,但目前这个功能仍然主要是实验性质,因为只有几个少数网站部署了SVG和CSSGPU加速。

但也有信息表示,tomshardware测试发现Chrome这项功能在显示目前网页方面,显示速度并没有出现任何显着增加,在WebVizHTML5基准测试当中出现了不稳定和崩溃问题。

评论表示,虽然SVG和CSSGPU加速还有待完善,但是Mozilla火狐、微软IE和其他版本浏览器之间的竞争,肯定会推动这种技术快速发展和完善。

设置容器中的内容垂直居中css代码

如实例1设置网页整体居中的代码中内容是居容器的顶部的,而在表格布局时默认是垂直居中的,当我们需要垂直居中的时候该怎么办呢?别害怕,跟我来,也是比较简单的,只用设置容器内的行高就行了。

line-height:500px

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/htmlcharset=gb2312"/>

<title>标准之路www.aa25.cn</title>

<style>

#layout{width:778pxmargin:0autotext-align:centerborder:1pxsolid#44b6dcbackground:#e1edfbheight:500pxline-height:500px}

</style>

</head>

<body><pid="layout">标准之路www.##.cn </p>

</body>

</html>

提示:可以先修改部分代码后再运行

这是一种方法,另外和种方法就是设置的`它内边距padding了,自己可以试试哟~~

CSS对不同浏览器的兼容性解决办法

CSS 对不同浏览器的兼容性解决办法由于CSS 在不同浏览器中存在兼容性问题,所以在使用 p+CSS 布局中,可能导致相同的内容在不同浏览器中出现不同的显示效果,为了解决这些方面的问题,以下针对CSS 某些属性的用法提出相应的一些解决办法。 1、页面居中问题在IE 浏览器下,可以通过定义CSS 样式body {text- align: center}来实现页面居中,但在FireFox(以下简写为FF)浏览器下此属性就失效了。解决办法:使用"margin- left: automargin- right : auto" www.diannao114.cn2、padding 属性在不同浏览器的显示问题当给p 设置padding 属性后,在FF 浏览器中会导致 width 和height 增加(p 的实际宽度=p 宽+Padding), 但在 IE 浏览器中width 和height 不会增加,这就导致相同的内容在不同浏览器中出现不同的显示效果。解决办法:给p 设定IE、FF 两个宽度,在IE 的宽度前加上IE 特有标记" * " 号。例如: #pwidth{ padding:5pxwidth:100px*width:110px} 3、奇怪的间隙问题有的时候我们明明设好了高度,可在IE6 上却看见一些奇怪的间隙。解决办法:试试在有空隙的p 上加上"font- size:0px" 4、关于手形光标要将页面内容的光标显示为手形,通常的做法是使CSS 属性cursor: hand但这于做法只适用于IE. 解决办法:cursor: pointer5、浮动在IE6 产生双倍距离问题例如: #box{ float:leftwidth:100pxmargin:0 0 0 100px} 这种情况之下IE6 会产生200px 的距离。解决办法:在以上属性的基础上,加上display:inline,使浮动忽略。6、UL 和FORM标签的padding 与margin ul 标签在FF 中默认是有padding 值的, 而在IE 中只有 margin 默认有值。FORM标签在IE 中,将会自动margin 一些边距,而在FF 中margin 则是0;解决办法:css 中首先都使用这样的样式ul,form{margin:0padding:0}。 7、截字省略号 .hh { - o- text- overflow:ellipsistext- overflow:ellipsiswhite- space:nowrapoverflow:hidden} 这个CSS 是定义当内容溢出宽度后会自行的截掉超出部分的文字,并以省略号结尾,但注意Firefox 并不支持。

p+CSS 网页布局的分类

p+CSS 网页布局的分类1、一列固定宽度一列布局是所有布局的基础,也是最简单的布局方式,用 p+CSS 布局的代码如下: XHTML 代码: 一列固定宽度CSS 代码: #main1 { width: 400pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999} 2、一列自适应宽度自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值,是网页设计中一种非常灵活的布局形式,用 p+CSS 布局的代码如下: XHTML 代码: 一列自适应宽度CSS 代码: #main2 { width: 70%height: 300pxbackground- color: #EEEEEEborder: 1px solid #999999} 3、一列固定宽度居中页面整体居中是网页布局中最常见到形式,在传统的表格布局中,使用TABLE 的align="center" 属性来实现,在p+CSS 布局中采用如下代码来实现:XHTML 代码: 一列自适应宽度CSS 代码: p+CSS 网页布局方法探析。如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利,传统的TABLE 网页布局由于其庞大的HTML 代码,使得其在搜索引擎方面显得有些无能为力,而用p+CSS 进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。但是又由于CSS 对不同浏览器存在兼容性问题,所以对于初学者来说,在使用p+CSS 进行网页布局过程中可能会遇到各种问题,本文就给大家探讨几点p+CSS 布局的技巧。4、二列固定宽度在有一列固定宽度布局的基础上,实现二列固定宽度也就很简单了,用p+CSS 布局的代码如下:XHTML 代码: 左侧右侧CSS 代码: #left { width: 150pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} #right{ width: 400pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} 5、二列固定宽度居中从一列固定宽度居中的布局方法中,我们就不难完成二列固定宽度居中了,可以使用一个居中的p 作为容器,将二列分栏的p 放置在容器中,从而就实现二列的居中显示。 p+CSS 的代码如下: XHTML 代码: 左侧右侧CSS 代码: #main{ width:554pxmargin:0px auto#left { width: 150pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} #right{ width: 400pxheight: 300pxbackground- color: #EEEEEEborder: 1px solid #999999float:left} 这里仅列举了一列、二列的布局方式,实际上三列、四列等多列的布局方式也和二列的布局方式的实现方法是一样的。事实上不管多么复杂的页面设计,在p+CSS 网页布局中,均是以p 为基础,通过一列、二列、三列这些基础的布局方式的相互组合与嵌套来实现复杂的布局。

p+CSS网页布局技巧:设置网页整体居中的css代码

以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用p+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已。

<style>

#layout { width:778pxmargin:0 autotext-align:center}

</style>

<p id="layout">标准之路www.aa25.cn</p>

请看这段代码,宽度为适合800×600分辨率浏览器的宽度,margin:0 auto这句代码就是让居中了,意思是外边距上下设置为0,左右设为自动。这样它就居中了。

那么可能你要问了,text-align:center为什么还要让内容居中呢?呵呵,别着急,这句是为了适应IE6以下版本的浏览器而加的,IE6以下对margin:0 auto不能解析为居中,所以用这种方式来补救,以下在设计内容时再用 text-align:left就可以了。

注:margin和padding的值的顺序为顺时针上右下左,如margin:1px 2px 3px 4px还可以缩写为上下、左右,如本例,如果为margin:0px则是各边都为0

提示:可以先修改部分代码后再运行