CSS--background系列属性

html-css040

CSS--background系列属性,第1张

css2.1中,颜色的表示方法有三种:(1)单词;(2)rgb表示法(十进制表示法);(3)十六进制表示法。

能够用英语单词来表述的颜色,都是简单颜色。

红色:background-color: red

红色:background-color:rgb(255,0,0);

rgb(red、green、blue)表示三原色“红”“绿”“蓝”。光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色。

用逗号隔开r,g,b的值,每个值的取值范围是0~255,一共256个值。

如果此项的值是255,那么就说明是纯色:

绿色:background-color:rgb(0,255,0)

蓝色:background-color:rgb(0,0,255)

黑色:background-color:rgb(0,0,0)

白色:background-color:rgb(255,255,255)

颜色可以叠加,比如黄色就是红色和黄色的叠加:

黄色:background-color:rgb(255,255,0)

紫色:background-color:rgb(255,0,255)

青色:background-color:rgb(0,255,255)

红色:background-color:#ff0000;

所有用#开头的值,都是16进制的。

#ff0000(ff表示r,00表示g,00表示b)

16进制表示法和rgb类似,也是两位两位的看,但是没有逗号隔开。

上述红色表示法中:ff就是10进制的255,00就是十进制的0,所以#ff0000相当于(255,0,0)

十六进制对照表:

任何一种十六进制表示法都能够换算成rgb表示法。也就是说,两个表示法能表示的颜色数量一样多,十六进制能够简化成3位,所有#rrggbb的形式,都可以写成#rgb;

比如,上述的红色可以写成background-color:#f00;

但是,如果要采用简化的方法,必须满足rrggbb格式才行。

几个特殊的要记住:

黑:#000

白:#fff

红:#f00

灰:#333

深灰:#222

浅灰:#ccc

background-image属性用于给盒子加上背景图片:

background-image:url(images/1.jpg)

url()表示网址。、

images/1.jpg就是相对路径。

背景会默认循环,平铺满整个盒子,padding的区域也会有背景图。

background-repeat属性用来设置背景图是否重复以及重复方式。

“repeat”表示“重复”。

默认为铺满,不用设置。

不重复:background-repeat:no-repeat;

横向重复:background-repeat:repeat-x;

纵向重复:background-repeat:repeat-y;

background-position:背景定位属性。

格式:background-position:向右移动量(100px) 向下移动量(200px)

向上向左移只需把移动量改成负数即可。

css精灵又叫“css雪碧”技术,是一种css图像拼合技术,该方法是将小图标和图像合并到一张图上,然后利用css背景定位来显示需要显示的图片部分。

css精灵的优点,就是减少了http请求。比如4张小图片,原本需要4个http请求。但是用了css精灵,小图片变为了一张图,http请求只有1个了。

background-position:描述左右的词 描述上下的词;

比如:background-position:right bottom:(右下角)

background-position:center center;(居中)

背景固定属性。

格式:background-attachment:fixed;

背景就会被固定住,不会被滚动条滚走。

background属性和border一样,是一个综合属性:

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于:

background-color:red;

background-image:url(1.jpg);

background-repeat:no-repeat;

background-position:100px 100px;

background-attachment:fixed;

可以任意省略部分:

background:red;

雪碧图被运用在众多使用了很多小图标的网站上。

相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更好。

一、使用雪碧图的优点有以下几点:

将多张图片合并到一张图片中,可以减小图片的总大小。

将多张图片合并成一张图片后,下载全部所需的资源,只需一次请求。可以减小建立连接的消耗。

二、雪碧图的制作与使用方法:

使用图像编辑软件如Photoshop将多张图放到同一个图层并导出。

使用自动化构建工具自动拼接合并后的图片。

引用图片时,图片地址为合并后的图片地址。

实际应用,更多的使用italic属性值

实际应用中, 行高的数值通过设计图获取, 量取数值时需要使用一些辅助软件工具

选中文字工具,属性选中:不消除锯齿

