当前位置:首页 > 日记 > 正文

10个实用的CSS属性摘要

10个实用的CSS属性摘要
本文主要介绍了10个实用的CSS属性摘要,应注意IE.的支持。
1。概述

在调试CSS问题时,我经常将边界添加到指定的元素中,以准确地看到元素将发生什么,并帮助确定问题的根源。这通常是有效的,因为它可以使我更了解布局。但是,如果有块级元素,可能会出现一些错误。mdash;mdash;添加边框像素的任何块级元素可能会影响布局,这将2px增加这个元素的宽度。

轮廓的属性是一个完美的替代品,因为它可以使对象不影响文档流。但IE6和IE7不支持轮廓属性,因此它不能用在这两个浏览器调试。
2。继承(价值)

CSS的开发有很多例子:通过设置特定元素上的特定样式,告诉元素继承,添加其父元素的所有属性,这样就可以避免相当多的键盘输入。

这可以通过设置继承容易实现。这可能是有用的。例如,当重写背景属性,有很多在这个属性的文本(颜色、URL地址、位置等),而不是重写这些值,你可能就要考虑的因素有相同背景属性为母元素。一个继承的值可以解决所有mdash;mdash;这显然节省了键盘输入。

不幸的是,继承的值不在IE6和IE7支持(除了方向(文字方向)和可见性属性)。

有人说,代码是像女人的裙子mdash;mdash;越短越好,越多越好,看来,IE会阻碍我们的愿望的实现。
三.空单元格

此属性仅用于表和display属性设置为cell 表;元素。如果你添加内容到表动态,你可能会遇到一个单元格内容为空的情况。然后你不想隐藏这个空白单元格的边框、背景颜色和背景图片。

使用空细胞:hide你可以解决这个问题,它将完全隐藏的细胞可能有这种情况。

Internet Explorer不支持空单元格属性。
4。描述方

说到表的属性,这个属性是用来声明显示在桌边表的标题,它接受前,四值下,左,右。互联网探险家,不支持这个属性,和表的标题总是出现在表的顶部在IE6和IE7。
5。计数器增量/计数器复位

有序列表()非常方便,因为它可以帮你避免手工添加增量的麻烦,它允许你在不改变数字的情况下改变列表的列表。

CSS具有计数器增量和计数器重置属性,它允许您自动生成几乎所有HTML元素的递增数字,就像排序列表的效果一样。

下面举个例子:
CSS代码将内容复制到剪贴板。
H2 {补偿增量:标题;}
H2:在{内容:计数器(标头)之前;}

上面的样式将自动增加所有标签前面的数字,并允许您实现与H2标签上的李标记相同的效果。

但IE6,IE7和Safari(直到3。X版本)不支持这些特性。当然,IE6不支持:在伪元素。
6。最小高度

有时,一个网站需要一个固定的水平内容区域的设计和布局,否则特定的视觉效果就消失了。这可能是由于一个渐变背景,独特的下拉列表,或可能是因为PS酷发光效应,但在某些情况下,页面的内容要多更多的,和网页不扩大的预期。

此时,您需要使用MIN高度属性,因为它可以告诉浏览器在特定的块级元素上呈现最小的高度,而不管内容的实际高度是否达到最小高度。

要注意与最小高度使用的唯一的一件事是,它不支持IE6。我们都知道IE6(慢)退出了历史舞台,但一些客户仍然可以要求网站支持这该死的浏览器。

幸运的是,渲染高度和其他浏览器就呈现IE6值法;最小height以同样的方式,所以你只需要一个独立的样式表的IE6或黑客为该元素添加特定的高度,这个问题就解决了。

IE6还忽略了最小宽度、最大高度、最大宽度,但上述方法也可行的这些特性。
7:悬停

从技术上讲,将只是一个伪类,但它不支持IE6(IE7和IE8支持):hover伪类允许你添加任何元素的鼠标的风格。这是非常有用的,可以避免的(至少在某种程度上)使用Javascript。

但如果你的网站需要完全支持IE6,尤其在IE6中国一手遮天的情况下,那么你必须考虑使用伪类的取消,除非相关标签具有属性,如标签;href。如果这种效应来实现的,它可能需要使用Javascript和额外的风格。
8。显示

显示通常设置为这三个值中的一个:块、内联和非Ldquo;其他值(IE)很少使用,这些值包括内联块、表、内联表和表单元格,这些值对于解决一些特殊的布局问题非常有用。

因此,IE虽然支持显示的这三个基本属性,但基本上不支持其他属性。

事实上,显示IE8的属性的支持是相当完整的。然而,对于内联块属性,IE6 / 7只支持自己的内联元素。
9。削减

这是一个非常有趣的CSS属性可以用在一个特殊的情况。这可能是不可预知的,动态生成的内容。简单来说,此属性允许你在一个特定的元素指定一个隐藏区mdash;mdash;也可以理解为,在绝对定位的元素,按照一定的设置为显示区域切割元素,超出该区域的内容将被隐藏。语法看起来像这样。
CSS代码将内容复制到剪贴板。
div.clipped {
填料:20px;
宽度:400px;
身高:400px;
剪辑:矩形(20px,300px,200px,100像素);
位置:绝对;
}

修剪只能用于一个元素是绝对定位,并只使用一个矩形区域。在括号数面积(的200px * 180px大小)是一个明显的区域,这是不可见的或切出的地区。

从技术上讲,剪辑属性由IE支持,但它只支持不带逗号的语法,如
CSS代码将内容复制到剪贴板。
div.clipped {
填料:20px;
宽度:400px;
身高:400px;
剪辑:矩形(20px 300px 200px 100像素);
位置:绝对;
}

