首先,你需要在HTML中引用CSS文件,如下所示:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
这样CSS文件就会被引入到HTML页面中。
接下来,大家就可以开始设置样式了。通过指定选择器,就可以选中HTML元素并应用样式,如下所示:
/*p标签的样式*/ p { font-size: 16px; color: #333; line-height: 1.5; }
上述代码中,大家选中了所有的p标签,并设置了它们的字体大小、颜色和行高。
如果需要对某一个具体的元素设置样式,可以给它指定一个ID或class,如下所示:
/*ID为header的元素样式*/ #header { background-color: #f5f5f5; height: 100px; } /*class为nav的元素样式*/ .nav { display: flex; justify-content: space-between; align-items: center; }
上述代码中,大家给ID为header的元素设置了背景颜色和高度,给class为nav的元素设置了弹性布局和对齐方式等样式。
最后,还可以使用伪类选择器对元素的状态进行样式设置。如下所示:
/*a标签正常状态样式*/ a { color: #333; } /*a标签鼠标悬浮状态样式*/ a:hover { color: #f00; text-decoration: underline; }
上述代码中,大家给a标签设置了正常状态和鼠标悬浮状态下的样式。
通过CSS设置自己的样式,可以让网站更加独特、有吸引力。建议好好学习掌握。