字体、 字号、 行高、 加粗、 斜体 都是font综合属性的单一属性。

font属性五个单一属性的值可以进行合写, 属性值可以有2到多个, 值之间用空格进行分隔。

font进行综合书写时, 必须有字号和字体参与, 而且必须字号在前, 字体在后, 不能颠倒顺序。

font属性经常对字体、 字号、 行高进行合写, 书写顺序必须是字号、 行高、 字体, 字号和行高之间必须用/进行分隔

如果font属性需要设置加粗和斜体, 两个属性值只能写在最前面, 两个值之间可以互换位置。 后面的字号、 行高、 字体不能更改位置

作用:设置文本整体是否有线条的装饰效果

作用:设置段落首行是否进行缩进

实际应用中,常用em

属性值区分正负, 正数表示向右缩进, 负数表示向左缩进

浏览器控制台中的盒模型图

作用: 设置可以添加元素内容的区域的宽度。

作用: 设置可以添加元素内容的区域的高度。

如果一个元素不添加 height 属性, 默认属性值为auto, 浏览器会自动计算出实际高度, 也就是是内部元素内容自动撑开的高度。 元素的高度自适应内部内容的高度。

书写四个方向单一属性时, 一般是按照顺时针规律书写: 上、 右、 下、 左

设置四个属性值, 分配方向上、 右、 下、 左。

设置三个值分配给上、 左右、 下。

设置两个值, 分配给上下、 左右 。

设置属性值只有一个, 四边的值相同。

作用: 设置边框的颜色。

属性值: 颜色名或颜色值, 整体类似 padding 综合属性写法。

每个单一属性都必须与复合属性 border 一致, 设置三个属性值。

书写四个方向单一属性时, 一般是按照顺时针规律书写: 上、 右、 下、 左

设置四个属性值, 分配方向上、 右、 下、 左。

设置三个值分配给上、 左右、 下。

设置两个值, 分配给上下、 左右 。

设置属性值只有一个, 四边的值相同。

给 <body>标签设置整体文字样式, 让大部分后代标签全部去继承

设计图中盒子高度占位是固定的, 后面同级元素在高度下面加载。多余内容会溢出盒子。

设置了高度的盒子, 如果内部元素的加载高度超过父级, 会溢出。可以通过一个溢出的属性 overflow, 进行溢出部分内容的显示效果设置。

要求盒子高度必须自适应内部内容的高度。

或者设置height的属性值是自动的。

一个元素内部嵌套的子元素, 在父元素中居中。

针对类似 <div>样式上必须独占一行的盒子, 如果子盒子宽度低于父盒子宽度, 可以设置子盒子的 margin 值, 水平方向的值都设置为 auto。

原因: auto 只在水平方向有作用, 水平方向的 margin 如果设置为 auto, 边距会自动无限增大, 直到撑满整个父元素除了子元素宽度之外剩余的区域, 如果两个水平方向都是 auto, 两边都要无限大, 只能达到一个平衡, 两边距离相同, 导致盒子居中。

一般情况下, 一个父元素内部可以放一个或多个子元素, 而且多个子元素要排成一行显示, 必须保证父元素的宽度一定要足够(不考虑溢出情况) , 需要遵循一个设置尺寸的规律: 所有子元素的宽度加在一起不能大于父元素的宽度 width。父元素的width ≥ 所有子元素width + padding + border + margin

如果不满足条件: 要么多余的子元素掉下来不能在一排, 要么溢出父元素

父子盒模型中, 只有一个子元素, 且子元素是类似 <div>标签必须占一行的。不设置子元素的 width 属性, 子元素的 width 属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的 padding 和 border 、 margin, 不需要手动去进行内减, 子元素的 width 会自动收缩尺寸。

子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。

在垂直方向如果有两个元素的外边距有相遇的, 浏览器中加载的真正的外边距不是两个间距的加和, 而是两个边距中值较大的, 边距值小的塌陷到了边距值大的值内部。

上面的元素有下边距, 下面的元素有上边距, 两个边距相遇, 真正的盒子间距离是较大的那个值

