HTML，CSS基础总结

最新推荐文章于 2025-05-26 16:38:55 发布

维维sanguine

最新推荐文章于 2025-05-26 16:38:55 发布

阅读量161

点赞数

分类专栏： JavaWeb 文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_45459356/article/details/119681554

版权

JavaWeb 专栏收录该内容

2 篇文章

订阅专栏

疑惑：整理思维导图的过程用的时间挺长的，有时候内容也比较简单，纠结到底有没有必要整理？？？孩子好难。。。

HTML总结
在这里插入图片描述
CSS总结

组合选择器举例效果图

组合选择器代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #id001{
            font-size: 20px;/*字体大小*/
            color: red;/*字体颜色*/
            border: 1px yellow solid;/*边框*/
            width: 300px;/*宽度*/
            height: 300px;/*高度*/
            background-color: beige;/*背景颜色*/
            margin-left: auto;/*DIV居中*/
            margin-right: auto;
            text-align: center;/*文本居中*/
        }

        #id002{
            text-decoration: none;/*超链接去掉下划线*/
        }

        #id003{
            border: 1px red solid;/*边框*/
            border-collapse: collapse;/*表格边框合并*/
        }

        td{
            border: 1px red solid;/*边框*/
        }

        #id004{
            list-style: none;/*去掉列表修饰*/
        }


    </style>
</head>
<body>

<div >我是不加样式的div</div><br/><br/>
<div id="id001">我是加样式的div</div>
<a href="http://www.baidu.com" >我是不加样式的超链接</a><br/>
<a href="http://www.baidu.com" id="id002">我是加样式的超链接</a><br/><br/>
<table>
    <h7>我是不加样式的表格</h7>
    <tr>
        <td>1.1</td>id
        <td>1.2</td>
    </tr>
</table>
<table id="id003">
    <h7>我是加样式的表格</h7>
    <tr>
        <td>1.1</td>id
        <td>1.2</td>
    </tr>
</table><br/>

<h7>我是不加样式的无序序列</h7>
<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王麻子</li>
</ul>
<h7>我是加样式的无序序列</h7>
<ul id="id004">
    <li>张三</li>
    <li>李四</li>
    <li>王麻子</li>
</ul>

</body>
</html>