CSS 【实用教程】(2024最新版)

CSS 简介

CSS 是层叠样式表( Cascading Style Sheets ) 的简写,用于精确控制 HTML 页面的样式,以便更好地展示图文信息或产生炫酷/友好的交互体验。

没有必要让所有浏览器都显示得一模一样的,好的浏览器有更好的显示,糟糕的浏览器就只有普通的显示,这才是对用户更负责任的做法。

CSS 文件的后缀名为 .css

注释

/* 注释的内容 */

添加样式的三种方式

1. style 内嵌样式

<span style="color: red">红色文字</span>

在这里插入图片描述

2. 通过 CSS 样式选择器添加

https://blog.csdn.net/weixin_41192489/article/details/140226382

3. 继承

容器内的元素,会获得容器上添加的样式

  <div style="color: red"><p>我是容器内的元素,并没有直接添加样式,但也会变红!</p></div>
  • 文字样式的属性,都具有继承性。这些属性包括:color、 text-开头的、line-开头的、font-开头的。
  • 盒子、定位、布局的属性,都不能继承。

最终的样式由谁决定?

因元素上的样式来源很多,有浏览器的默认样式、style 内嵌样式、各种 CSS 选择器添加的样式、继承自父元素的样式,所以最终的样式,会由众多样式中,优先级最高的样式决定。

CSS 样式优先级

https://blog.csdn.net/weixin_41192489/article/details/139720467

样式必备的基础知识

CSS 长度单位

https://blog.csdn.net/weixin_41192489/article/details/140236423

CSS 函数

https://blog.csdn.net/weixin_41192489/article/details/140318834

盒模型

https://blog.csdn.net/weixin_41192489/article/details/102411612

  • 高和行高都可以撑开盒子,但背景图不能撑开盒子。

内联元素的注意事项

  • 内联元素只在首尾处可以显现出内外边距,应尽量避免使用,所以不要给内联元素设置内外边距。

  • 内联元素换行后,边框的显示会层叠错乱,所以,也不要给内联元素设置边框!

  • 需要对内联元素添加边框/内外边距时,请将其转换为行内盒子

    display:inline-block
    

可以添加哪些样式?

通用样式

几乎每个 html 元素都可以添加的样式。

宽、高

  • width:默认是内容的宽度(不是盒子的宽度)
  • height: 默认是内容的高度(不是盒子的高度)

通过下方样式,可以将元素的默认标准盒模型改为IE 盒模型

box-sizing:border-box;

此时

  • width:盒子的宽度(左边框+左内边距+内容的宽度+右内边距+右边框)
  • height: 盒子的高度(上边框+上内边距+内容的高度+下内边距+下边框)

内边距 padding

  • 不支持负值
  • 百分比值无论是水平方向还是垂直方向,都相对宽度计算
padding: 10px;

内边距:上下左右都是10px

padding:10px 5px;

上内边距和下内边距是 10px

右内边距和左内边距是 5px

padding:10px 5px 15px;

上内边距是 10px

右内边距和左内边距是 5px

下内边距是 15px

padding:10px 5px 15px 20px;

上内边距是 10px

右内边距是 5px

下内边距是 15px

左内边距是 20px

边框 border

相关样式还有

  • 边框-圆角 border-radius
  • 边框-填充 border-image
  • 轮廓 outline

详见 https://blog.csdn.net/weixin_41192489/article/details/140325106

外边距 margin

https://blog.csdn.net/weixin_41192489/article/details/115140348

溢出 overflow

  • visible【默认值】多余的内容不剪切也不添加滚动条,会全部显示出来。
  • hidden:隐藏滚动条,不显示超过对象尺寸的内容,但仍可滚动。
  • auto:如果内容不超出,则不显示滚动条;如果内容超出,则显示滚动条。
  • scroll:Windows 平台下,无论内容是否超出,总是显示滚动条。Mac 平台下,和 auto 属性相同。

overflow 值为 auto 和 scroll 的容器为滚动容器(带滚动条的容器),其留白不推荐使用padding,因为存在兼容性问题,所以只能使用子元素的margin-bottom来实现滚动容器的底部留白。

透明度 opacity

属性值从 0.0 (完全透明)到 1.0(完全不透明),如果超出0~1的范围限制,最终的计算值是边界值

    opacity: -1;    /* 解析为 0, 完全透明 */opacity: 2;     /* 解析为 1, 完全不透明 */

