CSS 基础

层叠样式表 (Cascading Style Sheets) 是一种用于描述HTML或XML文档外观和格式的样式表语言。

语法

CSS由选择器和声明块组成。每个声明由一个属性和一个值组成，以分号结尾。

选择器 {
    属性: 值;
    属性: 值;
    ...
}

CSS导入方式

建议从外部引入CSS，因为它可以提高代码的可维护性和重用性。以下是几种常见的CSS导入方式：

1. 外部样式表（推荐）

使用<link>标签链接外部CSS文件：

1	<link rel="stylesheet" href="css/style.css">

这种方式的优点包括：

可以在多个HTML文件中重用同一个CSS文件。
使HTML结构和样式分离，提高代码的可读性和可维护性。

2. 内部样式表

在HTML文档的<style>标签内编写CSS代码：

<style>
    h1 
    {
        color: red;
    }
</style>

这种方式适用于仅用于单个HTML文档的小型样式规则。

3. 导入式（CSS2.1特有）

使用@import规则从外部导入CSS文件：

1
2
3

<style>
    @import "css/style.css";
</style>

这种方式现在不常用，因为它在加载性能方面不如<link>标签，建议了解即可。

4. 行内样式

在HTML标签的style属性内直接编写CSS代码：

1	<h1 style="color: red;">Hello, world!</h1>

行内样式仅适用于单个元素，优先级最高，但不建议大范围使用，因为它会导致HTML和CSS混杂，降低代码的可维护性。

CSS优先级

当多个样式规则作用于同一元素时，浏览器会根据优先级规则决定应用哪一个样式。优先级从高到低如下：

行内样式：直接在元素的style属性中定义的样式。
ID选择器：如#id。
类选择器、属性选择器和伪类选择器：如.class、[attribute=value]和:hover。
元素选择器和伪元素选择器：如div、h1和::before。

同级别的选择器按其在CSS中出现的顺序应用，后面的会覆盖前面的。

具体示例

以下示例展示了不同CSS导入方式及其优先级：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Priority Example</title>
    <link rel="stylesheet" href="external.css"> <!-- 外部样式表 -->
    <style>
        /* 内部样式表 */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1 style="color: green;">Hello, world!</h1> <!-- 行内样式 -->
    <p class="example">This is a paragraph.</p>
</body>
</html>

对应的external.css文件：

h1 
{
    color: red;
}

.example {
    color: purple;
}

在这个例子中：

外部样式表设置h1颜色为红色。
内部样式表覆盖外部样式表，将h1颜色改为蓝色。
行内样式最终覆盖所有其他样式，将h1颜色设置为绿色。
类选择器.example将段落颜色设置为紫色。

选择器

选择器用于选中页面中的某个或某类元素，以应用相应的样式。

基本选择器

优先级顺序为：ID选择器 > 类选择器 > 标签选择器

标签选择器

使用标签名选中所有该类型的标签。

<style>
    h1 {
        color: red;
    }
</style>
<h1>Heading 1</h1>
<h1>Heading 2</h1>

类选择器

使用类名选中所有带有该类名的元素。类名之前加点号（.）。

<style>
    .class_name {
        color: red;
    }
</style>
<p class="class_name">This is a paragraph.</p>
<p class="class_name">This is another paragraph.</p>

ID选择器

使用ID选中特定的元素。ID之前加井号（#）。ID必须在整个页面中唯一。

<style>
    #id_name {
        color: red;
    }
</style>
<p id="id_name">This is a paragraph.</p>

层次选择器

用于选中具有层次关系的元素。

后代选择器

选中某个元素的所有子孙节点。

<style>
    body p {
        background: green;
    }
</style>
<body>
    <p>This is a paragraph.</p>
    <div>
        <p>This is a nested paragraph.</p>
    </div>
</body>

子选择器

选中某个元素的直接子节点。

<style>
    body > p {
        background: green;
    }
</style>
<body>
    <p>This is a paragraph.</p>
    <div>
        <p>This is a nested paragraph.</p>
    </div>
</body>

相邻兄弟选择器

选中某个元素的下一个相邻兄弟元素。

<style>
    .class1 + p {
        background: green;
    }
</style>
<div class="class1">This is a div.</div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

通用兄弟选择器

