首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

什么是Sass,SCSS与它是什么关系?

2019年02月26日 发布 阅读(444) 作者:懒炖

Sass首先是一个CSS预处理器,CSS预处理器,除了Sass外,还有Less,Stylus等等

网方解释,Sass是世界上最成熟,最稳定,最强大的专业级CSS扩展语言。

Sass官网:https://sass-lang.com/
Sass on Github: https://github.com/sass
Sass中文:https://www.sass.hk

什么是CSS预处理器?

CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。

Sass安装

Sass是基于Ruby的,所以首先要安装Ruby(mac下自带Ruby无需在安装Ruby)
Ruby安装:https://rubyinstaller.org/downloads/

按默认选项安装就行:

检测是否安装成功

  1. C:\Users\administrator>ruby -v
  2. ruby 2.6.1p33 (2019-01-30 revision 66950) [x64-mingw32]

Ruby安装成功后,就可以使用gem来安装Sass了。什么是gem?简单的说,Gem是封装起来的Ruby应用程序或代码库,类似于npm用于管理nodejs的包

  1. C:\Users\administrator>gem -v
  2. 3.0.1

gem切换安装源

  1. //1.删除原gem源
  2. gem sources --remove https://rubygems.org/
  3. //2.添加国内淘宝源
  4. gem sources -a https://ruby.taobao.org/
  5. //3.打印是否替换成功
  6. gem sources -l
  7. //4.更换成功后打印如下
  8. *** CURRENT SOURCES ***
  9. https://ruby.taobao.org/

正式安装Sass

  1. //安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
  2. gem install sass
  1. C:\Users\administrator>gem install sass
  2. Fetching sass-3.7.3.gem
  3. Fetching rb-fsevent-0.10.3.gem
  4. Fetching ffi-1.10.0-x64-mingw32.gem
  5. Fetching rb-inotify-0.10.0.gem
  6. Fetching sass-listen-4.0.0.gem
  7. Successfully installed rb-fsevent-0.10.3
  8. Successfully installed ffi-1.10.0-x64-mingw32
  9. Successfully installed rb-inotify-0.10.0
  10. Successfully installed sass-listen-4.0.0
  11. Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.
  12. * If you use Sass as a command-line tool, we recommend using Dart Sass, the new
  13. primary implementation: https://sass-lang.com/install
  14. * If you use Sass as a plug-in for a Ruby web framework, we recommend using the
  15. sassc gem: https://github.com/sass/sassc-ruby#readme
  16. * For more details, please refer to the Sass blog:
  17. http://sass.logdown.com/posts/7081811
  18. Successfully installed sass-3.7.3
  19. Parsing documentation for rb-fsevent-0.10.3
  20. Installing ri documentation for rb-fsevent-0.10.3
  21. Parsing documentation for ffi-1.10.0-x64-mingw32
  22. Installing ri documentation for ffi-1.10.0-x64-mingw32
  23. Parsing documentation for rb-inotify-0.10.0
  24. Installing ri documentation for rb-inotify-0.10.0
  25. Parsing documentation for sass-listen-4.0.0
  26. Installing ri documentation for sass-listen-4.0.0
  27. Parsing documentation for sass-3.7.3
  28. Installing ri documentation for sass-3.7.3
  29. Done installing documentation for rb-fsevent, ffi, rb-inotify, sass-listen, sass after 8 seconds
  30. 5 gems installed

检查Sass版本

  1. C:\Users\administrator>sass -v
  2. Ruby Sass 3.7.3

Sass编译

sass可以通过命令行来编译,也可以使用IDE工具的插件来编译,如在sublime、 vs code中使用插件编译。在前端工程化中,gulp,grunt,webpack等都有相就的工具来自动化编译Sass

命令行编译
  1. //单文件转换命令
  2. sass input.scss output.css
  3. //单文件监听命令
  4. sass --watch input.scss:output.css
  5. //如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:
  6. sass --watch app/sass:public/stylesheets