背景 background

https://blog.csdn.net/weixin_41192489/article/details/140301618

阴影 box-shadow

阴影不会改变盒子的大小,不会影响其兄弟元素的布局,还可以设置多重边框阴影,实现更好的效果,增强立体感。

box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色(默认值为color的颜色值)  内/外阴影
  • 水平偏移:正值向右 负值向左。
  • 垂直偏移:正值向下 负值向上。
  • 模糊程度:不能为负值
  • 内/外阴影 —— inset为内阴影,不写为外阴影
box-shadow: 15px 21px 48px -2px #666;

在这里插入图片描述
常用阴影

box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);

在这里插入图片描述

更多用法见
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

  • 【实战】覆盖输入框自动填充的背景色

    input:-webkit-autofill {-webkit-box-shadow: inset 0 0 0 1000px #fff;background-color: transparent;
    }
    
  • 【实战】批量修改按钮按压色

    button:active {box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .1);
    }
    
  • 【实战】新手引导的蒙层效果

    .guide {box-shadow: 0 0 0 9999px rgba(0, 0, 0, .75);border-radius: 50%;
    }
    

剪裁 clip-path

https://blog.csdn.net/weixin_41192489/article/details/121341551

  • 【实战】clip-path 实现类似 PPT 的转场动画
    https://www.zhangxinxu.com/wordpress/2019/05/css-transfer-animation

变换 transform

https://blog.csdn.net/weixin_41192489/article/details/140314866

缩放 zoom

Firefox浏览器不支持,可以有以下属性值

  • 百分比值。zoom:50%,表示缩小到原来的一半。
  • 数值。zoom:0.5,表示缩小到原来的一半。
  • normal关键字。zoom:normal等同于zoom:1,是默认值。
  • reset关键字。zoom:reset,表示用户按Ctrl和−或Ctrl和+进行文档缩放的时候,元素不跟着缩小与放大。不过,这个关键字兼容性很糟糕,仅被Safari浏览器支持。

zoom 与 scale()函数的对比

  • zoom属性缩放的中心坐标是相对于元素的左上角,且不能修改。transform变换中的scale()函数缩放默认的中心坐标是元素的中心点。
  • zoom属性缩放会实时改变元素占据的尺寸空间,并会触发重绘和重计算,因此zoom属性缩放的性能比scale()函数缩放的性能差。
  • 元素应用zoom属性不会创建层叠上下文,不会影响fixed元素的定位和overflow属性对绝对定位的溢出隐藏,也不会改变绝对定位元素的包含块。

遮罩 mask

https://blog.csdn.net/weixin_41192489/article/details/121158821

渐变 gradient

https://blog.csdn.net/weixin_41192489/article/details/140316024

不同类型元素的特有样式

文本

https://blog.csdn.net/weixin_41192489/article/details/140264311

超链接

伪类样式——必须按照下方固定的顺序写:

  • :link “链接”:超链接点击之前——作用于所有写了href属性的超链接(不包括锚点)——可以省略的,简写在a标签里面
  • :visited “访问过的”:链接被访问过之后——可以省略的,简写在a标签里面
  • :hover “悬停”:鼠标放到标签上的时候
  • :active “激活”: 鼠标点击标签,但是不松手时。
    /*让超链接点击之前是红色*/a:link{color:red;}/*让超链接点击之后是绿色*/a:visited{color:orange;}/*鼠标悬停,放到标签上的时候*/a:hover{color:green;}/*鼠标点击链接,但是不松手的时候*/a:active{color:black;}

图片

图片滤镜 filter

https://www.runoob.com/cssref/css3-pr-filter.html

图标

  • 借助 font-weight 实现响应式图标
    字号较大时图标字体细节更丰富,字号较小时图标字体更简单
    https://demo.cssworld.cn/8/5-1.php

  • css图标合并——ClipPath Sprites技术
    https://blog.csdn.net/weixin_41192489/article/details/121242735

表格

悬停行高亮
/*鼠标悬停时,让当前行显示#868686这种灰色*/
table tr:hover{background: #868686;
}
颜色交替行

数据各行之间的颜色交替变换,可以 减弱了用户阅读的疲劳感。

