菜单 搜索
首页 前端知识 CSS基础语法（全）

CSS基础语法（全）

2025-03-11 15:03:48 前端知识 前端哥 591 69 我要收藏

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://www.qianduange.cn//article/23216.html
标签
上一篇：HTML基本结构及基本标签
评论
评论加载失败，点击我刷新...
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

Spring Boot面试问答

2025-03-13 15:03:01

vue左侧边框点击后让字体高亮

2025-03-13 15:03:01

刚刚！微调 DeepSeek 满血版正式开源。。。

2025-03-13 15:03:58

vue调整表格样式之深度修改

2025-03-13 15:03:57

vuejs 组件基础 路由

2025-03-13 15:03:57

STM32之I2C硬件外设

2025-03-13 15:03:51

【Spring Data】

2025-03-13 15:03:51

大学至今的反思与总结

2025-03-13 15:03:50

解锁DeepSpeek-R1大模型微调：从训练到部署，打造定制化AI会话系统

2025-03-13 15:03:50

2024华为OD机试真题-日志排序(C /Java/Python)-E卷-100分

2025-03-13 15:03:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000
3

在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000
4

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
5

CSS常用属性（文本属性）

2024-11-04 09:11:111000
6

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
7

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
8

vue使用datav echarts

2024-09-06 00:09:381000
9

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
10

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！