文本样式，CSS字体和背景

最新推荐文章于 2024-08-14 10:42:14 发布

Momosaki

最新推荐文章于 2024-08-14 10:42:14 发布

阅读量473

点赞数

分类专栏： 2019 文章标签： html css

本文链接：https://blog.csdn.net/Momosaki/article/details/108901567

版权

2019 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文本样式，CSS字体和背景

一、文本样式
二、字体
三、背景

一、文本样式

CSS的文本属性可以定义文本的外观。通过这些属性我们可以改变文本的颜色和字符间距等。

在设定样式之前我们需要了解一下，由于浏览器的默认样式会为页面中的元素添加一些padding和margin，具体这些是什么我们会在盒模型中了解到，在这里不作赘述。不过我们可以暂且认为他们是围在元素周围的一些空隙，他们会顶开其他元素，因此在style标签内最开始我们要这么设置

        *{
            padding: 0;
            margin: 0
        }

黄色这些就是margin

下面我们来介绍一些常用的文本属性

1、颜色 color

我们一般这样定义颜色属性

    p{
        color: red
    }

这样我们就为p标签定义了字体颜色为红色。

在css中，颜色的表示方法主要有四种，上面我们使用的是颜色名。下面我们介绍一下四种颜色表示法：

(1)使用颜色名

虽然现在已经命名的颜色约有一百八十四种，但是真正被各种浏览器支持，并且作为CSS规范推荐的颜色名称只有十六种，它们是

当然这并不是表示只有这十六种颜色名才可以使用，而是由于不同的浏览器，或者不同浏览器版本它们不一定支持所有的CSS属性的所有功能。

因此不建议在网页中使用颜色名，特别是大规模的使用，避免有些颜色名不被浏览器解析，或者不同浏览器对颜色的解释差异。

(2)rgb表示

RGB色彩模式是工业界的一种颜色标准，是通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

这是在某种绘画软件中的rgb取色条，通过这个我们可以更好得去理解rgb的三原色关系。现在该取色条表示的是白色。色条后面的三个数字255，rgb(255,255,255)，是最大值，显示白色。相反，可以设置为rgb(0, 0, 0)，将显示黑色。3 个数值相等将显示灰色，同理哪个数值大哪个原色的比重就会加大。

    p{
        color: rgb(0, 0, 0)
    }

这样就定义了字体颜色为黑色。

(3)rgba表示

rgba主要也是通过rgb（即前三个数字）来定义颜色。我们后面要多输入的那个数值表示的是透明度。它的取值范围是0~1，从零到一逐渐明显。

    p{
        color: rgb(0, 0, 0,0.5)
    }

(4)十六进制颜色码

    p{
        color: #ff6700
    }

注意要在颜色码前加上#

实际上十进制的 255 正好等于十六进制的 FF，一个十六进制的颜色值等于 3 组这样的十六进制的值，它们按顺序连接在一起就等于红、蓝、绿3种原色。原理仍旧是同rgb。

2、文本格式

text-align属性定义了文字的对齐方式,它有以下这些取值

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

最后一个属性，justify定义的是使文本两端对齐，不过他会带来它自己的一些问题。这里不作说明。

text-indent 属性规定文本块中首行文本的缩进。

允许使用负值。如果使用负值，那么首行会被缩进到左边。

设定该属性我们只需要输入想要缩进的距离的数值就好。我们可以直接设定缩进多少px，也可以用百分比缩进。百分比定义基于父元素宽度的百分比的缩进。

word-spacing属性增加或减少单词间的空白（即字间隔）。

CSS 把“字（word）”定义为任何非空白符字符组成的串，并由某种空白字符包围。这个定义没有实际的语义，它只是假设一个文档包含由一个或多个空白字符包围的字。支持 CSS 的用户代理不一定能确定一个给定语言中哪些是合法的字，而哪些不是。

        p {
            color: #ff6700;
            word-spacing: 30px;
        }

    <p>词间隔 word-spacing </p>

就比如这里我们的"字间隔"和“word-spacing”被定义为了两个“字”而被间隔开，但如果我们把p标签中的空格给删掉，那“字间隔word-spacing”又被定义为一个“字”了。

letter-spacing属性增加或减少字符间的空白（字符间距）。

该属性与word-spacing属性不同的是，这是给每个字符间设定间隔。

        p {
            color: #ff6700;
            letter-spacing: 30px
        }

