CSS和HTML结合

最新推荐文章于 2024-05-19 01:30:07 发布

哆啦AI梦

最新推荐文章于 2024-05-19 01:30:07 发布

阅读量218

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/m0_43425029/article/details/110225469

版权

Java Web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="border:1px solid red;">div标签1</div>
    <div style="border:1px solid red;">div标签2</div>
    <span style="border: 1px solid red;">span标签1</span>
    <span style="border: 1px solid red;">span标签2</span>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            border:1px solid red;
        }
        span{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div >div标签1</div>
    <div >div标签2</div>
    <span >span标签1</span>
    <span >span标签2</span>
</body>
</html>

在这里插入图片描述
CSS文件

div{
    border:1px solid red;
}
span{
    border:1px solid red;
}

HTML文件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
    <div >div标签1</div>
    <div >div标签2</div>
    <span >span标签1</span>
    <span >span标签2</span>
</body>
</html>

运行结果：
在这里插入图片描述 CSS选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style type="text/css">
        div{
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        span{
            border:5px dashed blue;
            color:yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div >div标签1</div>
    <div >div标签2</div>
    <span >span标签1</span>
    <span >span标签2</span>
</body>
</html>

在这里插入图片描述 ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style type="text/css">
        #id001{
            color:blue;
            font-size: 30px;
            border:1px yellow solid;
        }
        #id002{
            color:red;
            font_size:20px;
            border:5px blue dotted;
        }
    </style>
</head>
<body>
    <div id="id001">标签1</div>
    <div id="id002">标签2</div>
</body>
</html>

在这里插入图片描述
class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class选择器</title>
    <style type="text/css">
        .class01{
            color: yellow;
            font-size: 30px;
            border: 1px solid yellow;
        }
        .class02{
            color: grey;
            font_size:26px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="class01">div标签class01</div>
    <div class="class02">div标签2</div>
    <span class="class01">span标签class01</span>
    <span>span标签2</span>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        .class01,#id01{
            color: blue;
            font-size: 20px;
            border: 1px yellow solid;
        }
    </style>
</head>
<body>
    <div class="class01">div标签class01</div><br>
    <span id="id01">span标签</span><br>
    <div>div标签</div><br>
    <div>div标签id01</div><br>
</body>
</html>

在这里插入图片描述 CSS常用样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css常用样式</title>
    <style type="text/css">
        div{
            color: red;
            border: 1px yellow solid;
            width: 300px;
            height: 300px;
            background: antiquewhite;
            font-size: 20px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        a{
            text-decoration: blue;
        }
        table{
            border: 1px hotpink solid;
            border-collapse: collapse;
        }
        td{
            border: 1px hotpink solid;
        }
        ul{
            list-style:none;
        }

    </style>
</head>
<body>
    <ul>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>
        <li>11111111111111111</li>

    </ul>
    <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
    </table>
    <a href="http://www.baidu.com">百度</a>
    <div>我是div标签</div><br>
</body>
</html>

在这里插入图片描述

哆啦AI梦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS和HTML结合

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div style="border:1px solid red;">div标签1</div> <div style="border:1px solid r
复制链接

扫一扫

专栏目录