叶子网络bbs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 39355|回复: 12
打印 上一主题 下一主题

CSS高级教程

[复制链接]

0

主题

3

帖子

3

积分

超级版主

Rank: 8Rank: 8

积分
3
跳转到指定楼层
楼主
发表于 2014-10-22 23:52:02 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 rain 于 2014-12-15 11:56 编辑

visibility 属性
visibility 属性规定元素是否可见。
提示:即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
说明
这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间,不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。
可能的值
描述
visible默认值。元素是可见的。
hidden元素是不可见的。
collapse当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
inherit规定应该从父元素继承 visibility 属性的值。

CSS属性中Display与Visibility的不同
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。
visibility属性用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示,visible表示显示,hidden表示隐藏。当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。例:

<script language="JavaScript">
function toggleVisibility(me){
  if (me.style.visibility=="hidden"){
   me.style.visibility="visible";
   }
  else {
   me.style.visibility="hidden";
   }
  }
</script>


<div style="position:relative">
第一行文本将会触发"hidden"和"visible"属性,注意第二行的变化。</div><div>因为visibility会保留元素的位置,所以第二行不会移动.</div>

效果:

第一行文本将会触发"hidden"和"visible"属性,注意第二行的变化。
因为visibility会保留元素的位置,所以第二行不会移动.

注意到,当元素被隐藏之后,就不能再接收到其它事件了,所以在第一段代码中,当其被设为"hidden"的时候,就不能再接收响应到事件了,因此也就无法通过鼠标点击第一段文本令其显示出来。另一方面,display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<div>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<div>一样工作。将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<div>,它也将会被组合成像<span>那样的输出流。最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填充。下面看我实例的代码和效果:

例:

<script language="JavaScript">
function toggleDisplay(me){
  if (me.style.display=="block"){
   me.style.display="inline";
   alert("文本现在是:'inline'.");
   }
  else {
   if (me.style.display=="inline"){
    me.style.display="none";
    alert("文本现在是:'none'. 3秒钟后自动重新显示。");
    window.setTimeout("blueText.style.display='block';",3000,"JavaScript");
    }
   else {
    me.style.display="block";
    alert("文本现在是:'block'.");
    }
   }
  }
</script>


<div>在<span id="blueText"
style="color:blue;position:relative;cursor:hand;">蓝色</span>文字上点击来查看效果.</div>

效果:

在文字上点击来查看效果.

disabled="disabled"   禁用 input 元素    true   /  false     是否可见
display:none  不可见
hide()隐藏
回复

使用道具 举报

0

主题

3

帖子

3

积分

超级版主

Rank: 8Rank: 8

积分
3
沙发
 楼主| 发表于 2014-11-28 16:09:01 | 只看该作者
display 属性规定元素应该生成的框的类型。
值        描述
none        此元素不会被显示。
block        此元素将显示为块级元素,此元素前后会带有换行符。
inline        默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block        行内块元素。(CSS2.1 新增的值)
list-item        此元素会作为列表显示。
run-in        此元素会根据上下文作为块级元素或内联元素显示。
compact        CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker        CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table        此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table        此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group        此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group        此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group        此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row        此元素会作为一个表格行显示(类似 <tr>)。
table-column-group        此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column        此元素会作为一个单元格列显示(类似 <col>)
table-cell        此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption        此元素会作为一个表格标题显示(类似 <caption>)
inherit        规定应该从父元素继承 display 属性的值。
回复

使用道具 举报

0

主题

3

帖子

3

积分

超级版主

Rank: 8Rank: 8

积分
3
板凳
 楼主| 发表于 2014-11-30 13:06:58 | 只看该作者
本帖最后由 rain 于 2014-12-22 17:40 编辑

fontfont-family(字体)、font-size(字大小)、font-style(字样式)、font-weightcss加粗)、text-decoration(下划线)、font-variant(字母大小写)、text-transform(英文大小写)、letter-spacing(间隔)

text-transform 值:
Capitalize 英文拼音的首字母大写
Uppercase 英文拼音字母全大写
Lowercase 英文拼音字母全小写

font-variant : normal | small-caps
normal : 正常的字体
small-caps : 让字母变成小型的大写字母字体并缩小字母

text-indent设置抬头距离css缩进
letter-spacing来设置字与字间距_字符间距离,字体间距css样式

text-overflow : clip | ellipsis
clip :  不显示省略标记(...),而是简单的裁切
ellipsis :  当对象内文本溢出时显示省略标记(...)

