CSS笔记一

最新推荐文章于 2024-11-03 11:31:17 发布

easylife_el

最新推荐文章于 2024-11-03 11:31:17 发布

阅读量98

点赞数

分类专栏： CSS设计文章标签： CSS IE 浏览器 Firefox HTML

CSS设计专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、    CSS语法
CSS的语法结构为： selector {property:value}
selector（选择符）：表示这个样式将应用与HTML中的哪些对象。应用的对象可以是一个标签，也可以是指定了id或者class属性的特定标签。
property（属性）：对于每个HTML标签，CSS都提供了许多样式属性，用于控制标签的颜色、大小、定位等。
value（值）：属性值。

二、    CSS选择符
对于选择符，CSS提供了多种支持。
1．    类型选择符
body {margin:0px}
使用了HTML中已经定义的标签名的选择符称做为类型选择符，就叫类型选择符。如上面的body{…}，使用div、table等也都是类型选择符，类型选择符将用于控制整个HTML文档中所有对应的标签对象。

2．    id选择符
#header{color:red;width:100px}
如上所示，id选择符使用“#”标识，后跟标签的id属性值。在HTML文档中，每个标签的id属性值必须是惟一的，所以通过id选择符就可以对标签进行精确定位，将CSS样式应用于指定的某个标签对象上。如有一个id为header的div标签：
<div id=”header”>This is header</div>
那么上面的#header选择符将使这个div的宽度为100px，且div中的字体颜色为红色。

3．    class选择符
.p1{color:red}
id选择符用于惟一定位一个标签对象，那么class选择符则用于定位一组标签对象。Class选择符以“.”标识。在HTML文档中，每个标签都可以指定一个class属性，多个标签的class属性之间可以相同，拥有相同class属性的标签将被应用相同的CSS样式。如
<p class=”p1”></p>
<div class=”p1”></div>
上面的p和div标签中的字体都将会是红色。

4．    类型指定式选择符
div#header {color:red}
div.redfont {color:red}
如果即想要对每种标签采用样式，又要使用id或class选择符，那么可以象上面那样使用样式使用如下形式，分别标识对id为header的div和class为redfont的div标签施用样式。

5．    群组选择符
div, span, p {font-size:12px}
如果多个标签之间的样式需要使用相同的样式，可以象上面那样使用群组选择符，多个选择符之间用“,”隔开就可以了，这样可以减少代码量，而且可以改善CSS代码结构。象上面那样把相同的属性写在一起，然后对于各异的属性可以再单独定义。

6．    包含选择器
div span{margin:0px; color:red}
如果只想对某个对象中的子对象使用样式，那么就可以象上面那样使用包含选择器。象上面的例子，只有在div下span中的字体的才会是红色的：
<div><p><span>red</span></p></div><span>black</span>

7．    组合选择符
对于上面所说的选择符，可以任意组合，如：
h1 .p1{}
表示h1下所有class属性为p1的标签（注意哦，h1和.p1之间有无空格差别很大的哦，没有空格可是表示class为p1的ht标签哦）。
#header .p1{}
表示id为header下的所有class属性为p1的标签。

8．    通配选择符
*{font-size:12px}
使用“*”，表示将样式应用于所有标签对象上。

9．    伪类和伪对象
伪类和伪对象是CSS的一种特殊扩展，由CSS自动支持，名称不能由用户自定义，使用时只能按标准格式进行使用。如：
a:hover {color:red}
上面的例子中hover就是一个伪类。目前比较常用伪类是用于控制a标签的几个伪类：
:link-------------->表示a链接未被访问时的样式
:hover-------------->表示鼠标移动到标签的样式
:active-------------->表示点击和点击释放之间的样式
:visited-------------->表示a链接被访问后的样式

