html字体

【CSS】iconfont的使用

前提是你 提交于 2019-12-19 09:53:22
说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有关字体的几种格式,下面我就分别说一下这个问题,让大家心里有一个概念: 一、TureTpe(.ttf)格式: .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】; 二、OpenType(.otf)格式: .otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】; 三、Web Open Font Format(.woff)格式: .woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】; 四、Embedded

css权威指南--笔记

坚强是说给别人听的谎言 提交于 2019-12-16 22:58:59
第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span)。 2,link:rel(代表关系:stylesheet,候选样式表:alternate stylesheet);type(text/css);media:(all(所有表现媒体, screen,print),title(配合候选使用)。 3,@import url(sheet1.css) 需在style内使用,放在其他css规则之前。 4,向后可访问性:<style><!-- 样式 --></style>,这样较老浏览器会将style忽略,能理解css的浏览器能正常读取样式表。 5,css注释:/* */。 第2章 选择器 1,对声明分组时,一定要在各个声明的最后使用分号。 2,p.warming.help {background:red;} 只匹配class包含warming和help的p元素,如果p包含warming和其他的则不能匹配。 3,实际上,浏览器并不检查html中id的唯一性,但这会导致编写dom更困难。 4,属性选择器:h1[class] {...} h1[class=''] {...}完全匹配 h1[class~=''] {...}部分匹配 [class^='']以什么开头 [class$='']以什么结尾 [class*='']包含什么的所有元素 *[lang|='en

响应式布局开发

别等时光非礼了梦想. 提交于 2019-12-16 10:39:41
目录 移动web介绍和两种开发方式(响应式开发方式 原生的开发方式) 响应式的原理(CSS3的媒体查询) 响应式开发框架(Bootstrap) 的介绍和基本信息-优势-版本 了解框架和库的区别 主导者不一样 入门Bootstrap 起步 下载和引包 阅读Bootstrap的文档 了解常用的全局CSS样式 和 组件 和JS插件 搭建项目目录结构 创建主页引包 设置网页字体和空结构 字体图标的生成 和使用 总结 移动web前言 移动web : 移动端手机浏览器或者微信里面浏览的 网页 移动APP : 手机上需要下载安装的 应用程序 1. 移动web介绍 1.1 响应式开发 一套代码运行多个终端 优点:开发快 维护快 适配好 缺点加载速度慢 1.2 纯原生移动web开发 一套代码运行一个端 优点: 加载速度快 缺点开发慢 维护慢 适配差 1.3 应用场景 : 响应式开发用在一些新建的网站(PC和移动同时出来) 对加载速度要求不是很高 纯原生移动web开发 一般会用在一些已经有PC端上线的网站 再次开发移动端 移动端需要加载速度很快的网站 2. 响应式开发原理 2.1 CSS3的媒体查询: 通过查询屏幕的的宽度来指定某个宽度区间的网页布局 2.2 常见设备的屏幕宽度 超小屏幕(手机) 768px以下 小屏设备(平板) 768px-992px 中等屏幕(旧式电脑) 992px-1200px

css高级特性

点点圈 提交于 2019-12-15 19:07:48
1.CSS复合选择器:复合选择器是由两个或多个基础选择器通过不同的方式组合而成的 标签指定式选择器:又称交集选择器,由两个选择器构成,其中第一个选择器为标记选择器,第二个为class选择器或id选择器。两个选择器之间不能有空格。 后代选择器:后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。 并集选择器:并集选择器是各个选择其通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器、id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,都可以利用并集选择器为他们定义相同的CSS样式。 2.CSS层叠性和继承性 层叠性:就是将多种属性叠加起来。 继承性:就是给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承。 官方解释,继承是一种规则,它允许样式不仅应用于特定的html标签元素,而且应用于其后代元素。 有继承性的属性 字体系列属性 ​ font:组合字体 ​ font-family:规定元素的字体系列 ​ font-weight:设置字体的粗细 ​ font-size:设置字体的尺寸 ​ font-style:定义字体的风格 ​ font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写

网页设计博客2

匆匆过客 提交于 2019-12-13 02:05:15
3.1.1CSS样式规则: 格式:选择器{属性1:属性值; 属性2:属性值2; 属性3:属性值3;} 选择器严格区分大小写,属性和值不区分大小写。 *如果属性的值有多个单词组成且中间包含空格,则必须为这个属性值加上英文状态的引号 *在CSS代码中空格是不被解析的 3.1.2引用CSS样式表: 1.行内式:也称为内联样式,是通过标记的style属性来设置元素的样式,基本语法如下:< 标记名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”>内容< /标记名> 行内式只对所在的标记及嵌套在其中的子标记起作用。 没有做到结构与表现的分离。只有在样式规则较少且只在该元素上使用一次,或则需要临时修改某个样式规则时使用。 2.内嵌式: 是将CSS代码集中写在HTML文档的< head >头部标记中,并且用< style >标记定义,基本语法如下: < head> < style type=“text/css”> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} < /style> < /head> < style>标记一般位于< head>标记中< title>标记后,也可以放在HTML的任何地方。必须设置type的属性值为text/css 3.链入式: 是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过< link/

如何运用最新的技术提升网页速度和性能----------引用

我是研究僧i 提交于 2019-12-12 13:43:03
1. 性能设计 在我们的项目中,我们每天都会和设计师和产品负责人讨论关于平衡美观和性能的问题。对于我们自己的网站,这样做是很简单的。简言之,我们认为好的用户体验从快速的内容传输开始,也就意味着 性能 > 美观。 好的内容、布局、图片和交互是吸引用户的重要因素。这每个因素都会影响页面的加载时间和终端用户体验。每一步我们都在探讨如何在获得好的用户体验和保证设计美感的同时,最小化对性能的影响。 内容优先 我们想要把核心内容尽快地呈现给用户,意味着我们要处理好基本的 HTML 和 CSS。每个页面都应该达到基本的目的:传递信息。JS、CSS、网页字体、图片、网站分析等优化都是位居于核心内容之下的。 可控性 给理想网站定义了标准后,我们总结出:要想达到预期效果,就要能对网站各方面的控制都游刃有余。我们选择构建自己的静态站点生成器,包括资源传输,并且由我们自己操控。 静态站点生成器 我们用 Node.js 实现了静态站点生成器。它是采用带有简短 JSON 页面描述标签的 Markdown 文件来生成整个网站结构和它所有的资源。为了包括特殊的页面脚本,也可以附带一个 HTML 文件。以下是一个简单化的描述标签和 markdown 文件,用于博客的发布,用它来生成真正的 HTML。 JSON 描述标签: markdown 文件: 图片传输 平均一个 2406kb 的网页中 1535kb 是图片

052统一站内网页风格

a 夏天 提交于 2019-12-10 10:33:37
实例说明   本实例将介绍如何应用CSS样式来统一网站的风格。 关键技术 字体属性 字体属性包含字体的颜色、字体的大小、字体的风格等 颜色和背景属性 CSS中的颜色属性用于设置页面元素的颜色,背景属性用于设置背景颜色或背景图像, 边框属性 边框属性用于设置元素的边框宽度、样式和颜色。 设计过程 定义CSS样式表文件,将其命名为mycss.css,在该文件中使用body设置页面的样式,使用td设置所有单元格内的字体样式,使用input设置所有文本框的样式,等等 新建HTML在页面中引用CSS样式表 <head> <link rel="stylesheet" type="text/css" href="mycss.css" /> </head> 在页面中引用相应的CSS样式 来源: https://www.cnblogs.com/cglib/p/12014862.html

Chap 03 HTML文字与段落标记

一世执手 提交于 2019-12-10 05:37:03
3.1 标题字 HTML 文档中包含有各种级别的标题,各种级别的标题由 <h1> 到 <h6> 元素来定义。其中 <h1> 代表最高级别的标题,依次递减, <h6> 最低。 3.1.1 标题字标记 h <h1> 到 <h6> 元素中的字母 h 是英文 headline 的简称。作为标题,它们的重要性是有区别的,其中 h1 标题的重要性最高, h6 最低。 语法: <h1>1 级标题 </h1> <h2>2 级标题 </h2> <h3>3 级标题 </h3> <h4>4 级标题 </h4> <h5>5 级标题 </h5> <h6>6 级标题 </h6> 补充: 对于不同的浏览器,其确切的点阵尺寸的大小也不相同,但 <h1> 标题大约是标准文字高度的 2 到 3 倍 ,<h6> 标题则比标准字体略小。 3.1.2 标题字对齐属性 align 默认情况下,标题文字是左对齐的。而在网页制作过程中,常常需要选择其他的对齐方式。对齐方式的设置需要使用 align 参数设置。 语法: <align= 对齐方式 > 说明: 在该语法中, align 属性需要设置在标题标记之后。 3.2 文本基本标记 <font> 标记用来控制字体、字号和颜色等属性,它 HTML 中最基本的标记之一,掌握好 <font> 标记的使用时控制网页文本的基础。 3.2.1 字体属性 face 字体的 face

CSDN之路(一)学习写第一篇CSDN博客

 ̄綄美尐妖づ 提交于 2019-12-09 22:01:11
主要参考博客:https://blog.csdn.net/cungudafa/article/details/84658703 参考博客:https://blog.csdn.net/centor/article/details/72929886 我的CSDN博客主要用于记录学习笔记 完整的内容请看本博客的主要内容来源https://blog.csdn.net/cungudafa/article/details/84658703 目录 (一)基础操作 (二)优化排版 (一)基础操作 登陆CSDN,找到 ,点击开始写你的第一篇博客。 CSDN主要有两种编辑器:Markdown编辑器和富文本编辑器;我选的环境:Markdown编辑器。 Markdown编辑器特点: 左右对比查看,方便修改;(左边是编辑界面,右边是发布后的实际效果显示) 编辑器支持一些常用快捷键;具体用法可打开保存旁边的问号按钮——帮助文档; 支持从word文档强力拖拽来粘贴图片;最上面一栏“图片”也可以上传;也可以用快捷键粘贴图片 常点击保存,避免意外; 发布后,进入CSDN文章管理页面,随时可以再次对其进行编辑完善~ 题目位置 :在左上角文章管理右边;我做笔记习惯起名字好记; 导航目录 :不知道是不是Markdown编辑器独有的,方便读者阅读时直接跳转到相应目录 具体实现如下: 在你开头键入:@[TOC](目录名字

HTML+css整理笔记

最后都变了- 提交于 2019-12-08 17:35:27
HTML+CSS 一、 元素 1. <html> HTML 文件 </html> 2. <head> 头 </head> 详见 : 二 mata 用法和属性及外部文件引入 3. <title> 标题 </title> 4. <meta /> 详见 : 二 mata 用法和属性 5. <body> 主体 </body> 插入背景图片详见 : 三 img 用法和属性及背景图 6. <h1> 标题 </h1> : 标题取值1-6, 1字体最大,6字体最小; 7. <b> 粗体 </b>: 粗体 ; 8. <i> 斜体 </i>: 斜体; 9. <u> 下划线 </u>: 下划线 ; 10. <em> 斜体强调 </em>: 斜体强调; 11. <strong> 粗体强调 </strong>: 粗体强调; 12. <font> 字体 </font>: 字体; 13. <p> 段落 </p>: 段落; 14. <button> 按钮 </button> : 按钮; 15. <pre> 原格式输出 </pre> : 原格式输出; 16. <br/> : 换行; 17. <hr/> : 水平线; 18. <img /> : 插入图片; 详见 : 三 img 用法和属性及背景图 19. <embed> 视频音乐 </embed> : 插入视频音乐; 详见 : 四 embed 用法和属性 20.