1. 层叠样式表(Cascading Style Sheets)
2. Css可以用来为网页创建样式表,通过样式
表可以对网页进行装饰。
3. 所谓层叠,可以将整个网页想象成是一-层
一层的结构,层次高的将会覆盖层次低的。
而css就可以分别为网页的各个层次设置样
式。
可以将css样式编写到元素的style属性当中
将杨树直接编写到style属性中,这种样式我们成为内联样式
内联样式只对当前的元素中的内容起作用
内联样式不方便复用,不方便后期维护,不推荐使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css简介</title> </head> <body> <!-- 可以将css样式编写到元素的style属性当中 将杨树直接编写到style属性中,这种样式我们成为内联样式 内联样式只对当前的元素中的内容起作用 --> <p style="font-size: 20px; color: red;">锄禾日当午,汗滴禾下土</p> </body> </html>
也可以将css样式编写到head中的style标签里
将样式表编写的style标签中,然后通过css选择器选中指定元素
然后可以同时为这些元素一起设置样式,这样可以使样式进一步的复用
将样式表编写到style标签中,也可以使表现和结构进一步的分离,推荐使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css简介</title> <!-- 也可以将css样式编写到head中的style标签里 将样式表编写的style标签中,然后通过css选择器选中指定元素 然后可以同时为这些元素一起设置样式,这样可以使样式进一步的复用 将样式表编写到style标签中,也可以使表现和结构进一步的分离,推荐使用 --> <style type="text/css"> p { font-size: 20px; color: red; } </style> </head> <body> <!-- 可以将css样式编写到元素的style属性当中 将杨树直接编写到style属性中,这种样式我们成为内联样式 内联样式只对当前的元素中的内容起作用 --> <p style="font-size: 20px; color: red;">锄禾日当午,汗滴禾下土</p> <p>谁知盘中餐.粒粒皆辛苦</p> </body> </html>
效果: