什么是CSS

CSS 是一门语言，用于控制网页表现。CSS也有一个专业的名字：Cascading Style Sheet（层叠样式表）。

css 导入方式

css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式：

内联样式

在标签内部使用style属性，属性值是css属性键值对

<div style="color: red">Hello CSS~</div>

这种方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。

内部样式

定义<style>标签，在标签内部定义css样式

  <style type="text/css">
  	div{
  		color: red;
      }
  </style>

外部样式

定义link标签，引入外部的css文件
编写一个css文件。名为：demo.css，内容如下:

div{
	color: red;
}

在html中引入 css 文件。

<link rel="stylesheet"  href="demo.css">

这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用 link 标签引入该css文件。还需要指明属性rel="stylesheet表示引入的是CSS样式文件

代码演示

项目目录结构如下：

编写页面 02-导入方式.html，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>
    <link href="../css/demo.css" rel="stylesheet">
</head>
<body>
    <div style="color: red">hello css</div>

    <span>hello css </span>

    <p>hello css</p>
</body>
</html>

css 选择器

css 选择器就是选取需设置样式的元素（标签），有三种基础选择器。
范围越精确优先级越高：id选择器>类选择器>元素选择器

基础选择器

  • 元素选择器

    格式：

    元素名称{color: red;}

    例子：

    div {color:red}  /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/

  • id选择器

    格式：

    #id属性值{color: red;}

    例子：

    html代码如下：

    <div id="name">hello css2</div>

    css代码如下：

    #name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/

  • 类选择器

    格式：

    .class属性值{color: red;}

    例子：

    html代码如下：

    <div class="cls">hello css3</div>

    css代码如下：

    .cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }

        #name{
            color: blue;
        }

        .cls{
            color: pink;
        }
    </style>

</head>
<body>
    <div>div1</div>
    <div id="name">div2</div>
    <div class="cls">div3</div>
    <span class="cls">span</span>
</body>
</html>

扩展选择器

  1. 选择所有元素：

    • 语法： *{}

  2. 并集选择器：

    • 语法：选择器1,选择器2{}

  3. 交集选择器：

    • 语法：.class1.class2 这样的 CSS 选择器称为 复合类选择器，也称为 交集选择器。它会选择同时具有 .class1 和 .class2 类的 HTML 元素。

  4. 子选择器：筛选选择器1元素下的选择器2元素

    • 语法：选择器1 选择器2{}

  5. 父选择器：筛选选择器2的父元素选择器1

    • 语法： 选择器1 > 选择器2{}
    • 补充语法：（类似伪类）
      • 选择器1 > 选择器2:first-child或者last-child
      • 选择每个元素是其父级的第一个子集或最后一个子集

  6. 属性选择器：选择元素名称，属性名=属性值的元素

    • 语法： 元素名称[属性名="属性值"]{}

  7. 伪类选择器：选择一些元素具有的状态

    • 语法： 元素:状态{}
    • 如： <a>
      • 状态：
        • link：初始化的状态
        • visited：被访问过的状态
        • active：正在访问状态
        • hover：鼠标悬浮状态

css 属性

Tip

css有很多css属性，你要想把它们都学会，需要花费很长的时间。
真的就是用到什么，学什么记什么！
具体 查阅文档

记住一点，css的属性是会继承父级元素的，但为具体对象设置的属性的优先级最高
另外是一些零碎的css属性：

  • font：
    • font-size：字体大小
    • color：文本颜色
    • text-align：对齐方式
    • line-height：行高
  • 图片的background的属性值是函数式接受，比如：url();
background: url("img/logo.jpg") no-repeat center;图片居中作为背景且不重复平铺*/
  • 线条：
    • solid：实线；
    • border-radius：设置边框圆角

CSS布局

CSS属性是做样式美化的，但也是布局的重要手段，涉及盒子模型的概念，对应有大量常用的css属性，以及弹性布局、网格布局相关内容，参见：CSS布局

媒体查询