三、    CSS布局
传统的表格布局是通过控制表格中的单元格的位置来达到界面排版的效果的，而CSS布局则是通过采用合适的对象+CSS控制来时实现界面的排版布局，后者的优势在于界面中只需要在合适的容器对象（如div）中放入内容，容器对象只是用于标识一个区域，而具体如何展示则完全由CSS来进行控制，从而达到内容与表现的分离。下面将以DIV+CSS来介绍几种经典布局。
1.    一列固定宽度
在HTML中添加如下代码：
<div id="layout">一列固定宽度</div>
由于为div指定了id属性，所以我们可以用id选择符为这个div设置样式：
    #layout{
        background-color:#cccccc;
        border:1px solid #333333;
        width:300px;
        height:200px;
}
上面的CSS为div设置了#cccccc的背景色，并添加了1px solid #333333的边框，最后将div设置成了宽300px、高200px。

2.    一列自适应宽度
在上面的基础上，我们只要对width属性进行修改，就可以将div修改成宽度根据浏览器窗口自动调整大小的效果：
#layout{
        background-color:#cccccc;
        border:1px solid #333333;
        width:80%;
        height:200px;
}
这样，div的宽度将是浏览器窗口宽度的80%。

3.    一列固定宽度居中
网上有很多网站是采用页面整体居中的布局方式，对于FireFox，我们可以在一列固定宽度的基础上稍作修改就可以达到这种效果：
#layout{
        background-color:#cccccc;
        border:1px solid #333333;
        width:300px;
        height:200px;
        margin:0px auto;
}
margin用于设置标签对象与相邻的其它标签对象之间的外边距，如果margin属性被指定了两个值，则第一个值用于控制标签对象的上下外边距，而第二个值则用于控制标签对象的左右外边距。除了能为边距指定数值外，还可以为其指定auto值，表示由浏览器自动设置边距，浏览器会将左右边距设置为相等，从而达到居中的效果。

    但在IE浏览器不支持margin属性的auto值，为其了达到同样的效果，我们可以将body的text-align属性设置为center来达到这个效果，但这样的话，div中的内容也同时被居中了，这时我们可以使用css hack来规避：
    <body>
        <div id="layout">一列固定宽度</div>
    </body>

    body{*text-align:center;}
    #layout{
        background-color:#cccccc;
        border:1px solid #333333;
        width:300px;
        height:200px;
        margin:0px auto;
        *text-align:left;
}

上面就是通过*text-align这个css hack来达到居中效果的。在CSS中，IE能够识别以*打头的属性，而FireFox不能识别（但不会出错），所以在IE浏览器中body和#layout中的text-align属性能生效，而在FireFox则被忽略。

4.    两列固定宽度
在HTML中添加如下代码：
<div id="left">左列</div>
<div id="right">右列</div>
如果不加如何样式控制，那么两个div将呈上下排列，这是因为DIV默认是块状对象，所以两个div的内容成两行显示。

在HTML中，对象的显示方式有以下两种方式：
block（块状对象）：块状对象指当前对象显示为一个方块，它将占据整行，它后面的对象将在下一行显示。
in-line（内联对象）：与块状对象相反，内联对象运行后面的对象与它在同一行显示。

接下来我们为这两个div指定样式：
    #left {
        background-color:#cccccc;
        border:1px solid #333333;
        width:300px;
        height:200px;
        float:left;
    }
    #right {
        background-color:#cccccc;
        border:1px solid #333333;
        width:300px;
        height:200px;
        float:left;
    }
这样就达到了我们的预期效果，两个div左右排列了。这里是通过为div指定了float属性来到达我们的目的的，float属性用于控制对象的浮动，很多布局都是通过float来实现的。

float属性用于定义对象在哪个方向上浮动，float有三个取值：none、left、right。取值none时，对象不浮动。取值left时对象向左浮动，这时它后面的对象将流到它的右边。取值right时对象向右浮动，这时它后面的对象将流到它的左边。使用float后，能够改变页面中对象的流动顺序（从左到右，当某个对象之前的对象已经占据了一行的宽度，则该元素自动流到下一行）。

