CSS常用（1）背景、字体、链接

目录

背景:

背景颜色

背景图片

文本

文本颜色

文本对齐

文本修饰

文本转换

文本缩进

文本阴影

文本垂直对齐

文本字体间距 

字体系列

字体样式

字体大小

链接

链接不同状态

链接样式

---

背景:

背景颜色

选择背景颜色有三种方式，第一种的就是使用16进制来进行选择，第二种的使用RGB，第三种使用颜色名称,一般直接使用颜色名称的比较多。

h1{
    background-color:"red";
}

背景图片

默认的情况下，背景图片会进行平铺重复显示，会覆盖整个元素实体

img{
    background-image:url("./name.png");
}

repeat这个单词的意思就是重复，所以整个背景图片会平铺重复的显示，所以有时候我们也会使用repeat-x或者repeat-y进行横向平铺或者纵向平铺， 这样就可以控制图像在不同方向上显示图片

img{
    background-repeat:repeat-y;
    background-repear:repeat-x;
}

如果你不想平铺图片，就不会将背景图片重复的显示，设定就可以可以只有一个图片且不重复。

img{
    background-repeat:no-repeat
}

最后图片的一个操作属性就是对图片的一个定位，我们可以通过background-position来对图片进行定位,要让图片进行上下的浮动，必须设定background-attachment: fixed这样才能让图片动起来！

img{
    background-attachment: fixed;
    background-position: 0% 0%;
}

文本

文本颜色

设定当中的文本的颜色，就直接控制color属性就可以直接获取文本的颜色

div{
    color:red;
}

文本对齐

文本对齐的方式有设置为，向左对齐、向右对齐、居中和宽度相等展开对齐这几种

div{
    text-align:center;
    text-align:left;
    text-align:right
    text-align:justify; //这种居中可以自己尝试是怎样的显示效果
}

文本修饰

text-decoration很多时候是用来删除链接的下划线，这样使用a标签的时候就没有下划线了，不过也有其他的文本装饰方式，overline、line-through、underline设置文本的下划线分别在上面、里面、下面

a{
    text-decoration:none;
}

div{
    text-decoration:overline;
    text-decoration:line-through;
    text-decoration:underline;
}

文本转换

通过text-transform的属性可以将所有字句变成大写或小写字母，或每个单词的首字母大写。uppercase、lowercase、capitalize，就可以实现这三种文本转换方式

div{
    text-transform:uppercase;
    text-transform:lowercase;
    text-transform:capitalize;
}

文本缩进

text-indent的属性跟上数值可以控制，第一行的文本缩进(这里就相当于第一行缩进了100px)

div{
    text-indent:100px
}

文本阴影

text-shadow,给文本设置阴影，设置的阴影可以根据后面的参数进行调整，第一个参数为横向的阴影位置，第二个为阴影的纵向位置，第三个参数为阴影的颜色

div{
    shadow:10px 10px black
}

文本垂直对齐

vertical-align设置文本的垂直对齐，可以将其设置为行内元素的基线相对于该元素所在行的基线的垂直对齐，具体可以设置为以下这些。

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	使元素及其后代元素的底部与整行的底部对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	将元素升高或降低指定的高度，可以是负数。
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

文本字体间距 

word-spacing属性增加或减少字与字之间的空白

div{
    word-spacing:30px;
}

字体系列

font-family系列设定的字体的种类实在是太多了，可以去其他地方仔细看看有什么，这里就不列举了

字体样式

font-style通常使用的就这三种正常字体、斜体、倾斜的文字（和斜体非常类似，但不太支持）

div{
    font-style:normal;
    font-style:italic;
    font-style:oblique;
}

字体大小

font-size设置字体的大小

div{
    font-size:20px
}

链接

链接不同状态

有四个状态，分别是： ①正常，未访问过的链接②用户已访问过的链接③当用户鼠标放在链接上时④链接被点击的那一刻，这里需要注意！！！hover 必须在 link 和 visited 之后，需要严格按顺序才能看到效果，active 必须在 hover 之后。

a{
    link: yellow
    visited: blue
    hover: red
    active: green
}

上面讲述了文本的装饰，而链接的装饰也是大同小异的

链接样式

text-decoration也同样可以使用在链接的样式上，这里就不多说了