命令行编译配置选项
命令行编译sass有配置选项,如编译过后css排版、生成调试map、开启debug信息等,可通过使用命令sass -v查看详细。我们一般常用两种—style``—sourcemap。

  1. //编译格式
  2. sass --watch input.scss:output.css --style compact
  3. //编译添加调试map
  4. sass --watch input.scss:output.css --sourcemap
  5. //选择编译格式并添加调试map
  6. sass --watch input.scss:output.css --style expanded --sourcemap
  7. //开启debug信息
  8. sass --watch input.scss:output.css --debug-info

--style 表示解析后的css是什么排版格式;
sass内置有四种编译格式:nested expanded compact compressed

--sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。

四种编译排版
  1. //未编译样式
  2. .box {
  3. width: 300px;
  4. height: 400px;
  5. &-title {
  6. height: 30px;
  7. line-height: 30px;
  8. }
  9. }

nested 编译排版格式

  1. /*命令行内容*/
  2. sass style.scss:style.css --style nested
  3. /*编译过后样式*/
  4. .box {
  5. width: 300px;
  6. height: 400px; }
  7. .box-title {
  8. height: 30px;
  9. line-height: 30px; }

expanded 编译排版格式

  1. /*命令行内容*/
  2. sass style.scss:style.css --style expanded
  3. /*编译过后样式*/
  4. .box {
  5. width: 300px;
  6. height: 400px;
  7. }
  8. .box-title {
  9. height: 30px;
  10. line-height: 30px;
  11. }

compact 编译排版格式

  1. /*命令行内容*/
  2. sass style.scss:style.css --style compact
  3. /*编译过后样式*/
  4. .box { width: 300px; height: 400px; }
  5. .box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式

  1. /*命令行内容*/
  2. sass style.scss:style.css --style compressed
  3. /*编译过后样式*/
  4. .box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
软件编译

推荐koala
koala是一个国产免费前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。

Sass与SCSS的关系?

Sass预处理器有两种语法格式 :

Sass:一种缩进语法
SCSS:一种 CSS-like 语法

最开始,Sass 是Haml的一部分,Haml 是一种预处理器,由 Ruby 开发者设计和开发。因为这样,Sass 使用类似 Ruby的语法,没有花括号,没有分号,具有严格的缩进。

Sass缩进语法类似这样的:

  1. // Variable
  2. !primary-color= hotpink
  3. // Mixin
  4. =border-radius(!radius)
  5. -webkit-border-radius= !radius
  6. -moz-border-radius= !radius
  7. border-radius= !radius
  8. .my-element
  9. color= !primary-color
  10. width= 100%
  11. overflow= hidden
  12. .my-other-element
  13. +border-radius(5px)

你可以就看到,这和CSS代码有很大的区别!即使你是一个 Sass(预处理器) 用户,你也会发现这和你正在使用的有很大的差别。变量的标志用 !,而不是$,分配符是=而不是:。非常怪异。

2010年5月,官方推出了一个全新的语法,被叫做 SCSS,意思是 Sassy CSS。这个语法带来了对 CSS 友好的语法,试图弥合 Sass 和 CSS 之间的鸿沟。

  1. // Variable
  2. $primary-color: hotpink;
  3. // Mixin
  4. @mixin border-radius($radius) {
  5. -webkit-border-radius: $radius;
  6. -moz-border-radius: $radius;
  7. border-radius: $radius;
  8. }
  9. .my-element {
  10. color: $primary-color;
  11. width: 100%;
  12. overflow: hidden;
  13. }
  14. .my-other-element {
  15. @include border-radius(5px);
  16. }

SCSS 和 Sass 相比更加贴近 CSS 语法。也就是说,Sass 维护者做了大量的工作,把缩进语法中的!和=换成了 SCSS 中的 $ 和 :。

Sass缩进语法的优劣

虽然语法看起来怪异,但是缩进语法有很多有趣的点。首先,它 更短并且更易于书写。没有花括号,没有分号,你完全不需要这些东西。更好的是,你甚至不需要@mixin 或者 @include, 一个字符就足够了:= 和 +。

同时 Sass 通过严格的缩进来强制 clean coding standards。因为一个错误的缩进就会破坏整个.sass文件,这使得整个代码总是clean 和格式良好的。只有一种写 Sass 代码的方式:正确的方式。

