004.前端开发知识，前端基础CSS（2020-01-09）
一、CSS字体样式属性
1.font-size:字号大小
2.font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。
* {
/*font-family: "微软雅黑";*/
font-family: "microsoft yahei", Arial;
/*font-family: Arial;*/
}
p {
font-size: 16px; /*千万别忘了带px 单位*/
line-height: 28px; /* 行高 行与行之间的距离*/
text-indent: 2em; /*段落首行缩进2个字 em 也是一个单位 1em 就是一个字的距离 */
}
1. 现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
3.CSS Unicode字体
4.font-weight:字体粗细
5.font-style:字体风格
a {
/*font-weight: bold; 字体加粗*/
font-weight: 700; /* 字体加粗 700 == bold */
}
h1 {
/*font-weight: normal; 让粗体不加粗*/
font-weight: 400; /*让粗体不加粗400 == normal 建议用数值*/
text-align: center; /*让h1 里面的文字水平居中*/
}
span {
/*color: #ff0000;*/
color: #FDD000;
}
div {
text-align: center;
}
.nub {
color: #f00;
font-weight: 400; /*不加粗*/
}
6.em标签
em {
color: skyblue;
font-style: normal; /*让斜体不倾斜*/
}
7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛
7.font:综合设置字体样式
字体连写是有顺序的。其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
/*选择器{font: font-style font-weight font-size/line-height font-family;}*/
h1 {
/*font: 400 25px "宋体";*/
font: 12px "微软雅黑";
}
二、CSS外观属性
1.color:文本颜色
2.line-height:行间距
3.text-align:水平对齐方式
4.text-indent:首行缩进
综合案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
/*font-family: "微软雅黑";*/
font-family: "microsoft yahei", Arial;
/*font-family: Arial;*/
}
p {
font-size: 16px; /*千万别忘了带px 单位*/
line-height: 28px; /* 行高 行与行之间的距离*/
text-indent: 2em; /*段落首行缩进2个字 em 也是一个单位 1em 就是一个字的距离 */
}
a {
/*font-weight: bold; 字体加粗*/
font-weight: 700; /* 700 没有单位 == bold */
}
h1 {
/*font-weight: normal; 让粗体不加粗思密达*/
font-weight: 400; /*让粗体不加粗思密达 400 == normal 建议用数值*/
text-align: center; /*让h1 里面的文字水平居中*/
}
em {
color: skyblue;
font-style: normal; /*让斜体不倾斜*/
}
span {
/*color: #ff0000;*/
color: #FDD000;
}
div {
text-align: center;
}
.nub {
color: #f00;
font-weight: 400; /*不加粗*/
}
</style>
</head>
<body>
<h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
<div>2017年07月16日20:11 <span>新浪体育 评论中大奖</span> （<a href="#" class="nub">11</a>人参与） <a href="#">收藏本文</a></div>
<hr />
<p>新浪体育讯 7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>
<p>
在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>
<p>据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>
<p>这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</p>
</body>
</html>
5.text-decoration 文本的装饰
text-decoration : none || underline || blink || overline || line-through
无装饰 下划线 闪烁 上划线 删除线
div {
font-size: 40px;
/*text-decoration: none; 取消装饰*/
/*text-decoration: underline; 下划线*/
/*text-decoration: line-through; 删除线*/
font-style: italic; /*设置倾斜*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> s {
text-decoration: none; /* 取消删除线*/
}
em {
font-style: normal; /*取消倾斜*/
}
strong {
font-weight: 400; /*取消加粗*/
}
ins {
text-decoration: none;/*取消下划线*/
}
</style>
</head>
<body>
<div>装饰自己</div>
<s>现价： 188</s>
<em>倾斜</em> <i>倾斜</i>
<strong>加粗</strong> b
u <ins>下划线</ins>
s del
</body>
</html>
--
004.前端开发知识，前端基础CSS（2020-01-09）的更多相关文章
- Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...
- Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...
- [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...
- 前端开发概述+JS基础细节知识点
一 前端开发概述 html页面:html css javascript 拿到UI设计图纸:切图-->html+css静态布局-->用JS写一写动态效果-->ajax和后台进行交互,把 ...
- Vue.js高效前端开发知识 • 【目录】
持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...
- 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单：google 一个关键词你能看到十几篇优秀的博文，再这些博文中寻找新的关键字，直到整个大知识点得到突破
我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程
提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...
- 003.前端开发知识，前端基础CSS（2020-01-07）
一.CSS初识 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. ...
- 006.前端开发知识，前端基础CSS（2020-01-21）
来源:第五天 01盒子水平居中 一.盒子中文字控制: 1.text-align: center; /*可以让盒子内容(文字 行内元素 行内块元素)居中对齐*/ 二.让盒子水平居中对齐: 方法1.ma ...
随机推荐
- Linux简介和环境的搭建
Linux的学习方向 网络服务器 嵌入式程序开发 Linux的设计哲学:一切皆文件 常用命令:cd 切换目录sudo shutdown -h now 关机命令sudo reboot 重启sudo ro ...
- CodeForces - 131C The World is a Theatre（组合数）
题意:已知有n个男生,m个女生.现在要选t个人,要求有至少4个男生,至少1个女生,求有多少种选法. 分析: 1.展开,将分子中的m!与分母中n!相约,即可推出函数C. #pragma comment( ...
- Python自学之路---Day01
目录 Python自学之路---Day01 注释 单行注释 多行注释 print()函数 语法 参数 实例 input()函数 语法 参数 实例 查看Python的关键字 代码 变量与常量 变量 如何 ...
- 2020牛客寒假算法基础集训营3 B 牛牛的DRB迷宫II
题目描述 牛牛有一个n*m的迷宫,对于迷宫中的每个格子都为'R','D','B'三种类型之一,'R'表示处于当前的格子时只能往右边走'D'表示处于当前的格子时只能往下边走,而'B'表示向右向下均可以走 ...
- CodeForces - 686D 【树的重心】
传送门:http://codeforces.com/problemset/problem/686/D 题意:给你n个节点,其中1为根, 第二行给你2~n的节点的父亲节点编号. 然后是q个询问,求询问的 ...
- WebSocket的简单实现&jsp
创建一个web项目 导入依赖: <?xml version="1.0" encoding="UTF-8"?> <project xmlns=& ...
- 基于python的爬虫流程图(精简版)
网址: https://www.processon.com/view/link/5e1148b8e4b07db4cfa9cf34 如果链接失效,请及时反馈(在评论区评论),博主会及时更新
- JVM探秘：jstat查看JVM统计信息
本系列笔记主要基于<深入理解Java虚拟机:JVM高级特性与最佳实践 第2版>,是这本书的读书笔记. jstat命令用来查看JVM统计信息,可以查看类加载信息.垃圾收集的信息.JIT编译信 ...
- {转} 深入理解 HTTP Session
session在web开发中是一个非常重要的概念,这个概念很抽象,很难定义,也是最让人迷惑的一个名词,也是最多被滥用的名字之一,在不同的场合,session一次的含义也很不相同.这里只探讨HTTP S ...
- 干货 | 京东云Kubernetes集群+Traefik实战
摘要 Traefik支持丰富的annotations配置,可配置众多出色的特性,例如:自动熔断.负载均衡策略.黑名单.白名单.所以Traefik对于微服务来说简直就是一神器. 利用Traefik,并结 ...