css

CSS入门

1. 基本语法

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

例子

p {
    color: red;
    font-size: 12px
}

例子代码说明

 1. 给p标签修改样式
 2. 修改了字体颜色为red
 3. 修改了字体大小为12px

2. CSS选择器

1. 基础选择器

1.1 标签选择器[^ 可以为页面中某同一类标签设置样式]

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        p {
            color: green;
        }
        div {
            color: pink;
        }
    </style>

</head>

<body>
    <p>男生</p>

    <p>男生</p>

    <p>男生</p>

    <div>女生</div>

    <div>女生</div>

    <div>女生</div>

</body>

</html>

效果

1.2 类选择器

基本语法
1.1 定义类的结构

.类名 {
    属性:属性值;
}

		1.2 给某个元素改为该类

 <p class="red">男生</p
 <p class="red">女生</p>

例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        p {
            color: green;
        }

        div {
            color: pink;
        }

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

</head>

<body>
    <p class="red">男生</p>

    <p class="red">男生</p>

    <p>男生</p>

    <p>男生</p>

    <div>女生</div>

    <div class="red">女生</div>

    <div>女生</div>

</body>

</html>

效果

多类名

例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
        }

        .green {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0 auto;
        }

        div {
            margin: 0 auto;
        }

        .font100 {
            font-size: 100px;
        }
    </style>

</head>

<body>
    <div class="cen">
        <div class="red font100">红色</div>

        <div class="green">绿色</div>

        <div class="red">红色</div>

    </div>

</body>

</html>

效果

1.3 id选择器

只能被调用一次，别人不能够使用

基本语法

#id名 {
    属性:属性值;
}

<div id="id名">红色</div>

1.4 全选选择器

不需要调用，默认就给全部标签改属性，包括body标签

基本语法

* {
    属性:属性值;
}

2. 复合选择器

2.1 后代选择器

基础语法

元素1 元素2 {属性:属性值}

例子

        td tr {
            color: gray;
        }

        p a {
            text-decoration: none;
        }

    <ul>
        <ur>hello1</ur>

    </ul>

    <ul>
        <ur>hello2</ur>

    </ul>

    <ul>
        <ur>hello3</ur>

    </ul>

    <p><a href="">hhhhhh1</a></p>

    <p><a href="">hhhhhh2</a></p>

    <p><a href="">hhhhhh3</a></p>

2.2 子元素选择器

2.3 并集选择器

2.4 链接伪类选择器

例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        a:link {
            color: black;
            text-decoration: none;
        }

        a:hover {
            color: blue;
        }

        a:visited {
            color: orange;
        }

        a:active {
            color: gray;
        }
    </style>

</head>


<body>
    <div><a href="#">test1</a></div>

    <div><a href="#">test2</a></div>

    <div><a href="#">test3</a></div>

    <div><a href="#">test4</a></div>

</body>


</html>

鼠标放上去的效果点击过的效果[^ 因为所有href都一样，所以点击一个就会显示所有都有访问]点击不放的效果注意事项

2.5 focus伪类选择器

鼠标焦点聚集之前

鼠标焦点聚集之后

3. 字体属性

1. 指定字体

多个字体之间使用逗号间隔

有多个单词的字体需要使用""括起来

基本语法

    <style>
        body {
            font-family: "Mricosoft Yahei",宋体;
        }
    </style>

<body>
    hhhhhhhhhh
</body>

2. 字体大小

font-size:20px

尽量给明确的大小
通常直接给body设置大小就好
标题的字体的大小需要手动设定

3. 字体加粗

        .bold {
            font-weight: bold;
        }

<body>
    hhhhhhhhhh
    <p class="bold">bord test</p>

    <p>bord test</p>

    <p>bord test</p>

    <p>bord test</p>

</body>

实际开发中使用下面这种

    .bold {
        font-weight: 700;
    }

<body>
    hhhhhhhhhh
    <p class="bold">bord test</p>

    <p>bord test</p>

    <p>bord test</p>

    <p>bord test</p>

