CSS样式学习

吴家小妹 · 发表于 2022-4-8 11:41:00

CSS学习

1.三种样式

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

<!--内部样式
style 写到head头标签的里面，css内部样式,注释不能写到style内部
-->
    <style>
h1{
    color: wheat;
}
    </style>
    
    
<!-- 外部样式 语法 link rel="stylesheet" href="..."-->
<link rel="stylesheet" href="css/style.css">

    
</head>
<body>

<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<!--<h1 style="color: red">我是红色标题</h1>-->
<h1>我是个测试标题</h1>
<!--

学习笔记:
优先级：行内样式最高，其余的就近原则，靠近h1标签是style标签内样式还是外部样式，依据具体情况而定。

-->
</body>
</html>

链接式：

<!-- 外部样式 语法 link rel="stylesheet" href="..."-->
<link rel="stylesheet" href="css/style.css">

2.选择器

作用：选择页面上的某一个或某一类元素

2.1基本选择器

1.标签选择器:选择一类标签标签{}

2.类选择器 class:选择所有class属性一致的标签，跨标签，类名{}

3.id选择器全局唯一 #id{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    id选择器,唯一指定
      格式->  #id名称{
}
不遵循就近原则，固定的 id选择器 > class > 标签选择器
-->

<style>

#zhangzhao{
    color: #e51515;
}
.test{
color: #018aff;
}
h1{
    color: #dcc522;

}

</style>
</head>
<body>

<h1 class="test" id="zhangzhao">张老家学Java</h1>
<h1 class="test">张老家学Java</h1>
<h1 class="test02">张老家学Java</h1>
<h1 class="test02">张老家学Java</h1>

<!--不遵循就近原则，固定的 id选择器 > class > 标签选择器-->
</body>
</html>

2.2层次选择器

1.后代选择器：某个元素的后面祖爷爷爷爷爸爸你全部选中

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

2.子选择器，一代，儿子


    /*   子选择器 */
        body>p{
            background: #dcc522;
        }

3.相邻兄弟选择器同辈，仅仅选择下面一个

    /*    相邻兄弟选择器 只选择一个，对下不对上*/
       .active + p{

           background: #018aff;
       }

4.通用兄弟选择器

    /*通用兄弟选择器，当前选中元素的向下所有的兄弟元素 */
        .active~p{
            background: green;

        }

来源：https://www.cnblogs.com/zhanglaojia233/p/16116175.html