ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

《CSS权威指南》读书笔记(1)

2019-03-12 16:42:17  阅读:211  来源: 互联网

标签:指南 行级 读书笔记 元素 HTML 内容 替换 CSS


  因为之前不是做前端的,所以对CSS的知识也只局限于常用的一些内容。最近打算系统学习一下前端的内容,所以决定从《CSS权威指南》入手,系统的学习一下CSS的内容。

第一章、CSS和文档

  1、前面主要讲了一些远古时期CSS还没有出现的时候,HTML对一些显示要求的处理。比如,创作人员开始要求能够将文本变为粗体或者斜体,而当时的HTML还不足以处理这些需求,迫于这些压力,开始出现了诸如<font>和<big>之类的标记元素。

突然之间,原来描述结构的语言开始描述外在表现了。

  我们学习HTML5也可以发现,浏览器开始不鼓励我们使用<fout>之类的处理外在表现的元素了,原因有很多:

  • <fout>之类的标记没有任何意义,这会使文档的可用性降低。
  • CSS相比较HTML有更丰富的样式。
  • 更易于维护并显著减少工作量。试想一下,如果不用CSS表,你想让一个网站的标题呈现为蓝色
<h2><font color="blue">我是标题</fout></h2>

  这只是一个标题,假如现在有一个网站,有100个页面,每个页面5个标题,那你需要写多少<font></font>标签?如果你写好了,老板突然想让你把标题的颜色更换为红色呢?想想都觉得恐怖。

  而使用CSS表只需要一条规则:

h2 {
  color:blue;
}

  是不是要简单多了?

  • 在多个页面上使用样式
  • 减少文件大小

  

  2、替换元素与非替换元素

    2.1、替换元素

      替换元素是指用来替换元素内容的部分并非由文档内容直接表示。比如img元素:

<img src="boy.jpg"></img>

      这个标签不包含任何内容,除非把它指向一个图片文件,否则它没有任何意义。

    2.2、非替换元素

      大多数HTML元素都是非替换元素,比如常见的<span></span>,<div></div>等。这些标签的内容完全由标签体中的内容所决定。

 

  3、块级元素与行级元素

    3.1、块级元素

      块级元素生成一个元素狂,它会填充其余父元素的内容区,旁边不能有其他元素。也就是说,它和其他元素产生了“分隔符”。

      我们常用的块级元素:div,p,h1~h6,from等

      

    3.2、行级元素

      行级元素在一个文本行内生成元素狂,而不会打断这行文本。这些元素不会在之前或者之后产生“分隔符”,所以可以出现在另一个元素的内容中,而不会破坏其显示。

      我们常见的行级元素:a,strong,em,br,input,span等

 

标签:指南,行级,读书笔记,元素,HTML,内容,替换,CSS
来源: https://www.cnblogs.com/lizixiang/p/10489684.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有