/* 选中元素并更改其样式 */ p { color: red; font-size: 18px; background-color: #eee; } /* 选中类名为“my-class”的元素并更改其样式 */ .my-class { border: 1px solid black; padding: 10px; } /* 选中id为“my-id”的元素并更改其样式 */ #my-id { font-weight: bold; text-decoration: underline; }
通过设定不同的CSS属性,可以改变元素的样式。在上面的代码中,第一个代码块选择了所有的p标签,设置了它们的文字颜色为红色,字体大小为18像素,背景颜色为浅灰色。第二个代码块选中了一个类名为“my-class”的元素,为它加上了黑色边框和内边距。第三个代码块选中了一个id为“my-id”的元素,为它设置了粗体和下划线加粗效果。
为了在网页中应用CSS,可以通过CSS文件的方式将CSS代码引用进来。比如,创建一个名为“style.css”的CSS文件,写入上述CSS代码,然后在HTML文件的头部引用它即可:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
这样,所有在style.css中定义的样式都会被应用到HTML文件中的相应元素中。