css是什么?举个例子

html-css018

css是什么?举个例子,第1张

css是一种样式,是控制网页上包含的各种元素现实格式的手段。网页上的元素通常有图片,文字等。

比如控制文字的大小,颜色,粗细 。控制图片的高度,宽度、透明度等。控制层的位置,浮动等。

总之,css几乎可以控制网页上所有元素的格式。

css的语法很简单。 选择器:属性:参数。 选择器就是元素的名称(可以这么理解)

上面这个例子是div+css+javascript做成的

CSS

/*基本信息*/

body

{font:12px

Tahomabackground:#CCCCCC}/*适用于页面整体:字体及字体大小,页面页边距全部设置为0,文字对齐方式为居中,背景颜色*/

*

{

margin:0

padding:0

border:0}/*全局设定,外边距,内边距和表格边框全部为0*/

html,body

{

height:100%}

/*全局设定高度为100%*/

/*--------------------------------------*/

/*页面主体*/

#pagebody

{

width:780px

/*设定宽度*/

margin:0px

auto

/*居中*/

}

#mainleft

{

width:192px

/*设定宽度*/

float:left

/*浮动居左*/

clear:left

/*不允许左侧存在浮动*/

overflow:hidden

/*超出宽度部分隐藏*/

border:1px

solid

#006699

margin:5px

auto

height:auto

}

#mainright

{

width:580px

text-align:left

float:right

/*浮动居右*/

clear:right

/*不允许右侧存在浮动*/

overflow:hidden

border:0px

solid

#E00/*初始使用表格,留存使用*/

margin:5px

auto

}

#mainright2

{

width:578px

float:right

/*浮动居右*/

clear:right

/*不允许右侧存在浮动*/

overflow:hidden

border:0px

solid

#006699

margin:2px

auto

height:auto

}

#mainright3

{

width:285px

/*设定宽度*/

float:left

/*浮动居左*/

clear:left

/*不允许左侧存在浮动*/

overflow:hidden

/*超出宽度部分隐藏*/

border:1px

solid

#006699

margin:2px

auto

height:auto

}

#mainright4

{

width:285px

/*设定宽度*/

float:right

/*浮动居左*/

clear:right

/*不允许左侧存在浮动*/

overflow:hidden

/*超出宽度部分隐藏*/

border:1px

solid

#006699

margin:2px

auto

height:auto

}

/*字体设置*/

#biaoti

{

font-size:10px

font-weight:bold

padding-left:10px

color:#FFf

background-color:#006699

height:20px

}

页面

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html

charset=gb2312"

/>

<title>无标题文档</title>

<link

href="css.css"

rel="stylesheet"

type="text/css"

/>

</head>

<body>

<div

id="pagebody"><!--页面主体-->

<div

id="mainleft">

左侧显示

</div><!--左侧关闭-->

<div

id="mainright2">

<div

id="mainright3">

右侧一显示

</div>

<div

id="mainright4">

右侧二显示

</div>

</div>

</div>

</body>

</html>