</body>

实际的效果都是一样的

但我们经常用的经常是让文字不再变粗，只变大

.bold {
        font-weight: normal;
    }

.bold {
        font-weight: 400;
    }

其他的几种效果

4. 斜体(意大利体)

        .italic {
            font-style: italic;
        }

    <p class="italic">bord test</p>

最常用的反而是让倾斜的文字不在倾斜

- i标签或者em标签都会让文字倾斜

    .italic {
        font-style: normal;
    }

5. 复合写法

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略(取默认值)，但必须保留 font-size和 font-famiy 属性，否则font 属性将不起作用

例子

        .test {
            font: italic 100 70px "Mirosoft Yahei";
        }

    <p class="test"> test</p>

4. 文本属性

1. 字体颜色

        .color {
            color: red;
        }

    <p class="color">test</p>

2. 文本对齐

3. 装饰线

4. 首行缩进

只能缩进第一行

5. 行高

每一行的高度

5. css引入方式

内部
1. 页面内部直接写到html的style中
2. 元素内部在元素中写上style属性，格式见下

    <p style="color: pink;font-weight: normal;"></p>

外部

link写在原来写style的地方

6. 快速生成html页面

第五条
- 如果想生成其他标签并且带有类名,输入下面那种，然后按下tab键即可生成

标签名.样式名

p.little

7. 快速生成css样式

8. flex布局

使用flex布局可以进行自动居中，对称等布局操作，可以说是很方便了

官方解释：定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。

.book-cotainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    gap:13px;
}

<div class="book-cotainer">
            <BookShowCard v-for="(book,key) in books" :book="book" :key="key" />
</div>

参数解释
1. display: flex;
  - 使用flex布局
2. justify-content:
  - 使用什么对每个元素进行划分，怎么进行划分
  - 常见参数
    1. center

将元素自动集中在容器的中间

        2. space-between

项目之间有空格，然后把元素从容器的左右两边开始放，直到中间放满

        3. flex-start

元素从容器的最左边开始放

3. gap:
    * 控制元素之间的间隙
4. flex-wrap: 
    * 控制一行的元素溢出后会干嘛
    * 常见参数：
        + nowarp：不换行，一行内的元素在放不下的时候就会挤在一起
        + warp：换行，放不下时候自动换行
        + wrap-reverse：换行，但是容器的顺序会颠倒
            - 如：
            - ![202406170007424.png](/upload/1769173006605-3b8e2ae9-1e81-4aef-a1fe-860b9e5cff2b-048713.png)
            - ![202406170006167.png](/upload/1769173006658-ddd9e5ee-39a6-437c-8b20-7c5079647df5-428629.png)

官方例子：

justify-content: space-between; /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around; /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly; /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
justify-content: stretch; /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */

参考连接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content

9. 放大效果

.book-show-card:hover {
    z-index: 100;
    transition: transform 0.5s ease;
        /* 添加平滑过渡效果 */
    transform: scale(1.1,1.2);
}

<div class="book-show-card">
            <img :src="book.image" alt="Book Cover" class="book-image" />
            <div class="book-info">
                <h2>{{ book.title }}</h2>

                <p>{{ book.author }}</p>

                <p>{{ book.description }}</p>

            </div>

</div>

属性解析

transition 用于在状态变化的时候增加动画效果，

transform 将元素转换成另一种状态，如旋转，平移，倾斜，缩放

transform 指定动画作用于transition属性，而不会对其他变化发生效果

0.5s 动画的时间

ease 说明动画的变化快慢是如何变化的，这里是先慢再快，再慢

常见参数

scale(x轴，y轴) 两个轴放大的倍数，如（1.2，1.3）

rotate(0.5turn) 旋转，

参考连接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

更新: 2024-12-14 13:09:30
原文: https://www.yuque.com/duifangzhengzaishuru-rqbua/axyc58/css