目录CSS 是什么基本语法规范引入方式内部样式表行内样式表外部样式CSS 是什么层叠样式表Cascading Style Sheets。CSS 能够对网页中元素位置的排版进行像素级精确控制实现美化页面的效果能够做到页面的样式和结构分离。css控制页面的展示效果html决定页面结构基本语法规范选择器 {一条/N条声明}选择器决定针对谁修改找谁​声明决定修改啥干啥​声明的属性是键值对使用;区分键值对使用:区分键和值。!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style p { color: red; font-size: 40px; } /style /head body phello world/p /body /html引入方式内部样式表写在style标签中嵌入到html内部。理论上来说style放到html的哪里都行但是一般都是放到head标签中。优点这样做能够让样式和页面结构分离。缺点分离的还不够彻底尤其是css内容多的时候。前面写的代码主要都是使用了这种方式实际开发中不常用。PS搜狗搜索中仍然保留着这种写法。行内样式表通过style属性来指定某个标签的样式。只适合于写简单样式只针对某个标签生效。缺点不能写太复杂的样式。这种写法优先级较高会覆盖其他的样式。行内样式表优先级比内部样式表优先级高​h1 stylecolor: blue; font-size: 80px;你好/h1!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style p { color: red; font-size: 40px; } /style /head body p stylecolor: green;hello world/p phello bit/p h1 stylecolor: blue; font-size: 80px;你好/h1 /body /html外部样式实际开发中最常用的方式。创建一个css文件。使用link标签引入csslink relstylesheet href[CSS文件路径]项目结构示例fecode01 └── csspage ├── demo01.html ├── demo01.cssdemo01.css内容p { color: red; font-size: 80px; }demo01.html内容!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title link relstylesheet href./demo01.css /head body phello css/p /body /html