上面代码的意思是将<p>元素里的文本颜色设置为红色,字体大小设置为30px.
像上面这样把CSS代码和HTML代码混杂在一起的做法是非常不妥的,它并不符合表现和内容相分离的设计原则,
因此建议使用下面的方法,代码如下:
node2:/var/www/html/aa#
node2:/var/www/html/aa#cat a9.html
<style>
.demo{
color:red;
front-size:30px;
}
</style>
<p class="demo">CSS Demo.</p>
先把样式写在<style>标签里,然后用class属性将元素和样式联系起来,class作为连接样式和网页结构的纽带。
这样的写法不仅容易理解和阅读,而且当需要改变一些样式的时候,只要在<style>标签里改变相关的样式即可。
例如要使所有的class和demo的<p>元素里的字体加粗,可以直接在<style>里编写,而不需要去网页里寻找
所有class为demo的<p>元素再逐个添加样式
node2:/var/www/html/aa#cat a9.html
<style>
.demo{
color:red;
front-size:30px;
font-weight:bold;//字体加粗
}
</style>
<p class="demo">CSS Demo.</p>