table tr:nth-child(odd){background:#fff
}
table tr:nth-child(even){background:blue
}

滚动

鼠标 cursor

描述
url自定义光标的 URL。
default默认光标(通常是一个箭头)
auto默认。浏览器设置的光标。
crosshair光标呈现为十字线。
pointer【常用】光标呈现为指示链接的指针(一只手)
move此光标指示某对象可被移动。
e-resize此光标指示矩形框的边缘可被向右(东)移动。
ne-resize此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize此光标指示矩形框的边缘可被向上(北)移动。
se-resize此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize此光标指示矩形框的边缘可被向下移动(南)。
w-resize此光标指示矩形框的边缘可被向左移动(西)。
text此光标指示文本。
wait此光标指示程序正忙(通常是一只表或沙漏)。
help此光标指示可用的帮助(通常是一个问号或一个气球)。

光标

光标颜色 caret-color
设置输入框插入光标的颜色( IE和Edge浏览器暂不支持 )

input {caret-color: red;
}

显隐相关的样式

无以下能使元素隐藏的样式时,元素都是显示的(有的看不见只是因为层叠被覆盖了):

  • display: none 【常用】隐藏元素,不占位置,会加载资源,DOM可访问 ( html 标签上添加 hidden,会使标签的 display 变为none )
  • visibility: hidden 隐藏元素,占位置,会加载资源,DOM可访问
    • 父元素设置visibility:hidden,子元素也会看不见(继承性)
    • 子元素设置了visibility:visible,则子元素又会显示出来。
  • opacity: 0 元素不可见,占位置,可以点可以选
  • clip: rect(0 0 0 0) 元素不可见,不能点击,不占据空间,但键盘可访问
  • z-index 负值实现隐藏,元素不可见,不能点击,但占据空间,且键盘可访问
    .lower {position: relative;z-index: -1;
    }
    

位置相关的样式

元素在页面中的位置,由很多样式共同决定,包括定位方式 position,布局方式 display,浮动 float,外边距 margin 等。

当同时存在 position,display,float 时,将按下方链接描述的逻辑来确定元素的最终显示效果。

https://blog.csdn.net/weixin_41192489/article/details/119009647

定位 position

https://blog.csdn.net/weixin_41192489/article/details/140242430

布局 display

https://blog.csdn.net/weixin_41192489/article/details/140250775

外边距 margin

https://blog.csdn.net/weixin_41192489/article/details/115140348

对齐

https://blog.csdn.net/weixin_41192489/article/details/140255028

层叠 z-index

https://blog.csdn.net/weixin_41192489/article/details/140297366

交互相关的样式

平滑滚动 scroll-behavior: smooth

https://blog.csdn.net/weixin_41192489/article/details/121365831

拉伸 resize

https://blog.csdn.net/weixin_41192489/article/details/121396794

设备适配相关的样式

媒体查询 @media

https://blog.csdn.net/weixin_41192489/article/details/126028971

【实战】移动端适配方案(三种)

https://blog.csdn.net/weixin_41192489/article/details/120999355

自定义 CSS 样式(CSS变量 / 自定义属性)

https://blog.csdn.net/weixin_41192489/article/details/140317369

提升编写 CSS 的效率

CSS 预处理器

CSS 预处理器是一种专门的编程语言,用来为CSS增加一些编程特性(CSS本身不是编程语言)。 不需要考虑浏览器兼容问题,因为CSS预处理器最终编译和输出的仍是标准的CSS样式。 可以在CSS预处理器中:使用变量、简单逻辑判断、函数等基本编程技巧。

主流的CSS预处理器有Sass(Scss)、Less 和 Stylus 。
( SASS 从 3.0 版本开始,改名 SCSS )

  • Scss 实用教程
    https://blog.csdn.net/weixin_41192489/article/details/134313564

CSS 框架

  • UnoCSS 实用教程
    https://blog.csdn.net/weixin_41192489/article/details/140034188

CSS 编码规范

  • 重置浏览器的默认样式
  • 尽量避免使用style
  • 只有当属性值为零时,才可以省略单位
  • 数值通常用偶数,如 6px 而不是 5px(特别是行高、字号,这样可以保证它们的差能够被2整除,让字在行里面居中)
  • class 类名要语义化,一眼就能识别出该类名作用于哪个元素/该类名实现的样式效果。
