CSS Day4-样式、选择器

2301_76534754

已于 2024-01-08 14:00:48 修改

阅读量525

点赞数 16

文章标签： css 前端

于 2024-01-06 09:06:14 首次发布

本文链接：https://blog.csdn.net/2301_76534754/article/details/135421677

版权

4.1 CSS样式

4.1.1 行内(内联)样式

写在style标签里面，不建议使用太多，否则会造成代码布局混乱

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

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

<body>
    <!-- 行内(内联)样式：写在style标签里面，不建议使用太多，否则会造成代码布局混乱  -->
    <div style="background-color: aquamarine;">我是第一个盒子</div> 
</body>

</html>

4.1.2 内部样式

写在style标签里面，写在head里面

<!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>
        div {
            font-size: 30px;
            background-color: red;
        }
    </style> 
</head>

<body>
    <!-- 内部样式：写在style标签里面,写在head下面-->
    <div>我是第二个盒子</div>
</body>

</html>

4.1.3 外部样式

创建.css文件，使用link标签把css文件引入进来，最佳方法

01-CSS样式.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>
    <link rel="stylesheet" href="CSS/01-style.css">
</head>

<body>
    <!-- 外部样式：创建.css文件，使用link标签把css文件引入进来，最佳方法 -->
    <div>我是第三个盒子</div>
    <!-- 
        优缺点：1.行内样式：优先级最高，代码冗余
               2.内部样式：优先级第二，代码整洁
               3.外部样式：优先级第三，最佳选择
     -->

</body>

</html>

01-style.css

div{
    font-size: 40px;
    background-color: green;
}

4.2 选择器

4.2.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>
        /* 通配符选择器作用于页面全局 */
        * {
            /* 去除浏览器自带的内外边距 */
            padding: 0;
            margin: 0;
            /* a标签自带的下划线消去 */
            text-decoration: none;
            /* 无序列表前面的实心圆点消去 */
            list-style: none;
        }

        /* div{
            background-color: yellowgreen;
        } */
        /* .box {
            color: red;
        }

        #box1 {
            color: aquamarine;
        }
        p.box2{
            font-size: 40px;
        } */
        .box,
        #box1,
        .box2,
        .box3 {
            background-color: pink;
        }
    </style>
</head>

<body>
    <!-- 1.标签选择器：直接使用标签名 -->
    <!-- <div>我是标签选择器盒子</div> -->
    <!-- 2.类选择器：使用class属性给标签设置类名，在style里面设置样式时类名前面需要加点 . -->
    <div class="box">我是类选择器盒子</div>
    <!-- 3.id选择器：具有唯一性，使用id属性给标签设置id值，在style里面设置样式时类名前面需要加 #  -->
    <div id="box1">我是id选择器盒子</div>
    <!-- 4.通配符选择器：* 去除标签自带的样式或者浏览器自带的样式 -->
    <a href="#">百度</a>
    <ul>
        <li>项目1</li>
        <li>项目2</li>
    </ul>
    <!-- 5.交集选择器：标签+类名/id -->
    <div>
        <p class="box2">我是交集选择器的段落</p>
    </div>
    <!-- 6.并集选择器：给不同的类名/id设置相同的样式使用，选择器之间使用逗号隔开 -->
    <div class="box3">我是并集选择器的盒子</div>

</body>

</html>

4.2.2 后代选择器

<!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>
        ul li a{
            color: pink;
        }
    </style>
</head>
<body>
    <!-- 后代选择器:ul li选择器之间需要有空格，不一定非是亲儿子，只要是子孙后代都可以 -->
    <ul>
        <li>我是小li
            <span>
                <a href="#">我是链接</a>
            </span>
        </li>
        <li>我是小li</li>
        <li>我是小li</li>
        <li>我是小li</li>
        <li>我是小li</li>
        <li>我是小li</li>
    </ul>
</body>
</html>

4.2.3 子代选择器