父子元素之间也会出现 margin 塌陷, 父元素和子元素都设置了同方向的margin-top 值, 两个属性之间没有其他的内容进行隔离, 导致两个属性相遇, 发生margin 塌陷。

本身父元素与上一个元素的距离是0, 子元素如果设置了垂直方向的上边距, 会带着父级一起掉下来。

水平方向的 margin 没有塌陷现象。

在标准流中, 大部分元素是区分等级的, 习惯将元素划分为几种常见的加载级别:块级元素、 行内元素、 行内块元素等。

大部分容器级标签包括p标签都是块级元素, 比如 <div>、 <h1>等。

大部分的文本级标签, 比如 <span>、 <a>、 <b>等。

比如 <img>、 <input>等。

可以通过 display 属性更改一个标签的显示模式。

属性值: 元素根据属性值不同, 可以加载对应元素等级的显示模式的特点。

display 属性更改的显示模式并没有改变标准流本质性质, 页面还是只能从上往下加载, 存在空白折叠现象等微观性质。 要想实现更多的界面布局效果需要脱离标准流的限制。

标签元素脱离标准流的方法包括: 浮动、 绝对定位、 固定定位。

margin 塌陷现象出现在标准流中的, 浮动元素已经脱离标准流, 不再具有 margin塌陷现象。

与前面压盖效果结构类似, 同级元素中前面的元素浮动, 后面的元素不浮动, 不浮动的元素内部还有一些文字, 浮动的蓝盒子会压盖住粉盒子的一部分, 但是文字内容不会被盖住, 粉盒子中的文字会让开蓝盒子位置, 围绕它进行加载。这种效果称为字围现象。

可以利用字围现象制作一些特殊的图文混排布局效果

给标准流的父元素强制给一个合适的高度

作用: 清除标签元素自身受到的前面的浮动元素的影响。

给标准流父元素添加 clear 属性, 父元素不受前面浮动影响, 不会再占有浮动让出的位置。

给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden属性, 可以解决浮动的所有问题。

父元素有了高度后, 可以管理住内部所有的浮动元素, 不会延伸到后面标签中影响贴边。

<a>标签可以根据用户行为不同, 划分为四种状态, 通过<a>标签的伪类可以将四种状态选中设置为不同的样式效果, 用户触发对应行为, 就可以加载对应的样式。

一般会将访问前和访问后状态设置为一样的效果, 保证了页面的统一性, 可以选择性的设置鼠标移上和鼠标点击状态。

更加常用的一种设置方式如下:

<a>标签任何普通的选择器, 可以同时选中四种状态, 可以将四种状态设置为相同的样式, 属性可以设置所有的 <a>默认显示样式的属性, 包括盒模型、 文字等。

a:hover 伪类选择器: 设置鼠标移上时不一样的样式属性。

属性值都是使用代表方向的单词进行书写。

使用像素值作为背景定位的属性值。

百分比表示法使用百分比数字作为属性值。

100%代表的数值:

background 属性可以将五个单一属性的值进行合写。

属性值: 可以有 1-5 个属性值, 值之间用空格进行分隔, 背景定位的两个属性值算作一个属性值, 不能被分开也不能颠倒顺序。 五个属性值之间可以互换位置。

在<h1>标签是权重最高的标签, 一般会在内部书写最重要的内容, 比如 logo 图片、 最大的标题等。

另外 <h1>内部的文字, 可以帮助提高 SEO 搜索排名。

在设置的是 logo 图片时, 如果使用插入图, 就不能书写搜索关键字。

如果想解决 SEO 问题, 可以将 HTML 结构中, 插入图换成搜索关键字, 然后使用 css 添加背景图给 <a>标签或 <h1>标签。

在一个盒子中有背景图部分, 而且有文字内容, 文字会让开背景图区域进行加载,

背景区域应该使用 padding 挤出位置。

四个方向的 padding 都可能用于添加背景图。

