html-CSS使用方法(每天都要学习噢)

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

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>

看一下页面效果:

attachments-2021-04-hR0maIHw606eee86b9c59.png

 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>

看一下页面效果:

attachments-2021-04-9Ab1vMP2606eee9ff21f0.png

 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>

看一下页面效果:

attachments-2021-04-tCN72Z0P606eef328f5e1.png

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

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

attachments-2021-04-na7XO3LZ606eef5328ea2.png

在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>

看一下页面效果:

attachments-2021-04-aIMdSLE4606eef99d223a.png

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

(1)按照样式来源不同,内嵌样式>内部样式>外部样式>浏览器默认样式

(2)按照选择器不同,id选择器>class选择器>元素选择器

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

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
anne
anne

7 篇文章

作家榜 »

  1. admin 10 文章
  2. anne 7 文章
  3. joelee 2 文章
  4. chenchen 1 文章
  5. CJ777 1 文章
  6. harry 1 文章
  7. AlLTyjrDKb 0 文章
  8. virmMUTzPANJXY 0 文章