white-space属性设置如何处理元素内的空白。

未设定的情况下，标签内的文本之间的空白符在浏览器页面中显示只有一个，也就是被忽略掉了。设定该属性后可以对空白符进行一些处理

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

text-shadow属性为文本添加字体阴影。

对这个属性我们需要依次输入四个值，从左往右分别是横向位移，纵向位移，模糊距离，阴影颜色。

        p {
            text-shadow: 5px 5px 5px #ff6700
        }

text-decoration属性规定添加到文本的修饰。

这个属性没什么特殊的，我们只需要了解他的值对应的是什么样式。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

text-transform属性控制文本的大小写。意思就是对一些英文文本，我们可以改变他们的大小写。这里也是只需要对值及其对应的效果结合理解就好

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

二、字体

我们使用font-family属性为元素中的字体定义字体样式。这里的字体样式就是我们在使用word文档时的选择的楷体、宋体的字体样式

可以看到，这里有着许多的字体可供我们选择。

当然，我们也可以使用网上下载下来的字体文件。不过我们要这么去引用它们

@font-face{src:url(字体文件路径);font-family:'起的名字'}

我们也有几种属性可以用于定义字体。

字号 font-size

该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。

该属性的值我们一般选择带单位的具体数值，比如“20px”等。除了px单位的值外，我们也可以选择pt（磅）或者em（倍）为单位的数值。其中需要注意一下的是em是设定字体大小为默认大小的几倍。

默认大小我们可以这么设置

直接设置，如body{font-size：14px;}，换算仅需将需要的大小，如28px，进行如28/14=2em的计算即可。

body{font-size:14px;}
.d1{
    font-size:2em;     /*字体大小为28px*/
}

字重 font-weight

字重属性的值为数字，没有单位。选择100到900整百位数一共九个数。数值越大字体线条越粗，越小越细。一般默认样式中的字重为400。

小型大写字体 font-variant:small-caps

设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

三、背景

下面我们来介绍一些可以为元素背景定义的样式。

背景色

该属性可以为元素背景填充颜色，我们只需直接像color属性一样输入具体颜色就可以了。

CSS

 div{
     width: 200px;
    height: 200px;
    background-color: springgreen
        }

除了纯色背景之外，我们还可以定义渐变色背景颜色。不过这是我们就不是使用background-color，而是background属性了。

        div{
            width: 200px;
            height: 200px;
            background: linear-gradient(to right,#33539e,#7facd6)
        }

括号内的三个值分别为颜色线性变化方向，开始颜色，结束颜色。

背景图片

当我们要为元素添加背景图片时，我们使用的是background-image属性，定义图片时我们只需要这样写

    background-image：url(图片路径)

背景尺寸

当你为元素添加背景图片时，会由于父容器大小与图片大小不相同而可能没办法表现出你想要的效果，这时我们可以使用background-size属性为背景设置大小，以达到我们想要的效果。

我们可以直接设置背景图像的宽高，只需要依次输入两个具体数值，第一个设置宽度，第二个设置高度。如果只设置一个值，则第二个值会被设置为 “auto”，也就是根据已经设置的第一个值来自适应大小。

除了具体数值之外还有一些值我们可以使用

值	描述
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

背景图片是否重复

我们可以通过background-repeat属性定义我们的背景图片在父容器中是否重复。

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

背景图片位置

比如我们想让背景图片在不填充满父容器的情况下位于父容器内某一特定位置的时候，我们可以使用background-position属性。对该属性的值，我们除了可以使用top，bottom，left和right这四个值外，还可以直接使用百分比定义具体位置。

不过这里有一点不同的是，其他属性的百分比换算为实际距离时i，一般是参照父容器的宽高来换算的。此处的百分比是参考父容器的宽高减去图像的宽高的剩下距离来换算的。

因此当图像铺满整个父容器时，再用百分比定义位置时不生效的原因了。

设置固定的背景图像

属性background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

它常用的的有三个值

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

滤镜

CSS的filter属性堪称为滤镜，虽然没有ps那么强大，但是如果能利用得好也能发挥十分强大的作用。

我们来介绍一下filter属性的值

值	描述
grayscale	灰度
sepia	褐色
saturate	饱和度
hue-rotate	色相旋转
invert	反色
opacity	透明度
brightness	亮度
contrast	对比度
blur	模糊
drop-shadow	阴影