目录
1.css简介
- CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)。
作用
主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、样式、背景的控制及整体排版等，而且可以针对不同的浏览器设置不同的样式。
网页结构与样式相分离
样式复用，便于网站的后期维护
页面的精确控制，让页面更精美
一句话就是：css控制网页外观
css注释 ：
/* 这是注释 */2.引入CSS样式表
想要在一个页面中引入css，共有3种方式：
- 外部样式表
- 内部样式表
- 行内样式表
2.1外部样式表（外链式）
- 也称链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。
- 外部样式表是最理想的CSS引入方式。在实际开发中，为了提升网站的性能速度和可维护性，一般都用外部样式表
<link rel="stylesheet" href="index.css">-
rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 -
href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径
2.2内部样式表（内嵌样式表）：
- 内部样式表，就是把HTML代码和CSS 代码放到同一个HTML文件中。其中，CSS代码放在style标签内，style标签是放在head标签内部的。
-
也称为内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>-
style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
-
type="text/css" 必须添加的，表示这是标准的CSS，但是在html5中可以省略。
-
只能控制当前的页面
-
缺点:没有彻底分离结构与样式
2.3行内式（内嵌样式表） ：
- 行内样式表与内部样式表有着相似，也是把HTML代码和CSS代码放到同一个HTML文件中，但是两者有着本质的区别：内部样式表的CSS是在style标签内定义的，而行内样式表的CSS是在标签的style属性中定义的
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
例如：
<div style="color: red; font-size: 12px;">好好学习，天天向上</div>-
style其实就是标签的属性
-
样式属性和值中间是:
-
多组属性值直接用;隔开
-
只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。
-
缺点:没有实现样式和结构相分离。
@import方式 ：
@import方式与外部样式表很相似，不过在实际开发中，我们极少使用@import方式，而更倾向于使用link方式。
原因：@import方式是先加载HTML后加载CSS，而link是先加载CSS后加载HTML。如果HTML在CSS之前加载，页面用户体验就会非常差。因此，对于@import这种方式，了解即可
