web前端开发基础班课堂笔记第三天

1、CSS是网页的美容师

没有不好看的页面,只有不会用CSS的前端

2、CSS语法规则

层叠样式表Cascading Style Sheets
h1 选择器 { color:red; 属性:值;}
<style type="text/css"> p {color: red; font-size: 25px;}</style>

3、font-size:字号大小

em相对于当前对象内文本的字体尺寸
px 像素、最常见、推荐使用
in 英寸 cm 厘米 mm毫米 pt 点

3.1、font-family:字体

浏览器默认宋体,"汉字"

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

不需要记忆,需要时查表就行
escape("字体名")方法可以转换出Unicode字体编码

3.3、font-weight:字体

font-weight:bold; font-weight:700;效果一样推荐用数字的
normal 正常字体 400 bold 粗体 700
让strong字体不加粗strong{ font-weight: normal;}

3.4、font-style:字体风格

normal正常 italic斜体
em 也可以倾斜

3.5、font 连写综合设定

按顺序书写,属性之间用空格隔开
{ font: style weight size/line-height family; }
size family 这两个必须要写

4、开发者工具Chrome

Ctrl+Shift+i
Ctrl+Shift+c

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。 如果您觉得这篇文章还...
    MR_LIXP阅读 2,894评论 1 9
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,275评论 0 40
  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 5,863评论 2 2
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,079评论 1 4
  • 地板的凉意透过指尖袭击了我 我开始下沉 无数根针穿透我的身体 将我织入这凉意里 如果信仰的模样依旧清晰 如果希望还...
    安度无恙年华阅读 217评论 0 1