第六篇 CSS样式背景、背景图、文本、链接

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

元素背景、文本(字体)样式、链接

这里我们只学习常用的一些，更多的扩展就要同学们自己去了解，或者下方评论。

这里我们为了简便，用的是CSS的内嵌形式。

元素背景：

我们写模块的时候，有的时候为了区别多个模块，我们会采用一些明显的方式，比如背景(background)。

背景颜色：

<div style="background:#dedede;">我是浅灰色背景</div>

因为div是块级元素，所以背景会覆盖整行，那么我们我们将 div换成span试试呢

<span style="background:#dedede;">我是span浅灰色背景</span>

换成行级元素，它的宽，只有它内容那么大。

背景图片：

同学们要看好格式哦，image是图片，url则是地址，里面的文件名要用单引号或双引号包起来，否则会报错，因为我们是内嵌形式，所以不能用双引号。但是这里有问题，图片不出来，是没找到图片，还是没有图片，还是这句话有错呢？答案是，图片找到了，也出来了，只是它是背景图片，是作为一个背景存在的，如果你div里面没有内容，那它则也不显示出来。那我们再给div加内容：

<div style="background-image: url('949282.jpg');">我这里有背景图</div>

这样的话，背景图就会出现，但是只有一行，并不是图片本身那么大(高)，那么怎么办呢？我们可以去检查图片的高度，然后给div一个高度：

我这里的1200px，是老师演示的图片的高度，同学们可以自己照一张图片，看它的大小做一下测试，这样图片就会铺满它的高度，它还会自动去匹配它的宽度，如果它本身是1920px(宽)*1200px(高)，你设置了它的高1200，那么他会自动设置宽为1920px。我们拉动浏览器，图片不会变小，而是少去一部分，那么我们再给它加一个属性：

background-size 是指它的大小，那么我们给了两个 100% 就是说，第一个它的宽度是页面的100%，第二个是高度为100%，如果少给一个100%，它的高则会随着页面而变化，则会形式“重复”，图片会变多，沾满这个div的高。

那么举一反三，行级元素用背景图，会怎么样呢？同学们自己试试。

文本样式：

<div style="color:red;">我是红色的字</div>

<div style="font-weight: 700;">我是加粗的字</div>

<div style="font-size: 21px;">我是设置过了大小的字</div>
<div style="text-decoration: overline;">我是有顶划线的</div>

<div style="text-decoration: line-through;">我是被删除的字</div>
<div style="text-decoration: underline;">我是有下划线的</div>

链接：

超链接 a标签，它还有几个属性，其他标签也可以使用，但因为其他标签没有跳转的操作，所以属性不能完全测试，需要用到之后的js动态才行，所以这里我们还是用a标签来演示：

这里使用的是内联或外联。

css：

a:hover{
/*这里我们采用元素控制器，在其后方跟 :hover 意思是：鼠标指针位于链接的上方*/
color:red;
}
a:link{
/*这里我们采用元素控制器，在其后方跟 :link 意思是：普通的、未被访问的链接*/
color:fuchsia;
}
a:visited{
/*这里我们采用元素控制器，在其后方跟 :visited 意思是：用户已访问的链接*/
color:#ffff00;
}
a:active{
/*这里我们采用元素控制器，在其后方跟 :active 意思是：链接被点击的时刻*/
color:darkcyan;
}

html：

<a href="aa.html">我是超链接</a>