选中某个元素之后的所有兄弟元素。

<style>
    .class1 ~ p {
        background: green;
    }
</style>
<div class="class1">This is a div.</div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

结构伪类选择器

使用伪类选择器选中特定条件下的元素，伪类选择器以冒号（:）开头。

选中第一个子元素

选中某个元素的第一个子元素。

<style>
    ul li:first-child {
        background: green;
    }
</style>
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

选中当前元素的父元素的第一个子元素

选中某个元素的父元素的第一个子元素，并且是当前元素时生效。

<style>
    p:nth-child(1) {
        background: green;
    }
</style>
<div>
    <p>First paragraph.</p>
    <p>Second paragraph.</p>
</div>

属性选择器

选中具有特定属性的元素。属性选择器可以结合属性名和属性值使用。

带有特定属性的元素

选中所有带有class属性的a标签。

<style>
    a[class] {
        background: green;
    }
</style>
<a href="#" class="links">Link 1</a>
<a href="#">Link 2</a>

属性值选择器

可以使用不同的符号来指定属性值，支持正则表达式样式的匹配。

=：属性值等于
*=：属性值包含
^=：属性值以指定值开头
$=：属性值以指定值结尾

<style>
    a[class*="links"] {
        background: green;
    }
</style>
<a href="#" class="links">Link 1</a>
<a href="#" class="other-links">Link 2</a>
<a href="#" class="no-match">Link 3</a>

在这个例子中，类名包含“links”的a标签将具有绿色背景。

选择器优先级

当多个选择器作用于同一个元素时，CSS根据以下优先级规则应用样式：

行内样式：直接在元素的style属性中定义的样式。
ID选择器：如#id。
类选择器、属性选择器和伪类选择器：如.class、[attribute=value]和:hover。
元素选择器和伪元素选择器：如div、h1和::before。

同级别的选择器按其在CSS中出现的顺序应用，后面的会覆盖前面的。

样式和属性

重点要突出的文字使用span标签包起来

字体样式

可以直接用一个font属性写，font: 风格粗细大小字体
font-family 字体
font-size 字体大小
font-weight 字体粗细
color 字体颜色

文本样式

颜色 color
对齐方式 text-align center
首行缩进 text-indent：2em
行高 line-height
下划线 text-decoration: underline、中划线 text-decoration: through、上划线 text-decoration: overline

超链接伪类

例如hover：鼠标悬浮在a标签改变颜色

1
2
3

a:hover{
    color: red;
}

阴影

text- shadow：阴影颜色水平偏移垂直偏移阴影半径

列表样式

list-style：none 去掉列表前的圆点

背景

颜色 background-color
图片 background-img
边框 border
渐变色，建议使用这个网站：https://www.grabient.com/

一个背景渐变和文字居中的demo:

注意要让背景铺满屏幕background-attachment: fixed;不然加了文字就变成一条一条的背景了。
要让div处于屏幕中央，使用绝对布局，position: absolute;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: #0093E9;
            background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
            background-attachment: fixed;
        }

        div {
            font-family: Courier;
            font-size: x-large;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div>
        Hello, This is BXS.
    </div>

</body>
</html>

具体代码解释如下：

这段HTML代码创建了一个网页，网页的背景颜色是渐变的，并且包含一个居中显示的文本。下面是代码的详细解释：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* CSS样式在这里定义 */
    </style>
</head>
<body>
    <div>
        Hello, This is BXS.
    </div>
</body>
</html>

<!DOCTYPE html>：声明文档类型为HTML5。
<html lang="en">：定义HTML文档的语言为英语。
<head>：包含关于文档的元数据和链接，如字符集设置和样式表。
<meta charset="UTF-8">：设置文档的字符编码为UTF-8。
<title>Title</title>：定义网页的标题。
<style>：包含内部CSS样式，用于设计网页的外观。
<body>：文档的主体内容。
<div>：包含要显示的文本内容。

CSS样式

body {
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
    background-attachment: fixed;
}

div {
    font-family: Courier;
    font-size: x-large;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

`body`样式

background-color: #0093E9;：设置背景颜色为#0093E9（蓝色）。
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);：创建一个从#0093E9到#80D0C7（浅绿色）的渐变，渐变的角度为160度。
background-attachment: fixed;：固定背景图片，即使页面滚动，背景也不会移动。

`div`样式

font-family: Courier;：设置字体为Courier。
font-size: x-large;：设置字体大小为特大号。
position: absolute;：将元素的定位方式设置为绝对定位。
top: 50%;：将元素的顶部边界定位到其包含块顶部的50%。
left: 50%;：将元素的左边界定位到其包含块左侧的50%。
transform: translate(-50%, -50%);：使用变换将元素向左和向上各移动其自身宽度和高度的50%，以实现完全居中。

页面效果

这段代码将创建一个背景颜色从蓝色到浅绿色渐变的网页，并且网页中央会显示一段文字“Hello, This is BXS.”。这个文本使用Courier字体，字体大小为特大号。文本的位置通过CSS中的绝对定位和变换属性实现居中对齐。

盒子模型

margin 外边距
border 边框
padding 内边距

都是分上下左右的

边框

border: red solid 10px;

颜色红色
样式 solid实线 dashed 虚线
粗细 10个像素

外边距

body总有一个margin默认是是8px，不是0

常用外边距来使元素水平居中，margin: auto

圆角边框

1	border-radius: 50px;

正方形当圆角边框和边长相等时就是圆

阴影

可以做边框发光的效果

1	box-shadow: 10px 10px 1px yellow;

浮动

标准文档流：块级元素从上到下顺序排列

display属性

none 不显示
block 块级显示
inline 行内显示
inline-block 既是行内也是块元素：是块元素，但是可以显示在一行

float属性

left 往左浮动
right

clear：例如如果向右浮动，右边已经有了别的元素，则它会清理一下，自己往移动一点，还是保证自己贴着右边

父级边框塌陷的问题

块元素float浮动之后，父元素高度变了

解决方式1：直接设置父元素的高度为**px
解决方式2：增加一个空的div标签，清除浮动clear：both
解决方式3：overflow：hidden
解决方式4（推荐）：在父元素添加伪类,添加一个空内容的block，清除浮动
1
2
3
4
5
#father:after {
content: "";
display: block;
clear:both;
}

overflow属性

hidden 超过宽高的部分隐藏
scroll 超过的时候会出现滚动条

定位

相对定位

position：relative

相对于自己原来的位置进行偏移

使用了相对定位的元素仍然处于标准文档流中，原来的位置会被保留

绝对定位

position：absolute

没有父元素时，根据浏览器边框定位

固定定位

position：fixed

固定在屏幕的某个位置

Z-index

图层

zindex：0 表示放到第0层,默认是0，最高不限

透明度

opacity:0.5

弹性布局

弹性布局（Flexbox）是CSS3中的一种布局模式，用于更有效地设计复杂的布局结构。Flexbox主要用于布局的场景包括元素的对齐、分配剩余空间等。Flex容器中的子元素成为Flex项目，通过Flexbox可以很容易地控制这些项目的排列、对齐和大小。

Flexbox的基本概念

Flex容器（flex container）：采用Flex布局的元素，通过CSS属性display: flex;或display: inline-flex;来定义。
Flex项目（flex item）：Flex容器的直接子元素，自动成为Flex项目。

弹性布局的几个用处

将内容块在其父级中垂直居中

使用Flexbox，可以很方便地将内容块在父容器中垂直和水平居中对齐。

<div class="container">
    <div class="item">Centered</div>
</div>

<style>
    .container {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center;    /* 垂直居中 */
        height: 100vh;          /* 使容器占满整个视窗高度 */
    }
    .item {
        width: 200px;
        height: 100px;
        background-color: lightblue;
    }
</style>

使容器的所有子容器占用相等的可用宽度/高度

Flexbox可以使容器的所有子元素平分可用的宽度或高度，无论有多少可用空间。

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

<style>
    .container {
        display: flex;
    }
    .item {
        flex: 1; /* 每个项目平分可用空间 */
        height: 100px;
        background-color: lightblue;
        margin: 5px;
    }
</style>

使多列布局中的所有列采用相同的高度

在多列布局中，即使列中包含的内容量不同，Flexbox也可以使所有列具有相同的高度。

