• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏跨境李逍遥吧

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

学习 hulk 6年前 (2018-08-27) 745次浏览 0个评论 扫描二维码

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

CSS 学习(二)

今天继续CSS的学习,会涉及到具体的规则和属性。过两天需要设置的样式表内容,就在今天的学习内容里面了。

CSS 背景

CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。可以为所有元素设置背景色。

background-color 不能继承,其默认值是 transparent。如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。

要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个 URL 值。

可以为任何元素设置背景图像,而不仅仅是body,background-image 也不能继承。所有背景属性都不能继承。

如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。默认地,背景图像将从一个元素的左上角开始。

可以利用 background-position 属性改变图像在背景中的位置。

根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 – 一个对应水平方向,另一个对应垂直方向。如果只出现一个关键字,则认为另一个关键字是 center。

百分数值同时应用于元素和图像。如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响。background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。

CSS 文本

CSS 文本属性可定义文本的外观。通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。

把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。

text-indent 还可以设置为负值。利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边。不过在为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距。

text-indent 可以使用所有长度单位,包括百分比值。百分数要相对于缩进元素父元素的宽度。text-indent 属性可以继承。

text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。

将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。

word-spacing 属性可以改变字(单词)之间的标准间隔。letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。text-transform 属性处理文本的大小写。

text-decoration 属性会起到文本装饰的作用,但是需要注意一个事项:text-decoration 值会替换而不是累积起来

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。

direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。

CSS 字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。

使用 font-family 属性 定义文本的字体系列。建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路,在用户代理无法提供与规则匹配的特定字体时,就可以选择一个候选字体。把这些字体按照优先顺序排列,然后用逗号进行连接。

当字体名中有一个或多个空格(比如 New York),或者字体名包括 # 或 $ 之类的符号,需要在 font-family 声明中加引号。单引号或双引号都可以接受。但是,如果把一个 font-family 属性放在 HTML 的 style 属性中,则需要使用该属性本身未使用的那种引号。

font-style 属性最常用于规定斜体文本。

font-variant 属性可以设定小型大写字母。

font-weight 属性设置文本的粗细。使用 bold 关键字可以将文本设置为粗体。如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。

font-size 属性设置文本的大小。请始终使用正确的 HTML 标题,比如使用<h1><h6> 来标记标题,使用 <p> 来标记段落。如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。通过像素设置文本大小,可以对文本大小进行完全控制。

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。

CSS 链接

能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)。链接的特殊性在于能够根据它们所处的状态来设置它们的样式。链接的四种状态:a:link – 普通的、未被访问的链接;;a:visited – 用户已访问的链接;a:hover – 鼠标指针位于链接的上方;a:active – 链接被点击的时刻。

当为链接的不同状态设置样式时,请按照以下次序规则:a:hover 必须位于 a:link 和 a:visited 之后,a:active 必须位于 a:hover 之后。

CSS 列表

CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。从某种意义上讲,不是描述性的文本的任何内容都可以认为是列表。

要影响列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型。在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中,标志可能是字母、数字或另外某种计数体系中的一个符号。

有时,常规的标志是不够的。你可能想对各标志使用一个图像,这可以利用 list-style-image 属性做。

利用 list-style-position可以确定列表标志的位置。

CSS 表格

CSS 表格属性可以极大地改善表格的外观。需在 CSS 中设置表格边框,使用 border 属性。border-collapse 属性设置是否将表格边框折叠为单一边框。

通过 width 和 height 属性定义表格的宽度和高度。text-align 和 vertical-align 属性设置表格中文本的对齐方式。如需控制表格中内容与边框的距离,请为 td 和 th 元素设置 padding 属性。

CSS 轮廓

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

以上内容,还是和之前一样,做了一个简单的记录。至此CSS的学习也就结束了。强烈建议需要的朋友去W3School官网学习:简单易懂,深入浅出,非常适合学习。

明天去研究一下图片的处理方式,这两天听到图床这个词,但是我不太明白是什么意思。总之目前进度还行,学习的这些知识也能应用于自己的博客领域,这就非常有价值了。

需要克服的一个问题就是有时候会耽误正常工作时间,一般工作时间到晚上十点,这些天为了写作,一般八九点就开始了,对正常的工作产生了一些影响。想把写作时间调整为早晨早餐前,但是一直没能成功早起。有点尴尬啊。从这个影响来看,坚持写公众号已经进入了第二阶段了。也就是进入了不稳定期,需要建立有效的行动机制才能更轻松的坚持下去。恩,加油!

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

今日语录:

人生第一快乐是做到自己认为自己做不到的事,人生第二快乐是做到别人认为自己做不到的事。—李敖


本文标题:公众号文章排版学习(六)
转载请保留页面地址:https://www.hulklee.com/wechat-article-layout-part-6/
喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址