文章目录
前言
- CSS（Cascading Style Sheets）层叠样式表
- CSS可以用来为网页创作样式表，通过样式表可以对网页进行装饰
- 所谓层叠：可以将王特想象成一层一层的结构，层次高的结果将会覆盖层次低的结构
- CSS可以为网页的各个层次设置样式
提示：以下是本篇文章正文内容，下面案例可供参考
一、CSS简介
1.CSS样式的编写位置
①.内联样式【不推荐使用】
A.定义：将样式直接写到标签的“style”属性中，这样写的样式叫做内联样式。
B.局限：仅对当前元素中的内容起作用，不方便复用与维护，内联样式属于结构与样式耦合，不方便后期维护，不推荐使用。
C.使用方法【以p标签为例】
<p style="color = red; font-size = 40px;">我是一个结构与样式耦合的p标签</p>
②.内部样式表【推荐使用】
A.定义：将CSS样式表编写到head标签的style子标签中这样的样式表叫内部样式表
B.使用：将CSS样式表编写到head标签的style子标签中，然后通过CSS选择器来选中指定样式。
C.优点：·可以同时为很多元素一起设置样式，可以使样式进一步复用。
·将样式表编写到style标签中，可以使表现和结构进一步分离。
<style type="text/css"> //type="text/css":默认值，为了兼容老版本的浏览器
//加入css选择器选中元素【该选择器选中的是网页中所有的p标签】
p{
语句...
}
</style>
③. 外部样式表【最推荐使用】
A.定义：将CSS样式表编写到外部的CSS文件中，然后用link标签将外部的CSS文件引入到当前的页面中，这样外部的CSS样式表将会应用到当前的页面中。
B.使用方法：见下方代码
C.优点：·可以将样式表在不同的页面中使用，提高了代码复用率。
·将样式统一编写到外部CSS文件中，使表现和结构完全分离。
·将样式统一写在外部样式表中，通过link标签引入，可以利用浏览器的缓存，加快用户的访问速度，提高了用户的体验效果，所以最推荐使用该方法。
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
//编写一个名为style.css的文件如下：
p{
color ：red;
font-size : 40px;
}
//在HTML文件中，使用方法如下：
<html>
<head>
<meta charest="utf-8"/>
<title>这是一个HTML文件</title>
//使用link标签引入外部css样式表
<link rel="stylesheet" type="text/css" href="style.css的文件的相对地址">
</head>
<body>
<p>我就是被CSS选择器选中的p标签</p>
</body>
</html>
二、CSS语法（简单语法）
1.注释
①.CSS代码的注释
·该形式的注释只能写在style标签或CSS文件中
/*此处是注释内容*/
②.HTML代码的注释
<!–此处是注释内容–>
2.语法
①.选择器
通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用在选择器对应的元素上。
②.声明块
·A.声明块就是紧跟在选择器后，使用一对大括号括起来的代码块。
·B.声明块实际上就是一组一组的名值对结构（这一组组的名值对我们成为声明)
·C.在一个声明块中，可以写多个声明，多个声明之间用“；”隔开。
·D.声明的样式和样式值之间用“：”隔开。
3.块和内联
【总结】块元素主要就用来做页面的布局，内联元素主要用来选中文本并给选中的文本设置样式
（1）一般情况下使用块元素包含内联元素，而不使用内联元素包含块元素。
（2）a标签（超链接标签）可以包含任何元素，除了它本身。
（3）p标签（段落标签）不能放置任何元素。
①.块元素
·i. 定义：块元素就是会独占一行的元素，无论它的内容有多少，块元素都会独占一整行
·ii.常见的块元素标签
br、div、h1、h2、h3、p
·iii.div标签
（1）div标签没有任何的语义，就是一个纯粹的块元素。
并且div标签不会为他里面的标签设置任何的默认样式
（2）div标签的主要作用就是对页面进行布局
②.内联元素（行内元素）
·i. 定义：内联元素就是只占自身大小的元素，不会独占一行。
·ii.常见的内联元素标签
a, img, iframe, span…
·iii.span标签
（1）span标签没有任何的语义，他专门用来选中文字，并给选中的文字设置样式。
总结
提示：这里对文章进行总结：
337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
