本篇分为五个部分：CSS层叠样式表介绍、基础选择器、字体和文本样式、谷歌调试工具和拓展
本文主要简单介绍CSS层叠样式表、四种基础选择器。
目录
一、CSS
CSS决定了网页样式是否美观，写在style标签中，而style标签一般写在head标签里，title标签下面；
CSS引入方式有：
- 内嵌式：写在style标签中，style标签虽然可以写在页面的任何位置，但通常约定写在head当中；
- 外联式：CSS在一个单独的CSS文件中，需要通过link方式在网页中引入（写在title下面<link rel="..." href="..."> href值为外部资源地址，这里是css的地址；rel定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet）
- 行内式：CSS写在标签的style属性中，比如<div style="color:green;font-size:...pix">
二、基础选择器
选择器用于选择你想要的元素，通过选择器选中然后对元素样式进行修改
1.标签选择器：标签名{CSS属性名:属性值;}
p{color:red;}
通过标签名，找到页面中所有这类标签，设置样式
特点：选择的是一类标签，而不是单独一个
2.类选择器：.类名{CSS属性名:属性值;}
.one{color:red;}
<body>
<div class="one">类选择器</div>
</body>
通过类名，找到页面中所有带有这个类名的标签设置样式
Tip：
- 所有标签上都有class属性，class属性的属性值称为类名
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者重刷线开头
- 一个标签可以同时有多个类名，类名之间以空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签
3.id选择器：#id属性值{CSS属性名:属性值;}
#two{color:blue;}
<div id="two">id选择器</div>
Tip：
- 所有标签上都有id属性
- id属性值类似于身份证号码，在一个页面中是唯一的、不可重复的
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
4.通配符选择器：*{CSS属性名：属性值;}
选择页面中所有样式设置，一般用来清除标签中默认的margin和padding
——————
本文到这里就结束啦，下文接着是字体和文本样式、谷歌调试工具和相关的拓展
扫一扫
4038
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