但是请注意!缩进在 Sass 中是有意义的。当你缩进了一个元素,这意味这你将它变为了之前元素的子元素。比如:

  1. .element-a
  2. color: hotpink
  3. .element-b
  4. float: left

以上会输出下面的 CSS 代码:

  1. .element-a {
  2. color: hotpink;
  3. }
  4. .element-a .element-b {
  5. float: left;
  6. }

.element-b 向右一格以为着它变成了 .element-a 的子元素,改变了输出 CSS 代码的结果。所以一定要小心你的代码缩进。

另外,我觉得基于缩进的语法适合于 Ruby/Python 团队,而不适合 PHP/Java 团队。(这是值得商榷的,我也希望听到不同的声音)

SCSS语法的优劣

对于初学者,SCSS 是完全和 CSS 兼容的,这意味着几乎为零的学习曲线。SCSS语法即是:它只是加了一些功能的 CSS。当你和没经验的开发者一起工作时这很重要:他们可以很快开始编码而不需要首先去学习Sass。

此外,SCSS 还是 易于阅读 的,因为它是有语义的,而不是用符号表示。当你读到 @mixin,你就会知道这是一个 mixin 声明;当你看到 @include ,你就是在引用一个 mixin。他并没有用任何缩写,当你大声读出来时所有的都很明了。

还有,现在几乎所有 Sass 的工具,插件和 demo 都是基于 SCSS语法来开发的。随着时间过去,SCSS 会变成大家首选的选择。比如,你现在很难找到一个 Sass 缩进语法的高亮插件,通常都只有 SCSS 的可以用。

Saas语法

变量(Variables)

将变量视为存储要在整个样式表中重用的信息的一种方法。您可以存储颜色,字体堆栈或您认为要重用的任何CSS值等内容。Sass使用$符号将某些内容变为变量。

  1. // Sass语法
  2. $font-stack: Helvetica, sans-serif
  3. $primary-color: #333
  4. body
  5. font: 100% $font-stack
  6. color: $primary-color
  7. // SCSS语法
  8. $font-stack: Helvetica, sans-serif;
  9. $primary-color: #333;
  10. body {
  11. font: 100% $font-stack;
  12. color: $primary-color;
  13. }
  14. // 编译后的CSS
  15. body {
  16. font: 100% Helvetica, sans-serif;
  17. color: #333;
  18. }
嵌套(Nesting)

sass允许您以符合HTML相同视觉层次结构的方式嵌套CSS选择器。请注意,过度嵌套的规则将导致过度合格的CSS,这些CSS可能难以维护,通常被认为是不好的做法。

  1. // Sass语法
  2. nav
  3. ul
  4. margin: 0
  5. padding: 0
  6. list-style: none
  7. li
  8. display: inline-block
  9. a
  10. display: block
  11. padding: 6px 12px
  12. text-decoration: none
  13. // SCSS语法
  14. nav {
  15. ul {
  16. margin: 0;
  17. padding: 0;
  18. list-style: none;
  19. }
  20. li { display: inline-block; }
  21. a {
  22. display: block;
  23. padding: 6px 12px;
  24. text-decoration: none;
  25. }
  26. }
  27. // 编译后的CSS
  28. nav ul {
  29. margin: 0;
  30. padding: 0;
  31. list-style: none;
  32. }
  33. nav li {
  34. display: inline-block;
  35. }
  36. nav a {
  37. display: block;
  38. padding: 6px 12px;
  39. text-decoration: none;
  40. }
父选择器 & (Referencing Parent Selectors: &)

在嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器,例如,当给某个元素设定 hover 样式时,或者当 body 元素有某个 classname 时,可以用 & 代表嵌套规则外层的父选择器。

  1. a {
  2. font-weight: bold;
  3. text-decoration: none;
  4. &:hover { text-decoration: underline; }
  5. body.firefox & { font-weight: normal; }
  6. }

编译为

  1. a {
  2. font-weight: bold;
  3. text-decoration: none; }
  4. a:hover {
  5. text-decoration: underline; }
  6. body.firefox a {
  7. font-weight: normal; }

编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器,如果含有多层嵌套,最外层的父选择器会一层一层向下传递:

  1. #main {
  2. color: black;
  3. a {
  4. font-weight: bold;
  5. &:hover { color: red; }
  6. }
  7. }

