随笔 - 7  文章 - 0  评论 - 0  阅读 - 351

CSS学习笔记

目录

CSS：层叠样式表(Cascading Style Sheets)

1、CSS的四种导入方式

link标签

标签最常见的用途是链接样式表。

在这里插入图片描述
优先级:就近原则，哪个离元素近实现哪个，这里行内样式优先级最高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--内部样式-->
    <style>
        h1{
            color:green;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
<!--优先级:就近原则，哪个离元素近实现哪个，这里行内样式优先级最高-->
<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red">我是标题</h1>

</body>
</html>

拓展：外部样式两种写法

  • 链接式：
    HTML
 <link rel="stylesheet" href="css/style.css">
  • 导入式：
    @import 是 CSS2.1特有的
    缺点--先展示结构再渲染
    <style>
        @import url("css/style.css");
    </style>

2、选择器

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

2.1 基本选择器

优先级: id选择器>类选择器>标签选择器

  • 标签选择器

选中同一类标签

标签名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
      /*标签选择器，会选择页面上所有的标签*/
      h1{
          color: #000000;
          background: #e7d5d5;
          border-radius: 10px;  /*圆角*/
      }
    </style>
</head>
<body>
  <h1>学习</h1>
  <h1>听歌</h1>

</body>
</html>
  • 类选择器 class

选择class相同的标签，可以跨标签使用

.类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /*可以复用 用class分组使用*/
      .bt1{
          color: #e7d5d5;
      }
      .bt2{
          color: #b2da89;
      }
      .bt3{
          color: #84b2d3;
      }
    </style>


</head>
<body>
<h1 class="bt1">标题1</h1>
<h1 class="bt2">标题2</h1>
<h1 class="bt3">标题3</h1>
<p class="bt3">p标签</p>
</body>
</html>

在这里插入图片描述

  • id选择器

id必须保证全局唯一

id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        /*id必须保证全局唯一
          优先级: id选择器>类选择器>标签选择器
        */
        #bt1{
          color: #b2da89;
        }
        #bt2{
            color: #e7d5d5;
        }
        #bt3{
            color: #84b2d3;
        }
    </style>
</head>
<body>

<h1 id="bt1">标题1</h1>
<h1 id="bt2">标题2</h1>
<h1 id="bt3">标题3</h1>
<p id="bt4">p标签</p>
</body>
</html>

