CSS之标签导致我的字体全变成斜体了

这几天在调整UCHOME的SPACE的页面,无意中调了一个东西,导致页面很多地方成了斜体。我用FONT-STYLE进行强制限制也不行,搞了我很长时间。到最后找到规律了,发现所有斜体的地方都是<em></em>标签中,难道是这个问题。
网上查了资料才知道,在HTML中,EM强调文本,通常用斜体显示。这个我还真没注意过。
在我的这个情况下,主要的作用是用来调用CLASS做显示的。解决办法就是,不想用斜体来显示的话,把EM改成SPAN。不过这样的话,我的工作量有点大,于是我在CSS中对这个标签做了重新定义,呵呵用的就是FONT-STYLE,这下起作用了。
具体这么些的,大家来COPY吧
em{font-style:normal}


如何用css把页面变灰,寄托我们的哀思

方法有很多种,这里做个总结
第一:
最快速度把自己网站变灰,只支持IE~
在CSS文件或style中加入
*{filter:gray; color:gray;}
第二:
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
这个比 filter:gray; 好,可解决与 position: relative; 的冲突,加在 css 第一行即可
第三:
指定flash层样式,加入:*{filter: Gray;}
有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的 和 之间插入:


什么是css框架

框架就是一个你可以用于你的网站项目的基本的概念上的结构体。
css框架通常只是一些css文件的集合,这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如:

typography.css?基本排版规则
grid.css?基于网格的布局
layout.css?通常的布局
form.css?for 表单样式
general.css?更多通用规则

下面一起来了解一下各种不同的CSS框架吧:
1.960 Grid System

960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果,基于960像素的页面宽度。它有两种类型,12和16列,他们可以独立使用或是协同使用。
2.WYMstyle CSS Framework

这个项目的目的是提供一组经过良好测试的模块化的CSS文件,能够用于网站的快速设计。WYMstyle是一组CSS文件,你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块,WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。
3.YAML CSS Framework

Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。
4.YUI Grids CSS

基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。 这个4KB的文件可提供超过1000中页面布局组合。
有国外作者曾指出YUI Grids CSS中最值得学习的网格布局CSS写法:

负Margin技术
使用度量单位em
清除布局的浮动

5.Logicss?Framework

Logic CSS 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset 文件或是用“*”),排版支持文本字体大小调整(使用EMs) 和垂直居中,符合可定义的灵活的布局网格利用css代码生成工具。
6.CleverCSS

CleverCSS是一个用于css的受Python启发的小型的标记语言,它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比 CSS2整洁和强大。与CSS最明显的区别是句法:它基于缩进而且不单调。虽然这显然违反了Python的规则,它依然是组织样式的很好的主意。
7.Elements CSS Frameworks

Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架,它有自己的项目工作流。它拥有你完成项目所需的所有东西,这也让你和你的浏览者感到愉悦。阅读?概述了解更多。
8.Blueprint CSS

Blueprint?是一个?CSS 框架,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,BP由一个易用的网格、合理的布局和一个打印样式。
9.Schema Web Design Framework

Schema是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 与为每一个新的网站项目从零开始创建HTMl/CSS不同,Schema提供必要的基础来开始并立马让你的设计跑起来。
10.Emastic CSS Framework

Emastic?是一个CSS框架,它有连续的任务:探索陌生的新世界,寻找新生活和新的网站空间,大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化,在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。
11.That Standards Guy CSS Framework

* 只能调用单个样式文件
* 主样式需要取得CSS认证(WCAG 1.0);
* [...]


css文件后面为什么有参数

客户端会缓存这些css或js文件,因此每次升级了js或css文件后,改变版本号,客户端浏览器就会重新下载新的js或css文件
举例来说:

可以看成是css的一个版本号,如果css改动过,担心浏览器本地css文件没有及时更新而导致页面没有出现相应效果时,就可以通过修改这个?后面的号码来达到使浏览器重新下载最新的css文档!


多浏览器的css实现半透明div

很好用的多浏览器透明代码
<style>
.filter
{
border:1px solid #C79810;
background-color:#6BBA70;
filter:alpha(opacity=80);
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)*/
width:200px;height:200px;
}
</style>
<div class=”filter”>测试代码</div>?


清除DIV浮动元素-clear

clear 属性定义了元素的哪边上不允许出现浮动元素(出现在其他元素中的图形和文本元素称为浮动元素(floating element))。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

left
在左侧不允许浮动元素

right
在右侧不允许浮动元素

both
在左右两侧均不允许浮动元素

none
默认。允许浮动元素出现在两侧。

h2{clear: right}
address{clear: both}


如何用CSS实现背景半透明效果

