文本属性
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>
aaAV我是一个标签
本文介绍了Java中控制台输出的println与print的区别，展示了printf的格式化功能，并详细讲解了如何使用Scanner进行键盘输入，包括字符串、整数和浮点数的读取，以及next与nextLine之间的差异及其常见问题解决方案
----------- ----------- 表格属性 border属性指定边框属性 -  boder-collapse属性设置表格的边框是否被折叠成单一  weight height 宽高 -  text-align属性表格文字左右对齐，vertical-align属性表格文字上下对齐 -  padding设定单元格文本与四个方向边框的距离，background-color设定单元格背景颜色，color设定单元格文本的颜色 -  示例实操： -点击查看代码
<!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>
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
点击查看代码
<!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>
- 列表1
- 列表2
- 列表3
- 列表4
- 列表5
点击查看代码
<!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>
one
two
three
通用兄弟选择器
例子：
点击查看代码
<!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>
one
two
three
hhhh
four
盒子模型
示例：
点击查看代码
<!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{width:100px;height:100px;background-color:red;padding:50px 10px;/*第一个值为上下间距，第二个值为左右间距也可以用left，right，top，bottom来分开写*/border:5px solid blue;margin:50px 10px;/*第一个值为上下间距，第二个值为左右间距也可以用left，right，top，bottom来分开写*/}</style>
</head>
<body><div>我是内容</div>
</body>
</html>
我是内容
