CSS入门案例和引入方式
new.css
p{ color: yellow; }
day03/01-css入门案例.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>day03/01-css入门案例.html</title> <!-- css引入方式2:内部方式,写在<style>标签内部 语法: :<style> 选择器{样式名:样式值;} </style> 选择器用于筛选匹配标签进行渲染样式 推荐写的位置:head标签内部,希望数据内容加载的时候就有样式 优先级:行内优先级最高,符合就近原则 其他内部或外部方式,由谁在下面会覆盖上面的样式 3种方式使用场景: 行内方式,推荐与javascript一起使用,控制逻辑效果 内部方式,只控制当前页面的元素样式渲染 外部方式,公共样式,有可能1到多个html页面使用。 --> <style> p { color: blue; } </style> <!-- css引入方式3:外部方式 实现步骤:1.在外部创建独立的.css文件,写样式代码 2.在需要的html页面引入.css文件, 使用link标签引入 ./: 代表在当前文件所在目录下查找资料 ../:到上一层去查找 --> <link rel="stylesheet" href="./css/new.css"> </head> <body> <!-- css引入方式1:行内方式,写在html标签属性里面 语法:<标签 style="样式名:样式值;"></标签> --> <p style="color: red;">我爱中国</p> <p>我爱工作</p> </body> </html>
效果