HTML中使用CSS样式方法

CSS样式表能很好的控制页面显示，已达到分离页面内容和样式代码的目的。其方式通常包括行内样式，内嵌样式，链接样式，导入样式

1、行内样式：行内样式是所有样式中比较简单，直观的方法，就是把CSS代码添加到HTML的标记中，即作为HTML标记的属性标记存在，通过

　　这种方法，可以简单地对某个元素单独定义样式。实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式</title>
</head>
<body>
<p style="font-size: 25px; color: red; text-align: center; font-weight: bolder;">行内正文标题</p>
<p style="font-size: 16px; color: blue; font-weight: bold;">行内样式内容字体大小为16px,字体颜色为蓝色，字体加粗</p>
</body>
</html>

　　注：行内样式简单，但这种方法不常使用，因为这样添加无法完全发挥样式表。

2、内嵌样式：内嵌样式就是把CSS样式代码添加到<head>与</head>之间，并且用<style>和</style>标记进行声明。这种写法虽然没有完全实现页面内容和样式的控制代码完全分离，但可以

　　设置一些比较简单的样式，并统一页面样式。实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌样式</title>
    <style type="text/css">
        p{
            color: red;
            font-size: 16px;
            font-weight:bolder;
        }
    </style>
</head>
<body>
<p>这段内容使用内嵌样式修饰</p>
</body>
</html>

3、链接样式：链接样式是CSS中使用频率最高，也是最实用的方法，它很好的将“页面内容”和“样式风格代码” 分离成两个文件或多个文件，实现了页面框架HTML代码和CSS代码的完全

　　分离，是前期制作和后期维护都十分的方便。

　　链接样式是指在外部定义CSS样式表并形成以 .css为扩展名的文件，然后在页面中通过<link>链接标记链接到页面中，而且该链接语句必须放在页面的<head>标记区，如下：

<link rel="stylesheet" type="text/css" href="链接样式.css">

　　1）link：指定链接样式表，其值为stylesheet

　　2）type：表示样式表类型为CSS样式表

　　3）href：指定CSS样式表所在的位置，此处在当前路径下，名称为链接样式.css的文件

　　　　注：这里使用的是相对路径。如果HTML文档和CSS样式表没在同一路径下，则需要指定样式表的绝对路径和引用位置

　　实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接样式</title>
    <link rel="stylesheet" type="text/css" href="链接样式.css">
</head>
<body>
<h1>链接样式标题居中</h1>
<p>链接样式修饰字体大小18px,字体颜色红色，字体倾斜</p>
</body>
</html>

链接样式css示例：“链接样式.css”

h1{
    text-align: center;
}

p{
    font-size: 18px;
    color: red;
    font-style: oblique;
}

4、导入样式：导入样式和链接样式基本相同，都是创建一个独立的CSS文件，然后在引入到HTML文件中，只不过语法和运作方式有差异。采用导入样式的样式表，在

　　HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似于内嵌效果，而链接样式是在HTML标记需要样式风格时才以链接方式引入

　　导入样式表使用@import导入一个外部样式表，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入样式</title>
    <style>
        @import "导入样式.css";
    </style>
</head>
<body>
<h1>导入样式标题居中</h1>
<p>导入样式修饰字体大小20px,字体颜色橙色</p>
</body>
</html>

导入样式css示例："导入样式.css"

h1{
    text-align: center;
}

p{
    font-size: 20px;
    color: orangered;
}

5、行内，内嵌，链接，导入样式优先级：

　　如果同一个页面采用了多种css代码方式，例如行内样式，内嵌样式，链接样式，导入样式这几种样式共同作用一个标记时，就会出现优先级问题。

　　假如都设置字体颜色，行内样式优先级大于内嵌样式，内嵌样式优先级大于链接样式，链接样式优先级大于导入样式

posted @ 2020-09-10 10:56 点点滴滴的努力阅读(451) 评论(0) 收藏举报

刷新页面返回顶部