标签(空格分隔): CSS
CSS简介
- CSS 指层叠样式表 (Cascading Style Sheets)
- CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
- CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
- CSS就是控制页面布局和样式
HTML,CSS以及JS的关系
- HTML 结构层 负责从 语义的角度搭建页面结构
- CSS 样式层 负责从 审美的角度美化页
- JavaScript 行为层 负责从 交互的角度提升用户体验
如何编写CSS
分为三种,行内样式,内嵌(嵌入,内部)样式,外部样式表(外链式)
1,行内样式
语法:<标签 style="声明1;声明2;......">
说明:行内样式就是直接把CSS代码添加到HTML的标记中,即作为HTML标记的属性标记存在。通过这种方法,可以很简单地对某个元素单独定义样式。作用当前行,不可以重用。
domo:<p style="color:skyblue;">我是天蓝色字体</p>
2,内嵌(嵌入,内部)样式
语法:
<style type="text/css">
选择器{声明1;声明2;声明3;.......}
</style>
说明:head标签中添加style标签。作用整当前页,可是实现重用。
domo:
<style>
p{
color: skyblue;
}
</style>
</head>
<body>
<p>我是天蓝色字体</p>
</body>
3,外部样式表(外链式)
-
外链式:
用法:- 在外部定义CSS样式表并形成以.CSS为扩展名文件,
- 然后在页面中通过<link>链接标记链接到页面中,而且该链接语句必须放在页面的<head>标记区
<link type="text/css" rel="stylesheet" href="要引入的css文件的路径"/>
说明:链接样式很好地将“页面内容”和“样式风格代码”分离成两个或多个文件,实现了页面框架HTML代码和CSS代码的分离,使前期制作和后期维护都十分方便。同一个CSS文件,根据需要可以链接到网站中所有的HTML页面上,使得网站整体风格统一、协调,并且后期维护的工作量也大大减少。作用整个网站,完全可以重用。
注意:其实链接式就是把嵌入式中的样式文件单独分离出来,形成一个样式表文件进行存储。由于链接式在减少代码书写和减少维护工作方面都非常突出,所以链接式是最常用的一种方法。另外,链接式也可以在一个页面中链接多个文件。
导入式:
<style type="text/css">
@import url(要导入的css文件的路径);
</style>
外链式和导入式的区别和联系:
导入式与链接式在使用上非常相似,都实现了页面与样式的文件分离。区别在与导入式在页面初始化时,把样式文件导入到页面中,这样就变成了内嵌式,而链接式仅是发现页面中有标签需要格式时候才以链接的方式引入,比较看来还是链接式最为合理。