CSS 实用笔记(代码详解) -

chengxuetao

浏览: 1596836 次
性别:

最近访客更多访客>>

whzresponse

u012363178

wangyy

zhangdongl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS 实用笔记(代码详解)

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

1、内嵌样式：

注意：有些低版本的浏览器不能识别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:"sansserif"}/*（定义段落字体为sansserif）*/

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

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参数：

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

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

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

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

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

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

.center{text-align:center}

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

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

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

4. ID选择符

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

<pid="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选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。

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

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

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

2、内部样式表这是

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

分享到：