<div class="container">
    <div class="item">Short</div>
    <div class="item">Medium length content</div>
    <div class="item">Very long content that will cause this column to be much taller than the others without Flexbox</div>
</div>

<style>
    .container {
        display: flex;
    }
    .item {
        flex: 1; /* 每个项目平分可用空间 */
        margin: 5px;
        padding: 10px;
        background-color: lightblue;
        /* 为了展示效果，手动设置列的高度 */
        min-height: 100px;
    }
</style>

Flexbox的主要属性

容器属性
- flex-direction: 定义主轴方向（如row、column等）。
- justify-content: 定义项目在主轴上的对齐方式（如flex-start、center、space-between等）。
- align-items: 定义项目在交叉轴上的对齐方式（如flex-start、center、stretch等）。
- flex-wrap: 定义如果一条轴线排不下，是否换行（如nowrap、wrap等）。
项目属性
- flex: 复合属性，包括flex-grow、flex-shrink和flex-basis。
- align-self: 允许单个项目在交叉轴上对齐方式不同于其他项目。
- order: 定义项目的排列顺序。

通过这些属性，Flexbox可以方便地实现复杂的布局需求，提供灵活的排列和对齐方式。

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Flexbox 0 — starting code</title>
    <style>
        html {
            font-family: sans-serif;
        }

        body {
            margin: 0;
        }

        header {
            background: purple;
            height: 100px;
        }

        h1 {
            text-align: center;
            color: white;
            line-height: 100px;
            margin: 0;
        }

        article {
            padding: 10px;
            margin: 10px;
            background: aqua;
        }

        /* Add your flexbox CSS below here */
        section {
            /*需要弹性布局的是article，需要把其父元素设为弹性盒子*/
            display: flex;
            /*弹性布局方向：行(左->右)， 也是默认值*/
            flex-direction: row;
            /*是否换行(默认不换行)，wrap开启换行，子元素需要配合使用flex: 200px，宽度小于200px则换行*/
            flex-wrap: wrap;
            /*子元素居中*/
            justify-content: center;
        }

        article {
            /*宽度小于200px则换行*/
            flex: 200px;
            max-width: 300px;
        }

    </style>
</head>
<body>
<header>
    <h1>Sample flexbox example</h1>
</header>

<section>
    <article>
        <h2>First article</h2>

        <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
    </article>

    <article>
        <h2>Second article</h2>

        <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
    </article>

    <article>
        <h2>Third article</h2>

        <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>

        <p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
    </article>
</section>
</body>
</html>

解释如下：

这段HTML代码展示了如何使用Flexbox布局来实现一个简单的网页布局，包含一个头部和三个内容块。以下是代码的详细解释：

HTML结构

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Flexbox 0 — starting code</title>
    <style>
        /* CSS样式在这里定义 */
    </style>
</head>
<body>
<header>
    <h1>Sample flexbox example</h1>
</header>

<section>
    <article>
        <h2>First article</h2>
        <p>...</p>
    </article>

    <article>
        <h2>Second article</h2>
        <p>...</p>
    </article>

    <article>
        <h2>Third article</h2>
        <p>...</p>
    </article>
</section>
</body>
</html>

<!DOCTYPE html>：声明文档类型为HTML5。
<html lang="en-us">：定义HTML文档的语言为英语（美国）。
<head>：包含文档的元数据，如字符集设置、视口设置和样式表。
<meta charset="utf-8">：设置文档的字符编码为UTF-8。
<meta name="viewport" content="width=device-width">：使视口宽度等于设备宽度，确保响应式设计。
<title>Flexbox 0 — starting code</title>：定义网页的标题。
<style>：包含内部CSS样式。
<body>：文档的主体部分，包含头部和内容块。
<header>：定义头部，包含一个居中的标题。
<section>：包含三个内容块，每个块用<article>标签定义。

CSS样式

html {
    font-family: sans-serif;
}

body {
    margin: 0;
}

header {
    background: purple;
    height: 100px;
}

h1 {
    text-align: center;
    color: white;
    line-height: 100px;
    margin: 0;
}

article {
    padding: 10px;
    margin: 10px;
    background: aqua;
}

/* Flexbox布局 */
section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

article {
    flex: 200px;
    max-width: 300px;
}

基础样式