编译为

  1. #main {
  2. color: black; }
  3. #main a {
  4. font-weight: bold; }
  5. #main a:hover {
  6. color: red; }

&必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器,例如

  1. #main {
  2. color: black;
  3. &-sidebar { border: 1px solid; }
  4. }

编译为

  1. #main {
  2. color: black; }
  3. #main-sidebar {
  4. border: 1px solid; }

当父选择器含有不合适的后缀时,Sass 将会报错。

片断(Partials)

您可以创建包含很少CSS片段的部分Sass文件,您可以将这些片段包含在其他Sass文件中。这是模块化CSS并帮助维护事物更容易的好方法。partial只是一个以前导下划线命名的Sass文件。你可能会说它的名字_partial.scss。下划线让Sass知道该文件只是一个部分文件,不应该生成CSS文件。Sass partials与@import指令一起使用。

如果需要导入 SCSS 或者 Sass 文件,但又不希望将其编译为 CSS,只需要在文件名前添加下划线,这样会告诉 Sass 不要编译这些文件,但导入语句中却不需要添加下划线。

例如,将文件命名为 _colors.scss,便不会编译 _colours.css 文件。

  1. @import "colors";

上面的例子,导入的其实是 _colors.scss 文件

注意,不可以同时存在添加下划线与未添加下划线的同名文件,添加下划线的文件将会被忽略。

导入(Import)

CSS有一个导入选项,可以将CSS拆分为更小,更易维护的部分。唯一的缺点是每次@import在CSS中使用它都会创建另一个HTTP请求。Sass构建在当前CSS的基础之上,@import但不需要HTTP请求,Sass将获取您要导入的文件并将其与您导入的文件合并,以便您可以将单个CSS文件提供给Web浏览器。

假设您有几个Sass文件,_reset.scss并且base.scss。我们要导入_reset.scss到base.scss。

  1. // Sass语法
  2. // _reset.sass
  3. html,
  4. body,
  5. ul,
  6. ol
  7. margin: 0
  8. padding: 0
  1. // Sass语法
  2. // base.sass
  3. @import reset
  4. body
  5. font: 100% Helvetica, sans-serif
  6. background-color: #efefef
  1. // Sass语法
  2. // _reset.scss
  3. html,
  4. body,
  5. ul,
  6. ol {
  7. margin: 0;
  8. padding: 0;
  9. }
  1. // base.scss
  2. @import 'reset';
  3. body {
  4. font: 100% Helvetica, sans-serif;
  5. background-color: #efefef;
  6. }
  1. // 编译后的css
  2. html,
  3. body,
  4. ul,
  5. ol {
  6. margin: 0;
  7. padding: 0;
  8. }
  9. body {
  10. font: 100% Helvetica, sans-serif;
  11. background-color: #efefef;
  12. }

请注意我们@import ‘reset’;在base.scss文件中使用。导入文件时,不需要包含文件扩展名.scss。Sass很聪明,会为你解决问题。

混合(Mixins)

CSS中的一些东西写起来有点乏味,特别是CSS3和存在的许多供应商前缀。mixin允许您创建要在整个站点中重用的CSS声明组。您甚至可以传入值以使您的mixin更灵活。mixin的良好用途是供应商前缀。这是一个例子transform。

要创建mixin,请使用该@mixin指令并为其命名。我们已经命名我们的mixin transform。我们也在$property括号内使用变量,因此我们可以传递任何我们想要的变换。在创建mixin之后,您可以将其用作CSS声明,@include后跟mixin的名称

  1. // Sass语法
  2. =transform($property)
  3. -webkit-transform: $property
  4. -ms-transform: $property
  5. transform: $property
  6. .box
  7. +transform(rotate(30deg))
  8. // SCSS语法
  9. @mixin transform($property) {
  10. -webkit-transform: $property;
  11. -ms-transform: $property;
  12. transform: $property;
  13. }
  14. .box { @include transform(rotate(30deg)); }
  15. // 编译后的CSS
  16. .box {
  17. -webkit-transform: rotate(30deg);
  18. -ms-transform: rotate(30deg);
  19. transform: rotate(30deg);
  20. }
