编写一段CSS代码,要有两个作用。谢谢!

html-css018

编写一段CSS代码,要有两个作用。谢谢!,第1张

1、呵呵,一楼有点粗心了,把顺序敲错了,对A的设置,一定要是link--visited--hover-active,也就是我们常说到的"爱恨原则"(LoVe/HAte)原则(即四种伪类的首字母:LVHA)。

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>浏览器默认样式