CSS3 基础样式

最新推荐文章于 2024-07-13 11:50:40 发布

SettleAB

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量236

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_48495493/article/details/117908561

版权

快速入门

狂老师说过：

HTML + CSS + JavaScript
结构 + 表现 + 交互
https://www.zhihu.com/question/26339902

基本入门

练习格式：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 规范.<style>可以编写css的代码，每一个声明最好使用分好结尾
       语法：
          选择器 {
            声明1；
            声明2；
            ...
          }
          -->
    <style>
        h1{
    
            color: cyan;
        }
    </style>

</head>
<body>
    <h1>我是h1</h1>

</body>
</html>

建议使用这种规范：
在这里插入图片描述

三种css导入方式

在这里插入图片描述
外部样式②：

选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 标签选择器，会选择到页面上所有的这个标签元素*/
        h1{
    
            background: #ff4000;
        }
        p{
    
            font-size: 60px;
        }
    </style>

</head>
<body>

    <h1>小天</h1>
    <h1>Settle</h1>
    <p>study</p>

</body>
</html>

在这里插入图片描述

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
            /*
        类选择器的格式 .class的名称｛｝
        好处，可以多个标签归类，是同一个class，可以复用
         */
        .mine{
    
            color: #FF0000FF;
        }
        .me{
    
            color: blue;
        }

    </style>

</head>
<body>

    <h1 class="mine">小天</h1>
    <h1 class="me">Settle</h1>
    <h1>study</h1>
    <p class="me"> xiaop</p>

</body>
</html>

在这里插入图片描述

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*
        id选择器：id必须保证全局唯一！
        #id名称｛｝
         */
        #mine{
    
            color: yellow;
        }
        #me{
    
            color: #00ffdc;
        }
        #me2{
    
            color: darkorange;
        }

    </style>

</head>
<body>

    <h1 id="mine" >小天</h1>
    <h1 id="me">Settle</h1>
    <h1>study</h1>
    <p id="me2">> xiaop</p>

</body>
</html>

在这里插入图片描述

优先级问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #mine{
    
            color: yellow;
        }
        .me{
    
            color: blue;
        }
        h1{
    
            color: crimson;
        }

    </style>

</head>
<body>

    <h1 id="mine" class="me">小天</h1>
    <h1 class="me">Settle</h1>
    <h1>study</h1>
    <p class="me"> xiaop</p>

</body>
</html>

在这里插入图片描述
结论：id>class>table

层次选择器

后代选择器

   <style>
        /* 后代选择器 */
        body p{
    
            background: red;
        }
    </style>

在这里插入图片描述

子选择器

	<style>
        /* 子选择器 */
        body>p{
    
            background: #16939c;
        }
     </style>

在这里插入图片描述

相邻兄弟选择器

<style>
        /*兄弟选择器,只有一个相邻*/
        .active + p{
    
            background: blueviolet;
        }
</style>

在这里插入图片描述

通用选择器

<style>
        /*兄弟选择器,当前选中元素向下的所有兄弟*/
        .active ~ p{
    
            background: blueviolet;
        }<

最低0.47元/天解锁文章

SettleAB

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 基础样式

快速入门狂老师说过：HTML + CSS + JavaScript结构 + 表现 + 交互基本入门练习格式：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- 规范.<style>可以编写css的代码，每一个声明最好使用分好结尾语法：
复制链接

扫一扫