CSS 是层叠样式表(Cascading Style Sheets)用来定义网页的显示效果。可以解决 html 代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能,简单一句话:css 将网页内容和显示样式进行了分离,提高了显示功能。
css和html结合的四种方式:
1、 style属性方式
利用标签中 style 属性来改变每个标签的显示样式。
<p style="background-color:#FF0000; color:#FFFFFF">
P标签段落内容。
</p>
该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合布局修改。
2、 style标签方式:(内嵌方式)
在 head 标签中加入style标签,对于多个标签进行统一修改。
<head>
<style type="text/css">
p { color:#FF0000; }
</style>
</head>
该方式可以对单个页面的样式进行统一设置,但是对于局部不够灵活。
3、 导入方式:
前提是已经存在一个定义好的 css 文件,网页的一部分需要用到,那么就利用这种方式。
<style type="text/css">
@import url(1.css);
div { color:#FF0000; }
</style>
url括号后面必须要用分好结束。如果导入进来的样式与页面定义的样式重复,以本页定义的样式为准。
4、 链接方式:
通过 head 标签中 link 标签来实现,前提也是先要有一个已定好的 css 文件。
<link rel="stylesheet" href="1.css" type="text/css">
可以通过多个 link 标签来链接进来多个css文件。重复样式以最后链接进来的css演示为准。
5、 样式优先级:
由上到下,由内到外。优先级由低到高。
6、 总结css代码格式:
选择器名称 {属性名:属性值;属性名:属性值;……}
属性与属性之间用 分号 隔开
属性值与属性值之间用 冒号 连接
如果一个属性有多个值的话,那么多个值用 空格 隔开。