媒体查询（Media Queries）是 CSS3 中的一种强大的技术，它允许您根据不同的媒体类型和特性，为不同的设备和屏幕尺寸应用不同的 CSS 样式。媒体查询使得网页能够在不同的设备上实现响应式设计，以适应不同大小的屏幕、不同的分辨率和设备特性。

媒体查询通常由以下几个部分组成：

  1. 媒体类型（Media Type）： 指定样式表应用的设备类型，如 all（所有设备）、screen（屏幕）、print（打印机）、speech（语音阅读器）等。

  2. 媒体特性（Media Features）： 指定样式表应用的设备特性，如视口宽度、视口高度、设备方向等。常见的媒体特性包括 width、height、orientation、aspect-ratio 等。

媒体查询的语法如下所示：

@media 媒体类型 and (媒体特性) {
    /* CSS 样式规则 */
}

例如，以下是一个简单的媒体查询示例，它会在视口宽度小于 600px 时，将段落文本颜色设为红色：

@media screen and (max-width: 600px) {
    p {
        color: red;
    }
}

通过媒体查询，您可以为不同的设备和屏幕尺寸提供特定的样式，从而实现响应式设计，提升网站的可访问性和用户体验。媒体查询是实现响应式网页设计的重要工具之一，使得网页能够在各种不同的设备上呈现出最佳的布局和样式。

层叠和事件穿透

z-index： 控制元素的层叠顺序。通常用于定位元素的层叠顺序。

正常来说，网页元素的顺序是按源码从上到下从外到内的。而这个属性则可以手动变更它的层次，让希望的元素覆盖或掩埋在某个元素上面或下面

不过胡乱使用同样的也会造就一些小问题，比如“元素无法点击”，这时候可能就会联想到JS的事件冒泡行为，其实就是上层元素覆盖了底层元素，点击事件无法监听导致的，css也有对应的属性pointer-events去允许事件穿透

pointer-events: none;/* 让点击事件穿透到底层元素 */

同样的，针对具体的子元素，我们可以把时间监听恢复：

pointer-events: auto;/* 恢复事件监听 */

CSS渐变函数

像元素的背景我们一般想到的是图片，形式是链接要么就是Base64编码，其实背景还可以是纯粹的颜色，而如果你熟悉PS的话，你会发现渐变效果，没错CSS也有而且是个函数

background-image:
	linear-gradient(90deg, rgba(135, 206, 250, 0.3) 1px, transparent 1px),
	linear-gradient(rgba(211, 211, 211, 0.5) 1px, transparent 1px);

这段代码是在CSS中创建两个线性渐变背景图案，并将它们应用于元素的背景。让我解释一下：

  • linear-gradient() 函数是用来创建一个线性渐变背景的CSS函数。
  • 第一个 linear-gradient() 函数创建了一个垂直方向的渐变，从上到下（90度方向）。渐变的起始颜色是一个半透明的淡蓝色（rgba(135, 206, 250, 0.3)），结束颜色是透明的。渐变的大小为1像素。这个渐变的作用是创建一系列竖直的淡蓝色条纹。
  • 第二个 linear-gradient() 函数创建了一个水平方向的渐变，从左到右。渐变的起始颜色是一个半透明的灰色（rgba(211, 211, 211, 0.5)），结束颜色是透明的。渐变的大小为1像素。这个渐变的作用是创建一系列水平的淡灰色条纹。
  • 将这两个渐变叠加在一起，就可以得到一种类似于网格的效果，其中交叉处是淡蓝色和淡灰色相交的区域。

CSS动画

虽然css是做样式的，但其实也是可以做动画的。当然了JS负责行为，它可以从某种程度上实现更多的动画效果，但二者相结合才能达成最完美的效果，参见：css动画

Interactive Graph
Table Of Contents
什么是CSS
css 导入方式
内联样式
内部样式
外部样式
代码演示
css 选择器
基础选择器
扩展选择器
css 属性
CSS布局
媒体查询
层叠和事件穿透
CSS渐变函数
CSS动画