2.2 层次选择器

  • 后代选择器
    在某个元素后面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /*后代选择器*/
        body ul{
            background: #7da8be;
        }
        body li{
            background: #b2da89;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p1</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <ul>
        <li>
            <p>p7</p>
        </li>
        <li>
            <p>p8</p>
        </li>

    </ul>
</ul>
</body>
</html>

在这里插入图片描述

  • 子选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /*子选择器*/
        body>p{
            background: #84b2d3;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p1</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <ul>
        <li>
            <p>p7</p>
        </li>
        <li>
            <p>p8</p>
        </li>

    </ul>
</ul>
</body>
</html>

在这里插入图片描述

  • 相邻兄弟选择器
    只选择相邻且同级的在下面的一个
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /*兄弟选择器*/
        .bro + p{
            background: #e7d5d5;
        }
    </style>
</head>
<body>
<p>p1</p>
<p class = "bro">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <ul>
        <li>
            <p>p7</p>
        </li>
        <li>
            <p>p8</p>
        </li>

    </ul>
</ul>
</body>
</html>

在这里插入图片描述

  • 通用选择器
    选择相邻且同级的在下面的所有
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /*通用选择器*/
        .bro~p{
            background: #e7d5d5;
        }

    </style>
</head>
<body>
<p class = "bro">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <ul>
        <li>
            <p>p7</p>
        </li>
        <li>
            <p>p8</p>
        </li>

    </ul>
</ul>
</body>
</html>

在这里插入图片描述

2.3 结构伪类选择器

  • first-child 和 last-child
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
      /*ul的第一个子元素*/
      ul li:first-child{
        background: #e7d5d5;
      }
      /*ul的最后一个子元素*/
      ul li:last-child{
        background: #84b2d3;
      }
    </style>
</head>
<body>
<p class = "bro">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>p4</li>
  <li>p5</li>
  <li>p6</li>
  <ul>
    <li>p7</li>
    <li>p8</li>
    <li>p9</li>
  </ul>
</ul>
</body>
</html>

在这里插入图片描述

  • nth-child() 和 nth-of-type()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
      /*选中当前p元素的父级元素，1--选中父级元素的第一个子元素*/
      p:nth-child(1){
          background: #e7d5d5;
      }
      /*选中父元素里第二个类型为p的元素*/
      p:nth-of-type(2){
          background: cornflowerblue;
      }

    </style>
</head>
<body>
<p class = "bro">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>p4</li>
  <li>p5</li>
  <li>p6</li>
  <ul>
    <li>p7</li>
    <li>p8</li>
    <li>p9</li>
  </ul>
</ul>
</body>
</html>

在这里插入图片描述

  • hover
    触碰到元素背景变红色
 p:hover{
          background: red;
      }

2.4 属性选择器

id+class 结合
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo a{
            float: left;  /*向左漂移*/
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px; /*圆角弧度*/
            background: blue;
            color: #c9c4c4;
            text-align: center; /*文字居中*/
            text-decoration: none;/*去下划线*/
            margin-right: 10px; /*外边距向右*/
            font: bold 20px/50px Arial; /*20--字体大小 50--行高*/
        }

        /*选中所有存在id属性的元素*/
        a[id]{
            background: yellow;
        }
        a[id = three]{
            background: white;
        }
        /*属性名，属性名=属性值（正则）
         *= 包含
         ^= 以什么开头
         $= 以什么结尾
       */
        a[class *= link]{
            background: green;
        }
        
    </style>
</head>
<body>
<p class="demo">
  <a href="http://www.baidu.com" class="link first" id ="one">1</a>
  <a href="http://www.fgdf.com" class="first" >2</a>
  <a href="www.dfgdfdu.com" class="2first" id ="three">3</a>
  <a href="" class="link4" >4</a>
  <a href="baidu.com" class="link5" >5</a>
  <a href="http:.com" class="link6" >6</a>
  <a href="http://www" class="li" >7</a>

</p>
</body>
</html>

3、美化网页

span 标签：重点突出的字，使用span套起来

3.1 字体样式

<style>
        body{
            font-family: 微软雅黑;
            font-weight: bold; /* 字体粗细 */
        }
        h1{
            font-size: 30px;
        }
    </style>

3.2 文本样式

  • 颜色 color
  • 文本对齐方式 text-align
  • 首行缩进 text-indent
  • 行高 line-height
  • 下划线
<style>
    h1{
      color: rgba(0,255,255,0.9); /* rgba 第四个属性A为透明度 */
      text-align: center; /*文本居中*/
    }
    p{
      text-indent: 2em; /*首行缩进*/
      line-height: 25px;
    }
    .p1{
      text-decoration: underline;/*下划线*/
    }
    .p2{
      text-decoration: line-through;/*中划线*/
    }
    .p3{
      text-decoration: overline;/*上划线*/
    }
  </style>
  • 水平对齐参照物
img,span{
      vertical-align: middle;
    }

在这里插入图片描述

3.3 文本阴影和超链接伪类

 <style>
        /*鼠标悬浮状态*/
        a:hover{
            color: orange;
            font-size: 25px;
        }
        /*鼠标按住未释放的颜色*/
        a:active{
            color: green;
        }
        /*阴影颜色 水平 垂直偏移 阴影半径*/
        a{
            text-shadow: #84b2d3 10px -10px 2px;
        }
    </style>

在这里插入图片描述

3.4 列表样式

div相当于一个空标签 用来装东西
list-style—--none 去点
—————circle 空心圆
—————decimal 数字

#nav{
    /*div相当于一个空标签 用来装东西*/
    width:400px;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
}
/*list-style
none 去点
circle 空心圆
decimal 数字
*/
ul li {
    height: 30px;
    list-style: none; /*去掉圆点*/
}
a{
    text-decoration: none;
}

3.5 背景图像应用及渐变

  • 背景图片
 <style>
        /*solid 代表实线*/
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            /*默认全部平铺*/
            background-image: url("images/lan.jpg");
        }
        .div1{
            /*只铺水平*/
            background-repeat: repeat-x;
        }
        .div2{
            /*不平铺*/
            background-repeat: no-repeat;
        }
    </style>
  • 图片漂移
