CSS代码是什么

html-css017

CSS代码是什么,第1张

CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading

Stylesheet)。

在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。

它的作用可以达到:

(1)在几乎所有的浏览器上都可以使用。

(2)以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。

(3)使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。

(4)你可以轻松地控制页面的布局

(5)你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。

/* --------------首页个人档案------------- */

#m_pro { /* 首页个人档案模块 */

margin-left:10pxmargin-bottom:15px

}

#mod_profile .modth { /* 首页个人档案----模块题头 */

display:none

}

#mod_profile .modbox { /* 首页个人档案----模块箱体 */

border:0px solid #006600

}

#m_pro .portrait { /* 首页个人档案----头像区域 */

width:60px!importantheight:60px!important

background:transparentpadding-top:0px

}

#m_pro .portrait img{ /* 首页个人档----案头像 */

width:60px!important

}

#m_pro .userinfo{ /* 首页个人档案----信息区1 */

width:80px!importantheight:50px!importantoverflow:hidden!important

background:transparent!important

}

#m_pro .userinfo nobr{ /* 首页个人档案----信息行 */

color:#99ff33!important

}

#m_pro .userinfo nobr img { /* 首页个人档案----在线状态图标 */

display:none

}

#m_pro .line { /* 首页个人档案----分割线 */

}

#m_pro div.act a,#m_pro div.act a:visited { /* 首页个人档案----信息区文字链 */

color:#FFFFFFtext-decoration:underline

}

#m_pro a.btfan { /* 首页个人档案----加为好友 */

color:#00ff00background:transparenttext-decoration:none!important

border:1px solid #006600filter:Shadow(Color=#000000,strength:3,Direction=135)

}

#m_pro a.btfan img{ /* 首页个人档案----加为好友图标 */

FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=0)

}

/* --------------个人档案页------------- */

#warpper a,#warpper a:visited { /*个人档案页---文字链*/

color:ccccccline-height:20pxfont-size:14px

}

#warpper .photo { /*个人档案页---左区*/

width:180pxheight:400pxmargin-left:10pxpadding-top:295pxpadding-left:0px

background:url(http://baidu.daobalang.googlepages.com/pro-Nokia8800.gif) no-repeat top center

}

#warpper .image img{ /*个人档案页---头像*/

display:none

}

#warpper .f14 { /*个人档案页---用户名*/

display:none

}

#warpper .f14 image { /*个人档案页---在线状态图标*/

display:none

}

#warpper .act{ /*个人档案页---信息区*/

width:180pxtext-align:centermargin-top:0px

}

#warpper .act a:link,#warpper .act a:visited{ /*个人档案页---信息区文字链*/

color:#3399CCfont-weight:600font-size:12pxwidth:100pxtext-decoration:none

}

#warpper .act a:hover{ /*个人档案页---信息区文字链(鼠过)*/

color:#FF0000font-weight:hold

}

#warpper a.btfan{ /*个人档案页---加为好友*/

color:#FF0000!importantborder:0px

}

#warpper .line{ /*个人档案页---信息区分割线*/

display:none

}

#warpper td,#warpper td.tit { /*个人档案页---右区上部信息默认字*/

color:3399CCline-height:20pxfont-size:14px

}

#warpper .pline { /* 个人档案页----分割线 */

width:125pxheight:20pxmargin-left:160px!importantmargin-top:-120pxline-height:20px

background:url(http://daobalang001.googlepages.com/last_online.jpg) no-repeat top left

}

#warpper strong { /*个人档案页---右区下部信息默认字*/

color:3399CCline-height:20pxfont-size:14px

}

#warpper .pitem { /*个人档案页---右区下部信息链接文字*/

margin-top:120px

}

1. CSS是Cascading Style Sheets(层叠样式表)的简称.

2. CSS语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言).

3. 在标准网页设计中CSS负责网页内容(XHTML)的表现.

4. CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.

5.可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.

5.CSS是由W3C的CSS工作组产生和维护的.

如何将样式表加入到网页

可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅 !important 声明。

链入外部样式表文件 (Linking to a Style Sheet)

你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:

<head>

<title>文档标题</title>

<link rel=stylesheet href="css文件地址" type="text/css">

</head>

而在XML中,你应该如下例所示在声明区中加入:

<? xml-stylesheet type="text/css" href="css文件地址" ?>

定义内部样式块对象 (Embedding a Style Block)

你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。 定义方式请参阅样式表语法。示例如下:

<html>

<head>

<title>文档标题</title>

<style type="text/css">

<!--

body {font: 10pt "Arial"}

h1 {font: 15pt/17pt "Arial"font-weight: boldcolor: maroon}

h2 {font: 13pt/15pt "Arial"font-weight: boldcolor: blue}

p {font: 10pt/12pt "Arial"color: black}

-->

</style>

</head>

<body>

请注意,这里将style对象的type属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单。

内联定义 (Inline Styles)

内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。