CSS样式规则:
CSS规则由两部分构成:选择器(告诉浏览器给谁设置样式),声明(每个声明由属性和值构成由分号隔开位于大括号内)
CSS注释:/* */
例:h1{color:red;font-size:14px;}
相同属性和值的选择器可以重叠:h1,h2,p{color:red;font-size:14px;}
CSS使用方法,如何引用CSS样式
1.行内样式(内联样式)
在开始标签内添加style样式属性
例如:<p style="color:red;font-size:20px;">内容</p >
缺点:长度冗余,不便于后期维护,不建议大量使用
2.内部样式表(嵌入样式)
把css样式写在:
<style type="text/css">
h1{color:red;font-size:14px;}
CSS样式...
</style>
样式写好后,要放在<head></head>标签内。
对于低版本浏览器不识别style,要用<!-- -->包裹:
<!--
CSS样式...
-->
3.外部样式表
把CSS样式代码写在独立的一个文件中,开发中经常使用
页面加载时,同时加载CSS样式
扩展名:CSS文件名.CSS
引入外部文件:
<head>
<link href="XX.css" rel="stylesheet" type="text/css" />
</head>
其中XX.css文件中:
h1{color:red;font-size:14px;}
p{color:red;font-size:14px;}
等等诸如此类的代码
4.导入式
@import“外部CSS样式”
把CSS样式代码写在独立的一个文件中,在读取完HTML文件之后加载
或者 @import url(XX.css);
说明:@import要写在<style>标签内最开始
例如:
<head>
<style type="text/css">
@import url(css.css);
</style>
</head>
总结:
使用链入外部样式的好处
1.CSS和HTML分离
2.多个文件可以使用同一个样式文件
3.多文件引用同一个css文件,css只需下载一次
css使用方法优先级:
行内样式>内部样式>外部样式
注意:内部样式与链入外部样式的优先级取决于所处位置的先后,最后的定义优先级最高