今天的内容:
CSS可以更灵活的修改HTML页面的样式
语法：属性:值; 不同属性的定义要用分号分开.
使用style属性修改, 示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <div style="border: 10px; color: brown;">This is brown</div> </body> </html>
使用style标签修改:
通过id选择器( 各个标签的id不能相同) 示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style> #test{ /*在指定的id前加#号即可进行id定位*/ border:10px; color:brown; } </style> </head> <body> <div id="test">This is brown</div> </body> </html>
通过class选择器修改:(class可以相同) 示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style> .test{ /*在指定的class前加 . 号即可进行id定位*/ border:10px; color:brown; } </style> </head> <body> <div class="test">This is brown</div> <!--此处要定义相应class属性的值--> </body> </html>
通过link标签引入CSS文件:
CSS文件:
/* 此处定义了一个名为test的class */
.test{
color: rebeccapurple;
text-align: center;
border: 10px;
border-style: solid;
}
HTML文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<!-- 此处要定义type属性为text/css href属性为css所在的地方-->
<link rel="stylesheet" type="text/css" href="./hello.css">
</head>
<body>
<div class="test">This is brown</div> <!--此处要定义相应class属性的值-->
</body>
</html>
明天的打算: 写Java例题
问题: 无