/*颜色 图片 图片位置 平铺方式*/
    background: red url("images/d.gif") 270px 10px no-repeat ;

在这里插入图片描述

  • 渐变
 background-image: linear-gradient(115deg,#FFFFFF 0%,#84b2d3 50%, #9fa3d2 100%);

在这里插入图片描述

3.6 盒子模型

在这里插入图片描述

  • margin：外边距 和 border：边框
    外边距作用: 居中元素
    border: 粗细 样式 颜色
    solid---实线
    dashed---虚线
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        body{
            margin: 0;  /* 默认有外边距，置0*/
        }
        /*border: 粗细 样式 颜色   solid---实线 dashed---虚线*/
        #box{
            width:300px;
            border:1px solid red;
        }
        form{
            background: orange;
        }
        /*选中所有div标签下的第一个类型为input的属性*/
        div:nth-of-type(1)input{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id = "box">
        <h2>会员登录</h2>
        <form action="#">
            <div>
                <span>账号：</span>
                <input type="text">
            </div>
            <div>
                <span>密码：</span>
                <input type="text">
            </div>
            <div>
                <span>邮箱：</span>
                <input type="text">
            </div>
        </form>
    </div>
</body>
</html>
  • padding：内边距
    padding: 上 右 下 左 顺时针
    <style>
   /*padding: 上 右 下 左 顺时针*/
        div:nth-of-type(1){
            border: 1px solid black;
            padding: 10px 10px 10px 0px;
        }
    </style>

3.7 圆角边框

border-radius:左上 右上 右下 左下 顺时针
只有两个值的话----左上=右下 右上=左下
只有一个值的话----四个角都改变
圆圈: 圆角=宽度/高度

  <style>
        /*  左上 右上 右下 左下 顺时针
            只有两个值的话 左上=右下  右上=左下
            圆圈: 圆角=宽度/高度
        */
        div{
            width: 100px;
            height: 100px;
            border: 10px solid royalblue;
            border-radius: 100px 50px 20px 10px;
        }
         img{
            border: 1px solid royalblue;
            border-radius: 294px;
        }
    </style>

3.8 阴影

box-shadow: +右-左 +下-上 模糊半径 颜色

<style>
        div{
            /*  +右-左  +下-上  模糊半径 颜色*/
            width: 100px;
            height: 100px;
            border: 10px solid royalblue;
            border-radius: 100px 50px 20px 10px;
            box-shadow: 20px 10px 10px yellow ;
        }
        img{
            box-shadow: 20px 10px 100px yellow ;
        }
    </style>

3.9 浮动

3.9.1 标准文档流

行内元素可以被包含在块级元素中，反之则不可以

块级元素：独占一行
h1~h6 p div 列表……
行内元素：不独占一行
span a img strong……

3.9.2 display

 <style>
        /*  display: block; 块元素
            display: inline; 行内元素
            display: inline-block; 即是行内元素也是块元素（保持块元素的特性但可以写在一行）
            display: none; 不显示
        */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid orange;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid orange;
            display: inline-block;
        }

    </style>

3.9.3 float

拿出来 浮上去

clear:both; 两侧都不允许有浮动元素
clear:left; 左侧都不允许有浮动元素
clear:right; 右侧都不允许有浮动元素
否则另起一行

div{
    margin: 10px;
    padding: 5px;
}
#yang{
    border: 1px #000 solid;
}
.img1{
   border: 2px #1121de dashed;
    display: inline-block;
    float:left;
}
.img2{
    border: 2px #1121de dashed;
    display: inline-block;
    float:left;
}
.img3{
    border: 2px #1121de dashed;
    display: inline-block;
    float:left;
    clear:both; /*不贴着上一个浮*/
}

3.9.4 display 和 float 对比

  • display
    方向不可控制
  • float
    浮动起来会脱离标准文档流，所以要解决父级边框塌陷问题

3.10 父级边框塌陷问题

浮动元素超出边框

解决方法：

1、增加父级元素高度
2、在同级的元素最后增加一个空的div标签，清除浮动

 <div class="clear"></div>

.clear{
    clear: both;
}

