HTML 查看在线实例 - 定义了HTML文档的标题 使用 标签定义HTML文档的标题 - 定义了所有链接的URL 使用 定义页面中所有链接默认的链接目标地址...尝试一下: 旧版HTML来设置背景方式 HTML 样式实例 - 字体, 字体颜色 ，字体大小 我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式...: 实例 现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用标签。...使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。...设置图像链接 本例演示如何将图像作为一个链接使用。 创建图像映射 本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
字体大小与标题行外边距 几乎所有浏览器中，font-size的默认大小都是16px，除非主动修改。...试想如下代码： p { font-size: 1.314em; } article { font-size: 1.314em; } p和article元素默认情况下字体大小是21px，但article...我们还可以rem，它也是一个缩放因子，它是相对于根元素的字体大小进行缩放的。 rem较新，但所有现代浏览器均已支持，只有 ie8 及更早的浏览器不支持。...好在line-height设置为没有单位的值时并不会出现这一现象，子元素继承的永远都会是这个数值。 2....uppercase可以将所有字母显示为大写，lowercase可以将所有字母变成小写，capitalize可以将每个单词的首字母大写，none显示源码中的默认大小写。
完成标题 现在标题已完成，所有文本都已就绪。如果你此刻在浏览器中查看页面，将看到一个带有一些文本的图像。当前标题仍然是没有样式的，接下来为它设置样式并应用 SVG 过滤器。...隐藏 SVG 现在转到 page.css 文件，我们的新 CSS 会添加到所有其它CSS代码的顶部。这里的 SVG 被设置为根本不显示在页面上。为 h2 标记设置相对应的字体的字体。...更改 h2 样式 ? 替换 h2 以引入一些动画 之前在步骤 4 中添加了 h2 样式。使用下面这段新代码替换旧代码，这段代码将为标题添加四秒的 CSS 动画。动画停止会停留在最后一个关键帧上。...完成导航 现在添加其余的导航元素。我们使用 Font Awesome 开源图标库，该库已被添加到 head 部分，以便使用该库的CDN链接。每个菜单圆形元素都有一个图标。...使菜单工作 当菜单打开时，菜单图标被设置为不可见。然后创建每个菜单项的悬停元素，以便当用户将鼠标悬停在上面时进行更改。当菜单项返回其原始位置时，菜单的每个子项都会有 0.4 秒的变换时间。
二、文本样式——字体 文本类样式的字体类是我们在页面制作中一定会用到的属性，每个页面都会有不同的字体要求，比如字体大小、形态、格式等等。...浏览器的默认字体大小都是16px。 em：如果父元素的font-size：20px，那么em=px/20；以em为单位设置字体大小在移动端开发中使用广泛。...举例：模块标题分别测试设置字体大小为12px或者.75em。...展示的结论：可以看出两者是没有什么变化，我们说过浏览器的默认字体大小为16px，我要设置12px，对应的比例可以算出是0.75em，和你直接设置12px是没有区别的。...6、字体类属性的使用总结 字体类属性可以设置页面中的字体大小、粗细、风格、格式，还包括了一个文本行高的设置，具体的使用见下面代码： .box { width: 600px; height
，或将元素的字体设置为系统字体。...示例演示:示例1.分别设置标题文本元素是竖向或者横向显示。...text-transform 属性 - 控制元素中的字母大小写 描述: 此属性指定如何将元素的文本大写，它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。...font-size 属性 - 设置字体大小 描述: 此属性用于设置字体大小, 更改字体大小还会更新字体大小相关的 单位，例如 em、ex 等。...*/ font-size: math; 假设浏览器的默认 font-size 为 16px，则单词“outer”将渲染为 25.6px，但单词“inner”将渲染为 40.96px。
前言 随着前端开发越来越关注效率：通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候，需要绕的路较长，而直接使用css速度会更快。...8、使用 “OWL选择器” 使用通用选择器（universal selector）* 和相邻的兄弟选择器（adjacent sibling selector）+ 可以提供一个强大的的CSS功能，给紧跟其他元素中的文档流中的所有元素设置统一的规则...rem进行全局大小调整；使用em进行局部大小调整 在设置根目录的基本字体大小后，例如html字体大小：15px；，可以将包含元素的字体大小设置为rem: article { font-size...: 1.25rem; } aside { font-size: .9rem; } 然后将文本元素的字体大小设置为em h2 { font-size: 2em...19、在表单元素上设置字体大小，以获得更好的移动体验 为了避免移动浏览器（iOS Safari等）在点击下拉列表时放大HTML表单元素，请在添加font-size样式： input[type
，在 style 中直接写上如下代码即可： p{ font-family:"隶书"; } 2.2 字体大小 设置字体使用 font-size...1em span 标签 的每个 连续内容间距为 1em 其中在 p 标签中设置了每个字之间的间距为 1em...，属性是 letter-spacing，并设置了span 中每个词之间的间距，使用属性为 word-spacing。...，其中 2em 为两个字体大小，则完成首行空格效果： 三、图片 3.1 图片的透明度、圆角、宽高设置 在使用图片时会经常设置图片的宽高、圆角、透明度属性，以下是一个示例： <...，显示如下： 3.1 阴影 设置图片的阴影使用属性 box-shadow，box-shadow有4个需要设置的值，分别是 x 位置/大小、y 位置/大小、阴影发散大小、颜色，例如：box-shadow
使用HTML页面在header的 Q5、什么是层叠？ 简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。...Q12、CSS盒模型 所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。 CSS 框模型实质上是一个包围每个 HTML 元素的框。...% 相对父元素 *提示: rem与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。...而更改绝对定位会触发回流。变换使浏览器为该元素创建一个GPU层，但是更改绝对定位属性将使用CPU。因此，translate（）效率更高，并且可以缩短绘制时间，从而使动画更流畅。...SCSS其语法完全兼容CSS3，并且继承了SCSS的强大功能。由于SCSS是CSS的扩展，因此所有在CSS中正常工作的代码也能在SCSS中正常工作。
添加百度搜索SEO 网站的index页面修改了原来的泛用title(dreamcenter)，改成了现在更有利于检索排名的标题。...页面大小监控 昨天完成了手机端的适配，不过忽略了电脑端的尺寸也是可以随便调节的，当这样慢慢调解时，有的html的标签没有动态的更新，因为没有识别出来切换了页面大小从而设置全局环境为pc或者手机环境...{{item.msg}} scss ：设置该标签自动换行(遇到\n时)并且超出显示区域时强制换行...调整了动漫页的tab(每个动漫展示的块级)显示逻辑，之前是设置的超出块级范围滚动，现在设置为隐藏，并且标题追加了一个a标签，目的是也有title属性，用作提醒完整的标题。...然后还注意到文字化时间最长长度会多出一个字符换行，所以这次字体大小减小了2px。
也许这只是一个快乐的巧合（也许），但@Jonathan Snook在SMACSS中为布局规则建议一个.l-前缀。这两个范例在布局方面有着相同的原则。...由于这些class在全局使用，所以我更喜欢把它们写在_layouts.scss部分。 块级布局 每个块（对象或组件，我们将在后面讨论）可能有自己的布局。...o-countdown中的元素的实际数量是无关紧要的，因为所有内部元素只能在.o-countdown里存在。 对象独立于上下文 当我说对象是上下文独立的时候，我的意思是他们不知道在哪里会被使用。...如果你有一个元素，但决定用.h3来写样式它会发生什么？ 接管你的代码库的另一个开发人员可能会遇到一个最初的不和他们去“为什么是.h3 和写在一起了？...这五个class通常是我每个项目所需的一切（到目前为止）。 这样一个惯例的好处就是能够一目了然地告诉元素的大小。 在下面的例子中，我确定这个链接的尺寸小于我的基本字体大小。 ?
这些字体可以使用@font-face规则随网页一起发给浏览器（一般字体图片都会放到一个单独的服务器上，更加的优化） 字体属性 font-family 字体族 font-family用于设定元素中的文本使用什么字体...通常给一个文档页面设置一个主字体（因为font-family是可以继承的），然后针对那些需要使用不用样式的字体在单独应用font-family。.../*font-family的值不区分大小写 但是如果引入的是在线字体库请不要随意修改有可能导致无法使用提供的定制字体*/body font-size 字体大小 浏览器样式表默认为每个HTML元素都设定了...px是绝对单位，em是一种相对单位与百分比是一样的，浏览器默认样式表在设定所有元素的字体大小时使用的都是相对单位em，h1被设定为2em，h2是1.5em，p是1em。默认情况下1em = 16px。...example 2 example 3 tip：使用绝对单位的好处是，在祖先元素的字体大小变化时，不会出现意外的连锁反应。
1、块级元素和行内元素分别有哪些？它们的特性区别有哪些？ 1、块级元素(block element)，占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一行。...让块级元素居中设置需要margin属性： margin：0 auto；//上下margin值随意设置，左右margin值设置为auto 让行内元素水平居中需要设置text-align属性，text-align...这个单位与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。...其实不用太纠结是默认的 font-size:100%，还是设置为 font-size:62.5%，如果你引入 了 CSS 预处理工具那么自然可以使用默认值，如果由于其他原因使用 font-size:62.5%...这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。
仅通过border属性完成边框的所有属性设置 <!...= 1 font-size; rem: 和em差不多，可以看成是root-em，是根据根元素的字体大小来定义的，即html设置的字体大小来定义，默认html的字体大小是16px； 8、继承相关 css...font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。...这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS（SCSS 需要使用分号和花括号而不是换行和缩进）。...浏览器对以:开头的伪元素也继续⽀持，但建议规范书写为::开头 定义不同 伪类即假的类，可以添加类来达到效果 伪元素即假元素，需要通过添加元素才能达到效果 总结: 伪类和伪元素都是⽤来表示⽂档树以外的”元素
编写 CSS 就是将同一套视觉样式反复应用于各种不同的环境中，直到你死去 尽管 CSS 技术取得了最新进展，但许多人仍停留在这种 BEM 思维模式中，试图完美地封装一切，以免在进行更改时出现意想不到的结果...等框架中的实用工具类并无太大区别，只不过在任何其他情况下，你都不会使用 page__header 为元素添加 20 像素的 padding 。...如果我们想更改我们的品牌颜色用于背景的值，我们可以更改一个标记，将其应用于不同的组件，而无需查找 与其让开发人员访问所有令牌，不如将它们抽象到我们的类中，开发人员可以根据不同的上下文使用相应的类。...这样，我们就不需要提供一大堆额外的工具类来支持每个弹性布局属性的所有可能值。 如果开发者遇到需要覆盖默认设置的情况，他们可以通过在样式属性（style attribute）中声明来实现这一点。...因此，我们的 --width 属性实际上是设置了最大宽度，而宽度和高度都设置为自动，由图片的宽高比来决定。为了补偿这一点，我在文本容器中内联添加了一个 align-self: center。
"; } 类为b2的P元素虽然也设置了使用微软雅黑，但渲染结果为宋体，这是为什么呢？...因此类族名称为serif,sans-serif,monospace均使用中易宋体字体库（当然用户可以自定义其他字体），也就是说若网页中没有设置font-family样式属性或没有适合的中文字体库时则使用宋体字体库来解析渲染所有英文...建议尽量让Mac OS X使用冬青黑体； 2. 正文使用中易宋体或微软黑体实际效果则是见仁见智，但大字号的文字（如标题）则建议固定为微软雅黑。 b)....相对于根元素html的字体大小（rem） CSS3新增的相对单位，IE9开始支持。设置rem的元素字号是相对于`根元素`的字号而定，而不是父元素的字号而定。...一般以em作为单位，也就是根据字体大小来设置行距。W3C建议浏览器的默认行距为1.0em~1.2em。若行距过小则会造成阅读时容易“串行”。经验值行距为1.5em最为适合。
Em 单位的遗传效果 使用 em 单位存在继承的时候，情况会变得比较棘手，因为每个元素将自动继承其父元素的字体大小。...浏览器设置 HTML 元素字体大小的影响 默认情况下浏览器通常有字体大小 16px，但这可以被用户更改为从 9px 到 72px的任何值 1555350286477-ed3553f9-60e5-4e1f-a0fb-b00daff54a43...所以 html 元素的字体大小虽然是直接确定 rem 值，但字体大小可能首先来自浏览器设置。 因此浏览器的字体大小设置可以影响每个使用 rem 单元以及每个通过 em 单位继承的值。...这将允许您通过更改您的 html 元素的字体大小，调整你的设计，但仍会保留用户的浏览器设置的效果。 为什么使用 em 单位 em 单位取决于一个font-size值而非 html 元素的字体大小。...我建议，当您使用 em 单位，他们使用的元素的字体大小应设置对rem单位，以保留的可扩展性，但避免继承混淆。
来设置超文本链接;超链接可以是一个字，一个词，或者一组词，也可以是一幅图像;以点击这些内容来跳转到新的文档或者当前文档中的某个部分;在标签 中使用了href属性来描述链接的地址。... 元素包含了所有的头部标签元素；元素中可插入脚本（scripts）, 样式文件（CSS），及各种meta信息；可添加在头部区域的元素标签有：, , , , , ,3.2 title元素定义文档标题；文档中是必须有的；应用：①浏览器工具栏的标题；②收藏夹中的标题；③... 图片3.3 base元素描述基本的链接地址/链接目标;该标签作为HTML文档中所有的链接标签的默认链接；举例： <!
CSS也是一种标记语言(和html一样，不是个编程语言)；Html主要是页面结构，显示元素内容，CSS是美化页面，布局网页；CSS规则主要有选择器和样式声明组成；样式声明以键值对的形式出现；如下：p{font-size...属性；（不要使用纯数字，中文，标签名作为类名）使用的时候，class前面加符号.语法如下：.类名{ k:v}一个标签页可以使用多个类名；在标签的class属性中，写多个类名，以空格分开；id选择器是通过标签的...Id属性值作为选择器，id以#开始；其他与类选择器类似；相比类选择器，id可以表示一个标签，id只能使用一次；通配符选择器使用*定义，它表示选取页面所有的元素；图片CSS字体属性字体属性用于定义字体系列...，大小，粗细和文字样式等；字体系列：font-family字体大小： font-size; 大小以px(像素)为单位；谷歌浏览器默认的大小为16px; 一般情况下给body添加此属性；标题标签特殊设置字体粗细...(必需) } 空格隔开，顺序不可以更改CSS文本属性css文本属性主要定义文本的外观属性，如文本的颜色，文本对齐，缩进，行间距等；文本颜色： color; 三种标识方式，预定义颜色值，RGB和16进制对齐文本
成比例是指字体中的所有字符根据其不同大小有不同的宽度。例如，小写i和小写m的宽度就不同。上下短线是每个字符笔划末端的装饰，比如大写A两条腿底部的短线。...如文档所有元素使用“微软雅黑”字体： body{font-family:微软雅黑;} b) 指定字体会产生一个问题，如果用户没有安装这种字体，就只能使用默认字体来显示。...字体大小 font-size属性设置元素的字体大小，实际上它设置的是字体中字符框的高度，实际的字符字形可能比这些框高或矮（通常矮） 值 描述 xx-small、x-small、smallmedium、large...、x-large、xx-large 把字体的尺寸设置为从xx-small到xx-large默认值：medium smaller 设置为比父元素更小的尺寸 larger 为比父元素更大的尺寸 length...设置为一个固定的值 % 设置为基于父元素的一个百分比值 4.字体风格 font-style属性定义字体的风格。
语义化好处： 了解每个标签和属性的含义 思考什么标签最适合描述这个内容 不使用可视化工具生成 1.4 src 和 href 的区别 src 指向的内容会嵌入到文档当前标签所在的位置，而 href 是用于建立这个这个标签与外部资源之间的关系...font-family 使用建议: 字体列表最后加上通用字体族 英文字体放在中文字体前面 2.3.2 字体大小 font-size 关键字：small、medium、large 长度：px、em 百分比...：相对于父元素字体大小 2.3.3 字体粗细 font-weight font-weight: 100-900 normal(400), bold(700) 2.3.4 行高 line-height 用于设置多行元素的空间量...：https://www.jianshu.com/p/7dadcc458410 2.6 块级元素与行级元素的区别 块级 行级 不和其他盒子并列摆放 可以和其他行级盒子一起放到一行 适应所有的盒模型属性...2.9 Grid 布局 display: grid 使元素生成一个块级的 Grid 容器 使用 grid-template 相关属性将容器划分为网格 设置每一个子项占哪些行/列 暂时只是初略了解，之后还是得正式学
领取专属 10元无门槛券
手把手带您无忧上云
