注:学习笔记基于小甲鱼学习视频,官方论坛:https://fishc.com.cn/forum.php
鱼C课程案例库:https://ilovefishc.com/html5/ html5速查手册:https://man.ilovefishc.com/html5/ css速查手册:https://man.ilovefishc.com/css3/
HTML中使用CSS有三种方法:内联样式、内部样式表、外部样式表: 内联样式:
<!DOCTYPE html> <html> <head> <title>内联样式</title> <meta charset="utf-8"> </head> <body> <p>I love fishC!</p> <p style="color: red; font-size:14px;">零基础学习CSS</p> <p>I <span style="border: 2px black dashed; padding: 5px;">love</span> HTML.</p> </body> </html> <!DOCTYPE html> <html> <head> <title>内部样式表</title> <meta charset="utf-8"> </head> <body> <style> h1 {color: red;} p {color: green; font-size: 14px;} a {color: #ee82ee; border: 2px black dashed; padding: 5px;} </style> <h1>内部样式表</h1> <p>I love fishC!</p> <p>零基础学习CSS</p> <a href="https://www.baidu.com/" target="_blank">快点开,有好东西!</a> </body> </html>内部样式表:
外部样式表:
<!DOCTYPE html> <html> <head> <title>外部样式表</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="styles.css" </head> <body> <h1>外样式表</h1> <p>I love fishC!</p> <p>零基础学习CSS</p> <a href="https://www.baidu.com/" target="_blank">快点开,有好东西!</a> </body> </html> h1 { color: red; } p { color: green; font-size: 14px; } a { color: #ee82ee; border: 2px black dashed; padding: 5px; }