css标签（1）

Zhujjyy

已于 2024-02-19 19:48:10 修改

阅读量646

点赞数 11

文章标签： css 前端

于 2024-02-19 19:15:27 首次发布

本文链接：https://blog.csdn.net/Zhujjyy/article/details/136176681

版权

css

css基础选择器

标签选择器：

 <style>
    li{
        color: #349c3b;
    }
 </style>
</head>
<body>
    <ul>
        <li>标签</li>
        <li>标签</li>
        <li>标签</li>
        <li>标签</li>
    </ul>
</body>
</html>

类选择器：

.类名 { css属性名：属性值； }

id选择

 <sty le>
    #p1{
        color: aqua;
    }
 </style>
</head>
<body>
    <p id="p1">
        1.每个标签都有id属性
        2.每一个标签只能对应提个标签
        3.一个id只能对应一个标签
        4.id选择器使用#代表
    </p>
</body>

通配符选择噐：* { css属性名：属性值； }

字体样式：

字体大小：font-size

字体粗细：font-weight

字体样式：font-style

字体类型：font-family

字体类型：font属性连写

文本样式：

文本缩进：text-indent

文本水平对齐方式：text-align

文本修饰：text-decoration

line-height行高

选择器进阶：

交集选择器：

<style>
    p.a{
        color:red;
    }
</style>
</head>
<body>
    <p class="a">
        交集选择器中的选择器之间是紧挨着的，没有东西分隔
        交集选择器中如果有标签选择器，标签选择器必须写在最前面
    </p>
   <p class="b">

    </p>
    <a href="#" class="a">对方过后</a>
</body>

并集选择器：

<title>并集选择器</title>
    <style>
        /* li1红   li2，li3 黄 */
        .li1 {
            color: red;
        }

        .li2,
        .li3 {
            color: yellow;
        }

        .p1,
        .li2>p {
            font-size: 40px;
        }

        ul p,
        ul span {
            color: rgb(84, 150, 183);
        }
    </style>
</head>

<body>
    <p class="p1">并集选择器</p>
    <ul>
        <li class="li1">
            并集选择器中的每组选择器之间通过 , 分隔
        </li>
        <li class="li2">
            <p class="p2">
                并集选择器中的每组选择器可以是基础选择器或者复合选择器
            </p>
            <span>sdfghj</span>
        </li>
        <li class="li3">
            并集选择器中的每组选择器通常一行写一个，提高代码的可读性
            <span>edrtyui</span>
        </li>
    </ul>
    <span>ertyui</span>
</body>

hover伪类选择器：

<title>hover伪类选择器</title>
<style>
    p:hover{
        color: aquamarine;
        font-size: large;
        font-weight: 400;
    }
</style>
</head>
<body>
    <p>鼠标移入变色</p>
   
</body>

元素选择模式：

<title>元素的选择模式</title>
<style>
    a{
        /* 变快\块 */
        display: block;
        height: 100px;
        width: 200px;
        background-color: gold;
    }
    p{
        /* 行内 */
        display: inline;
        background-color: aquamarine;
    }
    .img1{
        display: none;
    }
    .d1{
        height: 300px;
        background-color: chocolate;
    }
    .d1:hover .img3{
        display: none;
    }
</style>
</head>
<body>
    <a href="#">行内--块</a>
    <a href="#">行内--块</a>
    <p>块--行内</p>
    <img src="img/up.jpg" alt="" class="img1">
    <img src="img/up.jpg" alt="" class="img2">
    <div class="d1">
        <img src="img/up.jpg" class="img3">
    </div>
</body>

背景属性：

背景颜色：

 <title>背景颜色t</title>
    <style>
        ul {
            /* 颜色名 */
            background-color: rgb(119, 119, 203);
            /* 16进制 */
            background-color: #669977;
            /* rgb */
            background-color: rgb(255, 122, 0);
            /* rgba */
            background-color: rgba(0,255,0,0.1);
            /* hsl */
            background-color: hsl(0, 77%, 52%);
            /* hsla */
            background-color: hsla(0, 33%, 55%, 0.5);
        }
        li{
            background-color: #7d9cb4;
        }
    </style>
</head>

<body>
    <ul>
        <li>2345</li>
        <li>8789</li>
        <li>4567</li>
    </ul>
</body>

背景图片：

<title>背景图片</title>
<style>
    body{
        height: 800px;
        width: 1920px;
        /* 背景图片 */
        background-image: url(img/up.jpg);
        /* 背景平铺 */
        background-repeat: no-repeat;
        background-color: aqua;
       /* 背景尺寸    第一个是宽第二个是高*/
        background-size: 600px 800px;
        /* 背景定位 */
        background-position: 300px  100px;
        
    }
</style>

背景平铺：

background-repeat

背景位置：

background-position

元素选择模式：

块级元素：

显示特点：

独占一行（一行只能显示一个）宽度默认是父元素的宽度，高度默认由内容撑开可以设置宽高

