第十一课 CSS介绍与font字体 css学习1
一、CSS样式规则
1、基本结构
<html>
<head>
<style>
h1{
color: orange;
}
</style>
</head>
<body>
</body>
</html>
二、font字体
1、字号与字体
font-size: 字号大小
font-family: 字体 font-family: "宋体";
使用技巧:
网页中普遍使用14px 字号;
尽量使用偶数的字号;
使用多个字体,字体间用“,”逗号隔开,中文字体需加引号,英文字体可以不加,
英文字体放在中文字体之前,字体有空格要加引号;
尽量使用默认字体;
2、unicode字体
对于不支持中文字体
方案一、可以用使用英文来替代,如font-family: "Microsoft Yahei";
方案二、在css直接使用unicode 编码来写字体名称可以避免这些错误,使用unicode写
中文字体,浏览器可以正确解析 如: font-family:"\5FAE\8F6F\96C5\9ED1"; 表示设置字体为“微软雅黑”
注:尽量写宋体、微软雅黑
3、Css注释
/*注释内容*/
4、字体加粗
font-weight: 字体粗细
font-weight: bold;字体加粗 700=blod nomal=400 尽量使用数字
5、字体倾斜
font-style: 字体风格
默认值: normal 正常 italic 倾斜
注:平时我们很少让字体倾斜,反而让倾斜的字体变成普通模式
6、font综合设置字体样式(重点)
选择器{font: font-style font-weight font-size/line-height font-family}
如:font{italic bold 14px "微软雅黑"}/*font 综合写法 更简洁*/
注:必须按照这个顺序写,必须保留font-size,font-family属性否则不起作用
第十一课 CSS介绍与font字体 css学习1的更多相关文章
- CSS基础 和 font字体、背景属性连写 与 清除浮动方法
1.伪类 1. :link 2. :visited 3. :hover(重要) 4. :active 5. :focus(input标签获取光标焦点) 2.伪元素 1.:first-letter 2. ...
- CSS font字体知识学习
字体系列 [1]5种通用字体系列:拥有相似外观的字体系列 serif字体:字体成比例,且有上下短线(衬线字体),包括Times\Georgia\New century Schoolbook sans- ...
- css常用样式font控制字体的多种变换
CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...
- 前端 CSS 介绍
CSS介绍 我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML标签的样式需要为每个HTML标签单独定义样 ...
- 1.css介绍
CSS介绍 我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样 ...
- CSS颜色及文本字体
CSS颜色及文本字体 CSS颜色表示法 CSS文本设置 CSS边框属性 背景属性 元素溢出 CSS颜色及文本字体 CSS颜色表示法 颜色名表示,比如:red 红色,yellow黄色,pick粉色 16 ...
- NeHe OpenGL教程 第二十一课:线的游戏
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法
Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...
- 2018年最完整5大网页设计图标解决方案:Font Awesome奥森图Unicode、CSS 和、Font以及国产zfont图标集
网上有很多高质量的图标,基于icon的关键词能在Google上搜索到不少内容,不考虑版权外还要修改大小.颜色等等,现在介绍一些替代方案:Unicode.CSS 和 Font,它具有更高的灵活性. 方案 ...
随机推荐
- 深入理解pandas读取excel,txt,csv文件等命令
pandas读取文件官方提供的文档 在使用pandas读取文件之前,必备的内容,必然属于官方文档,官方文档查阅地址 http://pandas.pydata.org/pandas-docs/versi ...
- SpringCloud-分布式链路跟踪配置详解
SpringCloud-分布式链路跟踪 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 注:作者使用IDEA + Gradle 注:需要有一定的java SpringBoot and ...
- 30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)
现在的项目开发基本上都用到了上传文件功能,或图片,或文档,或视频.我们常用的常规上传已经能够满足当前要求了, 然而有时会出现如下问题: 文件过大(比如1G以上),超出服务端的请求大小限制: 请求时间过 ...
- 面试官,你再问我 Bit Operation 试试?
在面试环节中,面试官很喜欢问一些特别的题目,这些题目有着特殊的解法,如果回答的巧妙往往能在面试中加分. 在这些题目中,位操作(Bit Operation)就是极具魅力的一种.今天,吴师兄就来分享 Le ...
- Restframe_work 回顾记忆集
目录 Restframe_work 回顾记忆集 rest_framework主要功能介绍 rest_framework主要模块介绍 记忆集 错题集 混淆集 重点集 难点集 Restframe_work ...
- ORM(三)QuerySet查询字段操作
这里的环境还是用上次的环境: Django项目:orm_practice app/models.py中有如下几个类: models.py publishing表内容如下: pid name 1 机械工 ...
- 一份.NET 容器化的调查小结
小编在上个月在微信公众号"dotnet跨平台" 做了一个针对.NET 容器化的调查:https://mp.weixin.qq.com/s/oszbuIORT0G8XLLgMZzkn ...
- 有趣的 box-decoration-break
这两天接触到一个很有意思的 CSS 属性 -- box-decoration-break.下面就一起去一探究竟. 因为 MDN 上关于这个属性,没有中文文档,所以一直在想一个合理贴切的中文翻译.直译一 ...
- java.lang.ClassNotFoundException: org.I0Itec.zkclient.IZkStateListener异常解决
在启动Dubbo项目时,出现该异常 java.lang.ClassNotFoundException: org.I0Itec.zkclient.IZkStateListener 解决,引入 <d ...
- MySQL学习(四)Join 等开发常用的操作 --- 2019年2月
1.查数据太多不会把内存用光 InnoDB 的数据是保存在主键索引上,然后索引树分割保存在数据页上,数据页存在内存中/磁盘.change buffer 就是先把修改操作记录,然后读数据的时候,内存没有 ...