Css

CSS从大图片上截取小图标的操作

注:图片名称(tabicons.png)每个小图标width:18px;height:18px从左上角坐标为(-0px;-0px;);例如第一个对号的坐标为(-0px;-0px;)第二个加号的图标为(-20px;-0px;)中间依次加20个像素截取小图标样式.icon{background:url(imges/tabi...

CSS中如何把Span标签设置为固定宽度

一、形如<span>ABC</span>独立行设置SPAN为固定宽度方法如下:span{width:60px;text-align:center;display:block;}实际验证结果:IE6OK,FIREFOX3OK。一、形如<span>ABC</span>DEF格...

用CSS让文字居于div的底部

css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?<!DOCTYPEHTMLPUBLIC"-//...

用CSS设置Table的细边框的最好用的方法

今天同事向我问了一个问题,他要设置table的边框,说实话,我也很少弄过table的边框。通过差一些资料http://blog.sina.com.cn/s/blog_565812e60100czbn.html,我发现设置table的CSS为{border-collapse:collapse;border:none;},...

CSS预处理器—Sass、LESS和Stylus

http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html一、什么是CSS预处器CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行...

面向属性的CSS命名

自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名。这个问题主要体现在:第一,有的内容你压根想不出用什么名字来给它命名,因为一般命名总是考虑语义化,好让其他人看到这个css类的名字就知道它是作用于哪一个内容的,但是由于网页内容的复...
代码星球·2020-05-27

CSS精灵

方法一:方法二:watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center">方法二能够降低http请求。!!css精灵的核心思想是将多张图片合...
代码星球·2020-05-25

CSS3伪类与伪元素的区别及注意事项

CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的伪类:用于向某些选择器添加特殊的效果伪元素:用于将特殊的效果添加到某些选择器讲道理,可能我语文不好,我觉得这两句话是等价的:-) 根本不能看出有什么区别&...

css设置字体单行,多行超出省略号显示

 单行:  overflow: hidden;  text-overflow:ellipsis;  white-space: nowrap; 多行    display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-l...

利用css 画各种三角形

 #triangle-up{    width:0;    height:0;    border-left:50pxsolidtransparent;   &...
代码星球·2020-05-25

CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

300px!important;width/**/:340px;margin:010px010px},关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)3、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所...
代码星球·2020-05-24

使用scss覆盖vant默认样式

//vant覆盖默认样式的写法<style lang="scss" scoped> ::v-deep .van-popup {    background: transparent;  &...

文件图标css样式

.list-list.ico-bookfolder{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5cc...
代码星球·2020-05-24

深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

  我们可以通过计算样式来读取伪元素的样式信息,但是却无法使用javascript来直接操作伪元素,本文以一个需求解决为例,详细介绍脚本化伪元素的6种方法需求说明  【1】为id=box的div元素添加content="前缀"的:before伪元素  【2】为已经添加:before伪元素的div元素删除伪元素  &nb...

深入理解脚本化CSS系列第四篇——脚本化样式表

  关于脚本化CSS,查询样式时,查询的是计算样式;设置单个样式时,设置的是行间样式;设置多个样式时,设置的是CSS类名。脚本化样式表当然也是一种脚本化CSS的技术,虽然不经常使用,但有时却非常有用。下面将详细介绍脚本化样式表的内容 CSSStyleSheet  CSSStyleSheet类型表示的是样式表。...