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

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

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

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

 

元素背景：

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

背景颜色：

 

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

 

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

 

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

 

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

背景图片：

 

<div style="background-image: url('949282.jpg');"></div>

 

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

 

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

 

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

 

<div style="background-image: url('949282.jpg');height:1200px;"></div>

 

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

 

<div style="background-image: url('949282.jpg');height:1200px;background-size: 100% 100%;"></div>

 

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

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

 

文本样式：

 

<div style="color:red;">我是红色的字</div>
<!--font-weight 是设置字体的粗细，值区间为 100-900  越高字体越粗-->
<div style="font-weight: 700;">我是加粗的字</div>
<!--font-size 是设置字体大小的，单位有px em等-->
<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>