1.背景属性
通过 CSS 背景属性,可以给页面元素添加背景样式,包括背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定、背景图片缩放等。
1.1 背景颜色
background-color 属性定义了元素的背景颜色。
一般情况下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色。
背景颜色 ,一样可以使用三种方式——分别为具体的英文颜色/十六进制/rgb形式*
1.2 背景图片
background-image 属性表示元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)
背景图片属性有两个属性值,默认为无背景图none; 属性值url(),括号里面为背景图片的地址.
1.3 背景平铺
background-repeat 属性表示在 HTML 页面上对背景图像进行平铺。
①属性值 repeat表示背景图片沿水平和垂直两个方向分别平铺,为默认值;
②属性值no-repeat表示背景图片不平铺,只显示一次;
③属性值repeat-x表示背景图片只沿水平方向平铺;
④属性值repeat-y表示背景图片只沿垂直方向平铺;
1.4 背景图片位置
background-position 属性可以改变图片在背景中的位置
① background-position: x y;中的x表示水平位置,y表示垂直位置, 默认为x和y均为0;越向右向下,x和y的值越大
②如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中 。
③可以使用百分比表示背景图片的位置, 相对于盒子的宽度高度来说的,比如这里的30%指的就是这个背景图片所处盒子的30%。
④可以使用方位词表示背景的位置 ,如: right、left、center、top、bottom ;
⑤如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐;
⑥x轴的位置属性和 y轴的位置属性 也可以分开写。
1.5 背景图像固定(背景附着)
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
①属性值scroll表示背景图像是随对象内容滚动的;
②属性值fixed表示背景图像固定。
1.6 背景图像缩放
background-size 属性k可以设置背景图像的大小。 这个属性是CSS3特有的,之前的版本不具有.
①属性值为: 长度|百分比|cover|contain;
②属性值设置成百分比时 这个百分比是相对于盒子而言的,比如background-size: 60% 60%;则表示这个背景图片占这个盒子宽度的60%,高度的60%;
③若background-size只指定一个精确值,那么这个值指的是宽度,高度省略了,则表示为等比例缩放;比如background-size: 60%; 其实等价于 background-size: 60% auto;
④属性值cover,表示把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,实行的是等比例缩放,可能有部分背景图片显示不全
⑤属性值contain, 表示把当宽度或高度,有一者铺满盒子时就不再进行拉伸了,实行的是等比例缩放,可能有部分空白区域。
2.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。
2.1 链接伪类选择器的语法
2.2 注意点:
① 为了确保生效,请按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。
②记忆法:love hate 或者 lv 包包 hao 。
③因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。