CSS文件是什么东西?

html-css022

CSS文件是什么东西?,第1张

CSS:层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

扩展资料:

CSS的特点:

1、丰富的样式定义

CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2、易于使用和修改

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。

另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。

3、多页面应用

CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

4、层叠

简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。

这些后来定义的样式将对前面的样式设置进行重写,在浏览器中看到的将是最后面设置的样式效果。

5、页面压缩

在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。

而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程度的缩减了页面的体积,减少下载的时间。

参考资料来源:百度百科-CSS

比如做一个导航条

首先搭建基本机构:

<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的伪类实现鼠标点击时的背景变化