|
目录
1.css简介
2.引入CSS样式表
2.1外部样式表（外链式）
2.2内部样式表（内嵌样式表）
2.3行内式（内嵌样式表）
@import方式
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">
2.2内部样式表（内嵌样式表）：
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
2.3行内式（内嵌样式表） ：
- 行内样式表与内部样式表有着相似，也是把HTML代码和CSS代码放到同一个HTML文件中，但是两者有着本质的区别：内部样式表的CSS是在style标签内定义的，而行内样式表的CSS是在标签的style属性中定义的
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
例如：
<div style="color: red; font-size: 12px;">好好学习，天天向上</div>
@import方式 ：
@import方式与外部样式表很相似，不过在实际开发中，我们极少使用@import方式，而更倾向于使用link方式。
原因：@import方式是先加载HTML后加载CSS，而link是先加载CSS后加载HTML。如果HTML在CSS之前加载，页面用户体验就会非常差。因此，对于@import这种方式，了解即可
|