上面的例子中，如果只给left指定float:left，而不给right指定float:left，在IE中right还是会显示在left的右边，但在FF中就不行了，right不仅没有显示在left的右边，而且连background-color、border、width等属性都没有生效，奇怪的呀^_^。
    上面的例子中，仅通过CSS我们就实现了将两个div的左右排列，如果后面有需求说需要将原本显示在左边的left显示到右边，而原本显示在右边的right显示到左边，这只需要修改下CSS就可以实现：
    #left {
        background-color:#cccccc;
        border:1px solid #333333;
        width:300px;
        height:200px;
        float:right;
    }
    #right {
        background-color:#cccccc;
        border:1px solid #333333;
        width:300px;
        height:200px;
        float:right;
    }
瞧，原本的HTML代码不用做任何修改，仅仅改下CSS样式就修改了布局的方式，这就是CSS布局的威力。
    为了实现两列的左右排列，上面的CSS将left和right的float都设置成相同的left或者right，两者缺省是紧贴在一起的，这可以通过设置两者之间的margin属性来控制，比如为第一个例子中的left设置margin-right:5px或者right设置margin-left:5px。除了将left和right的float设置为相同值来实现左右排列，也可以象下面那样设置成不同的值：
    #left {
        background-color:#cccccc;
        border:1px solid #333333;
        width:300px;
        height:200px;
        float:left;
    }
    #right {
        background-color:#cccccc;
        border:1px solid #333333;
        width:300px;
        height:200px;
        float:right;
    }
只不过这样，缺省的情况下两者之间有很大的间距，这是由于两者的宽度总和小于浏览器的宽度导致的，这个可以通过增大两个div的width来缩小两者间的间距，也可以通过指定左右的margin来设置与浏览器左右边界的间距来实现。

5.    两列宽度自适应
实现两列自适应宽度，只需要在上面的两列固定宽度中修改下width的属性值，采用百分比的形式，就可以达到左右两个div的宽度随着浏览器窗口大小的改变而改变的效果了：
#left {
        background-color:#cccccc;
        border:1px solid #333333;
        width:30%;
        height:200px;
        float:left;
    }
    #right {
        background-color:#cccccc;
        border:1px solid #333333;
        width:60%;
        height:200px;
        float:left;
    }

注意，上面的right的width属性没有70%，而使用60%，是因为一个对象的实际宽度不仅仅由width属性决定，还包括border的宽度、内间距（padding）、外间距（margin），由于上面为div设定了border的宽度为1px，如果将right的width设置为70%，将会使得两个div的总宽度超过100%，导致right换行显示。关于宽度的计算涉及CSS布局中的盒模型问题，这会在后面介绍。

6.    两列右列宽度自适应
两列宽度自适应的例子中，为每个div都指定了百分比的宽度就实现了宽度的自适应，要实现右列宽度自适应，只需要为左列指定固定宽度，然后将right的float和width属性去掉就可以达到目的了：
    #left {
        background-color:#cccccc;
        border:1px solid #333333;
        width:300px;
        height:200px;
        float:left;
    }
    #right {
        background-color:#cccccc;
        border:1px solid #333333;
        height:200px;
    }

在两列固定宽度中，假如不给right指定float属性，就会出现#right没有施加到right上，且right是换行显示的现象；而这里为了实现right宽度自适应，就必须去掉float属性，否则一旦加上float属性，right的宽度就会和其中的内容的实际宽度保持一致，虽然它显示在右边，奇怪的呀^_^。

7.    两列固定宽度居中
结合前面讲过的一列固定宽度居中、两列固定宽度，这个可以通过div的嵌套来实现：
    <div id="layout">
        <div id="left">左列</div>
        <div id="right">右列</div>
    </div>

    body {
        *text-align:center;
    }
    #layout {
        width:604px;
        height:202px;
        margin:0px auto;
        *text-align:left;
    }
    #left {
        background-color:#cccccc;
        border:1px solid #333333;
        width:300px;
        height:200px;
        float:left;
    }
    #right {
        background-color:#cccccc;
        border:1px solid #333333;
        width:300px;
        height:200px;
        float:left;
    }