html { font-family: sans-serif; }：设置HTML文档的字体为无衬线体。
body { margin: 0; }：移除body的默认外边距。
header { background: purple; height: 100px; }：设置头部的背景颜色为紫色，高度为100px。
h1 { text-align: center; color: white; line-height: 100px; margin: 0; }：设置标题居中对齐，字体颜色为白色，行高为100px，移除默认外边距。
article { padding: 10px; margin: 10px; background: aqua; }：为内容块设置内边距和外边距，背景颜色为水绿色。

Flexbox布局

section { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
- display: flex;：将section定义为Flex容器。
- flex-direction: row;：设置主轴方向为水平（从左到右），这是默认值。
- flex-wrap: wrap;：允许Flex项目在必要时换行。
- justify-content: center;：将Flex项目在主轴（水平）方向上居中对齐。
article { flex: 200px; max-width: 300px; }
- flex: 200px;：设置Flex项目的基础宽度为200px，当可用空间不足时项目会换行。
- max-width: 300px;：设置Flex项目的最大宽度为300px。

页面效果

头部（<header>）有一个紫色背景，高度为100px，并包含一个居中的白色标题。
内容部分（<section>）包含三个内容块（<article>），每个内容块有水绿色背景、内外边距。
内容块使用Flexbox布局，排列在一行，居中对齐，并在必要时换行。每个内容块的宽度基础为200px，最大宽度为300px。

小项目：

应用了上述几乎所有知识点

下面是一个简单的CSS项目示例，结合了CSS笔记中的各个部分，包括语法、导入方式、选择器、样式和属性等内容。

项目结构

1
2
3

project/
├── index.html
└── styles.css

`index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Project Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My CSS Project</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <section class="content">
        <article>
            <h2>Article 1</h2>
            <p>This is the first article. It contains some text to demonstrate various CSS properties.</p>
        </article>
        <article>
            <h2>Article 2</h2>
            <p>This is the second article. It contains some more text to demonstrate various CSS properties.</p>
        </article>
    </section>
    <aside>
        <h2>Sidebar</h2>
        <p>This is a sidebar with some additional information.</p>
    </aside>
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

`styles.css`

/* 语法: CSS基础设置 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f4f4f4;
}

/* 选择器 */
header {
    background: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

header h1 {
    margin: 0;
}

/* 层次选择器 */
nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

/* 结构伪类选择器 */
nav ul li:first-child a {
    font-weight: bold;
}

/* 属性选择器 */
a[href] {
    color: #333;
    text-decoration: none;
}

/* 超链接伪类 */
a:hover {
    color: #555;
}

/* 盒子模型 */
section.content {
    display: flex;
    justify-content: space-around;
    padding: 20px;
}

article {
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 10px;
    flex: 1;
}

/* 阴影 */
article {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 列表样式 */
ul {
    list-style-type: disc;
}

/* 背景 */
aside {
    background: #e4e4e4;
    padding: 20px;
    margin: 10px;
}

/* 边框 */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

/* 圆角边框 */
article {
    border-radius: 10px;
}

/* 阴影 */
header {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 浮动与父级边框塌陷的问题 */
section.content::after {
    content: "";
    display: table;
    clear: both;
}

/* 定位 */
aside {
    position: relative;
    top: 20px;
}

/* Z-index */
nav {
    position: relative;
    z-index: 10;
}

/* 透明度 */
article:hover {
    opacity: 0.9;
}

/* 动画 */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

header {
    animation: slideIn 1s ease-out;
}

/* 弹性布局 */
section.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

article {
    flex: 1 1 45%;
    margin: 10px;
    max-width: 45%;
}

解释

语法: 基本的CSS设置。
CSS导入方式: 使用外部样式表。
选择器: 使用了标签选择器、类选择器和ID选择器。
层次选择器: 选中子元素如nav ul li。
结构伪类选择器: 如:first-child。
属性选择器: 如a[href]。
超链接伪类: 如a:hover。
盒子模型: 使用padding和margin设置内外边距。
阴影: 使用box-shadow为元素添加阴影。
列表样式: 设置列表类型。
背景: 设置背景颜色。
边框: 为元素添加边框。
圆角边框: 使用border-radius创建圆角。
浮动与父级边框塌陷的问题: 使用::after伪元素清除浮动。
定位: 使用position属性定位元素。
Z-index: 设置元素的堆叠顺序。
透明度: 使用opacity调整元素透明度。
动画: 使用@keyframes定义动画。
弹性布局: 使用Flexbox布局。

以下是CSS代码的解释：

/* 语法: CSS基础设置 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f4f4f4;
}

设置全局的基础样式：使用Arial字体、去除默认的margin和padding、设置背景颜色为浅灰色。

/* 选择器 */
header {
    background: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

header h1 {
    margin: 0;
}

为header元素设置背景颜色、文字颜色、内边距和文本居中。为header中的h1元素去除默认的外边距。

/* 层次选择器 */
nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

为nav中的ul去除默认的列表样式和内边距。将ul中的li元素显示为行内元素，并设置右边距。

/* 结构伪类选择器 */
nav ul li:first-child a {
    font-weight: bold;
}

将nav中的第一个li元素中的a链接文本加粗。

/* 属性选择器 */
a[href] {
    color: #333;
    text-decoration: none;
}

选择所有带有href属性的a元素，设置其颜色和去除下划线。

/* 超链接伪类 */
a:hover {
    color: #555;
}

当鼠标悬停在a元素上时，改变其颜色。

/* 盒子模型 */
section.content {
    display: flex;
    justify-content: space-around;
    padding: 20px;
}

将section元素设为弹性容器，子元素水平分布并有间隔。设置内边距。

article {
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    margin: 10px;
    flex: 1;
}

为article元素设置背景颜色、边框、内边距、外边距和弹性伸缩。

/* 阴影 */
article {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

为article元素添加阴影效果。

/* 列表样式 */
ul {
    list-style-type: disc;
}

设置ul元素的列表项样式为圆点。

/* 背景 */
aside {
    background: #e4e4e4;
    padding: 20px;
    margin: 10px;
}

为aside元素设置背景颜色、内边距和外边距。

/* 边框 */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

为footer元素设置背景颜色、文字颜色、文本居中和内边距。

/* 圆角边框 */
article {
    border-radius: 10px;
}

为article元素的边框设置圆角。

/* 阴影 */
header {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

为header元素添加阴影效果。

/* 浮动与父级边框塌陷的问题 */
section.content::after {
    content: "";
    display: table;
    clear: both;
}

使用伪元素清除浮动，防止父级元素高度塌陷。

/* 定位 */
aside {
    position: relative;
    top: 20px;
}

将aside元素相对定位并向下移动20px。

/* Z-index */
nav {
    position: relative;
    z-index: 10;
}

将nav元素相对定位并设置堆叠顺序。

/* 透明度 */
article:hover {
    opacity: 0.9;
}

当鼠标悬停在article元素上时，设置其透明度。

/* 动画 */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

header {
    animation: slideIn 1s ease-out;
}

定义一个滑动进入的动画效果，并应用于header元素。

/* 弹性布局 */
section.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

article {
    flex: 1 1 45%;
    margin: 10px;
    max-width: 45%;
}

将section.content元素设为弹性容器，子元素换行并水平分布。为article元素设置弹性属性和最大宽度。

CSS 基础

语法

CSS导入方式

1. 外部样式表（推荐）

2. 内部样式表

3. 导入式（CSS2.1特有）

4. 行内样式

CSS优先级

具体示例

选择器

基本选择器

标签选择器

类选择器

ID选择器

层次选择器

后代选择器

子选择器

相邻兄弟选择器

通用兄弟选择器

结构伪类选择器

选中第一个子元素

选中当前元素的父元素的第一个子元素

属性选择器

带有特定属性的元素

属性值选择器

选择器优先级

样式和属性

字体样式

文本样式

超链接伪类

阴影

列表样式

背景

HTML结构

CSS样式

body样式

div样式

页面效果

盒子模型

边框

外边距

圆角边框

阴影

浮动

父级边框塌陷的问题

定位

相对定位

绝对定位

固定定位

Z-index

透明度

弹性布局

Flexbox的基本概念

弹性布局的几个用处

Flexbox的主要属性

HTML结构

CSS样式

基础样式

Flexbox布局

页面效果

项目结构

index.html

styles.css

解释

`body`样式

`div`样式

`index.html`

`styles.css`