首页 css 正文

我要投稿

css 层-CSS2.0中最常用的18种方法

bendan520 css

2023-08-20 0 8,265 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

使用DivCSS进行网页布局时，经常会遇到CSS问题。往往无法很好的控制CSS，从而影响CSS的效率。

下面我们来分析总结一下相关方法，帮助你更轻松地使用CSS！

本文总结了自从使用CSS布局方法以来的所有方法和兼容的解决方案。我很高兴与您分享这些。我会重点解释一些菜鸟（包括我自己）容易犯的错误。如果你已经是 CSS 前辈，这种经验方法可能早就知道了。如果还有的话希望大家帮我补充一下。

1.使用css简写

使用缩写可以帮助减小 CSS 文件的大小，使它们更易于阅读。

其次，明确定义单位，除非该值为 0。

忘记定义规范的单位是 CSS 新手的一个常见错误。在 HTML 中你可以只写 width="100"，而在 CSS 中你必须给出一个精确的单位，例如：width:100pxwidth:100em。单位可以不定义，只有两个例外：0 值。另外，其他数值必须跟在单位后面，注意，数值和单位之间不要加空格。

三、区分大小写

在 XHTML 中使用 CSS 时，CSS 中定义的元素名称区分大小写。为了防止这些错误，建议所有定义名称都大写。

class和id的值在HTML和XHTML中也是区分大小写的。如果必须混合大小写书写，请仔细确认CSS中的定义与XHTML中的标签一致。

4、取消class、id前的元素限制

当您将类或id专用于元素定义时，可以省略后续的元素定义，因为ID在页面中是唯一的，并且该类可以在页面中多次使用。对你来说限制一个元素是没有意义的。例如：

示例代码[]div#content{/*声明*/}

fieldset.details{/*声明*/}

可以写成

示例代码[]#content{/*声明*/}

.details{/*声明*/}

这节省了一些字节。

五、默认值

一般情况下padding默认值为0，background-color默认值为透明。并且默认值在不同的浏览器中可能会有所不同。如果害怕冲突，可以在样式表开头将所有元素的 margin 和 padding 值定义为 0，如下所示：

