您的位置：首页 > Web前端 > CSS

CSS基础学习笔记

2011-05-10 10:09 381 查看

CSS语法简介

内部样式表

内部样式表需要在网页的<head>部分定义，格式如下

<head>
<style type="text/css">
/*符合CSS语法结构的CSS语句，例如*/
body { background-color: blue; }
</style>
</head>

行内样式表(内嵌样式表)

行内样式表直接在标签内部定义，使用style属性，写法如下：

<标签 style="符合CSS语法结构的CSS语句">

外部样式表

使用外部样式表时，CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件，你需要在网页的<head>部分插入以下内容：

<head>
<link rel="stylesheet" type="text/css"
href="文件位置/你的CSS文件名.css" />
/*文件位置就是所处在的文件夹相对与当前网页的相对路径*/
</head>

加在head部分的<style type="text/css">和</style>分别被浏览器识别为CSS的开始和结束。而注释标签则是避免不支持CSS的浏览器将CSS内容作为网页正文显示在页面上。eg:

<style type="text/css">

</style>

通常情况下，CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。写法如下：

选择器 { 属性: 属性值; }

例如：h1 {font-size: 12px;}

属性和属性值之间用一个冒号“:”分开，以一个分号“;”结束，最后别忘记用一对大括号“{}”括起来。我们也可以为一个选择器同时定义多个样式，样式之间用分号“;”隔开。也可以同时为几个标签同时定义一组样式，标签之间用逗号“,”隔开。

在CSS中，注释以“/*”开始，以“*/”结束，注释里面的内容对于浏览器来说是没有意义的。

指定标签的class和id

首先我们要在<head>部分定义class(类)或id。

class的定义方法：指定标签.类名 {样式}

id的定义方法：指定标签#id名 {样式}

然后我们在想要应用类的标签上加上class(类)或者id属性：

class的应用方法：<指定标签 class="类名">

id的应用方法：<指定标签 id="id名">

注意：类名和id名不可以用数字开头。

class(类)与id的区别

同一id在一个页面内只能应用一次，而class则是用于描述多次出现的元素。这从它们的名称上很容易理解。id就类似元素的省份证号码，它必须是唯一的，而class则是一类具有共同属性的元素的合称，是一类。

列表(list)

1.无序列表项目样式属性(list-style-type)

<style type="text/css">
.w1 { list-style-type:circle;}
.w2 { list-style-type:square;}
.w3 { list-style-type:disc ;}
</style>
2.有序列表项目样式属性(同上)

<style type="text/css">
.y1 { list-style-type:decimal ;}
.y2 {list-style-type:upper-roman ;}
.y3 {list-style-type:lower-roman ;}
</style>

3.用图片做列表项目符号(list-style-image)

<style type="text/css">
.xing { list-style-image:url(../../images/list.gif);}
</style>
……

div和span

div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含div。而span是行级元素(行内标签)，通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行，而span则不会。

盒子(box)

CSS的盒子(box)是由以下几个部分组成的：

内容(content)、填充(padding)、边框(border)和边界(margin)。盒子的内容当然是必须有的，而填充、边框和边界都是可选的。如果把CSS的盒子看做现实生活中的盒子，那么内容就是盒子里装的货物；而填充就是怕货物损坏而添加的泡沫或者其它抗震的东西；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能与其他物体紧挨在一起，而必须有一段空隙。当然了，CSS中的盒子是平面的。

CSS边框(border)

CSS填充属性(padding)

CSS边界属性(marging)

定位

1.相对定位(relative)

2.绝对定位(absolute)

链接(a)

对于很多追求页面美观的站长来说，默认的链接样式实在是太难以容忍了。而且它们也很难和网站的风格相吻合。不过有了CSS之后我们就不用担心了。下面就看看如何修改网页的链接样式。

1.改变整个页面的链接样式。

就是上面的这段CSS代码改变了页面的链接样式。其中a:link、a:visited、a:hover和a:active分别对应未访问的链接、已经访问过的链接、鼠标悬停的链接和激活的鼠标链接(按下鼠标左键的时候)。这段代码看起来很简单，但是一定要注意几个样式的顺序不能颠倒，否则可能造成部分样式无法正常显示。下面再来看看如何只更改部分页面的链接样式。

2.只改变局部的链接样式。

层叠的意义

当我们为同一个标签多次设置样式表的时候，这些样式表会最终层叠成一个样式表来作用于标签。例如，你在外部样式表中为p定义了如下样式：p { text-align: left;}

而在内部样式表中又定义了如下样式：p {text-indent: 24px;}

那么最终网页内p标签的样式将为： p { text-align: left;text-indent: 24px;}。

三种样式表的优先级由高到低排列如下：

行内样式表(内嵌样式表)

内部样式表

外部样式表

补充规则：优先级相同的情况下，后定义的属性会覆盖先前定义的。

其他高级规则：CSS中的important!是比较实用的技巧，这里就不多说了。将在后续的CSS技巧中讨论。

CSS文字属性(font属性)

1.定义字体(font-family)

2.定义文字大小(font-size)

3.定义文字样式(font-style)

4.定义文字粗细(font-weigh)

文本属性(text)

1.首行缩进(text-indent)

2.文本颜色(color)

3.文本对齐属性(text-align)

4.文本修饰(text-decoration)

背景属性(background)

1.背景颜色属性(background-color)

2.背景图片(background-image)

3.背景图片的重复设置(background-repeat)

不重复；

<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/logo.gif);
background-repeat:no-repeat; }
</style>

只在水平方向重复；

<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/logo.gif);
background-repeat:repeat-x;}
</style>

资料：http://www.cainiao8.com/web/css.html

只在垂直方向重复。

<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/logo.gif);
background-repeat:repeat-y;}
</style>

4.背景图片位置(background-position)

5.将背景图片固定在页面的某个位置(background-attachment)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航