阅读量:3
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.phpcss图标合并——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 )
CSS 框架
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属性。