/* 给左侧的盒子定义的样式 */
.leftBox{
}
/* 给内部为菜单的盒子定义的样式 */
.menuBox{
}
/* 将子元素排列为一行的样式 */
.row{display:flex
}
/* 设置颜色为红色 */
.red{color:red
}

推荐的文本样式

  • 文本容器使用 font-size: medium;(改变浏览器默认大小时,文本能随之放大缩小)
  • 文本容器内的正文,使用相对单位——百分比或em
  • 文本外边距使用em为单位

高性能动画

CSS高性能动画三要素指的是绝对定位、opacity属性和transform属性。因此,同样的动画效果,优先使用transform属性实现。例如,元素移动动画应使用transform属性,而不是margin属性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/44233.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

E. Beautiful Array(cf954div3)

题意&#xff1a;给定一个数组&#xff0c;可以先对数组进行任意排序&#xff0c;每次操作可以选择一个ai&#xff0c;将它变成aik&#xff0c; 想让这个数组变成一个美丽数组&#xff08;回文数组&#xff09;&#xff0c;求最少操作次数 分析&#xff1a; 先找出相同的数字…

C++Windows环境搭建(CLion)

文章目录 CLion下载安装CLion下载CLion安装新建项目新建一个文件基础设置字体设置clion中单工程多main函数设置 参考 CLion下载安装 CLion下载 打开网址&#xff1a;https://www.jetbrains.com/clion/download/ 点击Download进行下载。 CLion安装 双击下载好的安装包&…

华为浏览器,Chrome的平替,插件无缝连接

文章目录 背景插件书签 背景 不知道各位小伙伴有没有这样的痛点&#xff0c;办公电脑、家里的电脑还有手机、平板等&#xff0c;收藏了一个网址或者在手机上浏览了某个网页&#xff0c;保存起来&#xff0c;可是一换平台或者换个电脑&#xff0c;在想要浏览之前收藏的东西&…

伺服【禾川X6】

驱动器&#xff1a; A&#xff1a;脉冲 B&#xff1a;EtherCAT // SV-X6 FB 040 AA 一套360 N&#xff1a;CANopen R&#xff1a;PROFINET 电机&#xff1a; SV-X6 MA 040A-B2 KA

中小商家怎么做短视频矩阵?2人美甲店轻松100w+视频曝光量

最近有一个小魔推的合作伙伴问&#xff1a;我能开拓哪些商家&#xff1f; 市场部同学回答道&#xff1a;小魔推几乎没有行业限制&#xff0c;什么行业的商家都可以开拓&#xff0c;像餐饮、酒店、景区、游乐园、教育培训、驾校、4S店、母婴店、商超等等&#xff0c;还有很多传…

将windows下载的包传到linux服务器上

以一个例子说明。 要将下面的docker压缩包上传到对应的172.39.18.2ip的服务器上。 使用如下命令 scp F:\下载内容\docker-20.10.7.tgz root172.39.18.2:/root/test/ 注意是在windows的cmd命令行中。

在 ARM64 系统上使用 AddressSanitizer (ASan) 进行C/C++内存错误检测

文章目录 概要ASan 的配置与运行时优化CMake 配置运行时环境变量 ARM64 ASan库交叉编译动态链接 VS 静态链接示例&#xff1a;内存泄漏检测ASan 检测结果 概要 AddressSanitizer&#xff08;ASan&#xff09;是内存错误检测的强大工具&#xff0c;本文将介绍如何在 ARM64 系统…

新版FMEA培训未能达到预期效果怎么办?

在制造业的质量管理中&#xff0c;FMEA&#xff08;Failure Mode and Effects Analysis&#xff0c;失效模式与影响分析&#xff09;是一项至关重要的工具&#xff0c;它帮助企业识别和评估产品或过程中潜在的失效模式&#xff0c;以及这些失效模式可能导致的后果。然而&#x…

查看操作系统版本

查看操作系统版本 cat /etc/os-release 显示操作系统相关信息&#xff0c;包括发行版、版本号、ID等NAME"kos"VERSION"5.8"ID"kos"ID_LIKE"anolis rhel fedora centos"VERSION_ID"5.8"PLATFORM_ID"platform:an8"P…

FastAPI 学习之路(三十六)引入APIRouter

