CSS基础

最新推荐文章于 2024-09-24 10:00:08 发布

VShssh

最新推荐文章于 2024-09-24 10:00:08 发布

阅读量51

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/VShssh/article/details/132067788

版权

文章目录

css 是层叠样式

css 是层叠样式

css 与 html 区别
css 用 : html用=

css 层叠样式

style 内联样式
内部样式
外联样式

<!-- 外部样式 -->
    <link rel="stylesheet" href="./demo.css">
    <!-- 内部样式表 -->
    <style>
       font{
        color: blue;
        size: 0cap;
        font-family: "楷书";
       }
       div{
        background-color: rgb(100, 21, 80);
       
       }
       body{
        background-image: url(./1.jpg);
       }
    </style>
</head>
<body>
  <!-- style 内联样式表 -->
  <div style="width: 500px;height: 400px;border: 1px solid black;font-size: 30px;">
  <font >文本标记</font>
  </div>

层叠：同一个元素使用了不同的样式样式叠加就叫层叠
冲突：同一个元素相同属性就是冲突遵循就近原则选择属性
继承：在父子关系中只有文本可以被继承块级元素可以继承父级的样式，行级不可以

选择器

全局选择
class 选择
id 选择
群组选择器
标签选择器
层级选择
层次择器 1. 子代选择器
层次择器 2. 后代选择器空格
层次择器 3. 相邻兄弟选择器 +
层次择器 4. 通用兄弟

<style>
        /* 全局选择器 */
        *{
            margin: 0;
            padding: 0;
        }
        /*  class 选择器 */
        .q{
            background-color: aqua;
        }
        /* id 选择器 */
        #d{
            background-color: burlywood;
        }
        /* 群组选择器 */
        b,a{
            background-color: yellow;
        }
        /* 层次择器   1. 子代选择器 >*/
        ul>li{
            color: red;
        }
          /* 层次择器   2. 后代选择器 空格*/
          aa li{
            list-style: none;
          }
        /* 层次择器   3. 相邻兄弟选择器  + */
        li+a{
            background-color: blue;
        }
        /*  层次择器    4. 通用兄弟 */
        ul>li~a~p {
            background-color: chartreuse;
        }

伪类选择器

必须先为默认然后为鼠标访问后状态接着是鼠标悬浮的状态最后为鼠标点击 (顺序必须这样)

 b+a:link{
            /* 默认状态 */
            background-color: red;
        }
        b+a:visited{
            /* 访问过后 */
            background-color: black

        }
        b+a:hover{
            /* 鼠标浮动 */
            background-color: aqua;
        }
        b+a:active{
            /* 鼠标点击 */
            background-color: yellow;
        }