代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

行内元素：

  /* 行内 */
        display: inline;
        background-color: aquamarine;

行内块元素：

display：inline-block

css特性：

继承性:

  <title>继承</title>
    <style>
        .a {
            height: 300px;
            background-color: rgb(143, 205, 50);
            color: red;
        }
        div{
            width: 200px;
            color: white;
            color: blue;
        }
        #a{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="a">
        这是父亲
        <p>这是儿子</p>
    </div>

层叠性:

特性：

1.给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上

2.给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

盒子模型:

边框:

<title>边框</title>
    <style>
        div {
            height: 300px;
            width: 500px;
        }

        .a1 {
            /* 边框的粗细 */
            border-width: 2px;
            /* 边框颜色 */
            border-color: aqua;
            /* 边框的样式 */
            border-style: solid;
        }

        .a2 {
            /* 边框的粗细 */
            border-width: 2px;
            /* 边框颜色 */
            border-color: rgb(212, 150, 14);
            /* 边框的样式 */
            border-style: solid;
            /* 上边框 */
            /* border-top-width: 10px;
            /* 左边框 */
            /* border-left-width: 20px;  */
            /* 上 top 下 bottom 左 left  右 right */
            /* 上右下左 */
            border-width: 5px 20px 10px 16px;
            /* 上右下左 */
            /* border-color: blueviolet yellow yellowgreen bisque; */
            /* 上,左右,下 */
            border-color: blueviolet beige yellow;
            /* 上下,左右 */
            border-color: beige yellow;
            /* 上下左右 */
            border-color: aqua;
             border-style: inset dashed solid groove;
        }
        .a3{
            /* 简写:宽度 样式 颜色 */
            border: 1px solid  red;
        }
    </style>
</head>

<body>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
</body>

外边框:

<title>外边距</title>
    <style>
        .d1,
        .d2,
        .d3 {
            height: 200px;
            width: 200px;
            background-color: pink;
            margin: 10px;
        }

        .d2 {
            /*左边距210px(向右挪7动210px ) */
            margin-left: 220px;
            margin-top:-210px;
        }
    </style>
</head>

<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4">
        <a href="#">第三方规划局</a>
        <a href="#">玩儿听雨</a>
        <a href="#">电饭锅会尽快</a>
        <a href="#">发过火及哦发过火</a>
    </div>
</body>

内边框:

title>内边框</title>
    <style>
        .d1{
            height: 500px;
            width: 500px;
            border: 6px solid yellowgreen;
            /* 内边距,填充 */
            padding: 10px;
            padding-left: 50px;
        }
        img{
            height: 100%;
        
        }
    </style>
</head>
<body>
    <div class="d1">
        <img src="img/安浩然.jpg" alt="">
    </div>
</body>

css布局

结构为类选择器:

<title>结构为类选择器</title>
    <style>
        /* 父元素的第一个子元素 */
        ul li:first-child{
            background-color: aquamarine;
        }
        /* 最后一个 */
        li:last-child{
            background-color: rgb(255, 255, 0);
        }
        /* 第n个子元素 */
        ul li:nth-child(3){
            color: aqua;
        }
        /* 倒数n个 */
        ul li:nth-last-child(2){
            font-size: 30px;
        }
        table{  
            border: 1px solid black;
            height: 500px;
            width: 500px;
        }
        td{
            border: 1px solid black;
        }
        /* n 的用法 */
        /* 1.偶数行  2n even*/
        table tr:nth-child(2){
            background-color: aqua;
        }
        /* 2.奇数 2n+1 2n-1 odd */
        table tr:nth-child(2n+1){
            background-color: aquamarine;
        }   
        /* 前三个   n+3 */
        ul li:nth-child(-n+3){
            border: 1px solid palegreen;
        }
        /* 三个之后的  n+3 */
        ul li:nth-child(n+3){
            border: 1px solid rgb(4, 243, 4);
        }
        /* 后三个 */
        ul li:nth-last-child(-n+3){
            font-size: 30px;
        }
    </style>
</head>

伪元素:

伪元素:一般页面中的非主体内容可以使用创建内容

区别:

1.元素:HTML设置的标签

2.伪元素:由css模拟出的标签效果

注意点:

必须设置content属性才能生效
伪元素默认是行内元素

标准流:

标准流中块级元素的排版规则是:从上往下、垂直布局、独占一行

标准流中行内元素或行内块元素的排版规则是:从左往右、水平布局、空间不够自动折行

浮动:

<title>浮动</title>
    <style>
        div{
            height: 300px;
            width: 300px;
        }
        .a{
            background-color: aqua;
        }
        .b{
            background-color: rgb(54, 202, 81);
        }
        .c{
            background-color: rgb(110, 83, 230);
        }
        .d{
            background-color: rgb(243, 177, 36);
        }
        /* 浮动 */
        .a{
            float: left;
        }
        .b{
            float: left;
        }
        .c{
            float: left;
        }
        .d{
            float: left;
        }
        .e{
            height: 300px;
            width: 100%;
            clear: both;
            /* both:清除两边 */
            /* left:左 right:右 */
            /* none:不清除 */
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
    <div class="e"></div>
</body>

清除浮动;

    .a{
            border: 1px solid rgb(218, 142, 155);
           overflow: hidden;
        }
        .b{
            height: 300px;
            width: 300px;
            margin: 5px;
            background-color: aqua;
            float: left;
        }
        .c{
            background-color: aquamarine;
            height: 300px;
            
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">
            子元素的浮动不会对父元素的标签产生影响
        </div>
        <div class="b">
            需要设置副元素的高度,否则会造成 <br>
            父元素的边框塌陷
        </div>
        <div class="b"></div>
        <div class="b"></div>
    </div>
    <div class="c">c</div>
</body>

清除浮动：格外标签法

<style>
        .a{
            border: 1px solid rgb(78, 0, 13);
           overflow: hidden;
        }
        .b{
            height: 300px;
            width: 300px;
            margin: 5px;
            background-color: aqua;
            float: left;
        }
        .c{
            background-color: aquamarine;
            height: 300px;
        }
        .d{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">
            格外标签法:
            在父元素的最后一个块元素
            设置样式clear:both
        </div>
        <div class="b">
            不建议使用:增加页面复杂度
        </div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="d"></div>
    </div>
    <div class="c">c</div>
</body>

清除浮动：伪元素

<style>
        .a{
            border: 1px solid rgb(196, 66, 87);
          
        }
        .b{
            height: 300px;
            width: 300px;
            margin: 5px;
            background-color: aqua;
            float: left;
        }
        .c{
            background-color: aquamarine;
            height: 300px;
        }
        .cl::after{
            /* content:文字,图片 */
            content: "";
            display: block;
            clear: both;
            /* 补充写法 */
            height: 0px;
            /* 隐藏元素 */
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="a cl">
        <div class="b">
            
        </div>
        <div class="b">
            
        </div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="d"></div>
    </div>
    <div class="c">c</div>
</body>

清除浮动：双伪元素

 <style>
        .a{
            border: 1px solid rgb(196, 66, 87);
          
        }
        .b{
            height: 300px;
            width: 300px;
            margin: 5px;
            background-color: aqua;
            float: left;
        }
        .c{
            background-color: aquamarine;
            height: 300px;
        }
        .cl::before,
        .cl::after{
            /* content:文字,图片 */
            content: "";
            display: table;
        }
        .cl::after{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="a cl">
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="d"></div>
    </div>
    <div class="c">c</div>
</body>

相对定位：

特点：

1.需要配合方位属性实现移动

2.相对于自己的原本位置进行移动

3.在页面中占位置----没有脱标

代码：position：relative

 <style>
        div{
            height: 300px;
            width: 300px;
            background-color: pink;
        }
        .b{
            background-color: orange;
            position: relative;
            left: 150px;
            top: -150px;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b">
        相对定位:相对与自身进行移动
        1.没有脱标
        2.会保留原来的位置
    </div>
    <div class="c"></div>
</body>

绝对定位：

特点：

1.需要配合方位属性实现移动

2.相对于自己的原本位置进行移动

3.在页面中占位置----已经脱标

代码：position：absolute

<style>
        .a{
            height: 500px;
            width: 800px;
            background-color: pink;
            position: relative;
        }
        .c{
            height: 200px;
            width: 200px;
            background-color: yellow;
            position: absolute;
            bottom: 0px;
            left: 0px;
        }
        .b{
            height: 200px;
            width: 200px;
            background-color: orange;
            position: absolute;
            bottom: 0px;
            right: 0px;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">
            绝对定位:
            相对于非静态定位的父元素进行移动
            1.不保留原来的位置
            2.脱离了标准文档流
        </div>
        <div class="c">
        </div>
    </div>

子绝父相：

子级：绝对定位

父级：相对定位

固定定位：

  <title>固定定位</title>
    <style>
        body{
            height: 50000px;
            background-image: url(img/product.png);
        }
        .a{
            height: 400px;
            width: 100px;
            background-color: aqua;
            /* 固定定位 */
            position: fixed;
            right: 0;
            top: 200px;
        }
    </style>
</head>
<body>
    <div class="a">
        <p>
            固定定位: <br>
            相对于浏览器进行移动<br>  
            脱离标准文档流 <br>   
            不在保留原来位置
        </p>
    </div>
</body>

半遮罩：

 <style>
        .a{
            height: 500px;
            border: 1px solid pink;
            position: relative;
        }
        img{
            height: 500px;
        }
        .b{
            height: 100px;
            width: 800px;
            background-color: rgb(255, 187, 238);
            position: absolute;
            top: 300px;
            /* 透明度 */
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div class="a">
        <img src="img/banner.png" >
        <div class="b">
            半透明遮罩
        </div>
    </div>
</body>