本次调整后的目录如下&#xff1a; 我们可以使用APIRouter来声明路径操作&#xff0c;我们先看下如何去使用。 我们根据选择划分为users和items来细分。 具体实现如下&#xff1a; ①先看items实现 from fastapi import APIRouter from fastapi import Depends from models.…

对称加密与非对称加密如何实现密钥交换

目录 一、对称加密中的密钥交换二、非对称加密中的密钥交换三、结合使用 对称加密与非对称加密在实现密钥交换时有着本质的不同方法。 一、对称加密中的密钥交换 由于对称加密使用相同的密钥进行加密和解密&#xff0c;因此密钥本身的安全传输是一个挑战。以下是一些常用的方…

面试题009-Java-MyBatis

面试题009-Java-MyBatis 目录 面试题009-Java-MyBatis题目自测题目答案1. 什么是MyBatis&#xff1f;它与Hibernate有什么区别&#xff1f;2. 说一下MyBatis的执行流程&#xff1f;3. MyBatis是否支持延迟加载&#xff1f;4. MyBatis中一级缓存和二级缓存的区别&#xff1f;5. …

Unity AssetsBundle 详解

文章目录 1.AssetBundle 概念2.AssetBundle 优势3.AssetBundle 特性4.AssetBundle 使用流程4.1 分组4.2 打包4.3 加载包4.4 加载资源4.5 卸载资源 5.AssetBundleManifest6.AssetBundle的内存占用7.AB包资源加密 1.AssetBundle 概念 AssetBundle又称AB包&#xff0c;是Unity提供…

【TORCH】查看dataloader里的数据,通过dataloader.dataset或enumerate

文章目录 dataloader.dataset示例代码使用自定义数据集使用 MNIST 数据集 说明 enumerate示例代码说明使用 MNIST 数据集的例子 dataloader.dataset 是的&#xff0c;您可以直接访问 train_loader 的数据集来查看数据&#xff0c;而不必通过 enumerate 遍历数据加载器。可以通…

如何用Vue3和Plotly.js创建交互式表格?

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 Plotly.js 动态生成 HTML 表格 应用场景介绍 在数据分析和可视化领域&#xff0c;经常需要以表格的形式展示数据。Plotly.js 是一款功能强大的 JavaScript 库&#xff0c;不仅可以创建交互式图表&#xff0c;…

基于Java的飞机大战游戏的设计与实现论文

点击下载源码 基于Java的飞机大战游戏的设计与实现 摘 要 现如今&#xff0c;随着智能手机的兴起与普及&#xff0c;加上4G&#xff08;the 4th Generation mobile communication &#xff0c;第四代移动通信技术&#xff09;网络的深入&#xff0c;越来越多的IT行业开始向手机…

【SVN-CornerStone客户端使用SVN-多人开发-解决冲突 Objective-C语言】

一、接下来,我们来说第三方的图形化界面啊, 1.Corner Stone:图形化界面,使用SVN, Corner Stone的界面,大概就是这样的, 1)左下角:是我们远程的一个仓库, 2)右上角:是我们本地的一些东西, 首先,在我的服务器上,再开一个仓库,叫做wechat, 我在这个里边,新建…

Stable Diffusion / huggingface 相关配置问题汇总

目录 1 OSError: Cant load tokenizer for openai/clip-vit-large-patch14.报错解决方法方法1——手动下载方法2——自动下载其他方法&#xff08;待研究&#xff09; 2 huggingface_hub.utils._errors.LocalEntryNotFoundError:报错解决方法 笔者在配置SD的时候遭遇了许多bug&…

NestJs实现各种请求与参数解析

NestJs中的各种请求与携带参数的解析 demo.controller.ts import { Body, Param, Controller, Delete, Get, Post, Patch } from nestjs/common; import { DemoService } from ./demo.service; import { adduser, updateuser } from "./types/index" Controller(de…

用Racket做一个拼图游戏——4 实现工具

4 实现工具 思路理清楚了&#xff0c;接下来就一个一个功能实现。在阐述实现功能的编程过程中&#xff0c;会延伸讲解编程思路、相关的Racket函数及相关知识点&#xff0c;力图达到在实践中的学习目的。 在编程实现过程中&#xff0c;首先实现图片操作功能&#xff0c;再通过…