扩展/继承(Extend/Inheritance)

这是Sass最有用的功能之一。使用@extend允许您从一个选择器共享一组CSS属性到另一个选择器。它有助于保持你的Sass非常干燥。在我们的示例中,我们将使用另一个与扩展,占位符类同时进行的功能,为错误,警告和成功创建一系列简单的消息。占位符类是一种特殊类型的类,只在扩展时才会打印,并且可以帮助保持编译后的CSS整洁干净。

  1. // Sass语法
  2. /* This CSS will print because %message-shared is extended. */
  3. %message-shared
  4. border: 1px solid #ccc
  5. padding: 10px
  6. color: #333
  7. // This CSS won't print because %equal-heights is never extended.
  8. %equal-heights
  9. display: flex
  10. flex-wrap: wrap
  11. .message
  12. @extend %message-shared
  13. .success
  14. @extend %message-shared
  15. border-color: green
  16. .error
  17. @extend %message-shared
  18. border-color: red
  19. .warning
  20. @extend %message-shared
  21. border-color: yellow
  1. // SCSS语法
  2. /* This CSS will print because %message-shared is extended. */
  3. %message-shared {
  4. border: 1px solid #ccc;
  5. padding: 10px;
  6. color: #333;
  7. }
  8. // This CSS won't print because %equal-heights is never extended.
  9. %equal-heights {
  10. display: flex;
  11. flex-wrap: wrap;
  12. }
  13. .message {
  14. @extend %message-shared;
  15. }
  16. .success {
  17. @extend %message-shared;
  18. border-color: green;
  19. }
  20. .error {
  21. @extend %message-shared;
  22. border-color: red;
  23. }
  24. .warning {
  25. @extend %message-shared;
  26. border-color: yellow;
  27. }
  1. // 编译后的CSS
  2. /* This CSS will print because %message-shared is extended. */
  3. .message, .success, .error, .warning {
  4. border: 1px solid #ccc;
  5. padding: 10px;
  6. color: #333;
  7. }
  8. .success {
  9. border-color: green;
  10. }
  11. .error {
  12. border-color: red;
  13. }
  14. .warning {
  15. border-color: yellow;
  16. }

上面的代码的告诉.message.success.error,和.warning表现就像%message-shared。这意味着任何地方%message-shared显示出来,.message,.success,.error,和.warning也会这样做的。神奇的事情发生在生成的CSS中,其中每个类都将获得与CSS相同的CSS属性%message-shared。这有助于您避免在HTML元素上编写多个类名。

除了Sass中的占位符类之外,您还可以扩展大多数简单的CSS选择器,但使用占位符是确保您不扩展嵌套在样式中其他位置的类的最简单方法,这可能会导致CSS中出现意外的选择器。

请注意,%equal-heights未生成CSS in ,因为%equal-heights永远不会扩展。

更多语法,请参考:
https://www.sass.hk/docs/
https://sass-lang.com/guide

参考

