CSS
关注
分享
扫一扫
文章平均质量分 82
CSS
丨Anna丨
这个作者很懒，什么都没留下…
展开
-
预处理器Less
预处理器Less1什么是预处理器less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。less的中文官网：http://lesscss.cn/bootstrap中less教程：http://www.bootcss.com/p/lesscss/2Less编译工具koala 官网:www.koala-app.com...原创 2021-05-17 19:56:11 · 398 阅读 · 0 评论 -
20 动画
20 动画人类具有视觉暂留的特性，人的眼睛在看到一幅画或一个物体后，在0.34秒内不会消失。动画原理： 通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，利用视觉暂留的原理，在一幅画还没有消失前，播放下一幅画。就会给人造成一种流畅的视觉变化效果。css3动画 使元素从一种样式逐渐变化为另一种样式的效果。1基本API系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的...原创 2020-10-23 17:57:39 · 200 阅读 · 0 评论 -
19 3D变换
19 3D变换1浏览器中的坐标系 在浏览器中，X轴是从左到右，Y轴是从上到下，Z轴是从里到外2基本API2.1景深作用让3D场景有近大远小的效果。是一个不可继承属性，但它可以作用于后代元素（不是作用于本身的）语法transform: perspective(depth);depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。1000px被认为是个正常值 注意：若使用perspective()函数，那么他必须被放...原创 2020-10-22 23:46:59 · 220 阅读 · 0 评论 -
18 过渡
过渡 众所周知，css效率极高，其变化的过程往往都是在一瞬间完成，速度极快。 CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。1 过渡属性transition1.1 transition transi...原创 2020-09-21 22:44:49 · 215 阅读 · 0 评论 -
17 CSS渐变及简单特效
CSS渐变 渐变是图片，不是颜色。CSS中渐变分为，线性渐变和径向渐变两种。1线性渐变 为了创建一个线性渐变，需要设置一个起始点和一个方向（指定为一个角度）。还要定义终止色。终止色就是你想让浏览器去平滑的过渡过去，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。语法：/*默认从上到下发生渐变*/background-image:linear-gradient(red,blue); /*改变渐变方向：（top bottom left righ...原创 2020-09-03 22:40:07 · 416 阅读 · 0 评论 -
16 CSS圆角
CSS圆角传统的圆角生成方案，必须使用多张图片作为背景图案CSS3圆角的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点： * 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。 * 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。 * 增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况border-radius用来设置边框...原创 2020-09-02 21:38:27 · 401 阅读 · 0 评论 -
15 CSS调整大小resize及box-sizing
CSS调整大小resizeresize CSS 属性允许你控制一个元素的可调整大小性。（一定要配合overflow：auto使用）默认值：none 不可继承值： none 元素不能被用户缩放。 both 允许用户在水平和垂直方向上调整元素的大小。 horizontal允许用户在水平方向上调整元素的大小。 vertical 允许用户在垂直方向上调整元素的大小。示例： <head> &l...原创 2020-09-02 21:28:26 · 849 阅读 · 0 评论 -
14 盒模型阴影box-shadow
盒模型阴影box-shadowbox-shadow 以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。 如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影时和多个 text shadows 规则相同(第一个阴影在最上面)。默认值: none 不可继承值： inset 默认阴影在边框外。 使用inset后，阴影在边框内。 <offset-x> <offset-y>...原创 2020-09-01 22:54:00 · 256 阅读 · 0 评论 -
13 溢出显示省略号
溢出显示省略号实现方式使用text-overflow :确定如何向用户发出未显示的溢出内容信号。 它可以被剪切， 显示一个省略号（'...'）实现条件 （1）设置属性white-space: nowrap; （2）设置属性overflow: hidden; （3）设置属性text-overflow: ellipsis; （4）文字包裹元素必须是块元素，不能被子元素撑开示例: <he...原创 2020-09-01 22:42:59 · 140 阅读 · 0 评论 -
12 文字阴影text-shadow
文字阴影text-shadow text-shadow用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。（多个阴影时，第一个阴影在最上边）默认值：none 不可继承值 <color> 可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）选择的颜色。 <offset-x> <offset-y> 必选。这些长度值指定阴影相对文字的偏移量。 <off...原创 2020-09-01 22:17:23 · 752 阅读 · 0 评论 -
11 自定义字体及字体图标
1 自定义字体@font-face:允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，可以消除对用户电脑字体的依赖 @font-face { font-family:"damu"; src: url(damu/GOUDYSTO.TTF);} font-family 所指定的字体名字将会被用于font或font-family属性 src 字体资源注意:不能在一个 CSS 选择器中...原创 2020-08-31 19:04:53 · 352 阅读 · 0 评论 -
10 压缩CSS代码
压缩CSS代码压缩CSS代码的方式很多，可以使用在线工具，也可以使用jsCssZip.exe进行压缩原创 2020-08-31 17:51:23 · 196 阅读 · 0 评论 -
9 CSS hack
CSS hack1 条件hack 条件hack只针对IE浏览器有效，其他浏览器都会将它识别为注释。IE10及其以上已经不支持这种方式 <!--[if IE 6]> <p>IE 6 显示内容</p> <![endif]--> <!--[if lt IE 9]> <p>IE 9以下浏览器显示内容</p> <![endif]--> <!--[if lte IE 9]>...原创 2020-08-31 17:27:52 · 504 阅读 · 0 评论 -
7 设置元素的背景及雪碧（精灵）图使用
1 设置元素的背景1.1背景颜色background-color background-color属性用来为元素设置背景颜色。需要指定一个颜色值，当指定了一个颜色以后，整个元素的可见区域都会使用这个颜色作为背景色。如果不设置背景颜色，元素默认背景颜色为透明，实际上会显示父元素的背景颜色。background-color: red;1.2背景图片background-image background-image可以为元素指定背景图片和background-color类...原创 2020-08-31 12:02:52 · 457 阅读 · 0 评论 -
6 opacity设置元素的透明背景
opacity设置元素的透明背景 opacity可以用来设置元素的透明的背景，他需要一个0-1之间的值。0表示完全透明，1表示完全不透明语法：opacity: 0.5;注意:opacity在IE8及其以下属性不支持。可以使用如下属性进行代替语法：filter: alpha(opacity=透明度)透明度需要0-100的值，0表示完全透明，100完全不透明...原创 2020-08-31 10:49:36 · 319 阅读 · 0 评论 -
5 定位
定位1什么是定位 将指定元素摆放在页面中的任意位置。 position属性可以控制Web浏览器如何以及在何处显示特定的元素。可以使用position属性把一个元素放置到网页中的任何位置。 可选值： – static 默认值，元素没有开启定位 – relative 相对对位 （1）当开启相对定位，不设置偏移量时，元素不会发生任何变化。 （2）相对对位是相对...原创 2020-08-31 10:41:56 · 276 阅读 · 0 评论 -
5 高度塌陷问题及解决办法
高度塌陷问题及解决办法1什么是高度塌陷 在文档流中，父元素的默认高度是被子元素撑开的，也就是父元素未在指定高度时，父元素的高度表现为子元素的占用的高度。此时，当子元素浮动，脱离文档流后将会导致父元素高度塌陷。示例：子元素未脱离文档流的情况 <head> <meta charset="UTF-8"> <title>高度塌陷问题</title> <style type="text/css"> .box1{ ...原创 2020-08-29 18:01:16 · 246 阅读 · 0 评论 -
4 盒子模型
盒子模型 在网页中“一切皆是盒子”。CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。1 盒子模型的组成 一个盒子我们会分成几个部分： – 内容区(content) （1） 内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。 （2） 如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。...原创 2020-08-29 12:03:55 · 317 阅读 · 0 评论 -
3 文本标签及样式
文本标签及样式1文本标签1.1<em>和<strong> em标签用于表示一段内容中的着重点。strong标签用于表示一个内容的重要性。这两个标签可以单独使用，也可以一起使用。通常em显示为斜体，而strong显示为粗体示例： <em>和<strong> <hr/> <p> <strong>警告：任何情况下不要接近僵尸。</strong&g...原创 2020-08-28 15:49:10 · 470 阅读 · 0 评论 -
2 CSS样式的继承及选择器的优先级
CSS样式的继承1什么是元素的继承 后代元素可以继承祖先元素的一些基本样式示例： <head> <meta charset="UTF-8"> <title>CSS样式的继承</title> <style type="text/css"> p{ color: #BBAAFF; font-size: 24px; } </style> </head> &..原创 2020-08-12 14:23:30 · 325 阅读 · 0 评论 -
1 CSS选择器
CSS选择器1什么是选择器 选择器（selector），会告诉浏览器：网页上的那些元素需要设置什么样式。作用： 按照 CSS 规则定位 HTML 页面的一个或多个元素。浏览器在解析 HTML 页面时，会根据 CSS 规则中的选择器定位 HTML 页面的元素，并为对应的元素设定样式。通过 CSS 选择器可以实现对 HTML 元素的一对一、一对多和多对一的定位。2 选择器分类2.1常用选择器2.1.1元素选择器（标签选择器）元素选择器（标签选择器），可以...原创 2020-08-03 22:53:47 · 600 阅读 · 0 评论