3、overflow
下拉场景避免使用

1、overflow:hidden超出部分隐藏，一般情况下，在页面中，一般溢出后会显示省略号，比如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。
2、overflow:hidden 清除浮动：一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。
3、overflow:hidden 解决外边距塌陷：父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷。

overflow: scroll; //滑动条显示
overflow: hidden;

4、父类添加一个伪类：after
相当于自动添加一个2中的 div 标签
yang是浮动元素的父类

#yang:after{
    content: "";
    display: block;
    clear: both;
}

3.10 定位

3.10.1 相对定位

相对定位: 相对于自己原来的位置偏移，仍然在 标准文档流中，原来的位置会被保留
position: relative;

 <style>
        /*  相对定位: 相对于自己原来的位置偏移
            position: relative; top/left/right/bottom
        */
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px cornflowerblue solid;
        }
        #first{
            border: 2px #7da8be dashed;
            position: relative;
            top:-20px;
            left:20px
        }
        #second{
            border: 2px #be9fd2 dashed;
            position: relative;
            bottom:20px;
        }
        #third{
            border: 2px #b2da89 dashed;
        }
    </style>
  • 方块练习
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方块练习</title>
    <style>
        #father{
            width: 300px;
            height: 300px;
            border: 2px solid red;
            padding: 10px;
        }
        a{
            width: 100px;
            height: 100px;
            background-color: #ee6bc5;
            text-decoration: none;
            text-align: center;
            line-height: 100px;
            display: block;
        }
        .a2,.a4{
            position: relative;
            top:-100px;
            left:200px;
        }
        .a5{
            position: relative;
            top:-300px;
            left:100px;
        }
        a:hover{
            background-color: #1a5bd3;
        }
    </style>
</head>
<body>
<div id = "father">
    <div ><a href="#" class="a1">链接1</a></div>
    <div ><a href="#" class="a2">链接2</a></div>
    <div ><a href="#" class="a3">链接3</a></div>
    <div ><a href="#" class="a4">链接4</a></div>
    <div ><a href="#" class="a5">链接5</a></div>

</div>
</body>
</html>

在这里插入图片描述

3.10.2 绝对定位

相对于XXX定位，不在标准文档流中，原来的位置不会被保留
1、没有父级元素条件的前提下，相对于浏览器定位
2、假设父级元素存在定位，通常相对于父级元素偏移
3、在父级元素范围内定位，不能为负值

 <style>
        /*  绝对定位: 相对于XXX的位置偏移
            position: absolute;
        */
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px cornflowerblue solid;
        }
        #first{
            border: 2px #7da8be dashed;
            position: absolute;
            top: 20px;
            left:20px
        }
        #second{
            border: 2px #be9fd2 dashed;

        }
        #third{
            border: 2px #b2da89 dashed;
        }
    </style>

3.10.3 固定定位fixed

位置固定不动

 <style>
        body{
            height: 1000px; /*产生滑动条*/
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: orange;
            position: fixed;
            text-align: center;
            line-height: 50px;
        }
    </style>

3.10.4 z-index

图层----向上一层/向下一层
z-index: 最低层是0，最高层是999
opacity: 0.5;---透明度0.5

#content{
    border: 2px #1a5bd3 solid;
    overflow: hidden;
    line-height: 25px;
    font-size: 12px;
}
ul,li{
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipt,.tipb{
    position: absolute;
    top: 80px;
    right: 240px;
    width: 200px;
    height: 25px;
    color: #0a0a0a;
}
/*  z-index: 最低层是0，最高层是999
    opacity: 0.5;---透明度0.5
    filter: alpha(opacity=50); filter过滤器--和上面效果相同（早期版本支持）
*/
.tipt{
    z-index: 999;
}
.tipb{
    background: #1a5bd3;
    /*opacity: 0.5;*/
    filter: alpha(opacity=50);
}

附录：伪元素和伪类

在这里插入图片描述

在这里插入图片描述
posted on   知七。  阅读(44)  评论(0)  编辑  收藏  举报
相关博文：
· HTML学习笔记
· GUI编程学习笔记
· CSS - 学习笔记
· CSS层叠样式表
· CSS笔记
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

Powered by: 博客园 Copyright © 2025 知七。
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