笔记参考b站网课：【前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程】https://www.bilibili.com/video/BV1Kg411T7t9?p=124&vd_source=06e5549bf018e111f4275c259292d0da
目录
写在前面：CSS怎么学？
在学习前端之前，我向一些学长请教了前端三剑客（HTML、CSS、JavaScript）的学习经验。
学长们的一致建议是：HTML和CSS可以快速过，JavaScript要多花点时间深入学习。
CSS入门容易，精通难。因为CSS的属性很多，一个一个去学去记根本不可能，我们要善于借助网络工具。关于HTML和CSS的学习资源，网上的在线教程、速查宝典就有一大推。所以只要了解HTML和CSS标签及属性的基本用法，再借助于在线文档，基本上HTML和CSS的学习就不会有太大问题。
但是要提醒大家的是，不要完全依赖于在线文档。最基本的一些属性（比如字体样式、文本样式等）还是需要掌握并且熟练使用，我写这篇博客就是为了让大家更好地熟悉并运用CSS的常见属性。
一、CSS引入方式
1、内嵌式:CSS写在style标签中
提示:style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
作用范围：当前页面
使用场景：小案例（课后练习案例）
2、外联式: CSS写在一个单独的css文件中
提示:需要通过link标签在网页中引入（例如：<link rel="stylesheet" href="./my .css">）
作用范围：可作用于多个页面
使用场景：项目中
3、行内式:CSS写在标签的style属性中
提示:之后会配合js使用
作用范围：当前标签
使用场景：配合js使用
二、基础选择器
1、标签选择器
结构:标签名{css属性名: 属性值;}
作用:通过标签名，找到页面中所有这类标签，设置样式
注意点:
1、标签选择器选择的是一类标签，而不是单独某一个
2、标签选择器无论嵌套关系有多深，都能找到对应的标签
2、类选择器
结构:.类名{css属性名: 属性值;}
作用:通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点:
1、所有标签上都有class属性，class属性的属性值称为类名 (类似于名字)
2、类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3、一个标签可以同时有多个类名，类名之间以空格隔开
4、类名可以重复，一个类选择器可以同时选中多个标签
3、id选择器
结构: #id属性值{css属性名: 属性值;}
作用: 通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点:
1、所有标签上都有id属性
2、id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!
3、一个标签上只能有一个id属性值
4、一个id选择器只能选中一个标签
4、通配符选择器
结构:*{css属性名:属性值;}
作用:找到页面中所有的标签，设置样式
注意点:
1.开发中使用极少，只会在极特殊情况下才会用到
2.在小页面中可能会用于去除标签默认的margin和padding
上图中，margin和padding的作用是去除标签之间默认的内外边距
三、字体样式
1、字体大小：font-size
属性名:font-size
取值:数字 + px
注意点:
谷歌浏览器默认文字大小是16px
单位需要设置，否则无效
2、字体粗细：font-weight
取值：
1、关键字
正常：normal
加粗：bold
2、纯数字：100~900的整百数（工作中更常用）
正常：400
加粗：700
注意点:
不是所有字体都提供了九
扫一扫
3435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