由于left和right都有指定了300px的width和1px的border，两者总的宽度为300 * 2 + 2 * 2（每个div的左右边框之和为2）：604，为了能够让left和right在一行显示，layout的width只能大于或等于为604，否则在FF中right将换行显示，而在IE中可能会换行，也可能不换行，取决于width具体有多小。

8.    左右两列固定宽度，中间列宽度自适应
先在界面中放置三个div：
<div id="left">左列</div>
<div id="center">中间</div>
<div id="right">右列</div>
为了实现这种效果，这里需要引用一个新的CSS属性：position。position也是CSS中用于界面布局的属性之一，它将元素放置到一个静态的、相对的、绝对的、或者固定的位置。任何元素都可以使用position属性进行定位。position有四种取值：
1）    static（静态的）：缺省情况下所有元素都是使用static进行定位，按照页面流进行定位。
2）    relative（相对的）：元素将相对于其在页面流中的正常位置进行偏移。
3）    absolute（绝对的）：元素将相对于其父元素的位置进行偏移。
4）    fix（固定的）：元素将位于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会停留在指定的位置。
元素使用position进行定位时，具体的位置可以通过top、right、bottom、left四个属性进行指定。
    在这个例子中，不管浏览器的大小如何变化，左右两列将一直固定在两角，这可以通过将绝对定位来实现：
    #left {
        background-color:#cccccc;
        border:1px solid #333333;
        width:100px;
        height:200px;
        position:absolute;
        left:0px;
        top:0px;
    }
    #right {
        background-color:#cccccc;
        border:1px solid #333333;
        width:100px;
        height:200px;
        position:absolute;
        right:0px;
        top:0px;
    }
为了实现中间列跨度自适应，只要使它始终和左右两列保持列宽的距离就可以了：
#center {
        background-color:#cccccc;
        border:1px solid #333333;
        height:200px;
        margin-left:102px;
        margin-right:102px;
    }

这里通过指定margin-left和margin-right指定了center与浏览器左右边框的间距来达到center真正处于中间的效果，margin-left和margin-right指定的像素应该大于等于左右div的真实宽度，否则就会出现center覆盖了左边div内容的现象。虽然center已经达到了居中，且能宽度自适应，但还有点小缺陷：没有置顶。这是因为body有缺省的margin值导致的，left、和right使用了绝对定位忽略了body的margin属性，而center还是按照正常的页面流进行定位，会受到body的margin属性的影响，解决方式是去掉body的margin属性：
    body{
        margin:0px;
    }

9.
四、    Position
正如前面所说的，position属性用于将元素放置到一个静态的、相对的、绝对的、或者固定的位置。它有四种取值：static、relative、absolute和fixed。缺省情况下，所有的元素都是static的，即按照元素在页面流中的位置正常显示，这里不再详述，下面讲讲剩下的三个取值。
1.    relative
使用relative（相对）定位，元素将相对于其在页面流中的正常位置进行偏移。
    <h1>Title</h1>
    <div id="block">
        A Block
    </div>
    <p>
        As it was mentioned before [index.html#DecideWhatToChange], the list of zones to be reRendered can be specified as EL expression. But there is a question that must be specified more exactly.
    </p>
上面的HTML代码，在不应用任何CSS样式的情况下效果如下：

现在让block进行相对定位：
    #block {
        background-color:#cccccc;
        border:1px solid #333333;
        width:100px;
        height:50px;
        position:relative;
        left:200px;
        top:100px;
    }
效果如下，block相对于原来的位置向左偏移了200px，向下偏移了100px，但不会影响其它元素在页面流中的定位与展示，h1和p之间有一块空白，那是block在static时应该占据的空间。

2.    absolute
使用absolute定位，元素将相对于其父元素的位置进行偏移。看看下面的例子：
    <div id="layout">
     <h1>Title</h1>
     <div id="block">
     A Block
     </div>
     <p>As it was mentioned before [index.html#DecideWhatToChange], the list of zones to be reRendered can
be specified as EL expression. But there is a question that must be specified more exactly.
</p>
     </div>
    #layout{
        background-color:#cccccc;
        border:1px solid #333333;
        margin:20px 100px 0px 100px;
        height:250px;
    }
    #block {
        background-color:#cccccc;
        border:1px solid #333333;
        width:100px;
        height:50px;
    }
