admin管理员组

文章数量:1794759

七：以理论结合实践方式梳理前端 CSS 3 ——— 字体颜色独特性

七：以理论结合实践方式梳理前端 CSS 3 ——— 字体颜色独特性

样式单位

  • 相对长度单位指定了一个长度相对于另一个长度的属性，对于不同的设备相对长度更适用
  • 绝对长度单位是一个固定的值，它反应一个真实的物理尺寸，绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）
相对单位描述
em它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
ex依赖于英文字母小 x 的高度
ch数字 0 的宽度
remrem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。
vwviewpoint width，视窗宽度，1vw=视窗宽度的1%
vhviewpoint height，视窗高度，1vh=视窗高度的1%
vminvw和vh中较小的那个。
vmaxvw和vh中较大的那个。
%
绝对单位描述
cm厘米
mm毫米
in英寸 (1in = 96px = 2.54cm)
px *像素 (1px = 1/96th of 1in)
ptpoint，大约1/72英寸； (1pt = 1/72in)
pcpica，大约6pt，1/6英寸； (1pc = 12 pt)
样式颜色

颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合，CSS 3 中颜色的获取有以下几种：

  • 颜色名称：red、yellow、green、blue、black、white、orange 等，其中透明为 transparent
  • 十六进制：#ff0000、#ffff00、#00ff00、#0000ff 等，另外同组的可简写，例：#ff0000 = #f00，#ffffff = #fff，#000000 = #000
  • RGB 格式：rgb(255,0,0)、rgb(255,255,0)、rgb(0,255,0)、rgb(0,0,255) 等
  • RGBA 式：rgba(255,0,0,1)、rgba(255,255,0,1)、rgba(0,255,0,1)、rgba(0,0,255,1) 等，其中 a 表示透明度，1 = 100%，0.2 = 20%