当用户访问一个网站时, 需要向服务器发送请求, 网页上的每张图像都要经过一次求才能展现给用户。

然而, 一个网页中往往会应用很多小的背景图像作为修饰, 当网页中的图像过多时,服务器就会频繁地接受和发送请求, 这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数, 提高页面的加载速度, 出现了 CSS精灵技术(也称 CSS Sprites、 CSS 雪碧) 。

CSS 精灵是一种处理网页背景图像的方式。

它将一个页面涉及到的所有零星背景图像都集中到一张大图中去, 然后将大图应用于网页, 这样, 当用户访问该页面时, 只需向服务发送一次请求, 网页中的背景图像即可全部展示出来。

通常情况下, 这个由很多小的背景图像合成的大图被称为精灵图。

CSS3 支持背景半透明的写法, 颜色值增加了一种 rgba 模式。

rgba 模式 : 在 rgb 基础上增加了一个不透明度的设置, 不透明度 alpha 取值范围在0-1 之间, 0 表示完全透明, 1 表示完全不透明, 0.5 表示半透明。

书写方式: rgba(红色, 绿色, 蓝色, 不透明度)

注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不受影响。

通过 background-size 设置背景图片的尺寸, 就像我们设置 <img>的尺寸一样, 在移动 Web 开发中做屏幕适配应用非常广泛。

CSS3 中规定, 一个盒子上, 可以添加多个背景图片。

background-image 的属性值书写时, 以逗号分隔多背景的 URL路径地址。

注意: 背景加载时, 先写的背景压盖后写的背景图片。

属性名: position。

作用: 设置定位的元素, 它需要根据某个参考元素发生位置的偏移。

定位的元素要想发生位置的移动, 必须搭配偏移量属性进行设置。

水平方向: left、 right。

垂直方向: top、 bottom。

属性值: 常用 px 为单位的数值, 或者百分比。

子绝父相、 子绝父绝、 子绝父固

属性值: absolute, 绝对的意思。

参考元素: 参考的是距离最近的有定位的祖先元素, 如果祖先都没有定位, 参考<body>。必须搭配偏移量属性才会发生位置移动。

性质: 绝对定位的元素脱离标准流, 会让出标准流位置, 可以设置宽高, 也可以随时定义位置, 绝对定位的元素不设置宽高只能被内容撑开。

注意1: 绝对定位的参考元素是不固定的, 不同的参考元素以及不同的偏移量组合,会导致绝对定位元素的参考点不同, 具体位移效果不同。

注意2: 在绝对定位中, 由于参考点不同, left 正值不再等价于 right 的负值。

以 <body>为参考元素时, 参考点的确定与偏移量方向有关

第一, 如果有 top 参与的定位, 参考点就是 <body>页面的左上顶点和右上顶点。 自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。

第二, 如果有 bottom 参与的绝对定位, 参考点是 <body>页面首屏的左下顶点或右下顶点。 对比点是盒子的所有盒模型属性最外面的左下角或右下角。

实际应用中, 如果以 <body>为参考元素, 不同分辨率的浏览器中, 绝对定位的元素位置是不同的, 所以较少使用 <body>作为参考元素。

祖先级为参考元素

如果祖先级中有定位的元素, 就不会去参考 <body>。

参考元素: 参考的是祖先元素中有任意定位的, 在 HTML 结构中距离目标最近的祖先。

如果绝对定位的参考元素是某个祖先级, 参考点是盒子 border 以内的四个顶点, 组合方向决定了参考点。 绝对定位的元素只关心对比点和参考点之间的距离, 会忽视参考元素的 padding 区域。

所有的定位类型都可以实现压盖效果。

由于绝对定位的元素脱标, 不占标准流位置, 压盖效果更彻底, 实际工作中, 常见的是 绝对定位制作压盖。

定位的元素不区分定位类型, 都会去压盖标准流或浮动的元素。

如果都是定位的元素, 在 HTML 中 后写定位压盖先写的定位

更改定位的元素的压盖顺序, 设置一个 z-index 属性。

属性值: 数字。