CSS 实用笔记(代码详解)

来源：互联网发布：linux log4日志文件编辑：程序博客网时间：2024/05/18 16:38

●为什么用CSS：·一组样式可以调用在多个对象上
·语法易学易懂（比HTML的语法还容易学，学了HTML之后，学CSS将非常容易）
·丰富的样式效果
·是 DHTML 的基础
·用css布局的一个好处是可以批量对页面进行修改，它能将文档结构和表现层分离开来，
减轻工作量和服务器的负荷，增加站点的扩展能力和应用。

●什么是CSS
CSS的英文是Cascading Style Sheets，中文可以翻译成串联式样式表。

●CSS分类：按其位置可以分成三种

1、内嵌样式：

内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例：

<p style="color: sienna;margin-left: 20px;">
这是一个段落
</p>

         在style参数后面的引号里的内容相当于在样式表大括号里的内容。
         注意：style参数可以应用于任意BODY内的元素（包括BODY本身），除了BASEFONT、PARAM和SCRIPT。

2、内部样式表这是

         这是最典型的CSS的声明方式，但我个人认为：,影响页面的外观；
         内部样式表是把样式表放到页面的<head>区里，这些定义的样式就应用到页面中了，样式表是用<style>标记插入的，从下例中可以看出<style>标记的用法：

注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示：

3、外部样式表：

调用外部样式表是把样式表保存为一个样式表文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内，如下：

上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。media是选择媒体类型，这些媒体包括：屏幕，纸张，语音合成设备，盲文阅读设备等。

一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。

●CSS注释

/* 定义段落样式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字为黑色 */
font-family: arial /* 字体为arial */
}

1. 基本语法

CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。
基本格式如下：

selector {property: value} /*（选择符 {属性：值}） */

选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：

body {color: black}

选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。

为了方便你自己或者他人日后更好地理解你的CSS代码，你可以写CSS代码注释。CSS代码注释以/*开头，以*/结束。

如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：

p {font-family: "sans serif"} /*（定义段落字体为sans serif）*/

为了使你定义的样式表方便阅读，你可以采用分行的书写格式：

p
{
text-align: center;
color: black;
font-family: arial
}

/*（段落排列居中，段落中文字为黑色，字体是arial）*/

2. 选择符组 (集体声明和分项声明方式)

你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：

h1, h2, h3, h4, h5, h6 { color: green }

/*（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）*/

p, table{ font-size: 9pt }

/*（段落和表格里的文字尺寸为9号字）*/

/*效果完全等效于：*/

p { font-size: 9pt }
table { font-size: 9pt }

3. 类选择符

用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：

p.right {text-align: right}
p.center {text-align: center}

然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：

<p class="right"> 这个段落向右对齐的
</p>

<p class="center">
这个段落是居中排列的
</p>

<p class="right"> 这个段落向右对齐的
</p>

<p class="center">
这个段落是居中排列的
</p>

注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。

类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：

.center {text-align: center}

（定义.center的类选择符为文字居中排列）
这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：

<h1 class="center">
这个标题是居中排列的
</h1>
<p class="center">
这个段落也是居中排列的
</p>

注意：这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。

4. ID选择符

在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。
ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id="intro"的元素：

<p id="intro">
这个段落向右对齐
</p>

#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

●定义链接的样式 CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：

a:link{font-size : 18pt ;text-decoration : none ;color : blue ;}
a:visited {font-size : 18pt;text-decoration : none ;color : brown ;}
a:hover {font-size : 24pt ;text-decoration : underline ;color : red;}
a:active {font-size : 24pt ;text-decoration : none ;color : green ;}

以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明）
下面这个例子，ID属性只匹配id="intro"的段落元素：注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。