当前位置: 首页 > article >正文

CSS基础语法(全)

29-CSS

30-CSS引入方式

  • 内部样式

    CSS 代码写在style标签里面

  • 外部样式

    <link rel="stylesheet" href="./my.css">
  • 行内样式

    <div style="color:green; font-size:30px;">
      这是div 标签
    </div>

31-选择器-标签和类

  • 标签选择器

    标签选择器都是以标签名作为选择器,选中同名标签设置相同的格式

    <style>
      p{
        color:red;
      }
    </style>
    <body>
      
      <p>
        这是叔叔叔叔
      </p>
      <p>
        hhhhhhha哈哈哈哈
      </p>
    </body>
  • 类选择器

    定义类选择器- > .类名

    使用类选择器 -> 标签添加 class="类名"

    <style>
      .red{
        color:red;
      }
    </style>
    <body>
      <p class="red">
        111111
      </p>
      <p>
        222222
      </p>
      <div class="red">
        div标签
      </div>
    </body>

一个类选择器可以给多个标签使用

32-ID 和通配符

id 选择器:

  • 定义id 选择器 : #id名

  • 定义 id 选择器 : 标签添加 id="id名"

    <style>
      #red{
        color:red;
      }
    </style>
    <body>
      <div id="red">
        div标签
      </div>
    </body>

通配符选择器

作用:查找页面所有标签,设置相同的格式

通配符选择器:* 不需要调用,浏览器自动查找页面所有的标签,设置相同的格式

*{
color:red;
}

33-画盒子

<style>
  .red{
    width:100px;
    height:100px;
    background-color:brown;
  }
</style>
<body>
  <div class="red">
    div1
  </div>
</body>

34-文字控制属性

image-20250123100813457

写一个字体倾斜的代码

<style>
  em{
    font-style:normal;
  }
  div{
    font-style:italic;
  }
</style>
​
<body>
  
  <em>em标签</em>
  <div>
    div 标签
  </div>
</body>

行高

<style>
  p{
    font-size: 20px;
    line-height: 2;
    //如果行高为数字,那么表示的是倍数
  }
</style>

只能是当行文字才能实现

36-字体族

font-family :楷体

37-font属性

image-20250123115436591

38-文本缩进

image-20250123115650859

<style>
  p{
    text-indent : 2em;
    font-size: 30px;
  }
</style>

文本对齐

image-20250123120003775

<style>
  h1{
    text-align :center;
  }
</style>

居中的是文字内容,不是标签

水平对齐方式-图片

<style>
  div{
    text-align-center;
  }
</style>
​
<body>
  
  <div>
    <img src="" slt="">
  </div>
</body>

修饰线

image-20250123120514552

44-复合选择器

由两个或者多个基础选择器组成,通过不同的方式组合而成。

后代选择器:选中某元素的后代元素

选择器写法:父选择器,子选择器,赋值选择器之间用空格隔开

<style>
  div span{
    color:red;
  }
</style>
<body>
  <span>span标签</span>
  <div>
    <span>这是div 的儿子</span>
    <p>
      <span>这是div的孙子</span>
    </p>
  </div>
</body>
<style>
  div > span{
    color:red;
  }
</style>
<body>
  <span>span标签</span>
  <div>
    <span>这是div 的儿子</span>
    <p>
      <span>这是div的孙子</span>
    </p>
  </div>
</body>

这样就只会输出儿子的标签了。这个也就是子代选择器

并集选择器

并集选择器:选中多组标签设置相同的格式

选择器写法:选择器1,选择器2.。。

image-20250123123646342

交集选择器

选中同时满足多个条件的元素

<style>
  div.box{
    color:red;
  }
</style>
<body>
  <span>span标签</span>
  <div class="box">
  这里这段文字输出
  </div>
</body>

45-伪类选择器

伪类表示元素状态,选中元素的某个状态设置样式

鼠标悬停状态:选择器 hover(css属性)

<style>
  a:hover{
    color:red;
  }
  .box:hover{
    color:green;
  }
</style>
​
<body>
  <a href="#">a 标签,超链接</a>
  <div class="box">div 标签</div>
</body>

image-20250123125014167

选中范围越大,优先级越低

通配符选择器 《 标签选择器 〈 类选择器 《 id选择器 < 行内样式

! important 权重最高

从左向右一次比较选的个数,同一级个数多的优先级高,如果个数相同,则向后比较

!important 权重 最高

47-emment 写法

48-背景

image-20250123153306489

默认是平铺的,会显示多张照片

不平铺,只会显示一张且原像素大小

image-20250123153735115

背景图缩放

  • cover 等比例缩放背景图片以完全覆盖背景区

div{
background-repeat : no-repeat;
background-image:url(./images/1.png);
​
background-size:contain;
如果宽高根盒子尺寸相等停止播放,可能导致盒子有空白
​
background-size:cover;
​
background-size:100%;
}

背景图固定

background-attachment: fixed;

50-显示模式

  • 独占一行,宽高属性生效,默认宽度是父级的100%,是块级的显示特点 一般是用div

  • 一行共存多个,宽高属性不生效,宽高由内容撑开,是行内模式的特点. 一般是用span

  • 一行共存多个,宽高属性生效,宽高默认由内容撑开是行内块的显示模式特点 一般是用img

转换显示模式

<style>
  div{
    width:100px;
    height:100px;
    display:inline-block;
    display: inline;
  }
</style>
​
​
<body>
  <div class="div1">
    div1111
    
  </div>
  <div class="div2">
    div2222
  </div>
  
  <span class="span1">span11111</span>
  <span class="span2">span1</span>
  
  <img src="./images./1.png" alt="">
  <img src="./images./1.png" alt="">
</body>

image-20250123161834955

记住这几个特性

