css是什么?举个例子

html-css012

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

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

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

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

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

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

比如做一个导航条

首先搭建基本机构:

<div id="menu">

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">年表</a></li>

<li><a href="#">作品</a></li>

<li><a href="#">文章</a></li>

<li><a href="#">画廊</a></li>

<li><a href="#">留言</a></li>

<li><a href="#">地图</a></li>

</ul>

</div>

这时候看到的一个纵列文字前带圆点的列表

然后用css进行美化:

#menu {

background-color: #6282ac

height: 35px

width: 570px

position: relative

}

定义菜单的宽,高,颜色及定位方式。

#menu ul {

list-style-type: none

}

去掉文字下划线。

#menu li {

float: left

display: block

width: 60px

height: 31px

margin-top: 2px

margin-right: 6px

margin-bottom: 2px

margin-left: 6px

line-height: 31px

text-align: center

background-repeat: repeat-x

border: 1px solid #FFFFFF

}

定义“float: left”使列表项横向排列,设置高与行高使链接文字垂直居中。

menu a {

font-family: Arial, Helvetica, sans-serif

font-size: 10px

background-image: url(../images/b.gif)

display: block

background-repeat: repeat-x

}

定义链接的字体及背景

#menu a:hover{

background-image: url(../images/a.gif)

display: block

background-repeat: repeat-x

}

定义a的伪类实现鼠标点击时的背景变化