示例代码[]*{

保证金：0；

填充：0；

6. 无需重复定义可持续价值观

CSS中，子元素手动继承父元素的属性值css 层，比如颜色、字体等，这些属性值已经在父元素中定义了，可以直接在子元素中继承，无需重复定义。请注意，浏览器可能会使用某些默认值覆盖您的定义。

7、最近优先原则

如果同一个元素有多个定义，则最接近（最小级别）的定义优先，例如有一段代码

更新：Loremip sum dolorset

在CSS文件中，您已经定义了元素p，并定义了一个class =“update”

示例代码[]p{

保证金：1em0；

字体大小：1em；

颜色：#333；

。更新{

字体粗细：粗体；

颜色：#600；

在这两个定义中，将使用 class="update"，因为 class 比 p 更接近。您可以参考 W3C 的“计算选择器的特异性”来了解更多信息。

8. 多个类定义

一个标签可以同时定义多个类。例如：我们先定义两个样式，第一个样式的背景是#666；第二种样式有 10px 边框。

示例代码[].one{width:200px;background:#666;}

.两个{边框：10pxsolid#F00;}

在页面代码中我们可以这样调用

最终的显示效果是这个div既有#666背景，又有10px边框。是的，是可以的，你可以尝试一下。

九、使用后代选择器（descendantselectors）

CSS初学者不知道使用子选择器是阻碍他们效率的事情之一。子选择器可以帮助您保存大量的类定义。我们看下面的代码：

示例代码[]

此代码的 CSS 定义是：

示例代码[]div#subnavul{/*Somestyling*/}

div#subnavulli.subnavitem{/*一些样式*/}

div#subnavulli.subnavitema.subnavitem{/*一些样式*/}

div#subnavulli.subnavitemselected{/*一些样式*/}

div#subnavulli.subnavitemselecteda.subnavitemselected{/*一些样式*/}

您可以将之前的代码替换为以下代码

示例代码[]

样式定义为：

示例代码[]#subnav{/*Somestyling*/}

#subnavli{/*一些造型*/}

#subnava{/*一些造型*/}

#subnav.sel{/*一些样式*/}

#subnav.sela{/*一些样式*/}

使用子选择器可以使您的代码和 CSS 更加简洁且易于阅读。

10.背景图片路径无需添加破折号

为了节省字节，我建议不要在背景图像路径中添加破折号，因为破折号不是必需的。例如：

背景:url("images/***.gif")#333;

可以写成

背景:url(images/***.gif)#333;

如果添加破折号，则会导致一些浏览器错误。

十一、组选择器（Groupselectors）

当某些元素类型、类或id具有共同属性时，可以使用组选择器来防止重复定义。这可以节省相当多的字节。

例如：要定义所有标题的字体、颜色和边距，可以这样写：

示例代码[]h1,h2,h3,h4,h5,h6{

字体系列：“Lucida Grande”、Lucida、Arial、Helvetica、sans-serif；

颜色：#333；

保证金：1em0；

如果某些元素在使用过程中需要定义独立的样式，可以添加新的定义来覆盖旧的，例如：

示例代码[]h1{font-size:2em;}

h2{字体大小：1.6em;}

12. 以正确的顺序指定链接样式

当你使用CSS定义链接的多种状态样式时，必须注意它们的书写顺序。正确的顺序是：

：链接：访问过：悬停：活动。提取的第一个字母是“LVHA”，您可以将其记为“LoVeHAte”（喜欢到讨厌）。为什么这么定义，可以参考Eric Meyer的《LinkSpecificity》。

如果你的用户需要使用鼠标来控制，并且需要知道当前链接的焦点，你还可以定义 :focus 属性。 :focus 属性的效果还取决于您编写它的位置。如果想让获得焦点的元素显示:hover的效果，可以在:hover后面写:focus; 如果你想让 focus 的效果替代 :hover 的效果，可以将 :focus 设置在 :hover 旁边。

十三、清浮

一个很常见的CSS问题是，当使用浮动进行定位时，下层被浮动层覆盖，或者层中嵌套的子层超出了内层的范围。

一般的解决方案是在浮动层前面添加一个额外的元素，例如div或br，并将其样式定义为clear:both。这个方法有点牵强，幸好还有另外一个好办法解决，看这篇文章《HowToClearFloatsWithoutStructuralMarkup》

前两种方法可以解决浮出的问题，那么如果确实需要清除图层或者图层中的对象该怎么办呢？一种简单的方法是使用溢出属性，该属性最初发表于“SimpleClearingofFloats”，并在“Clearance”和“Supersimpleclearingfloats”中广泛讨论。

前面的清除方法更适合你。这要根据具体情况而定，这里就不多说了。另外，一些优秀的文章已经明确了float的应用。我建议您阅读：“Floatutorial”、“ContainingFloats”和“FloatLayouts”

十四、水平居中（居中）

这是一个简单的方法，值得再说一遍，因为我看到太多菜鸟问题问这个：CSS如何垂直居中？您需要定义元素的宽度，并定义垂直边距。如果您的布局包含在图层（容器）中，您可以将其定义为垂直居中：

示例代码[]#wrap{

宽度：760px； /* 改变层的厚度 */

保证金：0自动；

然而，IE5/Win无法正确显示该定义。我们使用一个特别有用的方法来解决它：使用text-align属性。像这样：

示例代码[]正文{

文本对齐：居中；

＃裹{

宽度：760px； /* 改变层的厚度 */

保证金：0自动；

文本对齐：左对齐；

文本对齐：居中；第一个body的规则定义了IE5/Win中body的所有元素居中（其他浏览器只将文本居中），第二个text-align:left; 是将#warp 中的文本左对齐。

15.导入和隐藏CSS

由于较旧的浏览器不支持 CSS，因此常见的做法是使用 @import 方法来隐藏 CSS。例如：

@importurl("main.css");

不过这个方法对IE4不起作用，让我一时间很头晕。然后我用了这样的写法：

@导入“main.css”；

这样在IE4中也可以隐藏CSS了，呵呵，节省了5个字节。如果想了解@import句型的具体解释，可以看这里“centricle'scssfilterchart”

16.IE优化

有时候，你需要为IE浏览器的bug定义一些特殊的规则css 层，CSS方法（hacks）太多了，我只使用其中两个，不管Google是否在正式发布的IE7测试版中更好地支持CSS，这两个方法是最安全的。

1、标注方式

示例代码[](a)要在IE中隐藏CSS定义，可以使用子选择器(childselector)：

html>正文{

/*定义内容*/

(b) 下面的文字只能被IE浏览器看懂（其他浏览器隐藏）

*htmlp{

/*声明*/

/**/

*htmlp{

声明

/**/

2. 条件注释的方式

另一种方式，我认为比CSSHacks更容易测试，是使用Google的私有属性条件注释（conditional comments）。这样就可以单独为IE定义一些样式，而不影响主样式表的定义。像这样：

示例代码[]

17、调试方法：层有多大？

当调试 CSS 时出现错误时，你必须像排版工人一样逐行分析 CSS 代码。我通常在有问题的图层上定义背景颜色，这样图层占用的空间就很明显了。有人建议使用border，这通常是可以的，但问题是有时border会降低元素的规格，border-top和boeder-bottom会破坏水平边距的值，所以使用background更安全。

另一个经常出现问题的属性是轮廓。轮廓看起来像 boeder，但不影响元素的大小或位置。只有少数浏览器支持 Outline 属性，据我所知，只有 Safari、OmniWeb 和 Opera。

十八、CSS代码编写风格

在编写CSS代码时，每个人对于缩进、换行、空格都有自己的书写习惯。经过不断的练习，我决定采用以下的写作风格：

示例代码[]selector1,

选择器2 {

适当的价值;

使用联合定义时，我通常将每个选择器写在自己的行上，以便很容易在 CSS 文件中找到它们。在最后一个选择器和大括号 { 之间添加一个空格，将每个定义写在单独的行上，并将分号直接放在属性值后面，而不添加空格。

我习惯在每个属性值前面加分号，虽然规则允许最后一个属性值不需要写分号，而且如果要添加新的样式，很容易忘记加分号而导致错误，所以你还是添加Better。

最后，右花括号 } 自己写在一行上。

空格和换行符将有助于阅读。

实现css3动画的治疗效果： 1、利用“@keyframes”规则和animation属性实现动画的治疗效果； 2、利用transition属性实现动画效果。句型为“元素{transition：属性名称时间速率曲线延迟}”。

本教程的运行环境：windows10系统，CSS3&&HTML5版本，DellG3笔记本。

CSS3动画的效果是用哪些来实现的

1. 它们是什么？

CSS 动画 (CSSAnimations) 是为级联样式表提出的一个模块，允许使用 CSS 对可扩展标记语言 (XML) 元素进行动画处理

指元素逐渐从一种风格过渡到另一种风格的过程

常见的动画效果有很多css3效果，比如平移、旋转、缩放等，而复杂动画则是多个简单动画的组合

CSS通过以下方式实现动画：

过渡实现渐变动画

动画实现自定义动画

2. 实现方法

过渡实现渐变动画

过渡的性质如下：

Timing-function的取值如下：

数值描述

注意：并不是所有的属性都可以使用transition，比如display:nonedisplay:block

举个反例，连接键盘时动画的效果发生变化



 
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}




请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。
注释：本例在 Internet Explorer 中无效。

输出结果：

动画实现自定义动画

动画是8个属性的缩写，分别如下：

CSS动画只需要定义一些关键帧，浏览器会根据计时函数估计其余的帧。

通过@keyframes定义关键帧

因此，如果我们想让元素旋转一圈，只需要定义开始和结束两帧即可：

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

from表示第一帧，to表示结束帧

寿命也可以使用比率来绘制

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}