文章目录
目录
前言
本篇是对HTML学习的承接，CSS学习的开篇。本篇内容主要记载笔者在CSS学习记下的笔记和学习资料，适合初学者学习的干货，适合学习巩固和考前回顾。
对前端零基础十分友好，但CSS是承接于HTML学习之后的，如果有读者对HTML不了解或者太久没接触忘记的，可以先去我个人界面阅读我五篇的HTML学习资料，再从这篇开始。
如果此篇有什么疑问可以私信询问我，笔者回消息很快的。如果此篇对你有所帮助，恳请您给这篇学习笔记点个赞，将此篇分享给更多的人。
一，CSS基础认知
CSS：层叠样式表（Cascading style sheets）
1，CSS语法规则：
CSS写在style标签中，style标签一般写在head标签里面，title标签下面。
例：
<html>
<head>
<title></title>
<style>
p{
text-align:center;
}
</style>
</head>
<body></body>
</html>2,CSS引入方式
（1）内嵌式：CSS写在style标签中。
补充：style标签虽然可以写在页面任意位置，但通常约定写在head标签中。
（2）外联式：CSS写在一个单独的.css文件中。
补充：需要通过link标签在网页中引入（<link rel="style sheet" href=" ">）。
（3）行内式：CSS写在标签的style属性中
补充：配合js使用。
二，CSS基础选择器
1，标签选择器
结构：标签名{CSS属性名：属性值；}
作用：通过标签名，找到页面中的所有这类标签设置样式。
注意：1，标签选择器选择的是一类标签，而不是单独某一个。2，标签选择器无论嵌套关系多深，都能找到对应标签。
例：
<style>
p{
text-align:center;
}
</style>2，类选择器（class）
结构：.类名{CSS属性名：属性值}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式。
注意：1，所有的标签上都有class属性，class属性的属性值为类名。2，类名可以由数字，字母，下划线，中划线组成，但不能以数字或者中划线开头。3，一个标签可以同时有多个类名，类名之间可以空格隔开。4，类名可以重复，一个类选择器可以同时选中多个目标。
例：
<head>
<style>
.one{
text-align:center;
}
</style>
</head>
<body>
<div class="one"></div>
</body>3，id选择器（id主要是配合js使用）
结构：#id属性值{CSS属性名：属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，摄制样式。
注意：1，所有标签上都有id属性。2，id属性值类似于身份证号码，在一个页面是唯一的，不可重复。3，一个标签只能由一个id属性值。4，一个id选择器只能选中一个标签。
例：
<head>
<style>
#one{
text-align:center;
}
</style>
</head>
<body>
<div id="one"></div>
</body>4,通配符选择器
结构：*{CSS属性名：属性值；}
作用：找到页面中所有标签，设置样式}
注意：1，开发中使用极少，只有极特殊情况下才会用到。2，在小页面中可能会用于去除标签默认的margin和padding（后续讲解）
总结
这篇文章主要记录了CSS的两块基础知识：对于CSS的基础认知和CSS选择器的学习。这两块知识很基础同时也很重要，贯穿着CSS学习的整个过程中。当然，文中的知识点很基础，如果想继续深入学习的话，可以阅读我下一篇CSS学习笔记或者是在社区寻找编程大佬的文章。谢谢您的阅读。
61
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
