css在html中使用的几种方式

最新推荐文章于 2024-07-22 11:03:23 发布

缘中猿

最新推荐文章于 2024-07-22 11:03:23 发布

阅读量3.5k

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_59555392/article/details/132216898

版权

html不能没有css，就像西方不能没有耶路撒冷。

css在html文件中如何使用呢？

css在html中的使用主要有以下几种方式

1、内联样式

在HTML标签的style属性中直接定义CSS样式。

<p style="color: red;">这是一段红色的文字。</p>

这种方式的优点是简单快捷，而且一目了然，但是不利于维护，内容展示和样式没有实现解耦。

2、内部样式

在HTML文件的<head>标签内使用<style>标签定义CSS样式。

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>这是一段红色的文字。</p>
</body>

内部样式的优点是样式与内容展示结构分离，但仅适用于当前HTML文件。

3、外部样式

将CSS样式定义在一个独立的外部CSS文件中，然后在HTML文件中通过<link>标签引入。

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>这是一段红色的文字。</p>
</body>

//styles.css文件内容
p {
      color: red;
    }

外部样式的优点是可以在多个HTML文件中共享样式，便于维护和复用。

导入样式

与外部样式类似，只是引入外部样式文件的方式不同，这里是在CSS文件中使用@import语句引入其他CSS文件。

<head>
  <style>
    @import url("styles.css");
  </style>
</head>
<body>
  <p>这是一段红色的文字。</p>
</body>

小结

从内联样式到内部样式，再到外部样式，css的作用范围逐渐增大，且耦合度逐渐降低。

选择合适的css使用方式也有助于提高开发效率。

以下是一个基本注册界面的结合css的简单美化。

css美化前：

看着就略显敷衍有没有，和现如今多彩的网络世界多少有点隔离，像是那种打开网页卡了没加载完的界面哈哈哈哈。

css美化后：

虽然也还不是很好看，但看上去确实舒服多了不是吗，起码比美化前年轻了10岁，提升大大的有，俺井汉三的审美就一点点，点到为止。

这么一对比，css的作用确实很明显。

附上注册界面的简单源码，有需要的小伙伴可以多多实践。

html文件内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>registerCss</title>
    <!-- <style>
      @import url(registerstyles.css);
    </style> -->
    <link rel="stylesheet" href="registerstyles.css" />
  </head>
  <body>
    <div class="rg_layout">
      <div class="rg_left">
        <p class="left_p1">新用户注册</p>
        <p class="left_p2">USER REGISTER</p>
      </div>

      <div class="rg_center">
        <div class="rg_form">
          <!-- <form action="#" method="get"> -->
          <form action="#" method="post">
            <table>
              <tr>
                <td class="td_left"><label for="username">用户名</label></td>
                <td class="td_right">
                  <input
                    type="text"
                    name="username"
                    id="username"
                    placeholder="账号"
                  />
                </td>
              </tr>
              <tr>
                <td class="td_left"><label for="password">密码</label></td>
                <td class="td_right">
                  <input
                    type="password"
                    name="password"
                    id="password"
                    placeholder="密码"
                  />
                </td>
              </tr>
              <tr>
                <td class="td_left"><label for="email">Email</label></td>
                <td class="td_right">
                  <input
                    type="email"
                    name="email"
                    id="email"
                    placeholder="email"
                  />
                </td>
              </tr>
              <tr>
                <td class="td_left"><label for="name">姓名</label></td>
                <td class="td_right">
                  <input
                    type="text"
                    name="name"
                    id="name"
                    placeholder="真实姓名"
                  />
                </td>
              </tr>
              <tr>
                <td class="td_left"><label for="phone">手机号</label></td>
                <td class="td_right">
                  <input
                    type="text"
                    name="phone"
                    id="phone"
                    placeholder="手机号"
                  />
                </td>
              </tr>
              <tr>
                <td class="td_left"><label>性别</label></td>
                <td class="td_right">
                  <input
                    type="radio"
                    name="gender"
                    id="gender"
                    value="male"
                  />男
                  <input
                    type="radio"
                    name="gender"
                    id="gender"
                    value="female"
                  />女
                </td>
              </tr>
              <tr>
                <td class="td_left"><label for="birthday">出生日期</label></td>
                <td class="td_right">
                  <input type="date" name="birthday" id="birthday" />
                </td>
              </tr>
              <tr>
                <td class="td_left"><label for="checkcode">验证码</label></td>
                <td class="td_right">
                  <input
                    type="text"
                    name="checkcode"
                    id="checkcode"
                    placeholder="验证码"
                  />
                  <img id="img_check" src="image/verify_code.jpg" alt="" />
                </td>
              </tr>
              <tr>
                <td colspan="2" align="center">
                  <input type="submit" id="btn_sub" value="注册" />
                </td>
              </tr>
            </table>
          </form>
        </div>
      </div>

      <div class="rg_right">
        <p>已有账号？<a href="#">立即登录</a></p>
      </div>
    </div>
  </body>
</html>

css文件内容

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }

  body {
    background: url(image/background2.jpg) no-repeat center;
  }
  .rg_layout {
    width: 900px;
    height: 500px;
    border: 8px solid #eeeeee;
    background-color: white;
    margin: auto;
    margin-top: 20px;
    background-color: #eff4ff;
  }

  .rg_left {
    /* border: 1px solid red; */
    float: left;
    margin: 15px;
  }
  .rg_left > p:first-child {
    color: #fddd64;
    font-size: 20px;
  }
  .rg_left > p:last-child {
    color: #929295;
    font-size: 20px;
  }

  .rg_center {
    float: left;
    padding-top: 20px;
  }

  .rg_right {
    /* border: 1px solid red; */
    float: right;
    margin: 15px;
    font-size: 30px;
  }
  .rg_right > P:first-child {
    font-size: 10px;
  }

  .rg_right p a {
    color: red;
  }

  .td_left {
    width: 100px;
    text-align: right;
    height: 45px;
  }
  .td_right {
    padding-left: 50px;
  }

  #username,
  #password,
  #email,
  #name,
  #phone,
  #birthday,
  #checkcode {
    width: 250px;
    height: 32px;
    border: 1px solid #929295;
    /* 边框圆角 */
    border-radius: 5px;
    padding-left: 10px;
  }

  #checkcode {
    width: 100px;
  }

  #img_check {
    height: 32px;
    vertical-align: middle;
  }
  #btn_sub {
    width: 150px;
    height: 40px;
    background-color: #fede65;
    border: 1px solid #fede65;
    border-radius: 5px;
    margin-top: 15px;
  }