第5章-css选择器初级和背景

最新推荐文章于 2021-03-18 18:35:35 发布

活好女

最新推荐文章于 2021-03-18 18:35:35 发布

阅读量247

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/dairenwu/article/details/78111170

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了CSS中ID选择器与Class选择器的主要区别，强调了ID的唯一性和权重高于Class的特点。同时，讲解了背景样式的设置，包括如何指定背景颜色、重复方式和定位，并提示了百分比值在设定背景位置时的默认行为。

摘要由CSDN通过智能技术生成

一、ID选择器与Class选择器的区别

区别 1：ID选择器只能在文档中使用一次,.
class类选择器可以多次使用。
区别 2： id的权重大于class类的权重

二.background背景样式

1.background-color:规定要使用的背景颜色
    十六进制值  #CC0066      #000
    英文单词里颜色值  red  gray blue yellow 
    Rgba 表达法   (css3) 
    Hsla 表达法

2.background-image:把图像设为背景图片
    url("地址")  引用背景图片的地址
    none  不使用背景图片

3.background-repeat:规定如何重复背景图片
    repeat:默认。背景图像在水平和垂直方向均重复
    repeat-x:背景图片在水平方向重复
    repeat-y:背景图片在垂直方向重复
    no-repeat:背景图片只显示一次，不重复

4.background-position：规定背景图片位置
    ① 使用关键字：top、bottom、left、right 和 center两两组合而成     
ps:如果只出现一个关键字，则认为另一个关键字是 center

    ②百分数值  （水平%   竖直%)
    background-position：20% 30%；

ps:如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为50%

③具体的值  （水平px   竖直px)
background-position:20px 30px;

5.background-attachment:背景关联
scroll 滚动 
fixed 不动 
inherit 继承父级属性


6.background-size:背景图片的大小

background-size:600px 300px;
/*显示的是图片的真实大小*/
background-size:auto;
background-size:cover;（盖→图片有时会显示部分）
background-size:contain;（包含→图片会全部显示）√

7.background:综合样式控制
    background: url("") red  no-repeat   2px  5px;

（路径背景颜色重复位置;）