【一】什么是CSS
-
层级样式表:就是给HTML标签添加样式的,使它变得好看
【二】注释语法
/* 注释 */
【三】CSS的语法结构
选择符 { 样式属性: 样式属性值; 样式属性: 样式属性值; 样式属性: 样式属性值, 样式属性值, 样式属性值; }
-
一个网页CSS样式是很多的,即使专门开设css文件存储也会很乱
-
这就需要在CSS文件中通过注释来辅助辨别及查找
【四】CSS的三种引入方式
【1】在style标签内部直接书写
-
在html文件中的head标签下的style标签内部编写CSS代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*方式一 */ h1 { color: blue; } </style> </head> <body> <h1>一</h1> <h1>二</h1> </body> </html>
【2】引入外部CSS文件(最正规的方式,解耦合)
-
head内link标签引入外部CSS文件
/*CSS文件*/ h1 {color:green;}
<!--html文件--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>color</title> <link rel="stylesheet" href="CSS基础.css"> </head> <body> <h1>一</h1> <h1>二</h1> </body> </html>
【3】行内式(很少用)
-
标签内部通过style属性直接编写
-
第三种也称之为"行内式"是最不推荐使用的一种方式
-
因为它会将HTML和CSS柔和到一起
-
增加了耦合度