软件测试、自动化、性能、python、区块链

html-CSS使用方法（每天都要学习噢）

CSS使用方法有四种，分别是内嵌样式、内部样式、外部样式、使用import引入样式文件。

1、内嵌样式—将CSS规则写在html标记中，CSS规则作为html标记style属性的属性值。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌样式</title>
</head>
<body>
    <input type="button" style="color: blue;height: 30px" value="按钮">
    <br/>
    <input type="button" value="按钮">
</body>
</html>

看一下页面效果：

2、内部样式—定义某一个标记的样式，内部样式一般在<head>标记中使用<style>标记进行定义

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
    <style>
        .b {
            color: red;
            height: 30px;
        }
    </style>
</head>
<body>
    <input class="b" type="button" value="按钮">
    <br/>
    <input type="button" value="按钮">
</body>
</html>

看一下页面效果：

3、外部样式—将样式表以单独的.css文件存放，通过<link>标记引用样式文件，<link>标记一般放在<head>区域内

新建文件b.css，将样式写在该文件里:

在html中进行引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <link rel="stylesheet" type="text/css" href="../static/css/b.css">
</head>
<body>
    <input class="b" type="button" value="按钮">
    <br/>
    <input type="button" value="按钮">
</body>
</html>

看一下页面效果：

4、使用import引入样式文件—@import只能放在<style>标记内使用，而且必须放在其它CSS样式之前

新建文件b.css，将样式写在该文件里：

在html中进行引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>import引入样式文件</title>
    <style>
        @import "../static/css/b.css";
    </style>
</head>
<body>
    <input class="b" type="button" value="按钮">
    <br/>
    <input type="button" value="按钮">
</body>
</html>

看一下页面效果：

浏览器会按照不同的方式来确定样式的优先级：

（1）按照样式来源不同，内嵌样式>内部样式>外部样式>浏览器默认样式

（2）按照选择器不同，id选择器>class选择器>元素选择器

发表于 2021-04-08 19:40
阅读 ( 1372 )
分类：测试开发

html-CSS使用方法（每天都要学习噢）

你可能感兴趣的文章

相关问题

1 条评论

作家榜 »