文章目录
一、设置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
