xhtml CSS

1、CSS是什么？

CSS指的是层叠样式表（Cascading Style Sheet）。CSS语言是一种样式设置规则，也是一种对网页文档添加样式的简单机制，用来控制网页内容的外观。

2、CSS基础语法

CSS 语法由三部分构成：选择器、属性和值：selector {property: value}， 例如：body {color: blue} 将body元素内的文字颜色定义为蓝色，其中body为选择器，color为属性，blue为其值。 再看一例就可大致知道CSS的书写规范了
1
2
3
4
5

p {
                 text-align: center;
                 color: black;
                 font-family: arial;
               }

3、在HTML文档中应用CSS

在HTML中常用以下三种方式定义CSS:Embeding(嵌入式)、Lingking(外部引用式或称引用式)Inline(内联式)。 *Embeding(嵌入式):使用HTML中的Style元素来在HTML网页内定义CSS样式。 例如：
1
2
3
4
5

<!--下面是内嵌式CSS样式定义
                   h1{color: red}
                 p {color: biue}
            -->
         </style>
*Lingking(外部引用式):顾名思义就是HTML文档与CSS样式分离，HTML文档本身不包含有CSS样式定义，通过使用很多种方法可以实现对CSS的外部引用。不过再HTML文档的开头部分要写一个关于样式表的申明语句，如下： <?xml-stylesheet type=“text/css” href=“mystyle.css” ?> …….. 外部引用方法主要有：使用@import指令，使用link指令，使用HTTP消息包头链接到样式表等方法。看两例：
1
2
3
4
5
6
7

<style type="text/css">             
         <!--下面两行代码的效果是相同的
           @import "mystyle.css";
           @import url("mystyle.css");
           -->
         </style>
         </head>
 
1
2

<link href="mystyle.css" rel="stylesheet" type="text/css"/>
       </head>
*Inline(内联式)：仅看一例


<a href="page.html">网站链接</a></p>

blockquote效果

代码

1
2
3
4
5
6
7

blockquote {
  margin:22px 40px;
  upadding:3px;
  color:#575757;
  padding: 0 50px;
  background: transparent url("images/blockquote.gif") no-repeat 0 0;
}

效果

blockquote.gif下载
查看原文

高度自适应：（IE6、7，Firefox3，Safari3、opera9.6）

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.clearfix:after { 
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
}
* html > body .clearfix { display: inline-block; width: 100%; }
.autoHeight{
height: auto !important;
_zoom:1;/*For IE6、7*/
}
用法：
<div class="autoHeight clearfix">高度自适应容器</div>

在IE中可能由于注释带来的文字重复问题时可以把注释改为：



<!--[if !IE]&gt;注释请写到这里，注释是英文的话就不会出现这种情况。&lt;![endif]-->

简单的浏览器兼容方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14

区别IE6与FF：
       background:orange;*background:blue;


区别IE6与IE7：
       background:green !important;background:blue;


区别IE7与FF：
       background:orange; *background:green;


区别FF，IE7，IE6：
       background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

于是大家还可以这样来区分IE6，IE7，firefox
background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

容器垂直居中

@如果高度不固定的话 直接padding:20px; 就可以了

@如果是高度高度的话 :(vertical-align属性只会对拥有valign特性的(X)HTML标签起作用)

在CSS中有一个display属性能够模拟

，所以我们可以使用这个属性来让
模拟
就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个
元素：

1
2
3
4
5
6
7
8
9
10
11

div#wrap {   
    height:400px;   
 display:table;   
}   
div#content {   
  vertical-align:middle;   
    display:table-cell;   
   border:1px solid #FF0099;   
 background-color:#FFCCFF;   
 width:760px;   
}

不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的
解决方案：

在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。例如，我们有下面这样一个(X)HTML代码段：

1
2
3
4
5
6

<div id="wrap">  
 <div id="subwrap">  
   <div id="content">
 </div>  
</div>  
</div>

如果我们对subwrap进行了绝对定位，那么content也会继承了这个这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100分比将不再是content原有的高度。例如，我们设定了subwrap的position为40，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80;那么，如果我们设定subwrap的top:50的话，我们必须使用100才能使content回到原来的位置上去，但是如果我们把content也设置50呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中

完美的解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

div#wrap {   
        display:table;   
        border:1px solid #FF0099;   
        background-color:#FFCCFF;   
        width:760px;   
        height:400px;   
        _position:relative;   
        overflow:hidden;   
}   
div#subwrap {   
        vertical-align:middle;   
        display:table-cell;   
        _position:absolute;   
        _top:50%;   
}   
div#content {   
        _position:relative;   
        _top:-50%;   
}

使用line-height 属性实现文字垂直居中（Vertical centering with line-height）
如果你的容器高度是固定的那就可以使用这个属性来实现。

1
2
3
4
5
6
7
8
9
10
11
12

div{
        height:150px;/*容器高度*/
        width:500px;
        background:#eee;        
        padding:0 10px;
}
div *{
        margin:0;
}
div p{
        line-height:150px;/*把line-height的高度设置成容器的高度*/
}

防止过大的内容，打破固定宽度的浮动布局

1
2
3

#main{
        overflow:hidden;
}

当过大的内容（即全图像）放置在固定宽度的浮动容器，它可能打破布局。为了防止出现这种情况，可以使用这个属性，这将隐藏的一部分内容，但至少你的布局结构将保持不变。

防止链接换行

1
2
3

a{
        white-space:nowrap;
}

始终显示firefox 滚动条

1
2
3

html{
        overflow:-moz-scrollbars-vertical;
}

Firefox的垂直滚动条默认是隐藏的。所以，当您浏览的网站，有不同的页面的高度而出现了横向转移。此代码将始终显示滚动条，防止转移。

页面元素水平居中



margin:0 auto;

去除文本输入框垂直滚动条（IE）

1
2
3

textarea{
        overflow:auto;
}

文本输入框垂直滚动条在ie下是默认显示的，如果你想去除的话，可以用这个属性

打印文档的时候强制使用分页符

1
2
3

h2{
        page-break-before:always;
}

这个属性可以控制打印文档时 哪里使用分页符

去除链接的虚线框

1
2
3

a:active, a:focus{
        outline:none;
}

Wiki首页 | 查看所有 | 编辑 | 输出到博客 | 历史版本