Web开发 -前端部分-CSS

news2024/12/21 0:14:17

CSS

CSS（Cascading Style Sheet）:层叠样式表，用于控制页面的样式（表现）。

一基础知识

1 标题格式

标题格式一：行内样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个前端代码</title>
</head>

<body>
    <!-- 第一种方式 -->
    <h1 style="color: red;">图片图集:</h1>
    <h2>第一张图片</h2>
    <img src="./QQ图片20240919174729.jpg" width="10%">
    <hr>
    2024年12月8号
    <hr>
    <h1>第二张照片</h1>
    <img src="./QQ图片20240919174738.jpg" width="10%">
    <hr>
    2024年12月8号
    <hr>

</body>

</html>

标题样式二：内嵌样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个前端代码</title>
    <!-- 内嵌样式 -->
    <style>
        h1{
            color: orange
        }
        h2{
            color:brown
        }
    </style>
</head>

<body>
    <h1>图片图集:</h1>
    <h2>第一张图片</h2>
    <img src="./QQ图片20240919174729.jpg" width="10%">
    <hr>
    2024年12月8号
    <hr>
    <h1>第二张照片</h1>
    <img src="./QQ图片20240919174738.jpg" width="10%">
    <hr>
    2024年12月9号
    <hr>

</body>

</html>

标题样式三：外联样式

创建一个css文件用于存储对应格式

h1{
    color: brown;

}
h2{
    color: blue;
}

外联导入

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个前端代码</title>
    <link rel="stylesheet" href="./CSS/news.css">
</head>

<body>
    <h1>图片图集:</h1>
    <h2>第一张图片</h2>
    <img src="./QQ图片20240919174729.jpg" width="10%">

    <hr>
    2024年12月8号
    <hr>
    <h1>第二张照片</h1>
    <img src="./QQ图片20240919174738.jpg" width="10%">
    <hr>
    2024年12月9号
    <hr>

</body>

</html>

2 颜色属性表示

color

3 字体大小属性表示

font-size（需要加px）

.cls {
    color: rgb(21, 0, 255);
    font-size: 12px;
}

4 实现首行缩进，列间距

        p{
            /* 首行缩进 */
            text-indent: 35px;
            /* 设置行高 */
            line-height: 25px;    
        }

二 CSS选择器

1 基础的三个选择器

用来选取需要设置样式的元素（标签）批量的更改

优先级类选择器 > id选择器 > 元素选择器

代码实现：

/* 元素选择器 */
h1{
    color: brown;

}
h2{
    color: blue;
}
/* id选择器 */
#ax1{
    color: yellow;
}
/* 类选择器 */
.cls{
    color: rgb(0, 255, 8);
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个前端代码</title>
    <link rel="stylesheet" href="./CSS/news.css">
</head>

<body>
    <!-- 元素选择器 -->
    <h1>图片图集:</h1>
    <h2>第一张图片</h2>
    <img src="./QQ图片20240919174729.jpg" width="10%">
    <hr>
    2024年12月8号
    <hr>
    <h1>第二张照片</h1>
    <img src="./QQ图片20240919174738.jpg" width="10%">
    <hr>
    <!-- id选择器 -->
    <span id="ax1">year: </span>
    <hr>
    <!-- 类名选择器 -->
    <span class="cls">2024年12月9号</span>
    <hr>

</body>

</html>

2 通配选择器

作用：可以选中所有的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>
        h2 {
            color: green;
            font-size: 30px;
        }
        *{
            color: red;
        }
    </style>
    <!-- <link rel="stylesheet" href="/HTML/CSS/news.css"> -->

</head>

<body>
    <h2>欢迎来到我的世界</h2>

    <p>草莓，蓝莓，溜溜梅，你想我了没？</p>
</body>

</html>

图形化展示：

3 复合选择器

交集选择器

作用：选中同时符合多个条件的元素。

并集选择器：

作用：选中多个选择器对应的元素，又称：分组选择器。

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">

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

    <title>Document</title>
    <style>
        .rich {
            color: gold;
        }

        .bea {
            color: red;
        }

        .dog {
            color: blue;
        }

        .pig {
            color: green;
        }

        /* 并集选择器  用于添加重复的属性 （也可以在原有的类中再添加一个共有类）*/
        #ax,
        .rich,
        .bea,
        .dog,
        .pig {
            font-size: 40px;
            background-color: yellow;
            width: 180px;
        }
    </style>
</head>

<body>

    <h2 class="rich">土豪张三</h2>
    <h2 class="bea">明星李四</h2>
    <h2>破产王五（不添加任何样式）</h2>
    <hr>
    <p class="dog">小狗旺财</p>
    <p class="pig">小猪佩奇</p>
    <p id="ax">小羊肖恩</p>

</body>

</html>

图形化展示：

4 后代选择器（儿子孙子~）

作用：选中指定元素中，古河要求的后代元素。

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style>
        /* 在父类元素后面加一个#nbsp(空格)再加上后代（几代都行）  */
        ul li {
            color: red;
        }

        ul li a {
            color: orange;
        }

        /* 将ol中的特殊id 的元素属性更改 */
        .subject #front-end {
            color: blue;
        }

        /* ol中的li为绿色  */
        ol li {
            color: gray;
        }
        /* p选择器中不能放h1-h6 */
    </style>
