千峰JAVA逆战班Day43

最新推荐文章于 2024-08-05 18:36:07 发布

真的要穿格子衫吗

最新推荐文章于 2024-08-05 18:36:07 发布

阅读量103

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/hsee2006/article/details/105259824

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Day43

*CSS部分(一)：

I. 字体样式：font siize 字体大小 font weight 字体粗细 color字体颜色

<style type="text/css">
        .abc{
            font-size: 30px;
            font-weight: 800;
            color: aqua;
        }
</style>
<body>
    <!--
     #号后面6位，每两位分别代表 红色 绿色 蓝色，也就是三原色，通过给不同的值配出不同的颜色
     -->
    <span style="color: #ff0000">字体样式</span>
    <span style="color: #00ff00">字体样式</span>
    <span style="color: #0000ff">字体样式</span><br>
    <span style="color: #a35f23">字体样式</span><br>
    <span class="abc">样式的复用</span>
    <p class="abc">样式的复用</p>
</body>

在这里插入图片描述

II. 样式选择器

1）标签选择器（重要）：标签名{ 样式 } 表示该标签下的样式都是大括号里面的内容

<style type="text/css">
        div{
            color: red;
        }
        p{
           color: blue;
        }
</style>
<body>
    <div>思悠悠，恨悠悠，</div>
    <p>恨到归时放始休</p>
</body>

在这里插入图片描述

2）ID选择器（不重要）：一般在css中不会用到，而在使用js时会使用到id选择器

<style>
        /*  id对等于下列标签时，会应用里面的样式 */
        #sss{
            color: red;
        }
        #hhh{
            color: green;
        }
</style>
<body>
    <div id="sss">思悠悠，恨悠悠</div>
    <div id="hhh">思悠悠，恨悠悠</div>
</body>

在这里插入图片描述
3）类选择器（非常重要） 为什么使用类选择器：1：为了样式可重用 2：为了代码的可维护性

    <style>
        /* class为以下值时，应用其中定义的样式 */
        .fs {
            font-size: 80px;
        }
        .blue{
            color: cornflowerblue;
        }
        .red{
            color: red;
        }
        .orange{
            color: orange;
        }
        .green{
            color: green;
        }
    </style>
<body>
    <span class="blue fs">G</span>
    <span class="red fs">o</span>
    <span class="orange fs">o</span>
    <span class="blue fs">g</span>
    <span class="green fs">l</span>
    <span class="red fs">e</span>
</body>

在这里插入图片描述

4）通配符选择器

*{
    /* 
    表示将所有盒子的外边距设置为0
    在实际工作中 也只用这种用法	
    */
	margin: 0;
}

5）后代选择器（非常重要）

    <style>
/* 表示只要在class为box的下级里面的li（不管层级有多深） 全部应用定义的样式 */
        .box li{
            color: red;
        }
    </style>
<body>
    <ur class="box">
        <li>用户</li>
        <li>系统</li>
        <li>菜单</li>
    </ur>
    <div class="box">
        <p>用户、系统、菜单</p>
    </div>
    <div class="box">
        <div>
            <ur>
                <li>用户</li>
                <li>系统</li>
                <li>菜单</li>
            </ur>
        </div>
    </div>
</body>

在这里插入图片描述
6）子选择器（用的较少）

    <style>
/* 表示只有在class为box1的下一级里面的li（只有下一级） 全部应用定义的样式 */
        .box1>p{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>文字</p>
        <p>系统</p>
        <p>菜单</p>
    </div>
    <div class="box1">
        <div>
            <p>文字1</p>
            <p>系统1</p>
            <p>菜单1</p>
        </div>
    </div>
</body>

在这里插入图片描述
7）交集选择器（用的很少）

    <style>
/* 表示必须在p标签下且class为aaa 应用定义的样式 */
        p.aaa{
            color: red;
        }
    </style>
<body>
    <p class="aaa">红色</p>
    <div class="aaa">黑色</div>
</body>

在这里插入图片描述

8）并集选择器（非常重要）

/* 表示p标签，red的li后代 都能应用下面定义的样式 */
    <style>
    p, .red li {
        color: red;
    }
    </style>

<body>
    <p>red</p>
    <div class="red">
        <span>black</span>
        <ur>
            <li>red</li>
        </ur>
    </div>
</body>

在这里插入图片描述

9）链接伪类选择器（非常重要） link visited hover adtive 顺序是不可改变的 ------> 爱恨法则（love hate ）

a. a标签中不要嵌套a标签。

b. a标签中虽然可以放块级元素，但是在工作中，我们需要将其转换为块级元素。

c. 在实际的工作中，a标签用的最多的只有hover。

    <style>
        /* 将链接的下划线去掉 */
        a {
            text-decoration: none;
        }
        /* 正常情况下链接的颜色 */
        a:link {
            color: orange;
        }
        /* 访问过之后的颜色 */
        a:visited{
            color: purple;
        }
        /* 将鼠标悬停在链接上的颜色 */
        a:hover {
            color: red;
        }
        /* 点击鼠标左键但是没有弹起时的颜色 */
        a:active{
            color: blue;
        }
    </style>
<body>
    <a href="http://www.hao123.com">hao123</a>
</body>

在这里插入图片描述

10）css3高级选择器：

    <style>
        /* 第一个儿子 */
        ul > li:first-child{
            color: red;
        }
        /* 第二个儿子 */
        ul > li:nth-child(2){
            color: blue;
        }
        /* 第三个儿子 */
        ul > li:last-child{
            color: #a35f23;
        }
    </style>
<body>
<ul>
    <li>电脑</li>
    <li>手机</li>
    <li>平板</li>
</ul>

}
    /* 第二个儿子 */
    ul > li:nth-child(2){
        color: blue;
    }
    /* 第三个儿子 */
    ul > li:last-child{
        color: #a35f23;
    }
</style>

电脑
手机
平板

~~~

在这里插入图片描述

真的要穿格子衫吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
千峰JAVA逆战班Day43

Day43*CSS部分(一)： I. 字体样式：font siize 字体大小 font weight 字体粗细 color字体颜色<style type="text/css"> .abc{ font-size: 30px; font-weight: 800; color: aqua;...
复制链接

扫一扫

专栏目录