2024-10-21

文本属性
text-align属性控制文本的水平对齐方式


text-decoration属性控制文本下划线


text-transform属性控制文本的大小写


text-indent属性控制文本的首行缩进


示例实操

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3{
            text-align:center;
            text-decoration: overline;
            text-transform:lowercase;
        }
        p{
            text-indent:30px;
            /*30px为首行缩进两个字*/
        }
    </style>
</head>
<body>
    <h3> aaAV我是一个标签</h3>
    <p> 本文介绍了Java中控制台输出的println与print的区别，展示了printf的格式化功能，并详细讲解了如何使用Scanner进行键盘输入，包括字符串、整数和浮点数的读取，以及next与nextLine之间的差异及其常见问题解决方案</p>
</body>
</html>
Document

aaAV我是一个标签

本文介绍了Java中控制台输出的println与print的区别，展示了printf的格式化功能，并详细讲解了如何使用Scanner进行键盘输入，包括字符串、整数和浮点数的读取，以及next与nextLine之间的差异及其常见问题解决方案

----------- ----------- 表格属性 border属性指定边框属性 - ![](https://img2024.cnblogs.com/blog/3475468/202410/3475468-20241004121238434-1959163388.png) boder-collapse属性设置表格的边框是否被折叠成单一 ![](https://img2024.cnblogs.com/blog/3475468/202410/3475468-20241004121055501-632839024.png) weight height 宽高 - ![](https://img2024.cnblogs.com/blog/3475468/202410/3475468-20241004125259879-123948902.png) text-align属性表格文字左右对齐，vertical-align属性表格文字上下对齐 - ![](https://img2024.cnblogs.com/blog/3475468/202410/3475468-20241004125318291-224660933.png) padding设定单元格文本与四个方向边框的距离，background-color设定单元格背景颜色，color设定单元格文本的颜色 - ![](https://img2024.cnblogs.com/blog/3475468/202410/3475468-20241004130055319-1264145005.png) 示例实操： -
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border:1px solid red;
            /*分别为：边框大小 边框样式（实线） 颜色*/
        }
        table{
            border-collapse:collapse;
            /*边框折叠*/
            width:500px;
            height:300px;
        }
        td{
            text-align:center;
            vertical-align:top;
            padding:20px;
            /*对单元格添加文字与四个方向边框的距离*/
            background-color:blue;
            color:red;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table> 
</body>
</html>
Document
单元格 单元格 单元格
单元格 单元格 单元格
单元格 单元格 单元格
--------------- --------------- 关系选择器 - ![](https://img2024.cnblogs.com/blog/3475468/202410/3475468-20241004130326822-592112728.png) 例子：
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
            color:red;
        }
        /*只要是ul的后代中的li都生效属性*/
    </style>
</head>
<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <div>
            <ol>
                <li>列表4</li>
                <li>列表5</li>
            </ol>
        </div>
    </ul>
</body>
</html>
Document
  • 列表1
  • 列表2
  • 列表3
    1. 列表4
    2. 列表5
-------------------------------- -------------------------------- 子代选择器 - ![](https://img2024.cnblogs.com/blog/3475468/202410/3475468-20241004130710410-1219262204.png) 例子：
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>a{
            color:red;
            /*只对子代生效，对更深一层不生效*/
        }
    </style>
</head>
<body>
    <div>
        <a>子代</a>
        <p><a>孙代</a></p>
        <a>子代</a>
    </div>
</body>
</html>

相邻元素选择器


例子：

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3+p{
            color:red;
        }
    </style>
</head>
<body>
    <h3>one</h3>
    <p>two</p>
    <p>three</p>
</body>
</html>

通用兄弟选择器


例子：

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3~p{
            color:red;
        }
    </style>
</head>
<body>
    <h3>one</h3>
    <p>two</p>
    <p>three</p>
    <div>hhhh</div>
    <p>four</p>
</body>
</html>

盒子模型



示例：

点击查看代码
posted @ 2024-10-22 15:23  liu某人  阅读(20)  评论(0)    收藏  举报