overflow 属性[]overflow 属性规定当内容溢出元素框时发生的事情
可能的值
描述
visible默认值。内容不会被修剪,会呈现在元素框之外。
hidden内容会被修剪,并且其余内容是不可见的。
scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

回复

使用道具 举报

0

主题

3

帖子

3

积分

超级版主

Rank: 8Rank: 8

积分
3
地板
 楼主| 发表于 2014-11-30 15:57:09 | 只看该作者
1、CSS星号*选择器*{padding:0; ... }
CSS星号“*”这是什么意思呢?
这里的“*”号是通配符,即指,网页html中所有标签意思。
例子:
CSS代码:*{ padding:0; margin:0; font-family:"黑体"}
以上DIV+CSS中CSS代码意思:设置网页html中所有标签成员的css样式为padding为0,margin为0,字体为黑体。
这样就无需像以前那样分别设置网页不同标签元素的css样式表,这样就全面设置和初始化了html标签元素的CSS样式。
2、CSS选择器内以(*)星号开头CSS单词  
在CSS选择器内星号+CSS样式属性单词,一般区别IE6和IE8、IE6和FF,IE7和IE8,IE7和FF浏览器之间属性CSS HACK。如下演示测试。
.divcss5{border:1px solid #000;width:220px;*width:300px;}
我们设置一个宽度为220px,一个带星号的宽度为300px,
讲过各大浏览器测试,我们会发现在IE6和IE7中宽度为300px,而在IE8及以上MSIE版本、谷歌浏览器、火狐(FF)浏览器却显示为220px宽度。
自己测试测试看看是否与描述相同效果。
注意:这里属于星号CSS属性放置前后位置。
回复

使用道具 举报

0

主题

3

帖子

3

积分

超级版主

Rank: 8Rank: 8

积分
3
5#
 楼主| 发表于 2014-12-10 17:12:55 | 只看该作者
本帖最后由 rain 于 2014-12-15 11:48 编辑

<link href="print.css" rel="stylesheet" type="text/css" media="print"/>     media="print" 表示该样式表仅应用于打印内容。 默认情况下其值是screen

<hr/> 水平线,两种方式定义样式:
style="border-top:1px solid #ff9900; "        或者     <hr size=”1″ color=”#ff9900″/>
回复

使用道具 举报

0

主题

3

帖子

3

积分

超级版主

Rank: 8Rank: 8

积分
3
6#
 楼主| 发表于 2014-12-11 16:26:14 | 只看该作者
ie -ms-interpolation-mode: bicubic 属性详解
img { -ms-interpolation-mode: bicubic; }
这个在做实时缩放图片、缩略图的时候用处挺大。IE7 Only


IE7.0自带样式属性-ms-interpolation-mode


刚过完火星,从骨灰级哪里淘到的沙子。

以前很少写样式的体验,今天来了兴致,那就给大伙共享一下。

也不管是否还有火星鸡

iE7.0中自带的-ms-interpolation-mode属性可以解决缩放失真问题

如下是测试代码

.img01,.img02,.img03{float:left;padding:0 5px;text-align:center;}
.img01{-ms-interpolation-mode:Nearest-Neighbor}
.img02{-ms-interpolation-mode:normal;}
.img03{-ms-interpolation-mode:bicubic}

ps:不过这也与图的大小,有关系,500以上的再定义放大,可能明显,小图再放大,好像不太明显

ps:好像很少用到这个属性,再者,他只是ie的自带属性
回复

使用道具 举报

47

主题

114

帖子

1789

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1789
7#
发表于 2014-12-11 20:22:45 | 只看该作者
cursor 属性

值        描述
url       
需使用的自定义光标的 URL。
注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
default        默认光标(通常是一个箭头)
auto        默认。浏览器设置的光标。
crosshair        光标呈现为十字线。
pointer        光标呈现为指示链接的指针(一只手)
move        此光标指示某对象可被移动。
e-resize        此光标指示矩形框的边缘可被向右(东)移动。
ne-resize        此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize        此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize        此光标指示矩形框的边缘可被向上(北)移动。
se-resize        此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize        此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize        此光标指示矩形框的边缘可被向下移动(南)。
w-resize        此光标指示矩形框的边缘可被向左移动(西)。
text        此光标指示文本。
wait        此光标指示程序正忙(通常是一只表或沙漏)。
help        此光标指示可用的帮助(通常是一个问号或一个气球)。
回复

使用道具 举报

47

主题

114

帖子

1789

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1789
8#
发表于 2014-12-11 20:24:57 | 只看该作者
position 属性
描述
absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit规定应该从父元素继承 position 属性的值。
回复

使用道具 举报

0

主题

3

帖子

3

积分

超级版主

Rank: 8Rank: 8

积分
3
9#
 楼主| 发表于 2014-12-22 18:15:57 | 只看该作者
CSS透明属性详解
透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码:
.transparent_class {        filter:alpha(opacity=50);        -moz-opacity:0.5;        -khtml-opacity: 0.5;        opacity: 0.5;}
上面的几个属性分别是:
  • opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
  • filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1.
  • -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
  • -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
CSS透明度继承问题
但CSS的透明属性涉及到一个继承问题,当为父级元素设置透明度后,子元素将自动继承其透明度,比如本站的一个效果:
即使你又为子元素指定透明度为1也是无效的。
对于子元素是文字的情况,我的解决方法一般是如果多少还能够看清,就不管。另一个折衷的方法是,为文本子元素指定一个相对更深的颜色。也就是说,当子元素继承透明度后,所得到的文本颜色正好就是你想要的。前提是,这个颜色还有加深的可能,和需要详细的计算颜色和透明度的值。
还有“取消透明度继承”的说法,这个说法是不太准确的,据我个人所知,没有任何取消透明度继承的方法。只能说,当想要实现“多个元素覆盖,只让指定的元素透明”时,可以使用的一些Hack。
搜了一下,找到一个不错的实现这种效果的方法 – 一个关于透明继承度的问题,有兴趣的朋友可以看看。原理很简单,添加一个空元素作为透明层,和不想透明但是要实现覆盖效果的元素为同级元素。父级元素使用position:relative定位; 两个子元素使用position:absolute定位,实现覆盖。
回复

使用道具 举报

0

主题

3

帖子

3

积分

超级版主

Rank: 8Rank: 8

积分
3
10#
 楼主| 发表于 2014-12-22 18:22:47 | 只看该作者
本帖最后由 rain 于 2015-6-4 16:41 编辑

多行文本溢出显示省略号(…)全攻略

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

  • overflow: hidden;
  • text-overflow: ellipsis;
  • white-space: nowrap;

但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。


WebKit浏览器或移动端的页面

在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
常见结合属性:

  • display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  • -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
  • text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。
  • overflow : hidden;
  • text-overflow: ellipsis;
  • display: -webkit-box;
  • -webkit-line-clamp: 2;
  • -webkit-box-orient: vertical;

这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。

具体例子可以查看http://www.css88.com/webkit/-webkit-line-clamp/

跨浏览器兼容的方案

比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现;

例如:

  • p {
  •     position:relative;
  •     line-height:1.4em;
  •     /* 3 times the line-height to show 3 lines */
  •     height:4.2em;
  •     overflow:hidden;
  • }
  • p::after {
  •     content:"...";
  •     font-weight:bold;
  •     position:absolute;
  •     bottom:0;
  •     right:0;
  •     padding:0 20px 1px 45px;
  •     background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
  • }

这里注意几点:

  • height高度真好是line-height的3倍;
  • 结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;
  • IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用<span class="line-clamp">...</span>去模拟;
  • 要支持IE8,需要将::after替换成:after;
JavaScript 方案

用js也可以根据上面的思路去模拟,实现也很简单,推荐几个做类似工作的成熟小工具:

1.Clamp.js

下载及文档地址:https://github.com/josephschmitt/Clamp.js
使用也非常简单:

  • var module = document.getElementById("clamp-this-module");
  • $clamp(module, {clamp: 3});
2.jQuery插件-jQuery.dotdotdot

这个使用起来也很方便:

  • $(document).ready(function() {
  •         $("#wrapper").dotdotdot({
  •                 //        configuration goes here
  •         });
  • });

下载及详细文档地址:https://github.com/BeSite/jQuery.dotdotdothttp://dotdotdot.frebsite.nl/

参考:
http://www.cssmojo.com/line-clamp_for_non_webkit-based_browsers/#what-can-we-do-across-browsers
http://css-tricks.com/line-clampin/


回复

使用道具 举报

手机版|Archiver|叶子官网|杭州轩翼网络科技有限公司 ( 浙ICP备17027999号

GMT+8, 2024-11-22 12:19 , Processed in 0.342691 second(s), 23 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表