zoukankan      html  css  js  c++  java
  • CSS 教程Part2 [背景、文本、字体](摘录自 W3C School)

    CSS 背景

    CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。

    背景色

    可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。

    p {background-color: gray;}

    image

    image

    背景图像

    要把图像放入背景,需要使用 background-image 属性。如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:

    body {background-image: url(/i/eg_bg_04.gif);}

    大多数背景都应用到 body 元素,不过并不仅限于此。

    image

    image

    背景重复

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

    body {

        background-image: url(/i/eg_bg_03.gif);

        background-repeat: repeat-y;

    }

    image

    image

    背景定位

    可以利用 background-position 属性改变图像在背景中的位置。下面的例子在 body 元素中将一个背景图像居中放置:

    body {

        background-image:url('/i/eg_bg_03.gif');

        background-repeat:no-repeat;

        background-attachment:fixed;

        background-position:center;

    }

    把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

    image

    image

    百分数值

    百分数值的表现方式更为复杂,百分数值同时应用于元素和图像。

    假设你希望用百分数值将图像在其元素中居中:background-position:50% 50%

    假设你希望用百分数值将图像在其元素右下角:background-position:100% 100%

    长度值

    长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。

    背景关联

    如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。

    您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:

    image

    image

    CSS 文本

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

    缩进文本

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

    p {text-indent: 5em;}

    注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。

    提示:如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。

    image

    image

    水平对齐

           text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。

    text-align:center 与 <CENTER>

           您可能会认为 text-align:center 与 <CENTER> 元素的作用一样,但实际上二者大不相同。<CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。

    justify

           最后一个水平对齐属性是 justify。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。两端对齐文本在打印领域很常见。

    image

    image

    字间隔

    word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

    image

    字母间隔

    letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。

    image

    image

    字符转换

    text-transform 属性处理文本的大小写。作为一个属性,text-transform 可能无关紧要,不过如果您突然决定把所有 h1 元素变为大写,这个属性就很有用。不必单独地修改所有 h1 元素的内容,只需使用 text-transform 为你完成这个修改。

    image

    image

    文本装饰

    接下来,我们讨论 text-decoration 属性,这是一个很有意思的属性,它提供了很多非常有趣的行为。通常,无装饰的文本是默认外观,但也不总是这样。例如,链接默认地会有下划线。如果您希望去掉超链接的下划线,可以使用以下 CSS 来做到这一点:

    a {text-decoration: none;}

    image

    image

    处理空白符

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

    image

    image

    文本方向

           如果您阅读的是英文书籍,就会从左到右、从上到下地阅读,这就是英文的流方向。不过,并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的,当然还包括希伯来语和阿拉伯语等等。

           direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的为止。

    image

    image 

    CSS 字体

    CSS 字体属性

    font:字体综合属性

    在一个声明中设置所有字体属性。(字体众多属性的综合写法

    image 

    font-family:规定元素的字体系列

    image

    image

    font-size:属性可设置字体的尺寸。(实际上它设置的是字体中字符框的高度

    image

    image

    font-style:属性定义字体的风格

    image

    image

    font-weight:属性设置文本的粗细(数字值 400 相当于 关键字 normal,700 等价于 bold

    image

    image

  • 相关阅读:
    unsupported jsonb version number 123
    如何在MPlayer上支持RTSP
    TDengine 时序数据库的 ADO.Net Core 提供程序 Maikebing.EntityFrameworkCore.Taos
    如何使用IoTSharp对接ModBus?
    如何从源码启动和编译IoTSharp
    Asp.Net Core 自动适应Windows服务、Linux服务、手动启动时的内容路径的扩展方法
    MQTTnet 的Asp.Net Core 认证事件的扩展
    Asp.Net Core 中利用QuartzHostedService 实现 Quartz 注入依赖 (DI)
    The remote certificate is invalid according to the validation procedure 远程证书验证无效
    settings插拔式源码
  • 原文地址:https://www.cnblogs.com/SkySoot/p/2452983.html
Copyright © 2011-2022 走看看