CSS
-
层叠样式表
(Cascading Style Sheets) - css可以用来为网页创建样式表,通过样式表可以对网页进行装饰。
- 所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的。
- 而css就可以分别为网页的各个层次设置样式。
基本语法
- CSS的样式表由一个一个的样式构成,一个样式又由
选择器
和声明块
构成。 -
语法:
选择器 {样式名:样式值;样式名:样式值 ; }
例
p{color:red ; font-size:12px;}
行内样式
- 可以直接将样式写到标签内部的style属性中,这种样式不用填写选择器,直接编写声明即可。
<p style="color: red;font-size: 30px"></p>
- 这种方式编写简单,定位准确。但是由于直接将css代码写到了html标签的内部,导致结构与表现
耦合
,同时导致样式不能够复用,所以这种方式我们不使用。
内部样式表
- 可以直接将样式写到
<style>
标签中。
<style>
p{color:red;font-size:30px;}
</style>
- 这样使css独立于html代码,而且可以同时为多个元素设置样式,这是我们使用的比较多的一种方式。
- 但是这种方式,样式只能在一个页面中使用,不能在多个页面中重复使用。
外部样式表
- 可以将所有的样式保存到一个外部的css文件中,然后通过
<link>
标签将样式表引入到文件中。
<link rel="stylesheet" type="text/css" href="style.css">
- 这种方式将样式表放入到了页面的外部,可以在多个页面中引入,同时浏览器加载文件时可以使用缓存,这是我们开发中使用的最多的方式。