CSS权威指南学习笔记 —— 初步认识CSS

层叠样式表(Cascading Style Sheets,CSS)可以影响文档的表现。CSS是依附于文档的,如果不存在某种文档,CSS基本上是没有用的。

为什么会有CSS

在web早期(1990-1993),HTML由一些结构化元素组成,用于描述段落、超链接、列表和标题等。简单来说刚开始的时候,HTML是个非常有限的语言,并不关心外观,一篇文章,里面有一些超链接。大概张这个样子。

后来有了第一个图形浏览器Mosaic,把浏览网页的体验变得更好,各种网站就开始涌现了。然后人们对网页的需求也变得越来越高,比如,有些人希望他们的网站用户看到的是一个大写加粗的牛X,O(∩_∩)O哈哈哈~但是当时的HTML有点满足不了需求,需要新的标签来展示。就这样出现了一些后来被嫌弃的专门负责表现的标签,如<font>,<big>等。

没过几年,这种做法就带来了严重的后果,那就是一片混乱。可以想象一下如果只能用标签来完成页面的布局和展示,有可能会全是<font>,跟现在提倡的结构化语义化的HTML正好是相反的。因为font标签没有任何结构上的意义,这样文档就非常乱,降低可用性。那这样做的目的只是为了满足视觉上的需求。但是带来了一下几个问题:

  • 非结构化的页面建立内容非常困难。小爬虫一进来就蒙了,标题呢?关键内容呢?怎么全是font,big?算了应该没有我要找的东西,我还是走吧....
  • 缺乏结构性会降低可访问性。前面也说了,只满足了视觉需求,那其他种类的浏览器,比如语音合成浏览器。
  • 高级页面表现只能应用于某种文档结构。
  • 结构化的标记更易于维护。

那CSS作为救星应运而生啦(1995年)。HTML负责结构化标记,CSS负责丰富表现,完美~~

CSS这么厉害,总结起来就是因为以下原因:

  • 丰富的样式
  • 易于使用。把一些视觉效果的命令都集中在一个方便的位置,而不是分散在文档的各个角落。
  • 在多个页面上使用样式。
  • 层叠。规定了一些冲突规则。
  • 缩减文件大小。
  • 为将来做准备。

时间: 2024-10-27 12:56:52

CSS权威指南学习笔记 —— 初步认识CSS的相关文章

CSS权威指南学习笔记系列(1)CSS和文档

题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对,请谅解和指出.谢谢大家.正文: 第一章 CSS和文档---------- 1.CSS,称为层叠样式表.使用CSS的理由有:a.易于使用,样式表能大大减少Web创作人员的工作量:b.在多个页面上使用样式,可以创建一个样式表,然后把这个样式表应用到多个页面:c.层叠,CSS还规定了冲突规则:这些规则统称

css权威指南学习笔记--第七章

由于之前一直没有系统的看过css相关的书籍,导致自己css方面一直都是处于零散状态.知其然,不知其所以然.所以买了<css权威指南>.虽然比较老了,但是应该也会收获很大. 1 水平方向上 margin-left +border-left+padding-left+width+padding-right+border-right+margin-right 其中红色的是可以设置为auto,当设置为auto时,浏览器会自动计算该值.基于的原则就是 外层包裹容器的width=被包裹元素的width+p

css权威指南学习笔记--第6章

line-height:定义文本行基线之间的距离 <p style="line-height: 20px;"> these are test words<br /> these are test words </p> 说到line-height就不能不说到行框中各个高度是怎么计算的,这里引用css权威指南中的图 文本行中的每个元素都会生成一个内容区,这由字体的大小确定.如果不存在其他因素(如line-height)那么这个内容区的高度就是行内框的高度

CSS权威指南学习笔记 —— HTML元素分类

HTML文档由各种元素组成.比如,p.table.span等等.每个元素都会对文档的表现有所影响.CSS中,每个元素都会生成一个框(传说中的盒子),其中包含元素内容. 元素可以根据它的创建方式分为两种:替换元素和非替换元素.创建方式会对盒模型的表现有所影响,后续的笔记中会看到. 替换元素:这种元素的内容部分并非由文档直接显示,而是用其他内容来替换.最常见的替换元素img,它是由文档本身之外的一个图片文件来替换的.input也是替换元素,是根据类型的值来决定内容是什么,有时内容被替换成单选钮,有时

css权威指南学习笔记

1,继承 一般大多数框模型属性都是不能继承的.如:padding .margin .border .background 都不能继承. 继承值,完全没有特殊性.(就是优先级最低) 2,缩进 text-indent: 属性 段落前空格.应用于块级元素 3,水平对齐: text-align   text-align:center 该属性只对元素中的内容进行位置的控制,标签<center>不仅控制内容位置,而且控制整个元素位置. 4,垂直对齐:  line-height,可应用于所有元素,可继承.

css权威指南学习笔记--列表与生成内容

列表属性 1.list-style-type:css2多于css2.1 2.list-style-image:有继承,子级列表会继承该图像 3.list-style-position:inside|outside|inherit   inside:列表符号在内容开始的地方,outside:列表符号单独列在列表内容的外面. 将前面三个属性合并:list-style ,有继承性,三个属性没有顺序要求,只有提供了一个值,其他值可以被忽略 例如:li {list-style:url(ji.gif) sq

css权威指南阅读笔记-第二章css选择器

css选择器有10+种.这里介绍几种常用的和他们的特点 1.元素选择器 如h1 h2 h3 a p 等一系列标签名 2 通配选择器 *,匹配所有html的元素 3 类选择器 class=‘a b'这种选择器在.a.b和.b.a是一样的,不区别先后顺序,另外类选择器区分大小写,class='A'在css中不能用.a匹配到,只能用.A匹配到 类选择器在页面中一般用于样式的复用 4 ID选择器 id选择器在页面中具有唯一性,并区分大小写,就是说box和BOX不是同一个ID 5 属性选择器 有4种模式

sencha touch权威指南---学习笔记5-经纬度获取计算直线距离

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <link rel="stylesheet" href="sdk-touch/resources/css/sencha-touch.

Git权威指南学习笔记(一)Git初始化

1.在Git中配置用户名和邮件地址 $ git config --global user.name "Jymn_Chen" $ git config --global user.email "[email protected]" 注意把用户名和邮件地址替换成你自己的资料. 在这里的参数global表示配置的作用范围是当前用户,如果将参数改为system,那么配置的作用范围是系统中的所有用户. 2.创建版本库 新建一个目录并cd到目录中,执行以下命令: $ git i