CSS基本简介以及引入方式
2018-09-17 本文已影响8人
lvyweb
标签（空格分隔）： 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>
外链式和导入式的区别和联系:
导入式与链接式在使用上非常相似，都实现了页面与样式的文件分离。区别在与导入式在页面初始化时，把样式文件导入到页面中，这样就变成了内嵌式，而链接式仅是发现页面中有标签需要格式时候才以链接的方式引入，比较看来还是链接式最为合理。