属性描述CSS
opacity设置一个元素的透明度级别3
div.main { width: 200px; height: 50px; background-color: #f00; opacity: 0.5; } 比较RGBAopacity
取值相同0.5 = 50% 透明度0.5 = 50% 透明度
作用不同仅仅作用颜色透明度设置将整个元素透明度设置
影响子元素不影响影响

在 CSS3 之前，表示颜色可以使用以下三种方法：

  • 关键字表示法，例如黑色可以表示为 black，白色可以表示为 white
  • 十六进制格式，例如黑色可以表示为 #000000，白色可以表示为 #FFFFFF
  • rgb()，例如黑色可以表示为 rgb(0,0,0)，白色可以表示为 rgb(255,255,255)

而在 CSS3 中，又新增三种方法，分别是：

  • hsl()

    ：h 表示色调 (hue)，s 表示饱和度 (saturate)，l 表示亮度 (lightness)

    • hue：数值，取值范围为 0 ~ 359，例如红色为 0，绿色为 120，蓝色为 240
    • saturate：百分比，100% 为实际色调，0% 为灰色
    • lightness：百分比，50% 为实际色调，0% 为黑色，100% 为白色
  • rgba()

    ：r 表示红色 (red)，g 表示绿色 (green)，b 表示蓝色 (blue)，a 表示不透明度 (alpha)

    • alpha：数值，取值范围为 0 ~ 1，0 为完全透明，1 为完全不透明

  • hsla()：h 表示色调 (hue)，s 表示饱和度 (saturate)，l 表示亮度 (lightness)，a 表示不透明度 (alpha)

常用技巧：

  • 现在网页中普遍使用14px+。
  • 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
  • 各种字体之间必须使用英文状态下的逗号隔开。
  • 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
  • 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
  • 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
    • CSS Unicode字体

    在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

    方案一： 你可以使用英文来替代。 比如 font-family:“Microsoft Yahei”。

    方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。font-family: “\\5FAE\\8F6F\\96C5\\9ED1”，表示设置字体为“微软雅黑”。可以通过escape() 来测试属于什么字体

    字体名称英文名称Unicode 编码
    宋体SimSun\\5B8B\\4F53
    新宋体NSimSun\\65B0\\5B8B\\4F53
    黑体SimHei\\9ED1\\4F53
    微软雅黑Microsoft YaHei\\5FAE\\8F6F\\96C5\\9ED1
    楷体_GB2312KaiTi_GB2312\\6977\\4F53_GB2312
    隶书LiSu\\96B6\\4E66
    幼圆YouYua5E7C\\5706
    华文细黑STXihei\\534E\\6587\\7EC6\\9ED1
    细明体MingLiU\\7EC6\\660E\\4F53
    新细明体PMingLiU\\65B0\\7EC6\\660E\\4F53
    阴影样式

    我们既可以为块级元素添加阴影，也可以为文字添加阴影

    （1）块级元素阴影

    我们可以使用 box-shadow 为块级元素添加阴影

    box-shadow: offset-x offset-y blur-radius spread-radius color inset;
    • offset-x：水平偏移位置，必需
    • offset-y：垂直偏移位置，必需
    • blur-radius：模糊距离，可选，指定阴影的模糊程度
    • spread-radius：阴影半径，可选，指定阴影的区域大小
    • color：阴影颜色，可选，默认值是黑色
    • inset：默认情况下设置的阴影是外部阴影，使用 inset 可以将阴影设置为内部阴影
    <!DOCTYPE html> <html> <head> <style> .moon { width: 100px; height: 100px; border-radius: 50px; background-color: rgba(255, 244, 99, 0.8); box-shadow: 5px 5px 5px 10px rgba(255, 244, 99, 0.2); } </style> </head> <body> <div class="moon"></div> </body> </html>

    （2）文字阴影

    我们可以使用 text-shadow 属性为文字添加阴影

    text-shadow: offset-x offset-y blur-radius color;
    • offset-x：水平偏移位置，必需
    • offset-y：垂直偏移位置，必需
    • blur-radius：模糊距离，可选
    • color：阴影颜色，可选，默认值是黑色
    <!DOCTYPE html> <html> <head> <style> .shadow { font-size: xx-large; font-weight: bolder; color: black; background-color: white; text-shadow: 5px 5px 5px gray; } </style> </head> <body> <div class="shadow">你好，世界</div> </body> </html> 渐变样式

    渐变效果有两种类型，分别是线性渐变（Linear Gradient）和径向渐变（Radial Gradient）

    • 线性渐变：渐变效果向下、向右或向对角方向展开
    • 径向渐变：渐变效果从中心开始向四周展开

    （1）线性渐变

    可以将 background-image 属性的值设置为 linear-gradient 添加线性渐变效果

    background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
    • direction

      ：指定渐变方向，可选，下面列举几个常见的值：

      • to bottom：渐变方向从上到下展开，默认值
      • to right：渐变效果从左到右展开
      • to bottom right：渐变方向从左上到右下展开
      • <degree>：水平线和渐变线之间的角度，按逆时针方向计算

    • color-stop1, color-stop2, ...：指定渐变颜色，必需

    <!DOCTYPE html> <html> <head> <style> .rainbow { width: 800px; height: 100px; background-color: white; /* linear-gradient 不生效时使用 */ background-image: linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #00FFFF, #0000FF, #8B00FF); } </style> </head> <body> <div class="rainbow"></div> </body> </html>

    （2）径向渐变

    可以将 background-image 属性的值设置为 radial-gradient 添加线性渐变效果

    background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

    • shape：指定形状，可选，取值如下：

      • ellipse：椭圆，默认值
      • circle：圆形

    • size：表示渐变到哪停止，可选，取值如下：

      • farthest-corner：最远角，默认值
      • closest-corner：最近角
      • farthest-side：最远边
      • closest-side：最近边

    • position：表示中心点所在的位置，可选

      它由两个百分数值决定，分别代表中心点在水平和垂直方向的位置，默认为 50% 50%

    • color-stop1, color-stop2, ...：指定渐变颜色，必需

    <!DOCTYPE html> <html> <head> <style> .rainbow { width: 500px; height: 500px; background-color: white; /* radial-gradient 不生效时使用 */ background-image: radial-gradient(circle farthest-corner at 0% 100%, #FF0000, #FF7F00, #FFFF00, #00FF00, #00FFFF, #0000FF, #8B00FF); } </style> </head> <body> <div class="rainbow"></div> </body> </html> 反射样式

    通过 -webkit-box-reflect 属性我们可以实现镜面效果

    -webkit-box-reflect：direction offset mask-box-image
    • direction

      ：反射方向，取值如下：

      • above：倒影出现在原对象的上方
      • below：倒影出现在原对象的下方
      • left： 倒影出现在原对象的左方
      • right：倒影出现在原对象的右方

    • offset：倒影与原对象之间的间距

    • mask：遮罩效果，图片或者渐变

    <!doctype html> <html> <head> <style> .reflect { font-size: xx-large; font-weight: bolder; -webkit-box-reflect: below 5px linear-gradient(transparent, rgba(255, 255, 255, 0.2)); } </style> </head> <body> <div class="reflect">你好，世界</div> </body> </html> 字体样式

    @font-face 规则用来加载字体，它甚至可以让我们使用服务端的字体文件，一个例子如下：

    @font-face { /* font-family 属性指定字体名称 */ font-family: myFont; /* src 属性指定资源位置 */ src: url('myFont.ttf'), url('myFont.eot')/* IE9 */; }

    然后就能在文件中直接使用，例子如下：

    .use-my-font { font-family: myFont; /* 自定义的字体名称 */ } 媒体查询

    @media 规则允许在相同样式表为不同媒体设置不同的样式，常用于不同移动端设备兼容处理

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> @media screen and (min-width: 360px) { .media-style { background-color: rgba(255, 0, 0, 0.5); } } @media screen and (min-width: 640px) { .media-style { background-color: rgba(0, 255, 0, 0.5); } } @media screen and (min-width: 800px) { .media-style { background-color: rgba(0, 0, 255, 0.5); } } </style> </head> <body> <div class="media-style"> 这里的样式随着浏览器窗口不同大小而变更 </div> </body> </html> 浏览器样式

    一个网页的渲染样式，不仅仅是开发者自定义样式，在不同浏览器平台上，浏览器自带代理样式

    通过 F12 打开浏览器开发者工具，方便开发者查看页面 HTML 元素所具有的 CSS 样式，以下常用开发者工具解析

    • Elements – 用于查找查看：HTML 标签、样式、盒子模型、事件、HTML DOM 元素信等
    • Console – 用于打印 JavaScript 编程输出信
    • Sources – 用于查看管理网站项目结构以及文件详情，还可以设置断点调试 JavaScript
    • Network – 用于查看网站资源缓存数据，也可以查看前端请求后端接口信及返回数据
    • Application – 用于查看网站本地存储信（Cookie、Local、Session、WebSQL 等）
    样式覆盖规则

    有的时候 CSS 真的十分调皮，明明我们给一个元素指定了样式，但是在页面上却没有一点改变

    这时我们就要考虑是不是别处指定的样式覆盖了当前指定的样式呢？

    所以了解一下样式覆盖规则还是十分有必要的，对于一个元素的某个属性而言，表现出来的样式会遵循以下的规则

    （1）内联样式 > 内部样式表 / 外部样式表

    <!DOCTYPE HTML> <html> <head> <style> #title { color: red; } /* 内部样式表 */ </style> </head> <body> <div style="color: green;" id="title"> <!-- 内联样式 --> Hello World </div> </body> </html>

    【最终效果（内联样式 优先）】Hello World

    （2）在内部样式表 / 外部样式表中，直接指定的样式 > 继承祖先的样式

    <!DOCTYPE HTML> <html> <head> <style> #title { color: red; } span { color: green; } /* 直接指定 span 标签样式 */ </style> </head> <body> <div id="title"> <span>Hello World</span> <!-- span 标签也会继承 div 标签的样式 --> </div> </body> </html>

    【最终效果（直接指定的样式 优先）】Hello World

    （3）对于直接指定的样式，权值大的优先；如果权值相同，后定义的优先【重要】

    当直接指定的样式发生冲突时，根据定义该样式的选择器的权值大小进行比较，权值大的优先

    选择器的权值计算定义如下：

    • id 选择器 >> class 选择器 >> 标签选择器，其中同一类型的选择器权值相同
    • 后代选择器的权值等于其包含的各级选择器的权值之和
    <!DOCTYPE HTML> <html> <head> <style> #title span { color: red; } /* 后代选择器 = id 选择器（#title） + 标签选择器（span） */ #intro { color: green; } /* id 选择器（#intro） */ </style> </head> <body> <div id="title"> <span id="intro">Hello World</span> <!-- id 选择器 + 标签选择器 > id 选择器 --> </div> </body> </html>

    【最终效果（权值大的优先）】Hello World

    （4）对于继承祖先的样式，最近祖先优先

    当继承祖先的样式发生冲突时，根据继承的关系进行比较，最近祖先优先

    <!DOCTYPE HTML> <html> <head> <style> #title { color: red; } #intro { color: green; } </style> </head> <body> <div id="title"> <!-- 对于下面的 span 标签来说，在继承树上距离较远 --> <div id="intro"> <!-- 对于下面的 span 标签来说，在继承树上距离较近 --> <span>Hello World</span> </div> </div> </body> </html>

    【最终效果（最近祖先优先）】Hello World

    （5）!important 声明无视上面的规则，其指定的样式永远不被覆盖【重要】

    其实这样的说法或许还有些许不准确，因为（有且仅有） !important 声明可以覆盖 !important 声明

    <!DOCTYPE HTML> <html> <head> <style> #title { color: red!important; } /* 加上 !important 声明的内部样式表 */ </style> </head> <body> <div style="color: green;" id="title"> <!-- 内联样式 --> Hello World </div> </body> </html>

    【最终效果（!important 声明优先）】Hello World

    本文标签： 独特性字体颜色理论方式

    版权声明：本文标题：七：以理论结合实践方式梳理前端 CSS 3 ——— 字体颜色独特性 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686971384a123919.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。