.banner{
​
• height: 500px;
​
• background-color: url(./images/bk.png)
​
• background-repeat: no-repeat;
​
• background-position: left bottom;
​
}

banner轮播图

image-20250123172149160

image-20250123172451423

真的很不戳

54-结构伪类选择器

image-20250124084524018

伪元素选择器

image-20250124084752515

快捷输出“w100 + h100 + bgc

image-20250124085231121

57-盒子模型

image-20250124085526225

<style>
  div{
    width: 200px;
    height: 200px;
    background-color:pink;
    
    padding:20px;
    border:10x solid
    margin:50px;
  }
</style>

盒子模型-边框线

Solid : 实现

Dashed: 虚线

Dotted: 点线

padding : 10px 20px 40px 80px

上右下左

margin: 0 auto; 也是可以的,会自动调整

盒子模型-元素溢出

image-20250124104355414

div {
  width: 200px;
  height: 200px;
  background-color: pink;
​
  /* 测试不同 overflow 属性 */
  overflow: auto; /* 当前设置 */
}
<style>
.father {
    width: 300px;
    height: 300px;
    background-color: pink;
    border-top: 1px solid #000;
    overflow: hidden; /* 添加 overflow 解决问题 */
}
​
.son {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-top: 50px;
}
</style>
<div class="father">
    <div class="son">son</div>
</div>

image-20250124104944047

或者是这样的写法

66-圆角属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角矩形</title>
    <style>
        div {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: orange;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

左上角,右上角,右下角,左下角

border-radios:50%;

71-浮动

浮动后的盒子有什么特点:* 顶对齐 * 具备行内块功能 * 脱标

image-20250124113232978

很久之前,我们做过小米官网的实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 布局</title>
    <style>
        /* 父容器 */
        .product {
            display: flex; /* 使用 Flex 布局 */
            justify-content: space-between; /* 子元素之间均匀分布 */
            align-items: flex-start; /* 子元素顶部对齐 */
            flex-wrap: wrap; /* 自动换行 */
            width: 100%; /* 父容器宽度 */
            background-color: brown;
            height: auto; /* 高度根据内容自适应 */
        }
​
        /* 左侧内容 */
        .left {
            width: 200px; /* 固定宽度 */
            height: auto; /* 高度根据内容自适应 */
            background-color: lightblue;
        }
​
        /* 右侧内容 */
        .right {
            display: flex; /* 使用 Flex 布局 */
            flex-wrap: wrap; /* 自动换行 */
            gap: 14px; /* 子元素间距 */
            width: calc(100% - 220px); /* 右侧内容宽度,减去左侧宽度及间距 */
        }
​
        /* 每个子元素 */
        .right li {
            list-style: none; /* 去掉列表样式 */
            width: calc(25% - 14px); /* 每行 4 个,减去间距 */
            height: 300px;
            background-color: orange;
        }
​
        /* 右侧最后一行的边距调整 */
        .right li:nth-child(4n) {
            margin-right: 0; /* 每行最后一个子元素清除右边距 */
        }
    </style>
</head>
<body>
    <div class="product">
        <div class="left">左侧内容</div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</html>

如果您希望为 .product 容器中的 .left 元素设置样式,应该使用 .product .left 或 .product > .left,而不是 .product.left。

清除浮动

场景:浮动元素会脱标,父级没有高度,子级无法撑开父级高度

image-20250124123013432

flex

image-20250124142428549

display:flex;

第一,先是要有容器,我们称之为弹性容器

第二就是要有弹性盒子,一般是沿着主轴方向排列

image-20250124142850927

image-20250124142919153

image-20250124143202592

image-20250124143510916

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 布局居中</title>
    <style>
        .box {
            display: flex;
            flex-direction: column; /* 主轴为垂直方向 */
            justify-content: center; /* 垂直方向居中 */
            align-items: center; /* 水平方向居中 */
            width: 150px;
            height: 120px;
            background-color: pink;
        }
​
        img {
            width: 32px;
            height: 32px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="https://via.placeholder.com/32" alt="图标">
        <p>文字内容</p>
    </div>
</body>
</html>

image-20250124144344268

明确每一个地方是怎么变化的,这里自己练习一下

对应79集

堆叠顺序

z-index: 1;

定位

子级绝对定位,父级相对定位

resolute absolute

transform : translate(-50%,50%);

Position :fixed; 表示固定

CSS精灵

vertical-align

image-20250124150138550

过渡属性

transition: all is;
img:hover{
width:200px;
height:100px;
}

透明度

Opacity:0.5;

CSS大体上就是这样。

原文地址:https://blog.csdn.net/2401_87202881/article/details/145341674
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/524389.html

相关文章:

  • pytorch实现主成分分析 (PCA):用于数据降维和特征提取
  • 解决ImportError: cannot import name ‘notf‘
  • 虚幻基础10:isValid
  • go到底是什么意思:对go的猜测或断言
  • Clojure语言的系统运维
  • Deepseek的RL算法GRPO解读
  • PostgreSQL 数据备份与恢复:掌握 pg_dump 和 pg_restore 的最佳实践
  • 10.6.3 XML文件读写
  • Brave132 编译指南 Windows 篇:配置 Git(四)
  • 图论——最小生成树的扩展应用
  • 流浪动物救助微信小程序springboot+论文源码调试讲解
  • AI学习指南Ollama篇-Ollama性能优化与监控
  • JDK15主要特性
  • 算法-加油站问题
  • yolov11配置环境,实现OBB带方向目标检测
  • Deepseek爆火背后的多Token技术预测
  • PySide6(PyQT),QSqlQueryModel与QSqlQuery的关系
  • 使用scikit-learn实现线性回归对自定义数据集进行拟合
  • 计算机网络的基础设备
  • Selenium自动化测试框架 入门与使用