绪论

一、什么是CSS？

CSS 指的是层叠样式表 (Cascading Style Sheets)。

二、为什么要使用CSS？

CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。

三、CSS语法

    选择器{属性 值}
    {属性 值}：声明
复制代码

CSS层叠样式表

1.CSS样式的三种基本方式

样式的优先级顺序：内联样式>内部样式>外部样式

A．内联样式

    <标签 style="css样式内容"></标签>
复制代码

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

提示：行内样式失去了样式表的许多优点（通过将内容与呈现混合在一起）。请谨慎使用此方法。

B．内部样式

    <style>css样式内容</style>
复制代码

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。
内部样式是在head部分的 <style> 元素中进行定义。

C．外部样式（外部引用样式）

    <link rel="stylesheet" href="https://juejin.cn/post/外部css样式文件">
复制代码

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。

外部 .css 文件不应包含任何 HTML 标签。

注意：请勿在属性值和单位之间添加空格

2.元素的三大类型

A.块元素【block】

常见的块元素：div,p,ul,li,ol,header,nav,main,footer,section....
（别忘了，p是块元素，虽然和文字使用）

块元素的特点：

1.内容独占一行
2.可以设置宽高，如果不设置宽高，则宽取决于父元素的宽，高取决于内容的高
3.可以设置内外边距
4.多个块元素之间从上到下排列
复制代码

块元素可以通过设置margin: 0 auto;来实现在父元素中水平居中的效果(又叫做定宽居中==>即先定宽，再居中)

B.行元素【inline】

常见的行元素：

span,a,b,del,strong,em...

行元素的特点：

1.内容不独占一行，而是在同一行显示
2.不能设置宽高，宽高取决于内容的宽高
3.可以设置内外边距，但是外边距上下无效
4.多个行元素从左到右排列，如果右边位置不够，则自动换行显示。
复制代码

行元素可以通过给父元素设置text-align: center;来实现在父元素中水平居中的效果

C.行内块元素【inline-block】

常见的行内块元素：
img,input,button...

行内块元素的特点：

1.内容不独占一行，而是在同一行显示
2.可以设置宽高，如果不设置宽高，宽高取决于内容的宽高
3.可以设置内外边距
4.多个行内块元素从左到右排列，如果右边位置不够，则自动换行显示
复制代码

行内块元素可以通过给父元素设置text-align: center;来实现在父元素中水平居中的效果

D.行元素，块元素和行内块元素之间的相互转换：

1.display:block;把元素转换成块元素

2.display:inline;把元素转换成行元素

3.display:inline-block;把元素转换成行内块元素
复制代码

（如div:块元素，设置display:inline就可以和span:行元素一起显示了）