a:link,a:visited { text-decoration:none}
a:hover{ text-decoration:none}
a:active{ text-decoration:none}
2、 html,body{ font-family: "微软雅黑 "}
题外话一下:
建议你写页面的时候,对CSS初始化一下,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异,通过初始化样式,可以减少因为浏览器不同而带来的问题,减轻不少后期开发中对浏览器兼容性处理方面的工作量。
下面这一段是我参考YAHOO的YUI CSS框架中的Reset CSS整理出来的,目前YAHOO、淘宝都是通过YUI CSS框架来布局的,推荐你有空可以多研究研究淘宝的页面,做得确实不错。
也可以在百度里面搜索“CSS初始化”。
通用最后一句及链接样式根据每个站点风格的不同,来修改,其他的保持不变即可
/* 通用 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin:0padding:0}
table { border-collapse:collapseborder-spacing:0}
fieldset, img { border:0}
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style:inheritfont-weight:inherit}
del, ins { text-decoration:none}
li { list-style:none}
caption, th { text-align:left}
h1, h2, h3, h4, h5, h6 { font-size:100%font-weight:normal}
q:before, q:after { content:''}
abbr, acronym { border:0font-variant:normal}
sup { vertical-align:baseline}
sub { vertical-align:baseline}
legend { color:#000}
input, button, textarea, select, optgroup, option { font-family:inheritfont-size:inheritfont-style:inheritfont-weight:inherit}
input, button, textarea, select { *font-size:100%}
select, input, button, textarea, button { font:99% arial, helvetica, clean, sans-serif}
table { font-size:inheritfont:100%}
pre, code, kbd, samp, tt { font-family:monospace*font-size:108%line-height:100%}
html,body{font: 12px/1.5em Verdana, Arial,"宋体", sans-serifbackground:gray}
/* 链接颜色 */
a:link,a:visited{ text-decoration:nonecolor:#555}
a:hover{text-decoration:nonecursor:pointercolor:#f60}
实际写页面的时候,发现a:active 没太大作用,被我省略了,你也可以自己再添加一个这个属性。
body{color:#666666font: 12px arial,"宋体"}/*这里定义了整个页面通用的字体的大小、字体、及颜色;*/a:link,a:visited{color:#666666text-decoration:none}/*定义了所有链接(也就是a标签)的通常及访问过一次以后两种情况的样式,变化颜色及去掉下划线*/
a:hover{color:#ff0000}/*定义了所有链接鼠标经过的样式,字体颜色变化*/
/*头区*/
.header {margin:0 autowidth:1003pxbackground:url (http://pigimg.zhongso.com/space/gallery/%E4%BC%81%E4%B8%9A%E5%BD%A2% E8%B1%A1%E5%AE%A3%E4%BC%A0%E5%9E%8B/header.jpg) repeatposition:relative}/*这个样式链接了一张图片,并且在设定的宽和高内重复填充,margiin:0 atuo表示相对于外层居中*/
.logo { float:leftposition:relativeleft:20pxtop:5pxdisplay:none}/*logo图片位置;向左浮动、相对定位、而且还隐藏了,看不见噢!*/
.search { float:rightposition:relativeright:0pxtop:6px}/*和上边logo层并排,因为他像右浮动了*/
.search input{margin-right:5pxheight:16pxwidth:183pxbackground:#ffffffborder:1px #dbe0e6 solid}/*一个文本框的样式,白色背景,有边线,距右边5像素*/
.ssbtn{ float:leftwidth:38pxheight:20pxbackground: url (http://i0.zhongso.com/skin/company/appearance/search.gif) no-repeat center}/*搜索按钮,没什么特别的*/
.ssmore{float:leftwidth:38pxheight:20pxbackground:url (http://i0.zhongso.com/skin/company/appearance/more.gif) no-repeat centermargin:0px 5px}/*更多按钮,没什么特别的*/
.nav{ float:rightposition:relativeright:5pxtop:10pxtext- align:right}/*顶部右侧文字,又用了相对定位,里面字体居右*/
.titblo { position:relativeleft:100pxtop:60pxmargin-bottom:100pxwidth:400px} /*页名称和网址区域位置,还是相对定位,不知道为什么这么用,距底部100px*/
.name{ font:bold 30px/30px "黑体"border:0background:transparenttext-align:rightwidth:20emfilter:shadow (color=#ffffff,direction=120,strength=3)}/*这里有点花头,用了个背景图片跟随鼠标,还用了滤镜,貌似阴影,ie特有的属性,不建议你用*/
.url{background:transparentwidth:480pxpadding:3pxcolor:#000000visibility:hidden}/*页网址,使用了隐藏,这个隐藏看不见,但是占用空间*/
/*标签区*/
.tags {padding:0 10px 0 6pxwidth:987pxtext-align: centermargin:2px autobackground:url (http://i0.zhongso.com/skin/company/appearance/tag.gif) repeat-x}/*记住padding的顺序是上右下左*/
.tags li{ float:leftdisplay:blockcursor:pointer/*鼠标形状*/margin:0 3pxheight:22pxwhite-space: nowrap/*这个好像是强制文本一行显示*/ }
.tag{ padding-top:10px}/*非当前页标签状态*/
.tag a:link,.tag a:visited{color:#fffffftext-decoration:nonefont- weight:bold} /*tag内的链接样式,只对tag内的链接有用*/
.current{ background:url
到这没了,不知道你不懂的地方在哪,光看css用出不大,最多帮你解释下代码的作用!
1、此段css代码,其他页面不需要。可以直接放在需要的HTML文件中。
在head标签下,写上style标签,把css代码放在style标签中。
2、可以新建一个css文件,比如index.css,把这段css代码放进这个index.css文件中。
然后在HTML文件中引入index.css文件。
<link rel="stylesheet" href="index.css">
href:写index.css文件的路径。
扩展资料:
插入样式表的方法:
1、外部样式表
每个页面使用<link>标签链接到样式表。<link>标签在(文档的)头部:
<head><linkrel="stylesheet"type="text/css"href="mystyle.css"></head>
浏览器会从文件mystyle.css中读到样式声明,并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。
2、内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表:
<style>
hr{color:sienna}
p{margin-left:20px}
body{background-image:url("images/back40.gif")}
</style>
3、内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style属性可以包含任何CSS属性。本例展示如何改变段落的颜色和左外边距:
<pstyle="color:siennamargin-left:20px">这是一个段落。</p>
样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中,在HTML页的头元素中,或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。
一般情况下,优先级如下:
内联样式)Inlinestyle>(内部样式)Internalstylesheet>(外部样式)Externalstylesheet>浏览器默认样式