文章目录
- 一、设置CSS样式
- 二、CSS代码语法
- 三、CSS选择器
- 四、css文档手册分享
关于JavaWeb中的HTML：《你是不是已经超纲了？一文解决JavaWeb中要求的HTML，是什么样的？》
一、设置CSS样式
有三种设置方式。
1、在HTML标签内设置：仅对当前标签有效。
①代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这是网页标题</title>
</head><body><div style="border: 2px double black;width: 100px; height: 100px;"></div>
</body></html>
②显示效果
2、在head标签内设置：对当前页面有效
①代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这是网页标题</title><style type="text/css">.one {width: 100px;height: 100px;border: 2px solid rgb(25, 23, 27);background-color: green;margin-top: 20px;margin-left: 10px;}</style>
</head><body><div class="one"></div><div class="one"></div><div class="one"></div>
</body></html>
②显示效果
3、引入外部CSS样式文件
①代码
html文件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这是网页标题</title><link rel="stylesheet" href="divstyle.css">
</head><body><div class="one"></div><div class="one"></div><div class="one"></div>
</body></html>
css文件
.one {width: 100px;height: 100px;border: 2px solid rgb(25, 23, 27);background-color: blue;margin-top: 20px;margin-left: 10px;}
②显示效果
二、CSS代码语法
①CSS样式由选择器和声明组成，而声明又由属性和值组成。
②属性和值之间用冒号隔开。
③多条声明之间用分号隔开。
④使用/* … */声明注释。
三、CSS选择器
1、标签选择器
①代码
HTML代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这是网页标题</title><link rel="stylesheet" href="divstyle.css">
</head><body><p>这是第一个段落！</p><p>这是第二个段落！</p><p>这是第三个段落！</p>
</body></html>
css代码：
p {font-size: 32px;color: blueviolet;font-family: "微软雅黑";}
②显示效果
2、id选择器
①代码
HTML代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这是网页标题</title><link rel="stylesheet" href="divstyle.css">
</head><body><p>这是第一个段落！</p><p id="two">这是第二个段落！</p><p>这是第三个段落！</p>
</body></html>
css代码：
#two {font-size: 20px;color: blueviolet;background-color: aqua;}
②显示效果
3、类选择器
①代码
HTML代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>这是网页标题</title><link rel="stylesheet" href="divstyle.css">
</head><body><p class="one">这是第一个段落！</p><p id="two">这是第二个段落！</p><p>这是第三个段落！</p>
</body></html>
css代码：
.one {font-size: 12px;color: blue;background-color: red;}
②显示效果
四、css文档手册分享
百度网盘链接：点击下载css文档手册
提取码：0909
关于Java中的JavaScript：《初学JavaWeb需要的前端js，JavaScript是什么样的？》