HTML代码:
<div class=”alpha1″>
<div class=”ap2″>
<p>背景为红色(#FF0000),透明度20%。</p>
</div>
</div>
CSS代码:
.alpha1{
width:300px;
height:200px;
background-color:#FF0000;
filter: Alpha(Opacity=30);
}
.ap2{
position:relative;
}
这样基本就可以实现啦,也不用担心定位和自适应问题,最大的问题是仅IE支持。
如果兼容FF、OP怎么写呢?首先,上面这种定法是不行的啦,那就只能用两个层重叠的方法啦。
改下页面结构与CSS样式:
HTML代码:
<div class=”alpha1″>
<div class=”ap2″>
<p>背景为红色(#FF0000),透明度20%。</p>
</div>
<!–[if IE]><![if !IE]><![endif]–> <div class=”alpha2″></div> <!–[if IE]><![endif]><![endif]–>
</div>
CSS代码:

.alpha1,.alpha2{
width:100%;
height:auto;
min-height:250px;/* 必需 */
_height:250px;/* 必需 */
overflow:hidden;
background-color:#FF0000;/* 背景色 */
}
.alpha1{
filter:alpha(opacity=20); /* IE 透明度20% */
}
.alpha2{
background-color:#FFFFFF;
-moz-opacity:0.8; /* Moz FF 透明度20%*/
opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)透明度20%*/
}
.ap2{
position:absolute;
}


如何使用CSS截取字符串

如果字符到达指定宽度,就会自动截取,后面加上省略号。
在CSS样式里加入如下语句即可:
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;


CSS的技巧整理

字体大小使用px
在一行内声明CSS
对比下面两个:
h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}
h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
第二种看起来的确格式化,但是不会在阅读上有任何帮助。写在一行内可以让你更快的找到需要的部分。
以前我也是写成类似第二种方式,但是逐渐发现就像文章说的一样,没多大用。一行看起来又爽快又省地方还能让文件更小。
分块书写代码
这样书写代码可以让CSS更页面化,在出现问题时候可以最短时间内找到问题所在。就像下面这样:
#content {float:left;}
#content p { … }
#sidebar {float:left;}
#sidebar p { … }
#footer {clear:both;}
#sidebar p { … }
浏览器支持
只支持最新的浏览器。也就是说要放弃IE5和IE5.5。这样一来就能省下很多时间。对于IE6来说不用使用盒模型Hack。如果只针对流行浏览器的话,只需要很少的Hack就能实现同样的效果。
我注意了一下网易新版主页的CSS,其中竟然一个!important或者Hack都没有,可是在FF和IE里面显示效果都很好。合理的使用CSS可以避免Hack。当然,调试的时间会多一些。
包含浮动元素
所有在容器内的内容都应该被设计为和容器保持一致。如果过大的话就会滑动到错误位置。使用负值margin调整到容器外同样会导致滑动。
理解Overflow
如果页面中有两个浮动元素,在左容器内输出过多内容的话就会导致右侧容器跑到下面。这也就是说你的margin、宽度或者padding设置混乱了,不过在FF里面体现不出来。使用overflow:hidden或者overflow:scroll可以避免IE允许内容冲出容器。
允许块元素自动填充空白
缩写CSS
很多人都margin-top、margin-right、margin-bottom、margin-left的用上一堆。其实这是最基本的,margin可以直接简写为margin:上 右 下 左值。可以在这里看到CSS缩写的总结。
避免不必要的选择器
把样式的选择器减少到最少。如果你发现自己不停的写ul li {}或者table tr td{}就证明写的过于详细了。更少的选择器会让你更容易的发现问题。


如何用CSS表示列表

列表样式类型属性(list-style-type)
这个属性用来设定列表项标记(list-item marker)的类型。有以下值:
disc (缺省值,黑圆点)
circle (空心圆点)
square (小黑方块)
decimal (数字排序)
lower-roman (小写罗马字排序)
upper-roman (大写罗马字排序)
lower-alpha (小写字母排序)
upper-alpha (大写字母排序)
none (无列表项标记)
列表样式位置属性(list-style-position)
列表样式位置属性(list-style-position)有两个值:
outside (以列表项内容为准对齐)
inside (以列表项标记为准对齐)
列表样式图片属性(list-style-image)
列表项标记可以用图片来表示,用列表样式图片属性(list-style-image)来设定图片。示例代码如下:
ul {list-style-image: url(../images/css_tutorials/dot02.gif)}
列表样式属性(list-style)
这个属性是设定列表样式的一个快捷的综合写法。用这个属性可以同时设值列表样式类型属性(list-style-type),列表样式位置属性(list-style-position)和列表样式图片属性(list-style-image)。示例代码如下:
ul {list-style:circle inside url(../images/css_tutorials/dot02.gif)}