为对block进行定位时，缺省显示如下：

对block使用absolute定位：
    #block {
        background-color:#cccccc;
        border:1px solid #333333;
        width:100px;
        height:50px;
        position:absolute;
        left:400px;
        top:200px;
    }
block这时相对于layout发生了偏移，而p紧接着定位到了h1后面，不会存在用relative定位时出现的空白，因为这时block已经脱离了正常的页面流。

3.    fixed
使用fixed定位，元素将位于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会停留在指定的位置。，目前FF支持该取值，而IE好象到了IE7才能够支持。
    <div id="layout">
     <h1>Title</h1>
     <p>As it was mentioned before [index.html#DecideWhatToChange], the list of zones to be reRendered can
be specified as EL expression. But there is a question that must be specified more exactly.</p>
     </div>
     <div id="block">
     A Block
     </div>
    #layout{
        background-color:#cccccc;
        border:1px solid #333333;
        height:2000px;
    }
    #block {
        background-color:#cccccc;
        border:1px solid #333333;
        width:100px;
        height:50px;
        position:fixed;
        left:400px;
        top:200px;
    }
由于block使用了fixed定位，这时虽然界面上有滚动条，block并不会随着滚动条的滚动而滚动，而是一直停留在(400,200)这个坐标上。

五、    clear
前面讲过，使用float属性可以使对象进行浮动，但是由于浮动的对象已经脱离了正常的页面流，所以并不占据页面流中的空间，所以会出现包含浮动对象的对象没有包住浮动对象的情况，看看下面的例子：
    <div id="layout">
     <h1>Title</h1>
     <div id="block">
     A Block
     </div>
     <p>As it was mentioned before [index.html#DecideWhatToChange], the list of zones to be reRendered can
be specified as EL expression. But there is a question that must be specified more exactly.</p>
     </div>

    #layout{
        background-color:#cccccc;
        border:1px solid #333333;
    }
    #block {
        background-color:#cccccc;
        border:1px solid #333333;
        width:100px;
        height:150px;
        margin:0px 5px;
        float:left;
    }
block向左浮动，所以p移到了block的右边，由于block浮动，所以包住它的layout认为其高度只要能够包住p就可以了，所以就出现了block“越界”的现象。

解决这个问题需要借助clear属性，clear用于设置一个元素的侧面是否允许其他的浮动元素，取值：
1.    left：对元素的左边进行清理，该元素将会在左浮动对象后面换行显示；
2.    right：对元素的右边进行清理，该该元素将会在右浮动对象后面换行显示；
3.    both：对左右两边进行清理；
4.    none：不清理；
注意，clear只能对页面流中处在它前面的浮动对象进行清理，不能清理页面流中位于它后面的浮动对象。对于上面的例子，我们可以在p后面加上一个空内容的div，然后使用它来对block进行清理：
    <div id="layout">
     <h1>Title</h1>
     <div id="block">
     A Block
     </div>
     <p>As it was mentioned before [index.html#DecideWhatToChange], the list of zones to be reRendered can
be specified as EL expression. But there is a question that must be specified more exactly.</p>
     <div id="clear"></div>
     </div>

    #layout{
        background-color:#cccccc;
        border:1px solid #333333;
    }
    #block {
        background-color:#cccccc;
        border:1px solid #333333;
        width:100px;
        height:150px;
        margin:0px 5px;
        float:left;
    }
    #clear {
        clear:left;
    }

在上面的解决方案中，我们为了达到清理的效果，增加了一个空内容的div，这好象违背了内容与表现分离的原则，不过在WEB设计中很多时候都得做这么些无奈之举，在实际设计过程中，如果允许的话，最好尽量利用现成的元素来执行清理操作，而不要随意使用空内容的对象达到这个效果，因为这样的内容比较让人费解。
六、