传智播客——css细节
一:css的概念
CSS是层叠样式表(Cascading Style Sheets)用来定义网页的现实效果。可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的现实效果功能。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。
二:css的优点
样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局,你可以为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。
三:css和html的结合方式
1.style属性方式:
利用标签中style属性来改变每个标签的显示样式。
例:
<p style="background-color:#FF0000; color:#FFFFFF">
p标签段落内容。
</p>
该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合局部修改
2.style标签方式:(内嵌方式)
在head标签中加入style标签,对多个标签进行统一修改。
<head>
<style type=”text/css”>
p { color:#FF0000;}
</style>
</head>
该方式可以对单个页面的样式进行统一设置,但对于局部不够灵活。
3. 导入方式:
前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到,那么就用到这种方式。
例:
<style type="text/css">
@import url(css_3.css);
div { color:#FF0000;}
</style>
注:url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复,以本页定义样式为准。
4。链接方式:
通过head标签中link标签来实现,前提也是先要有一个已定好的CSS文件。
例:
<link rel="stylesheet" type="text/css" href="css_3.css" media="screen" />
注:可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。
四:样式优先级的顺序
从css的字面就可以看出优先级的顺序了:样式层叠表,意思就是范围覆盖整体设计样式
相关文档:
效果如下:
实现方法:利用一下两张图片:
前台代码:
<div id="nagivation">
&nb ......
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77对FireFox
*+ht ......
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dl用得很少,懂得结合使用对做架构是很有好处的哦!
DIV
CSS网页布局中常用的列表元素ul ol li dl dt dd释义,块级元素div尽量少用,和table一样,嵌套越少越好
ol
有序列表。
<ol>
<li> ......
如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手。本文要为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更
方便更快速,只要选择现成的例子就可以应用于自己的网站了。本文收集的这些资源,从非常简单的HTML和CSS导航菜单,到非常复杂和高级的
JQuer ......
<style>
* {
margin:0;
padding:0;
}
body {
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background:#FFFFFF;
margin: ......