HTML中插入CSS修饰的三种方法

最新推荐文章于 2024-04-06 22:43:58 发布

花花的果子

最新推荐文章于 2024-04-06 22:43:58 发布

阅读量4.3k

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/huahuadeguozi/article/details/100168516

版权

在HTML中插入CSS修饰的三种方法

这是刚入坑的小萌新用作总结用的文章，可能会有错的地方，希望大家指出。

第一种方式：内联插入

<div style="width: 300px; height: 300px;background-color: aqua;display: block;
border-color: red ; border-width: 1px; border-style: solid;"></div>

第二种方式:在style标签内定义样式，使用选择器选择需要做修饰的标签。

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第二种方式</title>
        <style type="text/css">
            #usernameErrorMsg{
                /*
                id选择器
                */
                font-size: 20px;
                color: red;
            }
            div{
                width: 300px;
                height: 300px;
                background-color: aquamarine;
                border: red 1px solid;
            }
            .myclass{
                /*类选择器*/
                border: black 1px solid;
            }
        </style>
    </head>
    <body>
        <span id="usernameErrorMsg">对不起，用户名不能为空！</span>
        <div></div>

        <div></div>
        <br><br><br><br>
        <input type="text" class="myclass"/>
        <br><br><br><br>
        <select class="myclass">
            <option>本科</option>
            <option>专科</option>
        </select>

    </body>
</html>

第三种方式:定义一个.css文件，将css文件导入，导入方法如下

<head>
        <meta charset="UTF-8">
        <title>第三种方式</title>
        <link rel="stylesheet" type="text/css" href="css-dom/1.css">
    </head>

花花的果子

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
HTML中插入CSS修饰的三种方法

在HTML中插入CSS修饰的三种方法内联插入<div style="width: 300px; height: 300px;background-color: aqua;display: block; border-color: red ; border-width: 1px; border-style: solid;" ></div>第二种方式第三种方式...
复制链接

扫一扫