2.2css样式表2.2.1

来源：互联网发布：vb 线程钩子编辑：程序博客网时间：2024/06/10 09:46

CSS是一种美化网页的技术。

2.2.1CSS样式表的定义与使用

定义选择器的基本语法：

selector{属性：属性值；属性；属性值；......}

说明：

(1)CSS选择器分为三种类型：

标记选择器，通过HTML标签定义选择器。

类别选择器，使用class定义选择器。

ID选择器，使用id定义选择器。

（2）属性和值被冒号分开，属性之间用分号间隔，并由花括号包围。

例如：p{background-color:blue;color:red}//定义标记P选择器

.cs1{font-family:华文行楷；font-size:15px} //定义类别选择器.csl

#cs2{color:yellow} //定义id选择器#cs2

1、CSS样式表的定义

CSS样式表的定义实际上是定义CSS选择器。

(1)标记选择器——通过HTML标签定义样式表

基本语法格式：

引用样式的对象{标签属性：属性值；标签属性：属性值；标签属性：属性值；......}

(2)类别选择器——使用class定义样式表

格式1：标签名.类名{标签属性：属性值；标签属性：属性值；标签属性：属性值；......}

格式2： .类名{标签属性：属性值；标签属性：属性值；标签属性：属性值；......}

(3)id选择器——使用id定义样式表

基本语法：#id名称{标签属性：属性值；标签属性：属性值；标签属性：属性值；......}

2、样式表的使用

在HTML中使用CSS有4种方式：行内式、内嵌式、链接式、导入式。

（1）行内式（不需要定义选择器）：利用style属性直接为元素设置样式，只对当前的标签起作用。

例如：<p style="color:#FF0000;font-size:20px;text-decoration:underline;">正文内容1</p>

(2)内嵌式：这种方式需要先定义有关的选择器，然后再使用。利用<style></style>标签对，将样式表定义在<head></head>标签之间，内嵌式样式表的作用范围是该HTML文档内。例如：

<html>

<head>

定义两个选择器：标签选择器p和类选择器info

p{color:#0000FF;text-decoration:underline;font-weight:bold;font-size:25px;}

.info{font-size:12px;color:red;}

</style>

</head>

<body>

使用选择器：第一行：标签选择器的使用。第二行：类选择器的使用。

<p>这是第一行正文内容......</p>

<p class="info">这是第二行的内容.....</p>

</body>

</html>

(3)链接式：外联式样式表是将定义好的css单独放到一个以.css为扩展名的文件中，在使用<link>标签链接到所需要使用的网页中，在<head>与</head>之间。

例如：首先定义一个sheet-x,css文档，其代码如下：

h2{color:#0000FF;}

p{color:#FF0000;text-decoration:underline;font-weight:bold;font-size:15px;}

其次，在HTML中使用：

<html>

<head>

</head>

<body>

<h2>CSS标题1</h2>

<p>这是正文内容1......</p>

</body>

</html>

(4)导入式：该方式与链接是方式类似，只是通过import倒入页面中。

import导入格式：（注意import句尾的句号不要省略）

3、css样式表继承性

css是级联样式表，级联是指继承性，即在标签中嵌套的标签继承外层标签的样式。级联的优先级顺序：

（1）嵌入式样式表（优先级最高）

（2）内联式样式表。

（3）外联式样式表。

（4）浏览器默认（优先级最低）。

注意：当样式表继承遇到冲突时，总是以最后定义的样式为准，例如：

<head>

p{color:red;font-size:25px;}

</style>

</head>

<body>

<p>这式样式表第1行正文内容.....</p>//这一行按选择器规定的样式显示：按红色、25显示内容

<p style="color:blue;>正文内容1</p>//这一行是按标识内的样式显示：按蓝色、但字大小仍按25px显示

</body>

阅读全文

0 0