CSS规则由两部分组成,选择器和声明
选择器:标签,告诉浏览器哪些标签需要用到这个样式
声明:样式的内容,由一或多对属性:值以;隔开组成,由{}包围,需要多个选择器时以逗号隔开
例如:p,h1{font-size=“50px”;
color=“blue”}
CSS的注释:/* */
CSS的引用方式:
- 行内样式(内联样式)
- 内部样式(嵌入样式)
- 外部样式表
- 导入式
行内样式:
直接在开始标签写入style,与标签的属性类似 <p style=“color:red”>内容</p>
与html同时加载
内部样式:
写在<head> </head>标签内的style标签里
<head>
<style type=“text/css”>
<!--
CSS样式
-->
<style>
</head>
在用内部样式时,需要将style里的内容用html的注释来注释起来,因为一些低版本的浏览器不支持style标签
与html同时加载
外部样式表:
外部样式就是吧css单独写在一个css文件中,再将其导入到html中
css文件中直接写入一或多个选择器和声明的组合即可
引用:
在html的head标签里:<link href=“xxx.css” type=“text/css” rel=“stylesheet" />
rel 属性规定当前文档与被链接文档之间的关系,只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持。
html加载时同时加载css样式
一般选用外部样式表
优点:
- css和html分离
- 多个文件可以使用用一个样式的内容
- 多个文件引用同一个css文件,css只需加载一次
导入式:
需要在head里写入style标签,再在style标签里使用导入式的方法
<style type=“text/css”>
@import ”xxx.css” 或
@import url(xxx.css)
</style>
html加载完后再加载css样式
缺点:可能出现html加载很慢,还没加载完时显示出来的内容无css
优先级:
一切遵循究竟原则,行内样式永远最优先,其它的取决于引用位置
更多专业前端知识,请上 【猿2048】www.mk2048.com