以上的风格(在矩形圆括号)没有用逗号隔开,但可以运行在大多数的浏览器,但它可能无法验证通过CSS,因为语句不是用逗号隔开。
10:焦点

这是一个伪类,需要在这里提到的,因为所有的非IE浏览器都支持此属性。重点伪类允许你声明一个特定的风格,当一个网页元素成为键盘焦点(鼠标),应用此样式元素的动态。这是非常有用的表单元素,因为你可以添加一个边框框时,输入框被选中。

当输入框成为键盘焦点时,下面的样式添加一个红色边框:
CSS代码将内容复制到剪贴板。
输入:焦点{
边境:1px solid # F00;
}

相关文章

excel函数筛选与排序使用教程excel

excel函数筛选与排序使用教程excel

函数,排序,筛选,使用教程,电脑软件,Excel本身有一个非常方便的排序和过滤功能,下拉数据菜单可以对数据列表进行排序或过滤,通过排序或过滤,但也存在不足之处。首先,不管排序或过滤改变了原始列表的原始外观,尤其是当列表数据与其他工作表链接链…

过渡优化加载动画加载CSS3相关分析

过渡优化加载动画加载CSS3相关分析

加载,加载动画,相关分析,优化,电脑软件,本文主要介绍了动画的加载加载CSS3相关的优化转型,包括高度等相关参数的调试方法。 菊花一朵 现在,网络技术的不断发展,视图和数据呈现更提出的前端,而背景则是更多的数据处理。因此,我们经常看到这样的…

如何用单词造一批信的信封Word2007

如何用单词造一批信的信封Word2007

教程,如何用,单词,电脑软件,现在信封里已经很少用到了,但是用信封或信封来使用,而且时间会很大,所以不能自己制作信件和信封,并进行批量处理,下面,教你如何使用批量生产信件信封的单词。 操作步骤 1。首先,在Word菜单项中选择Mail选项。 2。在创建…

使用flexbox在CSS实现中央的一个例

使用flexbox在CSS实现中央的一个例

例子,电脑软件,flexbox,CSS,本文主要介绍了flexbox CSS实例实现的中心作用,并注意在IE浏览器的兼容性问题,需要的朋友可以参考一下。 CSS的未来发展方向是采用flexbox设计解决共同的问题,如垂直中心。请注意,flexbox不止一种方式,他也可以用来解…

如何更改QQ安全QQ手机安全

如何更改QQ安全QQ手机安全

手机安全,如何更改,电脑软件,QQ,手机被盗,手机号码改变,对于手机等将需要更换个人数据进行安全保护,使用QQ手机安全的情况也不例外,所以如何将手机安全替换为以下三个简单步骤,这样就可以方便地更换手机安全。 第一步:如果手机,手机安全令牌,安全问…

简单地绘制中国银行标志课程

简单地绘制中国银行标志课程

绘制,标志,课程,简单,电脑软件,本教程介绍给朋友,CDR,这是一个简单的方法来吸引中国的银行标志。这个教程很基础。非常适合初学者学习。 这是一个属于CDR CDR的新手,这是用来画中国银行标志教程。我刚刚联系了CDR,所以请转到一个更基本的教程。…

Javascript实现将文件保存到本地方法

Javascript实现将文件保存到本地方法

本地方法,文件保存,电脑软件,Javascript,下面是保存图片的例子,代码来自网络,希望能给你带来一些帮助,代码如下: 函数文件(imgurl) { VaR急求金苹果= window.open(imgurl, 为opop.document.readystate(!=完全;) { 如果(急求金苹果。文件。发生=完成)打破; …

简论跨与Div的区别

简论跨与Div的区别

区别,电脑软件,简论跨,Div,本文主要介绍了跨度与div的区别,这是一个很好的小伙伴学习CSS的文章,并回顾了他们的基本知识。 HTML只是提供内容的一种方式。大多数HTML标记都有它们的含义(标签P创建段落,H1标签创建标题等),但跨度和div标签在内容上…

感伤诗的审美个性签名伤感个性签名

感伤诗的审美个性签名伤感个性签名

个性签名,感伤,伤感,大全,电脑软件,诗意,深刻的含义,独特的兼容性,这篇文章带给你最具诗意和独特的个性特征,希望你喜欢它。 1、胭脂雪,埋没了谁2 最伤的不是感情,而是岁月。 3、目前的生活命运,同伴是永远hellip; 4。后悔踏上这条路,消失了我所有的…

CSS条件注释详细解决方案(根据不同

CSS条件注释详细解决方案(根据不同

解决方案,条件,浏览器,注释,加载,本文主要介绍了CSS条件注释(根据不同浏览器加载CSS)的详细说明。在这一阶段,这也是最方便的浏览器兼容性方法。你需要的朋友可以参考一下。 由于浏览器的不同版本,CSS中的某些元素的解释是不同的,并且不同的CSS…

如何筛选excel2010教程excel2010表

如何筛选excel2010教程excel2010表

教程,表数据,筛选,电脑软件,excel表中有大量的数据,哪些方法可以删除一些不需要的数据,只有我们需要的数据,这个小需求肯定不止一个!嗯,转入正题,说到消除心中的想法是直接的数据筛选功能在使用特定用途的介绍表excel2010筛选功能,如果你想摆脱不…

PS图象处理软件设计和生产的一个惊

PS图象处理软件设计和生产的一个惊

图象处理,沙漠,软件设计,惊心动魄,电影海报,在你为设计做准备之前,看看一些优秀的大脑充电设计。这有助于在脑海中创造更快的图片,学习他人的构图思想和设计技巧,并学到更多。 最终效果 第一,创造性思维分析: 两。意境概念分析: 1。首先,我们…