文本属性
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
hhhhfour
盒子模型
示例：
点击查看代码
<!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>