CSS简介

CSS(层叠样式表)，用于定义网页样式和布局的样式表语言。

一般与HTML一起用于构建web页面的。

HTML负责定义页面的结构和内容，CSS负责控制页面的外观和样式。

通过CSS，可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。

CSS语法

       选择器{

            属性1:属性值1;

            属性2:属性值2;

        }

选择器的声明中可以写无数条属性。

声明的每一行属性，都需要以英文分号结尾。

声明中的所有属性和值都是以键值对形式出现的。

选择器，选择要应用样式的HTML元素。

---

CSS导入方式---内部样式表

将CSS样式放在HTML文档的头部。

举例：

<style>

        p {

            color: blue;

            font-size: 20px;

        }

    </style>

.....

  <p>这是一个应用了css样式的文本</p>

效果：

---

CSS三种导入方式：

     1.内联样式(Inline Styles)：把CSS样式直接放在HTML标签中。

     2.内部样式表(Internal Stylesheet)：在HTML文档的head标签中，定义。

    3.外部样式表(External Stylesheet)：将CSS样式单独放在一个CSS文件中，然后在head标签                                                                  里，使用另一个标签，把它链接到HTML文档中。该方式允许在多个页面上重复使用相同的样式。

      优先级：内联样式>内部样式表>外部样式表。优先级高的，可以覆盖优先级低的。

---------------------------------------------------------------------------------------------------------------------------------

举例：

 <h1 style="color: red;">这是一个一级标题标签,使用内联样式</h1>

效果：

---

举例：

 <style>

        h2{

            color: green;

        }

    </style>

....

<h2>这是一个二级标题标签，应用内部样式</h2>

效果：

---

举例：

效果：

---------------------------------------------------------------------------------------------------------------------------------

选择器

    选择器是CSS中的关键部分，它允许 针对特定元素或一组元素定义样式。

    元素选择器

    类选择器（常用）

    ID选择器（常用）

    通用选择器:对所有元素进行选择

    子元素选择器：选择直接位于父元素内部的子元素。大标签嵌套小标签。

    后代选择器(包含选择器)

    并集选择器(兄弟选择器)：选择在同一级别下的元素

        注意：后代包含了子代，但，子代不包含后代。

    伪类选择器：选择HTML文档的元素的特定状态或者位置的，不仅仅是这个元素本身的属性。

                        以冒号开头，通常是给用户交互文档结构或者 其他条件下的元素应用样式。

                        满足用户交互，比如，鼠标悬停在一个元素上，可以用伪类选择器实现。

---------------------------------------------------------------------------------------------------------------------------------举例（前四种选择器）：

效果：

---------------------------------------------------------------------------------------------------------------------------------

ID>class>标签名。

---------------------------------------------------------------------------------------------------------------------------------

举例:

   <h1 style="font: bolder 40px 'kaiti';">这是一个font复合属性示例</h1>

    <p style="line-height: 40px;">这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本</p>

效果：

---------------------------------------------------------------------------------------------------------------------------------

行内块元素：

水平方向上排列，但可以设置宽度、高度、内外边距等块级元素的属性。

行内块元素可以包含其他行内元素或块级元素。

---------------------------------------------------------------------------------------------------------------------------------

举例：

    <div>这是一个块级元素</div>

    <span>这是一个行内元素</span>

    <img src="./单元格 A1.JPG" alt="">

效果：

---------------------------------------------------------------------------------------------------------------------------------

块元素和行内块元素，都可以定义宽、高。

举例：-

 <style>

        .block{

            background-color: aqua;

            width: 200px;

            height: 1%00px;

        }

        .inline{

            background-color: blue;

            width: 200px;

        }

        .inline-block{

            width: 100px;

            height: 100px;

        }

    </style>

----

 <div class="block">这是一个块级元素</div>

    <div class="block">这是一个块级元素</div>

    <span class="inline">这是一个行内元素</span>

    <img src="./单元格 A1.JPG" alt="" class="inline-block">

    <img src="./单元格 A1.JPG" alt="" class="inline-block">

    <img src="./单元格 A1.JPG" alt="" class="inline-block">

效果：

---------------------------------------------------------------------------------------------------------------------------------

展示的商品列表等，基本都是行内块元素，但商品列表不只是图片，解决办法：将div 、span等一系块元素、行内元素，转换成行内块元素。使用display.

举例：

     <div class="div-inline">这是一个转换成行内元素的div标签</div>

效果：

---------------------------------------------------------------------------------------------------------------------------------

举例：

  <span class="span-inline-block">这是一个转换成行内块的span标签</span>

效果：

---------------------------------------------------------------------------------------------------------------------------------

display属性除了 inline、block、inline-block 这些属性值外，还有 none(表示不显示)

---------------------------------------------------------------------------------------------------------------------------------

后续内容见《Web前端基础知识（五）》