</head>

<body>

    <ul>
        <li>抽烟</li>
        <li>喝酒</li>
        <li>
            <a href="#">烫头</a>
        </li>

    </ul>
    <br>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>

    <ol class="subject">
        <li id="front-end">前端</li>
        <li>后端</li>
        <li>大数据</li>
        <li>UI</li>
    </ol>
</body>

</html>

图形化展示

5子代选择器（儿子）

作用：选中指定元素中符合要求的子元素（儿子元素）。（先写父再写子）

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 子代选择器是一种组合关系（一个父与一个子而组成的一个组合搭配） */
        div>a {
            color: red;
        }

        div>p>a {
            color: green;
        }

        .ax>a {
            color: chocolate;
        }
    </style>
</head>

<body>

    <div>
        <a href="#">张三</a>
        <a href="#">李四</a>
        <a href="#">王五</a>
        <p>
            <a href="#">刘六</a>
            <div>
                <a href="#">孙七</a>
            </div><br>
            <div class="ax">
                <a href="#">吴八</a>
            </div>
        </p>
    </div>
</body>

</html>

图形化展示

6 兄弟选择器

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兄弟选择器</title>
    <style>
        
        /* 紧紧相邻的兄弟 跟div紧紧相邻（间隔为一）的元素*/
        div+p {
            color: red;
        }

        /* 旁边的兄弟 (所有的兄弟元素) */
        /* 后来者居上 颜色为brown */
        div~p{
            color: brown;
        }

    </style>
</head>

<body>

    <div>尚硅谷</div>
    <p>前端</p>
    <p>java</p>
    <p>大数据</p>
    <p>UI</p>

</body>

</html>

图形化展示：

7 属性选择器

作用：选中属性值符合一定要求的元素

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 第一种写法 选中具有title属性的元素*/
        [title] {
            color: red;
        }

        /* 第二种写法 选中具有title属性且指定属性值的特定元素*/
        [title="home1"] {
            color: brown;
        }

        /* 第三种写法 选中具有title属性且属性值以指定值为开头的特定元素 */
        [title^="a"] {
            color: green;
        }

        /* 第四种元素 选中具有title属性且属性值以指定值为结尾的特定元素 */
        [title$="b"] {
            font-size: 30px;
        }

        /* 第五种写法 选中具有title属性且属性值包含指定值的特定元素*/
        [title*="a"] {
            background-color: yellow;
        }
    </style>
</head>

<body>

    <div title="home1">这是一个属性选择器的实例1</div>
    <div title="home2">这是一个属性选择器的实例2</div>
    <div title="a_home3">这是一个属性选择器的实例3</div>
    <div title="a_home4">这是一个属性选择器的实例4</div>
    <div title="a_home5b">这是一个属性选择器的实例4</div>

</body>

</html>

图形化展示