从0开始学前端第二天

星河边采花

已于 2024-01-15 23:19:52 修改

阅读量524

点赞数 9

文章标签：前端

于 2024-01-15 14:29:20 首次发布

本文链接：https://blog.csdn.net/qq_59183443/article/details/135598114

版权

学习内容：

css

行内样式表

页内样式表

外部样式表

同步修改所有某一类标签的内容：内部样式表

<!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>
        img {
            width: 300px;
            height: 300px;
            border-radius: 50%;
        }
    </style>
</head>

<body>

    <img src="/static/images/flower.jpg" alt="flower">

</body>

</html>

如果只想修改某一部分标签：设置class

<!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>
        img {
            width: 300px;
            height: 300px;
            border-radius: 50%;
        }

        .green-p {
            background-color: aquamarine;
        }

        .blue-p {
            background-color: aqua;
        }

        .big {
            width: 70px;
            height: 70px;
        }
    </style>
</head>

<body>

    <img src="/static/images/flower.jpg" alt="flower">

    <p class="blue-p , big">1</p>
    <p class="green-p , big">2</p>
    <p class="blue-p">3</p>
    <p class="green-p">4</p>



</body>

</html>

选择器

标签选择器：

div

id选择器：

#id

类选择器：

.class

class 里面可以写多个格式

伪类选择器

伪类选择器
伪类用于定义元素的特殊状态。

链接伪类选择器：

:link：链接访问前的样式
:visited：链接访问后的样式
:hover：鼠标悬停时的样式
:active：鼠标点击后长按时的样式
:focus：聚焦后的样式
位置伪类选择器：

:nth-child(n)：选择是其父标签第n个子元素的所有元素。
目标伪类选择器：

:target：当url指向该元素时生效。

遇到的问题：

星河边采花

关注

9
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
从0开始学前端第二天

nth-child(n)：选择是其父标签第n个子元素的所有元素。:target：当url指向该元素时生效。同步修改所有某一类标签的内容：内部样式表。如果只想修改某一部分标签：设置class。:active：鼠标点击后长按时的样式。:visited：链接访问后的样式。class 里面可以写多个格式。:hover：鼠标悬停时的样式。伪类用于定义元素的特殊状态。:link：链接访问前的样式。:focus：聚焦后的样式。
复制链接

扫一扫