最大的问题是下划线到文本的距离——它完全在下行字母以下。可以通过设置元素为 inline-block 以及减少 line-height 解决这个问题，但是文本换行就不行了。...下面的方法不必使用 linear-gradient ，你可以用自己的图片做出酷炫的效果。...text-decoration-style text-decoration-style 提供了和 border-style 一样的线条样式，但是也增加了 wavy 波浪线样式。...眼熟吗？ 还缺少什么？ text-decoration-* 属性比其它添加下划线的 CSS 属性要方便。但是如果我们回顾一下之前的需求，这个属性不能改变下划线的粗细及位置。...如果你有足够的耐心，所有的下划线在以后看上去会很棒，而你不需要修改任何东西。 对于正文部分，可以使用 background-image 方法。
css文本属性表： 属性 说明 color 文本颜色 direction 文本方向或者书写方向 letter-spacing 字符的间距 line-height 文本的行高 text-align 文本的水平对齐方式属性...可以用一条样式定义各种列表属性 list-style-type 值 说明 disc 实心圆 circle 空心圆 square 方块 decimal 数字 low-roman 小写罗马数字 upper-roman...定义元素的下外边距 margin-left 定义元素的左外边距 margin 用一个声明定义所有外边距属性 css边框的属性： 属性 说明 border-top-style 上边框的样式属性 border-right-style...用一条声明定义所有右边框的属性 border-bottom 用一条声明定义所有下边框的属性 border-left 用一条声明定义所有左边框的属性 border 用一条声明定义所有边框的属性 border-width...属性 说明 outline-style 定义轮廓的样式属性 outline-color 定义轮廓的颜色属性 outline-width 定义轮廓的宽度属性 outline 同一个声明中定义所有的轮廓属性
今天天气这不错 Hello hello 6.字体的简写属性 font 可以设置字体相关的所有属性 语法： font: 字体大小/行高 字体族 (字体大小...> div{ border: 1px red solid; /* font 可以设置字体相关的所有属性.../img/1.png");设置背景图片 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满 如果背景的图片大于元素，将会一个部分背景无法完全显示...，所有背景相关的样式都可以通过该样式来设置 并且该样式没有顺序要求，也没有哪个属性是必须写的 注意：...，所有背景相关的样式都可以通过该样式来设置 并且该样式没有顺序要求，也没有哪个属性是必须写的 注意：
可以参考地址：MDN delay，开始作用之前需要等待的时间。可以用transition-delay属性设置。...，一般用于js动态修改属性、css的hover改变元素的属性等场景。...> .box { transition-delay: 0.5s; transition-property: width; /*all 代表对所有的可以过渡的属性应用过渡效果...也可以用scaleX、scaleY、scaleZ替代 旋转 rotate3d(x1,y1,z1,a) 可以对元素进行x、y、z三个方向的旋转，a正值为顺时针，负值为逆时针；值可选：30deg或者0.5turn...6.4 perspective透视 作为单独的CSS属性，指定了观察者与z=0平面的距离。这个是作用于盒子内的所有子元素。跟transform中的perspective()函数的意义是一样的。
指定标签的style 一个标签需要多个类名，用空格隔开即可 id 选择器 配合js 诞生，在一个页面中式唯一的，不可替代的 #id {属性名: 属性值} 所有标签上都有id 属性 每一个标签只能有一个...后面的覆盖前面的属性 样式以最后覆盖的为准 font 相关属性的连写 font: style weight size family 只能省略前两个，省略相当于默认值 一个属性冒号后面书写多个值的写法...可以设置为line-height: 文字父元素高度 注意点 如果同时设置了行高和font连写，注意覆盖问题 font: style weight size/line-height family 颜色常见取值...垂直方向） 可以用数字如100px控制、也可以用方向right、left、center控制 复合属性 color、image、repeat、position 不分先后顺序，但是推荐上述顺序 如果需要单独的设置与连写...img 不重要的图片用background-image 元素显示模式 块级元素 独占一行 宽度默认是父元素的宽度 高度默认由内容展开 可以设置宽高 div、h系列、p、ul、li、dl、dt、dd、
.demo { position: relative; line-height: 20px; height: 40px;...基于行数截断 纯css实现也非常简单，核心的css代码如下： -webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性） display...除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。...因为，页面中不是所有的（或picture）元素引入的图片和background-image引入的背景图片都会加载的。那么就引发出新问题了，什么时候会真正的加载，加载规则又是什么？...根据前面介绍的浏览器加载和渲染机制，我们可以归纳为： 、和设置background-image的元素遇到display:none时，图片会加载但不会渲染 、和设置background-image的元素祖先元素设置
它的属性值的含义如下：属性值含义fixed背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容local背景相对于元素的内容固定。...text-align: center; font-size: 20vh;}2、transform:translate3D涉及到的CSS属性如下：transform 可以对元素进行变换...z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。元素涉及 3d 变换时，perspective 可以让我们眼睛看到 3d 立体效果，有空间感。...transform-style 设置元素的子元素是位于 3D 空间中还是平面中。...通过设置transform-style和 perspective，使该容器的子元素处在3D空间中，然后设置 transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。
2） ul{list-style:none...在行内格式化上下午中，行框的高度应包含该行内所有行内框的高度，所以我们可以通过一个额外的行内块元素（可以设置高度，而且属于行框范围内）来将行框的高度撑满，然后对需要居中对齐的图片设置vertical-align...属性来将元素居中对其。
sass 命令配置选项 运行命令行帮助文档，可以获得所有的配置选项 sass -h 配置选项 --style sass style.scss:style.css --style compact -...在选择器嵌套中，可以使用 & 表示父元素选择器 #top_nav { line-height: 30px; text-transform: capitalize; background-color...@at-root sass3.3.0 中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。...2、继承遵从 css 层叠的规则。当两个不同的 css 规则应用到同一个 html 元素上时，并且这两个不同的 css 规则对同一属性的修饰存在不同的值， css 层叠规则会决定应用哪个样式。...占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。
[title]{color:red;} 针对全部的带有title属性的元素 [title=W3School] {color:red;} 针对带有title属性且值为W3School的元素 [title...|=hello] { color:red; } 针对带有title属性且值带有hello以并且由连字符分隔的元素，如Hello world css...样式 背景 background-color：属性为元素设置背景色。...p {background-color: gray;} background-image：属性为元素设置背景图片 body { background-image:url('/i/eg_bg_03...通过 * { margin: 0; padding: 0; } 清除所有元素的默认边框的样式。 元素框的占用计算是需要把框的宽度计算起来的。 ?
，那么就可以简写为一个，例如#F00 等同于#FF0000 二 文本属性 1、text-align：规定元素中的文本的水平对齐方式。...inherit 继承父元素的text-decoration属性的值。 3、line-height：行高 ? <!...inherit 设置从父元素继承background属性值 以上背景属性的值均可以设置为inherit，代表从父元素继承background属性 背景缩写 body { background:...css显示模式:块级、行内、行内块级 在HTML中HTML将所有标签分为两类，分别是容器级和文本级 在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素 #1、HTML中容器级与文本级...还有标签p 行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内 span、buis、strong、em、ins、del #3、块级元素与行内元素的区别
它的属性值的含义如下： 属性值 含义 fixed 背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容 local 背景相对于元素的内容固定。...如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。元素涉及 3d 变换时，perspective可以让我们眼睛看到 3d 立体效果，有空间感。...transform-style 设置元素的子元素是位于 3D 空间中还是平面中。...通过设置transform-style和 perspective，使该容器的子元素处在3D空间中，然后设置transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。
，这可能会影响媒体查询等事情 windowHeight Window.innerHeight 渲染“元素”时使用的窗口高度，这可能会影响媒体查询等事情 如果你希望排除某些元素被渲染，你可以添加data-html2canvas-ignore...属性到这些元素，html2canvas将从渲染中排除它们。...下面是所有支持的CSS属性和值的列表。...font-variant font-weight height left letter-spacing line-break list-style list-style-image list-style-position...，截图后阴影错乱，所有元素都会有阴影* 起初以为是v1.0.0-alpha.12 最新版本的问题,后来改成5也不行，把文字阴影去掉就可以了。
轴位移的例子： 这里我们需要注意的是为了能看出位移的效果，我们需要在父容器上加如下属性： .d3-wrap { transform-style: preserve-3d; perspective...: 500; /* 设置元素被查看位置的视图 */ -webkit-perspective: 500; } 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身...理论上说以上三种常见变换已经够用了，值得关注的是我们要想让元素呈现出3D效果，以下不可忽视的API也很重要： 2.CSS3 3D 应用场景 css 3D主要应用在网站的交互和模型效果上，比如： 3D轮播图...3D产品介绍 室内3D仿真 h5 3D活动页面，比较典型的就是某年淘宝的年终总结H5 3D数据可视化成图 3D模型图 其实如果css 3D用的熟悉了，一些基本的3D模型完全可以用css画出来。...给父元素添加动画或者拖拽效果，这样就可以做成更有交互性的3D方块了，比如置骰子游戏，vr场景，3D相册等等，具体实现我会抽空依次总结出来，记得关注哦～
标题图 Day3:html和css 多类名选择器 样式的显示效果是跟html元素中的类名先后顺序无关,而是跟css样式的书写上下顺序有关. <!...#id名{属性:属性值;} class好比人的名字,可以多次使用,而id选择器是代表唯一的,如人的身份证号码.一个id只能使用一次....(不允许使用多次,浏览器兼容性好,虽然可以用多次,但是是不允许这样做的) id只使用一次,class可以使用多次. 字体连写 文本样式 color属性: 预定义的颜色 十六进制 RGB代码 红加绿黄,红绿蓝. line-height...行内元素的特点.png ? 块级元素的特点.png 行内块元素(inline-block) ?
所以我们可以为智能手机或平板电脑等，编写自己的查询条件。 我们所有 CSS 追踪器背后的魔法就是它们的属性，比如我们可以将一段 URL 作为属性值。...有一个比较好的例子是 background-image 的属性，它允许我们为一个元素设置一张背景图片。... #one:hover { background-image: url("http://localhost:8080/one-hovered/");... #one:active { background-image: url("http://localhost:8080/one-clicked/");...你可能会认为由于它嵌入在 CSS 代码中，统计的可能并不准确，但事实并非如此。由于请求的体积十分小，并且立即作用在服务器上。我试了几次并测量了时间，最终测量的结果非常精确。 很惊人，不是吗？
auto; /* 规定如何在 3D 空间中呈现被嵌套的元素 */ transform-style: preserve-3d; transform: rotateX(0) rotateY...这里我们需要注意的是为了能看出位移的效果，我们需要在父容器上加如下属性： .d3-wrap { transform-style: preserve-3d; perspective: 500...; /* 设置元素被查看位置的视图 */ -webkit-perspective: 500; } 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。...理论上说以上三种常见变换已经够用了，值得关注的是我们要想让元素呈现出3D效果，以下不可忽视的API也很重要： ?...3D模型图 其实如果css 3D用的熟悉了，一些基本的3D模型完全可以用css画出来。
轴位移的例子： 这里我们需要注意的是为了能看出位移的效果，我们需要在父容器上加如下属性： .d3-wrap { transform-style: preserve-3d; perspective...: 500; /* 设置元素被查看位置的视图 */ -webkit-perspective: 500; } 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身...理论上说以上三种常见变换已经够用了，值得关注的是我们要想让元素呈现出3D效果，以下不可忽视的API也很重要： 2.CSS3 3D 应用场景 css 3D主要应用在网站的交互和模型效果上，比如： 3D轮播图...3D产品介绍 室内3D仿真 h5 3D活动页面，比较典型的就是某年淘宝的年终总结H5 3D数据可视化成图 3D模型图 其实如果css 3D用的熟悉了，一些基本的3D模型完全可以用css画出来。...给父元素添加动画或者拖拽效果，这样就可以做成更有交互性的3D方块了，比如「置骰子游戏」，「vr场景」，「3D相册」等等
success的标签 三 ID选择器： #content ：id属性为content的标签 id属性不仅给css用，也给js用 标签元素使用多类样式声明：属性中的各个选择器用空格分开 四 结构选择器...： h1 p：指定标签位置范围，h1标签里的后代p标签，空格代表每一层所有后代（所有选择器没有分隔符） h1>p：h1的子元素p h1 p~a：h1后代里p标签的兄弟a标签 h1 p+a：h1...七 结构伪类选择器 首尾元素伪类：:first-child, last-child，所有元素里的第一个/最后一个，是每一层级的；:first-of-type，:last-of-type，某类型元素的第一个...important 四 元素继承权重 子元素继承父级元素的样式规则 继承没有权重，是NULL 不是所有规则都可以继承，比如边框 五 通配符与继承博弈 通配符权重是0 0 > NULL 六...font-size 三 颜色与行高 color： line-height：一般是1.5em 四 组合定义与倾斜风格 font-style：italic 组合：用font：来写，有顺序要求
# CSS3 新特性 结构性伪类选择器（重点） 内容追加伪元素（重点） CSS3新增样式属性 background-image的渐变 线性渐变(重点) CSS3的opacity 属性(重点) CSS3...（重点） ::before:向当前的元素前面追加内容(创建一个伪元素，其将成为匹配选中的元素的第一个子元素) ::after:向当前的元素内容后面追加内容(创建一个伪元素，作为已选中元素的最后一个子元素...属性(重点) opacity 属性是设置元素的不透明级别 语法 opacity: value|inherit; 值 描述 value 规定不透明度。...inherit 应该从父元素继承 opacity 属性的值。 <!...(滤镜) 属性 filter 属性定义了元素(通常是)的可视效果 语法 filter: grayscale(100%) | blur(px); 值 描述 grayscale 将图像转换为灰度图像。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
