公众号文章排版学习(五)

CSS 学习

今天是学习公众号文章排版第五天,按照计划今天会学习CSS的基本内容。下面就是具体学习内容。

CSS 简介

学习CSS的前提需要对HTML和XHTML有基本的了解。所以还不清楚的,就先去看一下昨天的HTML学习文章。

CSS 指层叠样式表 (CascadingStyleSheets)。样式的作用是定义如何显示HTML 元素,通常存储在样式表中。外部样式表可以极大提高工作效率,外部样式表通常存储在CSS 文件中。

通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。

当同一个 HTML 元素被不止一个样式定义时,内联样式(在 HTML 元素内部)优先于标签中的样式声明,优先于外部样式表中的样式声明,优先于浏览器中的样式声明。

这样的话如果我们对一个CSS样式表进行设置后,还是可以具体的再次定义一个具体元素的样式,而不需要对CSS表进行更改。这样就大大的提高了效率。

CSS 基础语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。使用花括号来包围声明。

值有不同的写法和单位。比如十六进制、CSS的缩写、数值、百分比。如果值为若干单词,则要给值加引号。如果要定义不止一个声明,则需要用分号将每个声明分开。

最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号,但是有经验的设计师会在每条声明的末尾都加上分号,这么做的好处是,当你从现有的规则中增减声明时,会尽可能地减少出错的可能性。应该在每行只描述一个属性,这样可以增强样式定义的可读性。

是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

反正HTML和CSS语法的相关信息都尽量使用小写就好了。

CSS高级语法

你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。

通过 CSS 继承,子元素将继承最高级元素所拥有的属性,如果不希望继承的话创建一个针对 p元素的特殊规则,这样它就会摆脱父元素的规则。

CSS 派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。

CSS id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。id 属性只能在每个 HTML 文档中出现一次。

在现代布局中,id 选择器常常用于建立派生选择器。

CSS 类选择器

在 CSS 中,类选择器以一个点号显示。类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。和 id 一样,class 也可被用作派生选择器。

CSS 属性选择器

可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

CSS 创建

当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用

标签链接到样式表。

标签在(文档的)头部。目前来说我的博客应该需要设置此部分的内容。不要在属性值与单位之间留有空格。

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用标签在文档头部定义内部样式表。

当样式仅需要在一个元素上应用一次,使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。

如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

和昨天一样,还是做一个简单的记录过程。看完了HTML,看CSS会觉得不是那么难以理解。另外就是看完HTML和CSS觉得完全可以应用到博客网页布局和排版中,似乎不仅仅应用于公众号排版,这对我来说也算一个意外的收获了。

希望以上内容对你有所帮助。

今日语录:

一个人只有在全力以赴的时候才能发挥最大的潜能

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180827G0024T00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券