https://segmentfault.com/a/1190000005646206
https://www.sass.hk/install/
https://henter.me/post/ruby-rvm-gem-rake-bundle-rails.html

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • 使用 media query 进行 IE 的 CSS Hack

    通过 media query 进行 CSS 的 hack。在 IE 中它们可以识别出这些特殊的符号 \0,\, 以及 \9,然后结合 media query 可以更好进行样式的区分

    发布:2019-08-07 阅读(84)

  • Css Grid fr单位

    css fr 单位是一个自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。

    发布:2019-02-28 阅读(491)

  • CSS Grid网格布局指南(学习)

    CSS网格布局是CSS中最强大的布局系统。它是一个二维系统,这意味着它可以处理列和行,不像flexbox主要是一维系统。CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小、位置和图层之间的关系。像表格一样,网格布局让我们能够按行或列来对齐元素。 但是,使用CSS网格可能还是比CSS表格更容易布局。 例如,网格容器的子元素可以自己定位,以便它们像CSS定位的元素一样,真正的有重叠和层次。

    发布:2019-02-28 阅读(448)

  • 什么是Sass,SCSS与它是什么关系?

    什么是Sass,SCSS与它是什么关系?

    发布:2019-02-26 阅读(444)

  • css3 自定义浏览器滚动条(scrollbar)

    通过-webkit-scrollbar自定义浏览器滚动条,支持webkit的浏览器可正常显示(如chrome,safari,QQ浏览器,360极速等)

    发布:2019-01-28 阅读(506)

  • CSS中伪类和伪元素总结

    css伪类和伪元素有什么区别?

    发布:2019-01-14 阅读(375)

  • 视窗单位vm,vh,vmin,vmax

    记录下响应式布局单位(视窗单位:viewport units)的应用,最近用electron开发桌面应用,用到vh,vw还是蛮方便的.

    发布:2019-01-09 阅读(170)

  • 妙法攻略:渐变虚框及边框滚动动画的纯CSS实现

    CSS3实现滚动边框,渐变边框

    发布:2018-12-07 来源:张鑫旭

  • CSS3 手册

    CSS3 是层叠样式表(Cascading Style Sheets)语言的最新版本,旨在扩展CSS2.1。它带来了许多期待已久的新特性, 例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式,如 multi-columns 、 flexible box 与 grid layouts。实验性特性以浏览器引擎为前缀(vendor-prefixed),应避免在生产环境中使用,或极其谨慎地使用,因为将来它们的语法和语义都有可能被更改。

    发布:2018-11-06 来源:mozilla

  • 探究 CSS 解析原理

    浏览器 CSS 模块负责 CSS 脚本解析,并为每个 Element 计算出样式。CSS 模块虽小,但是计算量大,设计不好往往成为浏览器性能的瓶颈。

    发布:2017-12-15 阅读(13)

  • [布局概念] 关于CSS-BFC深入理解

    BFC(Block formatting context)直译为"块级格式化上下文"。它**是一个独立的渲染区域**,只有**Block\-level box**参与(在下面有解释), 它规定了内部的Block\-level Box如何布局,并且与这个区域外部毫不相干。

    发布:2017-06-09 阅读(35)

  • 移动端retina屏1px细边框问题

    retina屏下(window.devicepixelratio>1),1px的边框会被渲染成2px,看起会比较粗,如何解决?

    发布:2017-02-15 阅读(487)

  • 隐藏input type=number元素,右侧的上下箭头

    通过CSS隐藏input='number'时,右侧的箭头

    发布:2015-08-21 阅读(710)

  • 移动端 UC浏览器字体放大的问题

    在做移动端页面时,发现UC浏览器在文字居多的页面(如文章页面、关于我们页面),字体会自动放大。其他的浏览器都没有问题~~

    发布:2015-08-17 阅读(416)

  • 利用rgba和filter设置CSS背景颜色半透明且不影响子元素,兼容IE6-8

    css设置子元素半透明,兼容IE6-8

    发布:2013-05-28 阅读(455)

  • text-overflow:clip | ellipsis 单行截断文字

    利用CSS截断单行文字,溢出的显示"..."

    发布:2012-11-23 阅读(424)

  • 禁止<textarea>标签右下角拉动

    HTML标签textarea在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同,可以拖动右下角图标改变大小

    发布:2012-11-14 阅读(416)

  • 去掉Chrome,Safari等浏览器input,select,textarea等form元素的高亮效果

    chrome、safari等现代浏览器,input,textarea,select等一些Form元素,会有一个默认的高亮样式

    发布:2012-11-13 阅读(423)

  • CSS设置超链接a:link,a:visited,a:hover,a:active的顺序

    CSS针对超链接4个状态的设置是有顺序的,顺序不对,a链接的各种状态可能不会生效

    发布:2012-10-23 阅读(478)

  • CSS常用hack技巧

    在当前的WEB前端页面制作中,鉴于市面上浏览器种类繁多(IE6-IE9、firefox、Chrome、Safari、Opera等等),各种浏览器对CSS的解析效果会有所不同(少数),所以要想让页面完全的兼容所有浏览器,就必须要用css hack。可能不同的开发人员,使用的hack方式不一样,但最终的目的都是希望各种浏览器渲染出同样的页面效果

    发布:2012-10-16 阅读(597)

  • 利用CSS制作尖角

    用两个◆制作尖角(引用腾讯微博中的做法)

    发布:2012-10-15 阅读(449)