------------恢复内容开始------------
学HTML的时候还没有想到要写博客记录的习惯,所以现在博客记录就直接从css开始吧。
CSS的学习我选择听了B站上的一个课程,是尚硅谷的课程,感觉效果还不错,学习方法就是跟着视频一起敲代码,相关的笔记直接打在了注释里,所以以后这里的记录主要就是以代码的形式为主了。
内联样式表和内部样式表:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内联样式表</title> <!-- 也可以将CSS样式写道head的style标签里 --> <style type="text/css"> /* 这里是内部样式表 */ p{ /* 这里,是一个选择器 */ color: red; font-size: 90px; } </style> </head> <body> <!-- 可以将CSS样式编写到元素的style属性当中 将样式直接编写到style属性当中,这样的样式几位内联样式 内联样式只对当前的元素的内容起作用 内联样式不方便重复使用 内联样式不方便后期的维护,属于结构和表现的结合 --> <p style="color: red;font-size: 30px;">谁知盘中餐,粒粒皆辛苦。</p> </body> </html>
外部样式表:
<!-- 将样式表编写到外部CSS的文件中,然后通过link标签来将外部的CSS文件引入到当前页面中 这样外部的css样式表会应用到当前页面 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>外部样式表!</title> <link rel="stylesheet" type="text/css" href="style.css"/> <!-- rel和ytpe为固定值;href为相对路径 --> </head> <body> <p>外部样式表!</p> <!-- 将css样式统一编写到外部样式表中,完全使结构和样式分离, 可以使样式表在不同的页面中使用 将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器的缓存加快用户的访问速度,提高用户体验 --> <!-- 在开发中,最推荐使用外部css使用方式 --> </body> </html>
外部样式表需要单独写一个css文件,这里是一个极其简单的css文件:
p{ color: red; font-size: 30px; }