<!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>
        .uls>li {
            color: rgb(205, 100, 128);
        }

        /* .box>span{
            color: red;
        } */
    </style>
</head>

<body>
    <!-- 子代选择器：只作用于自己的亲儿子 -->
    <ul class="uls">
        <li>儿子</li>
        <ul>
            <li>孙子</li>
        </ul>
    </ul>
    <!-- <div class="box">
        <span>
            第一个span
            <div>
                <span>第二个span</span>
            </div>
        </span>
    </div> -->
</body>

</html>

4.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>
        .box+span{
            color: red;
        } 
    </style>
</head>
<body>
    <!-- 相邻兄弟选择器:选择器1+选择器2
         向下查找相邻兄弟
    -->
    <div>我是盒子1</div>
    <div class="box">我是盒子2</div>
    <span>我是span</span>
    <div>我是盒子3</div>
    <div>我是盒子4</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>
        .box~div{
            color: aqua;
        }
    </style>
</head>
<body>
    <!-- 通用兄弟选择器 -->
    <div>我是盒子1</div>
    <div class="box">我是盒子2</div>
    <span>我是span
        <div>我的父亲是span</div>
    </span>
    <div>我是盒子3</div>
    <div>我是盒子4</div>
</body>
</html>

4.3 伪类选择器

:link 还没访问的链接

:visited 已经访问过的链接

:hover 鼠标放在目标元素上就会出现效果

:active 正在访问的链接（鼠标按下去还没松开时）

注意：顺序不能乱，否则没效果；

visited比较奇怪，对font-size不起作用。

<!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{
            font-size: 10px;
        }

        a:visited{
            color: rgb(75, 11, 22);
        }

        a:hover{
            font-size: 30px;
        }

        a:active{
            color: black;
        }
    </style>
</head>
<body>
    <a href="https://baidu.com">百度</a>
</body>
</html>

4.4 结构伪类选择器

:first-child 第一个孩子

:last-child 最后一个孩子

:nth-child(n) n是正整数，从上至下选取第一个元素的第n个子元素进行设置样式

:nth-last-child(n) n是正整数，从下至上选取第一个元素的第n个子元素进行设置样式

:nth-child(odd) 从上至下选取奇数进行样式设置，odd代表奇数的意思，even参数代表偶数， 2n代表偶数，2n+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>
        li:first-child{
            font-size: 20px;
        }
        li:last-child{
            color: brown;
        }
        li:nth-child(2){
            color: aquamarine;
        }
        li:nth-last-child(2){
            color: bisque;
        }
        li:nth-child(odd){
            color: green;
        }
        li:nth-child(even){
            color: rgb(247, 166, 166);
        }
    </style>
</head>
<body>
    <ul>
        <li>悯农</li>
        <li>锄禾日当午，</li>
        <li>汗滴禾下土。</li>
        <li>谁知盘中餐，</li>
        <li>粒粒皆辛苦。</li>
    </ul>
</body>
</html>

4.5 伪元素选择器

::first-letter 设置第一个字符

::first-line 设置第一行字符

::selection 给选中的文符设置样式(鼠标按下去选中的文字)

::before 是在元素内部的前面添加元素

::after 是在元素内部的后面添加元素

<!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::first-letter{
            color:red;
        }
        p::first-line{
            color: green;
        }
        p::selection{
            color: aquamarine;
        }
        p::before{
            content:"你是哪";
        }
        p::after{
            content:"我是最后的文字";
            color: blanchedalmond;
        }
    </style>
</head>
<body>
    <p>的看法今年还是看人感觉你登陆窗口富婆二分到公司了让你分公司卡夫卡没品位开机费如果你到了如果你做了多久；领导风格你可看见他南斯拉夫谁哦碳金融i炒房客美国独立开发gold吕蒙到了</p>
</body>
</html>

目标伪类选择器（了解）

属性选择器：[属性名=属性值]{ } 选择含有指定属性和属性值的元素