一、CSS简介1、css：修饰页面2、css书写位置：开辟css的书写环境3、css选择器：选中页面的结构，设置样式（30种）4、css具体样式：字体、布局、背景······二、CSS语法css注释快捷键：ctrl+/css语法：color样式名: red样式值; background-color样式: pink样式值; font-size样式名: 30px样式值 最后一组样式，不用写分割号; 但一般情况下，我们都是加上的 三、CSS书写位置（一）内联样式/行内样式1、书写位置 开始标签内添加style属性，将css写在style属性值的位置， 可以写多组样式，样式与样式之间用;分割2、注意点尽量少用3、缺点（1）结构和样式耦合了 ，后期不方便维护（2）不方便修改（3）不方便复用（复制并不是复用）（4）优先级比较高4、优点（1）不需要额外选中标签，谁要样式就给谁添加style属性（2）优先级比较高div style=" width: 100px; height: 100px; background-color: pink; color: white; font-size: 20px; " 回入才更，的。 /div（二）内部样式表1、书写位置在head标签内，添加一个子标签style标签，在style标签中，书写css 通过选择器选中结构，设置css样式2、优点（1）样式和结构一定程度分开了（2）修改方便3、缺点（1）html结构和css样式还在同一个html文件下，如果结构比较多，样式比较多，会导致html文件非常多，不方便维护（2）多页面之间样式不方便复用4、注意当页面结构不多，样式不多，且不需要复用时，可以使用 !DOCTYPE html html lang="en" head meta charset="UTF-8" meta content="width=device-width, initial-scale=1.0" titleDocument/title style div { width: 100px; height: 100px; background-color: orange; color: white; font-size: 20px; } /style /head body div 雷你登，帅们。 /div /body /html（三）外部样式表1、书写位置在html文件外，新建一个.css文件，通过css选择器选中对应的结构设置样式，哪个html文件要用，就通过link标签引入即可2、面试题link标签和@import引入样式有什么区别？相同点：都是引入css文件的方式不同点：link标签是html的语法，@import是css的语法 link标签引入样式采用的是链接的方式，@import引入是属于导入的方式总结：相对来说link标签效率会更高3、方式（1）方式一：使用link标签在html文件中引入css文件步骤一：整合home页面所有的css文件（两种整合方式），css文件中引入其他的css文件第一种整合方式：@import url()/* 头部css */ @import url(../common/header.css); /* 主体css */ @import url(./homemain.css); /* 底部css */ @import url(../common/footer.css);第二种整合方式：@import ''/* 用;分割 */ @import '../common/header.css'; @import './detailmain.css'; @import '../common/footer.css'步骤二：使用link标签在html文件中引入整合后的css文件!doctype html html lang="en" head meta charset="UTF-8" / meta content="width=device-width, initial-scale=1.0" / titleDocument/title !-- link,是在html文件中引入css文件 -- link /head body header头部/header main主体/main footer底部/footer /body /html（2）方式二：在内部样式表中用@import引入css文件!doctype html html lang="en" head meta charset="UTF-8" / meta content="width=device-width, initial-scale=1.0" / titleDocument/title !-- 内部样式表 -- style /*@import是css语言不能写在style外面，html环境中无法识别*/ @import url(./css/common/header.css) main { width: 1000px; height: 400px; background-color: bisque; } /style /head body header头部/header main主体/main /body /html四、选择器（一）常用选择器1、标签选择器（1）语法：标签名{}（2）作用：选中页面中所有对应的标签（3）注意： （a）页面常用的标签就那么多，使用标签选择器很大可能会冲突 （b）优先级比较低，样式很容易被覆盖